学习页面跳视频播放页面

scripts/start.js

@@ -41,7 +41,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 80;
 const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {

src/common/course-base/course-base.scss

+.course-base-item {
+  width: 47.8%;
+  margin-top: 15px;
+  margin-bottom: 5px;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 119px;
+    min-height: 119px;
+  }
+
+  .course-title {
+    font-size: 14px;
+    color: $color_333;
+    line-height: 19px;
+    margin-top: 9px;
+  }
+}

src/common/course-base/index.js

+import React from 'react'
+import './course-base.scss'
+
+const Course = (props) => {
+    return (
+        <li className={`course-base-item ${props.className}`} onClick={props.handleClick.bind(this, props.id)}>
+            {props.top}
+                <img src={props.img} alt=""/>
+                <p className="course-title">{props.title}</p>
+            {props.bottom}
+        </li>
+    );
+};
+
+export default Course;
+

src/common/v-list-base/index.js

+import React from 'react';
+import './index.scss'
+
+const VList = (props) => {
+    return (
+        <li className='v-list-base-item' onClick={props.handleClick.bind(this, props.id)}>
+            <div className="content">
+                <div className="cover">
+                    {props.status}
+                    <img src={props.img} alt=""/>
+                </div>
+                {props.info}
+            </div>
+            {props.tab}
+        </li>
+    );
+};
+
+export default VList;
\ No newline at end of file

src/common/v-list-base/index.scss

+.v-list-base-item {
+    height: 127px;
+    padding: 10px 10px 0;
+
+    .content {
+        display: flex;
+        height: 100%;
+        padding-bottom: 10px;
+        border-bottom: 1px solid $sp_e7eaf1;
+
+        .cover {
+            flex: 0 0 auto;
+            margin-right: 16px;
+            position: relative;
+            img {
+                width: 150px;
+                height: 108px;
+                border-radius: 3px;
+            }
+        }
+        .course-status {
+            width: 100%;
+            height: 24px;
+            position: absolute;
+            bottom: -1px;
+            border-radius: 0 0 3px 3px;
+            text-align: center;
+            line-height: 24px;
+            color: $white;
+            font-size: 13px;
+        }
+
+    }
+}
+

src/components/study/freeCourses/index.js

 import React, { PureComponent } from 'react'
-import { Course, Tag } from '../../../common'
+import { Tag } from '../../../common'
+import Course from '@/common/course-base'
 import { http, api } from '@/utils'
 import { Toast } from "antd-mobile";
 import classnames from 'classnames'
@@ -47,6 +48,10 @@ class FreeCourse extends PureComponent {
             })
     }
 
+    handleClick = id => {
+        this.props.history.push(`/play?id=${id}`)
+    }
+
     getFreeCourses = () => {
         return http.get(`${api.home}/m/free_course/${this.state.page}/${this.state.num}`)
     }
@@ -80,6 +85,8 @@ class FreeCourse extends PureComponent {
                                 bottom={Bottom}
                                 key={item['live_id']}
                                 className={'live'}
+                                handleClick={this.handleClick}
+                                id={index}
                             />
                         )
                     })
@@ -89,6 +96,7 @@ class FreeCourse extends PureComponent {
                         <Course
                             img={item.logo}
                             title={item['video_course_name']}
+                            handleClick={this.handleClick}
                             bottom={
                                 <Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
                             }

src/components/study/myCourses/index.js

 import React, { PureComponent } from "react"
-import { VList } from '@/common'
+import VList from '@/common/v-list-base'
 import './my-courses.scss'
 import { isToday, format } from "date-fns"
 import { connect } from "react-redux"
@@ -72,10 +72,10 @@ class MyCourses extends PureComponent {
     list;
 
     handleClick = id => {
-        this.props.history.push(`/detail?id=${id}`)
+        this.props.history.push(`/play/video?id=${id}`)
     }
     addCourseClick = () => {
-        console.log(2);
+        this.props.history.push('/classify')
     }
 
     componentDidMount() {

src/components/video/index.js

@@ -197,7 +197,7 @@ class Video extends Component {
 
 
     render() {
-        let {match} = this.props
+        let {match, location} = this.props
         const {video_catalog, activeIndex, isAuth, salePrice} = this.state
         return (
             <div className='play'>
@@ -235,7 +235,10 @@ class Video extends Component {
                     </div>
                 </div>
                 <Switch>
-                    <Redirect exact from={'/play'} to={'/play/video'}/>
+                    <Redirect exact from={'/play'} to={{
+                        pathname: '/play/video',
+                        search: location.search
+                    }}/>
                     <Route path={`${match.path}/video`} render={props => {
                         return <VideoCatalog
                             activeIndex={this.state.activeIndex}

src/components/video/recommendation/index.js

@@ -26,6 +26,14 @@ class Recommendation extends PureComponent {
 
 
     componentDidMount() {
+        this.getRecommendation()
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        console.log(prevProps, this.props);
+    }
+
+    getRecommendation = () => {
         http.get(`${api.home}/m/play/recommend_course/${this.props.courseId}?num=${this.state.num}`)
             .then(res => {
                 const data = res.data