Skip to content

M
mr-julyedu
Commit 0fc9a0ec by zhanghaozhe
Options

Merge branch 'master' into login-encryption

parents 16b1be75 4dd2f50f
Showing with 438 additions and 1 deletions
package.json
...@@ -71,6 +71,7 @@ ...@@ -71,6 +71,7 @@
"style-loader": "0.23.1", "style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.2", "terser-webpack-plugin": "1.2.2",
"url-loader": "1.1.2", "url-loader": "1.1.2",
"video.js": "^7.5.4",
"webpack": "4.28.3", "webpack": "4.28.3",
"webpack-dev-server": "3.1.14", "webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4", "webpack-manifest-plugin": "2.0.4",
......
src/components/video/datum-catalog/datum-catalog.scss 0 → 100644
.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 0 → 100644
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 0 → 100644
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';
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
// import 'video.scss'
class Video extends Component {
video;
state = {
title: '视频',
courseId: 140,
video_catalog: [],
datum: []
}
componentDidMount() {
window.HELP_IMPROVE_VIDEOJS = false;
videojs(this.video, {
controls: true,
autoplay: true,
preload: 'auto',
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
}, function () {
this.log.debug()
})
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">
<video className={'video-js'} ref={el => this.video = el}>
<source src='/v2/ts/40/191/175d6e5a.m3u8' type='application/x-mpegURL'/>
</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 0 → 100644
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 0 → 100644
.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 0 → 100644
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 0 → 100644
.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 0 → 100644
$tabHeight: 44px;
.play {
.video {
width: 100%;
height: 215px;
background-color: $black;
video {
width: 100%;
height: 100%;
}
}
.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' ...@@ -17,6 +17,7 @@ import Passport from '@/components/passport'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons')) const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study')) const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
const Video = loadable(() => import(/* webpackChunkName: 'video'*/'@/components/video'))
export default [ export default [
{ {
...@@ -81,4 +82,8 @@ export default [ ...@@ -81,4 +82,8 @@ export default [
path: '/passport', path: '/passport',
component: Passport component: Passport
}, },
{
path: '/play',
component: Video
},
] ]
\ No newline at end of file
src/setupProxy.js
...@@ -8,10 +8,11 @@ module.exports = function (app) { ...@@ -8,10 +8,11 @@ module.exports = function (app) {
config[item]['development'], { config[item]['development'], {
target: config[item]['test'], target: config[item]['test'],
changeOrigin: true, changeOrigin: true,
// secure: false,
pathRewrite: { pathRewrite: {
[`^${config[item]['development']}`]: '' [`^${config[item]['development']}`]: ''
}, },
...item['proxy'] ...config[item]['proxy']
} }
)) ))
}) })
......
src/utils/proxy-config.js
...@@ -11,6 +11,14 @@ const config = { ...@@ -11,6 +11,14 @@ const config = {
production: 'https://search.julyedu.com', production: 'https://search.julyedu.com',
proxy: {} proxy: {}
}, },
v2: {
development: '/v2',
test: 'https://v2.julyedu.com',
production: 'https://search.julyedu.com',
proxy: {
secure: false,
}
},
} }
module.exports = config module.exports = config
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment