Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu into detail

package.json

 {
-  "name": "my-julyedu",
+  "name": "mr-julyedu",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

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'
+import {isEmpty} from 'lodash'
 
 
 import './free-courses.scss'
@@ -25,8 +27,8 @@ class FreeCourse extends PureComponent {
     componentDidMount() {
         this.getFreeCourses()
             .then(res => {
-                if (res.data.code == 200) {
-                    const data = res.data
+                let data = res.data
+                if (data.code == 200) {
                     this.setState({
                         courses: data.data,
                     })
@@ -36,16 +38,21 @@ class FreeCourse extends PureComponent {
             })
         this.getFreeLive()
             .then(res => {
-                if (res.data.code == 200) {
+                let data = res.data
+                if (data.code == 200) {
                     this.setState({
-                        live: res.data.data
+                        live: isEmpty(data.data) ? [] : data.data
                     })
                 } else {
-                    Toast.info(res.data.msg)
+                    Toast.info(data.msg, 2, null, false)
                 }
             })
     }
 
+    handleClick = id => {
+        this.props.history.push(`/play?id=${id}`)
+    }
+
     getFreeCourses = () => {
         return http.get(`${api.home}/m/free_course/${this.state.page}/${this.state.num}`)
     }
@@ -58,19 +65,6 @@ class FreeCourse extends PureComponent {
         return (
             <ul className='free-courses'>
                 {
-                    this.state.courses.map((item, index) => (
-                        <Course
-                            img={item.logo}
-                            title={item['video_course_name']}
-                            bottom={
-                                <Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
-                            }
-                            id={item['v_course_id']}
-                            key={index}
-                        />
-                    ))
-                }
-                {
                     this.state.live.map((item, index) => {
                         const Bottom = (
                             <div className="bottom">
@@ -79,12 +73,12 @@ class FreeCourse extends PureComponent {
                                         return <i key={index} className={classnames('column', `column-${index + 1}`)}/>
                                     })}
                                 </div>
-                                <div className="time">{`直播：${item['live_start_time']}`}</div>
+                                <div className="time">{`${item['live_start_time']}`}</div>
                             </div>
                         )
                         return (
                             <Course
-                                img={item['live_img']}
+                                img={item['live_cover']}
                                 title={item['live_title']}
                                 top={
                                     <Tag className={'tag-starting top'}>即将开始</Tag>
@@ -92,10 +86,26 @@ class FreeCourse extends PureComponent {
                                 bottom={Bottom}
                                 key={item['live_id']}
                                 className={'live'}
+                                handleClick={this.handleClick}
+                                id={index}
                             />
                         )
                     })
                 }
+                {
+                    this.state.courses.map((item, index) => (
+                        <Course
+                            img={item.logo}
+                            title={item['video_course_name']}
+                            handleClick={this.handleClick}
+                            bottom={
+                                <Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
+                            }
+                            id={item['v_course_id']}
+                            key={index}
+                        />
+                    ))
+                }
             </ul>
         )
     }

src/components/study/index.js

@@ -7,6 +7,7 @@ import FreeCourses from './freeCourses'
 import WithTab from '@/HOCs/WithTab'
 import WithFullSize from '@/HOCs/WithFullSize'
 import { compose } from 'redux'
+import PrivateRoute from '@/router/privateRoute'
 
 
 class Study extends Component {
@@ -45,11 +46,11 @@ class Study extends Component {
                     <Switch>
                         <Redirect exact from='/study' to='study/my-course'/>
                         <Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
+                        {/*<PrivateRoute path={`${this.props.match.path}/my-course`} component={MyCourses}/>*/}
                         <Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>
                         {/*<Route path={`${this.props.match.path}/my-course`} render={props => {
                             <MyCourses storeScrollPosition={this.storeScrollPosition}/>
                         }}/>*/}
-                        <Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>
                     </Switch>
                 </div>
             </section>

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

@@ -22,7 +22,7 @@ class Video extends Component {
 
 
     state = {
-        title: '视频',
+        title: '',
         courseId: null,
         video_catalog: [],
         datum: [],
@@ -30,7 +30,8 @@ class Video extends Component {
         activeIndex: 0,
         isAuth: true,
         course: null,
-        salePrice: null
+        salePrice: null,
+        vCourseId: null
     }
 
 
@@ -87,7 +88,9 @@ class Video extends Component {
                             video_catalog: data.data['lessons'],
                             currentVideoSrc: data.data['lessons'][state.activeIndex]['play_url'],
                             course: data.data.course,
-                            courseId: data.data.course['course_id']
+                            courseId: data.data.course['course_id'],
+                            vCourseId: data.data.course['v_course_id'],
+                            title: data.data.course['course_title']
                         }),
                         () => {
                             if (this.lessonAvailable()) {
@@ -197,11 +200,11 @@ 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'>
-                <HeaderBar title={this.state.title}/>
+                <HeaderBar title={this.state.title} arrow={true}/>
                 <div className="video">
                     <video className={'video-js'} ref={el => this.video = el}>
                         <source src={'/'} type='application/x-mpegURL'/>
@@ -235,7 +238,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}
@@ -248,7 +254,7 @@ class Video extends Component {
                     }}/>
                 </Switch>
                 <Route render={props => {
-                    return this.state.courseId ? <Recommendation {...props} courseId={this.state.courseId}/>
+                    return this.state.vCourseId ? <Recommendation {...props} vCourseId={this.state.vCourseId}/>
                         : null
                 }}/>
             </div>

src/components/video/recommendation/index.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import './recommendation.scss'
 import { http, api } from '@/utils'
 import { Toast } from "antd-mobile";
-import {VList} from '@/common';
+import VList from '@/common/v-list-base';
 
 
 
@@ -26,7 +26,11 @@ class Recommendation extends PureComponent {
 
 
     componentDidMount() {
-        http.get(`${api.home}/m/play/recommend_course/${this.props.courseId}?num=${this.state.num}`)
+        this.getRecommendation()
+    }
+
+    getRecommendation = () => {
+        http.get(`${api.home}/m/play/recommend_course/${this.props.vCourseId}?num=${this.state.num}`)
             .then(res => {
                 const data = res.data
                 if(data.code === 200){
@@ -43,7 +47,7 @@ class Recommendation extends PureComponent {
 
 
     handleClick = id => {
-        console.log(id)
+        this.props.history.push(`/detail?id=${id}`)
     }
 
     render() {

src/router/loading.js

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { withRouter } from "react-router-dom";
 import { compose } from "redux";
 import { connect } from "react-redux";
+import LoadingComponent from '@/common/Loading'
 
 
 function Loading(props) {
 
+    const [isLoading, setLoadingState] = useState(true)
+
     useEffect(() => {
         let {user, location, history} = props
         if (!user.isFetching) {
             if (user.hasError) {
                 history.push('/passport', {from: location})
+                setLoadingState(false)
             } else {
                 if (Object.values(user.data).every(item => !!item).length !== 0) {
                     history.push(location.pathname)
+                    setLoadingState(false)
                 }
             }
         }
     })
 
     return (
-        <div className={'loading'}>
-            loading...
+        <div className={'loading-route'}>
+            <LoadingComponent isLoading={isLoading}/>
         </div>
     );
 }

src/router/router-config.js

@@ -19,7 +19,6 @@ import Passport from '@/components/passport';
 import { Scholarship } from '@/components/scholarship/index';
 import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
 import PayOrder from '@/components/order/payOrder/PayOrder'
-import Loading from '@/common/Loading'
 
 const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
 const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
@@ -138,9 +137,4 @@ export default [
         component: ToGroup,
         isPrivate: true
     },
-    {
-        path: '/loading',
-        component: Loading,
-    },
-
 ]
\ No newline at end of file