视频播放页静态页面

src/components/video/datum-catalog/datum-catalog.scss

+.datum-catalog {
+    .prompt {
+        height: 30px;
+        line-height: 30px;
+        font-size: $font_12;
+        color: $color_333;
+        background-color: #FFF4CE;
+        text-align: center;
+    }
+
+    .file-name {
+        padding: 15px;
+        padding-bottom: 0;
+    }
+
+    & .file-name:last-of-type {
+        padding-bottom: 15px;
+    }
+}
\ No newline at end of file

src/components/video/datum-catalog/index.js

+import React, { Component } from 'react';
+import './datum-catalog.scss'
+import { Accordion } from "antd-mobile";
+
+
+class DatumCatalog extends Component {
+
+    static defaultProps = {
+        datum: [{
+            dir_name: '',
+            files: [{
+                file_name: '',
+                file_id: 0
+            }]
+        }]
+    }
+
+    render() {
+        return (
+            <div className='datum-catalog'>
+                <p className='prompt'>课程资料请到PC端播放页下载</p>
+                <Accordion>
+                    {
+                        this.props.datum.map((item, index) => {
+                            return (
+                                <Accordion.Panel header={item.dir_name} key={index}>
+                                    {
+                                        item.files.map(item => {
+                                            return (
+                                                <div key={item.file_id} className='file-name'>
+                                                    {item.file_name}
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </Accordion.Panel>
+                            )
+                        })
+                    }
+                </Accordion>
+            </div>
+        );
+    }
+}
+
+export default DatumCatalog;
\ No newline at end of file

src/components/video/index.js

+import React, { Component } from 'react';
+import HeaderBar from '@/common/HeaderBar'
+import './video.scss'
+import { NavLink, Route } from 'react-router-dom';
+import { http, api } from '@/utils'
+import Recommendation from './recommendation'
+import VideoCatalog from './video-catalog'
+import DatumCatalog from './datum-catalog'
+import { Toast } from 'antd-mobile';
+
+
+class Video extends Component {
+
+    state = {
+        title: '视频',
+        courseId: 140,
+        video_catalog: [],
+        datum: []
+    }
+
+
+    componentDidMount() {
+        this.getVideoCatalog()
+        this.getDatumCatalog()
+    }
+
+
+    getVideoCatalog = () => {
+        http.get(`${api.home}/m/course/play/40`)
+            .then(res => {
+                const data = res.data
+                if (data.code === 200) {
+
+                    this.setState({
+                        video_catalog: data.data.lessons
+                    })
+
+
+                } else {
+                    Toast.info(data.msg)
+                }
+            })
+    }
+
+
+    getDatumCatalog() {
+        http.get(`${api.home}/m/course/data/40`)
+            .then(res => {
+                const data = res.data
+                if (data.code === 200) {
+
+                    this.setState({
+                        datum: data.data
+                    })
+
+                } else {
+                    Toast.info(data.msg)
+                }
+            })
+    }
+
+
+    render() {
+        let {match} = this.props
+        return (
+            <div className='play'>
+                <HeaderBar title={this.state.title}/>
+                <div className="video">
+                </div>
+                <div className='tab'>
+                    <div>
+                        <NavLink to={`${match.url}/video`}
+                                 replace
+                                 activeClassName='active'
+                        >视频</NavLink>
+                    </div>
+                    <div>
+                        <NavLink to={`${match.url}/datum`}
+                                 replace
+                                 activeClassName='active'
+                        >资料</NavLink>
+                    </div>
+                </div>
+                <Route path={`${match.path}/video`} render={props => {
+                    return <VideoCatalog videoCatalog={this.state.video_catalog} {...props}/>
+                }}/>
+                <Route path={`${match.path}/datum`} render={props => {
+                    return <DatumCatalog {...props} datum={this.state.datum}/>
+                }}/>
+                <Route render={props => {
+                    return <Recommendation {...props} courseId={this.state.courseId}/>
+                }}/>
+            </div>
+        );
+    }
+}
+
+
+export default Video;
\ No newline at end of file

src/components/video/recommendation/index.js

+import React, { Component } from 'react';
+import './recommendation.scss'
+import { http, api } from '@/utils'
+import { Toast } from "antd-mobile";
+import {VList} from '@/common';
+
+
+
+const Bottom = ({item}) => {
+    return (
+        <div className='bottom'>
+            <span className='price'>¥{item.price1}</span>
+            <span className='stale-price'>¥{item.price0}</span>
+        </div>
+    )
+}
+
+
+
+class Recommendation extends Component {
+    state = {
+        num: 10,
+        list: []
+    }
+
+    componentDidMount() {
+        http.get(`${api.home}/m/play/recommend_course/${this.props.courseId}?num=${this.state.num}`)
+            .then(res => {
+                const data = res.data
+                if(data.code === 200){
+
+                    this.setState({
+                        list: data.data
+                    })
+
+                }else {
+                    Toast.info(data.msg)
+                }
+            })
+    }
+
+    handleClick = id => {
+        console.log(id)
+    }
+
+    render() {
+        return (
+            <div className='recommendation'>
+                <div className={'title'}>相关推荐</div>
+                <ul>
+                    {
+                        this.state.list.map(item => {
+                            const Info = (
+                                <div className="info">
+                                    <p className='title'>{item.course_title}</p>
+                                    <p className='des'>{item.simpledescription}</p>
+                                    <Bottom
+                                        item={item}
+                                    />
+                                </div>
+                            )
+
+                            return (
+                                <VList
+                                    key={item.course_id}
+                                    img={item.image_name}
+                                    handleClick={this.handleClick}
+                                    info={Info}
+                                    id={item.course_id}
+                                />
+                            )
+                        })
+                    }
+                </ul>
+            </div>
+        );
+    }
+}
+
+export default Recommendation;
\ No newline at end of file

src/components/video/recommendation/recommendation.scss

+.recommendation {
+    padding-top: 20px;
+
+    & > .title {
+        font-size: $font_16;
+        padding-left: 15px;
+    }
+
+    .info {
+        display: flex;
+        flex-wrap: wrap;
+
+        .des {
+            font-size: $font_14;
+            line-height: 16px;
+            align-self: flex-start;
+
+        }
+
+        .price {
+            color: $red;
+            font-size: $font_16;
+            margin-right: 14px;
+        }
+
+        .stale-price {
+            text-decoration: line-through;
+            color: $color_999;
+            font-size: $font_12;
+        }
+
+        .bottom {
+            align-self: flex-end;
+        }
+    }
+
+}
\ No newline at end of file

src/components/video/video-catalog/index.js

+import React, { Component } from 'react';
+import './video-catalog.scss'
+import classnames from 'classnames'
+
+
+class VideoCatalog extends Component {
+
+    render() {
+        return (
+            <div className='video-catalog'>
+                <ul>
+                    {
+                        this.props.videoCatalog.map(item => {
+                            return (
+                                <li key={item.id}>
+                                    <span className="title">{item.name}</span>
+                                    <span className='duration'>{item.duration}</span>
+                                    <i className={classnames(`iconfont`,
+                                        [item.video_auth === 0
+                                            ? 'iconiconfront-74'
+                                            : 'iconiconfront-35'],
+                                    )}/>
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+            </div>
+        );
+    }
+}
+
+export default VideoCatalog;
\ No newline at end of file

src/components/video/video-catalog/video-catalog.scss

+.video-catalog {
+    li {
+        height: 44px;
+        padding: 0 15px;
+        line-height: 44px;
+        border-top: 1px solid #E7EAF1;
+        border-bottom: 1px solid #E7EAF1;
+
+        &.active {
+            background-color: #F5FBFF;
+            .title, .duration{
+                color: $active;
+            }
+        }
+    }
+
+    .title {
+        display: inline-block;
+        width: 50%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: $font_14;
+        margin-right: 26px;
+    }
+
+    .duration {
+        display: inline-block;
+        font-size: 11px;
+        overflow: hidden;
+    }
+
+    .iconfont {
+        float: right;
+    }
+
+}
\ No newline at end of file

src/components/video/video.scss

+$tabHeight: 44px;
+
+.play {
+    .video {
+        width: 100%;
+        height: 215px;
+        background-color: $black;
+    }
+
+    .tab {
+        height: $tabHeight;
+        max-height: $tabHeight;
+        line-height: $tabHeight;
+        text-align: center;
+        background: #F7F9FC;
+        flex: 1 0 auto;
+        display: flex;
+        justify-content: center;
+
+        & > div {
+            flex: 1 0 auto;
+        }
+
+        a {
+            display: inline-block;
+            height: $tabHeight;
+            font-size: $font_16;
+        }
+    }
+
+    .active {
+        color: $active;
+        border-bottom: 1px solid $active;
+    }
+
+}
\ No newline at end of file

src/router/router-config.js

@@ -17,6 +17,7 @@ import Passport from '@/components/passport'
 
 const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
 const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
+const Video = loadable(() => import(/* webpackChunkName: 'video'*/'@/components/video'))
 
 export default [
     {
@@ -81,4 +82,8 @@ export default [
         path: '/passport',
         component: Passport
     },
+    {
+        path: '/play',
+        component: Video
+    },
 ]
\ No newline at end of file