Skip to content

M
mr-julyedu
Commit aa3624c9 by xuzhenghua
Options

test

parent f81ee884
Showing with 293 additions and 271 deletions
src/components/detail/outline/index.js
...@@ -105,18 +105,19 @@ class OutLine extends Component { ...@@ -105,18 +105,19 @@ class OutLine extends Component {
{ {
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程 // 已购买直播结束已上传视频：正常播放按钮，点击播放课程
!introduce.is_aist && item.class_status === 2 && !introduce.is_aist && item.class_status === 2 &&
<i className='iconfont icondanseshixintubiao-23 icon-right-22'></i> <Link to={`/play?id=${introduce.v_course_id}`} className='iconfont icondanseshixintubiao-23 icon-right-22'></Link>
} }
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && item.is_open && introduce.is_aist && item.is_open && introduce.is_baoming === 1 &&
<i className='aist aist_open'></i> <Link to={`/play?id=${introduce.v_course_id}`} className='aist aist_open'></Link>
} }
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && !item.is_open && introduce.is_aist && (!item.is_open || introduce.is_baoming === 0) &&
<i className='aist aist_close'></i> <i className='aist aist_close'></i>
} }
</h2> </h2>
...@@ -145,20 +146,20 @@ class OutLine extends Component { ...@@ -145,20 +146,20 @@ class OutLine extends Component {
{ {
<> <>
{ {
introduce.is_aist && item.practice.title !== "" && !item.is_open && introduce.is_aist && item.practice.title !== "" && (!item.is_open || introduce.is_baoming === 0) &&
<span className='camp camp_test' key={index}> <span className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span> <span>课后练习：{item.practice.title}</span>
<i className='exam exam_close' /> <i className='exam exam_close' />
</span> </span>
} }
{ {
introduce.is_aist && item.practice.title !== "" && item.is_open && !item.practice.is_tested && introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && !item.practice.is_tested &&
<Link to={`/campTest?keshi_id=${item.video_id}&qid=${item.practice.qid}`} className='camp camp_test' key={index}> <Link to={`/campTest?keshi_id=${item.video_id}&qid=${item.practice.qid}`} className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span> <span>课后练习：{item.practice.title}</span>
</Link> </Link>
} }
{ {
introduce.is_aist && item.practice.title !== "" && item.is_open && item.practice.is_tested && introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && item.practice.is_tested &&
<Link to={`/campResolve?keshi_id=${item.video_id}&qid=${item.practice.qid}`} className='camp camp_test' key={index}> <Link to={`/campResolve?keshi_id=${item.video_id}&qid=${item.practice.qid}`} className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span> <span>课后练习：{item.practice.title}</span>
<i className='exam exam_open' /> <i className='exam exam_open' />
......
src/components/order/index.js
...@@ -98,7 +98,7 @@ class Order extends Component { ...@@ -98,7 +98,7 @@ class Order extends Component {
Toast.info('请完善报名信息！'); Toast.info('请完善报名信息！');
} }
if(this.props.location.state && this.props.location.state.group === 1) { if(this.props.location.state && this.props.location.state.group === 1) {
http.post(`${API['base-api']}/pdd/m`, {course_id: getParam("id")}).then(res => { http.post(`${API['base-api']}/pdd/m`, {course_id: getParam("id"),ischeck:this.state.useBalance}).then(res => {
if(res.data.errno === 200) { if(res.data.errno === 200) {
sessionStorage.removeItem('orderUseCacheObj'); sessionStorage.removeItem('orderUseCacheObj');
if (res.data.data.is_free === 1) { if (res.data.data.is_free === 1) {
...@@ -404,7 +404,7 @@ class Order extends Component { ...@@ -404,7 +404,7 @@ class Order extends Component {
{ {
useBalance ? ( useBalance ? (
<> <>
<span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span> <span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-¥${offset}`}</span>
<i className={`iconfont icondanseshixintubiao-5 balance-used`} onClick={throttle(this.useBalance, 600)}></i> <i className={`iconfont icondanseshixintubiao-5 balance-used`} onClick={throttle(this.useBalance, 600)}></i>
</> </>
) : ( ) : (
......
src/components/order/payOrder/PayOrder.js
...@@ -167,9 +167,9 @@ export default class PayOrder extends Component { ...@@ -167,9 +167,9 @@ export default class PayOrder extends Component {
} }
componentDidMount() { componentDidMount() {
http.post(`${API.home}/m/order/detail`, { order_id: this.state.orderId }).then((res) => { http.post(`${API['base-api']}/m/order/detail`, { order_id: this.state.orderId }).then((res) => {
console.log(res); console.log(res);
if (res.data.code !== 200) { if (res.data.errno !== 200) {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
return; return;
} }
......
src/components/video/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import HeaderBar from '@/common/HeaderBar' import HeaderBar from '@/common/HeaderBar'
import './video.scss' import './video.scss'
import { NavLink, Route, Redirect, Switch } from 'react-router-dom' import {NavLink, Route, Redirect, Switch} from 'react-router-dom'
import { http, api, getParam } from '@/utils' import {http, api, getParam} from '@/utils'
import Recommendation from './recommendation' import Recommendation from './recommendation'
import VideoCatalog from './video-catalog' import VideoCatalog from './video-catalog'
import DatumCatalog from './datum-catalog' import DatumCatalog from './datum-catalog'
import { Toast } from 'antd-mobile' import {Toast} from 'antd-mobile'
import videojs from 'video.js' import videojs from 'video.js'
import 'video.js/dist/video-js.min.css' import 'video.js/dist/video-js.min.css'
import { Modal } from "antd-mobile" import {Modal} from "antd-mobile"
import { Loading } from '@/common' import {Loading} from '@/common'
import { connect } from "react-redux" import {connect} from "react-redux"
import jsCookie from 'js-cookie' import jsCookie from 'js-cookie'
import io from 'socket.io-client' import io from 'socket.io-client'
import Single from "@/components/detail/single"; import Single from "@/components/detail/single";
...@@ -106,7 +106,7 @@ class Video extends Component { ...@@ -106,7 +106,7 @@ class Video extends Component {
} }
// 直接购买 // 直接购买
tobuy=()=>{ tobuy = () => {
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => { http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
if (res.data.errno === 0) { if (res.data.errno === 0) {
this.props.history.push(`/order?id=${getParam('id')}`, {simple: 1}) this.props.history.push(`/order?id=${getParam('id')}`, {simple: 1})
...@@ -131,7 +131,7 @@ class Video extends Component { ...@@ -131,7 +131,7 @@ class Video extends Component {
setupRecord = () => { setupRecord = () => {
this.recordSocket = io(API.record,{ this.recordSocket = io(API.record, {
transports: ['websocket'] transports: ['websocket']
}) })
this.recordSocket.on('seek', time => { this.recordSocket.on('seek', time => {
...@@ -295,29 +295,25 @@ class Video extends Component { ...@@ -295,29 +295,25 @@ class Video extends Component {
} }
selectVideo = index => { selectVideo = index => {
if (this.hasAuth()) {
if (index === this.state.activeIndex) { if (index === this.state.activeIndex) {
return return
} }
this.setState({
activeIndex: index
}, this.setState({
() => { activeIndex: index
},
() => {
if(this.hasAuth()){
this.setPlayerSrc(this.state.videoList[index]['play_url']) this.setPlayerSrc(this.state.videoList[index]['play_url'])
this.sendLastRecord() this.sendLastRecord()
this.playVideo() this.playVideo()
} }
)
clearInterval(this.timer)
if (this.ws) {
this.countSchedule()
this.setupTimer()
}
}
this.setState({ }
activeIndex: index )
})
} }
...@@ -343,7 +339,7 @@ class Video extends Component { ...@@ -343,7 +339,7 @@ class Video extends Component {
this.setupTimer() this.setupTimer()
} }
if (this.lessonAvailable()) { if (this.lessonAvailable()) {
if (this.hasAuth(this.state.activeIndex)) { if (this.hasAuth()) {
Promise.resolve().then(() => { Promise.resolve().then(() => {
let {videoList, course} = this.state let {videoList, course} = this.state
...@@ -375,6 +371,9 @@ class Video extends Component { ...@@ -375,6 +371,9 @@ class Video extends Component {
} }
setPlayerSrc = src => { setPlayerSrc = src => {
if(!this.player){
this.initializePlayer()
}
this.player.src({ this.player.src({
src, src,
type: 'application/x-mpegURL' type: 'application/x-mpegURL'
...@@ -430,36 +429,25 @@ class Video extends Component { ...@@ -430,36 +429,25 @@ class Video extends Component {
hasAuth = () => { hasAuth = () => {
const {course, videoList, activeIndex} = this.state const {course, videoList, activeIndex} = this.state
let lesson = videoList[activeIndex] let lesson = videoList[activeIndex]
if (!lesson['is_free']) {
if (course['is_audition']) { if (lesson['video_auth']) {
this.setState({ this.setState({
isAuth: true isAuth: true
}) })
return true return true
} else { } else {
if (lesson['video_auth']) { this.setState({
this.setState({ isAuth: false
isAuth: true })
}) return false
return true
}
this.setState({
isAuth: false
})
return false
}
} }
this.setState({
isAuth: true
})
return true
} }
render() { render() {
let {match, location} = this.props let {match, location} = this.props
const {videoList, activeIndex, isAuth, salePrice} = this.state const {videoList, activeIndex, isAuth, salePrice, course} = this.state
return ( return (
<div className='play'> <div className='play'>
<HeaderBar title={this.state.title} arrow={true}/> <HeaderBar title={this.state.title} arrow={true}/>
...@@ -469,21 +457,31 @@ class Video extends Component { ...@@ -469,21 +457,31 @@ class Video extends Component {
<source src={'/'} type='application/x-mpegURL'/> <source src={'/'} type='application/x-mpegURL'/>
</video> </video>
{ {
!isAuth && ( !isAuth && !!videoList[activeIndex]['is_class'] && (
<div className="purchase-box"> <div className="purchase-box">
<div className='hint'>您尚未购买该课时，请购买后学习。</div> <div className='hint'>您尚未购买该课时，请购买后学习。</div>
<div className='btns'> <div className='btns'>
<button type='button' <button type='button'
onClick={this.tobuy} onClick={this.tobuy}
className='purchase-class'>¥{salePrice} 购买课程</button> className='purchase-class'>¥{salePrice} 购买课程
</button>
<button type='button' <button type='button'
onClick={this.toSingleset.bind(this,videoList[activeIndex])} onClick={this.toSingleset.bind(this, videoList[activeIndex])}
className='purchase-episode'>¥{videoList.length && videoList[activeIndex]['class_price']} 购买单集 className='purchase-episode'>¥{videoList.length && videoList[activeIndex]['class_price']} 购买单集
</button> </button>
</div> </div>
</div> </div>
) )
} }
{
!isAuth && !!course.is_aist && (
<div className="is-aist-box">
<i className={'iconfont iconiconfront-21'}></i>
<p className={'time'}>{videoList[activeIndex]['aist_start_time']}</p>
<p className={'time'}>请耐心等待...</p>
</div>
)
}
</div> </div>
<div className='tab'> <div className='tab'>
<div> <div>
...@@ -501,7 +499,8 @@ class Video extends Component { ...@@ -501,7 +499,8 @@ class Video extends Component {
</div> </div>
{/*单集购买*/} {/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide} data={this.state.singMess} videoId={this.state.singMess.id} <Single singleBox={this.state.singleBox} boxHide={this.boxHide} data={this.state.singMess}
videoId={this.state.singMess.id}
title={this.state.singMess.course_tile}/> title={this.state.singMess.course_tile}/>
</Loading> </Loading>
<Switch> <Switch>
......
src/components/video/video.scss
$tabHeight: 44px; $tabHeight: 44px;
.play { .play {
.video { .video {
width: 100%; width: 100%;
height: 215px; height: 215px;
background-color: $black; background-color: $black;
position: relative; position: relative;
.video-js { .video-js {
width: 100%; width: 100%;
height: 100%; height: 100%;
.vjs-big-play-button { .vjs-big-play-button {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
.purchase-box { .purchase-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.hint { .hint {
font-size: $font_14; font-size: $font_14;
color: $white; color: $white;
margin-bottom: 20px; margin-bottom: 20px;
} }
@mixin button { @mixin button {
display: block; display: block;
-webkit-appearance: none; -webkit-appearance: none;
outline: none; outline: none;
border: none; border: none;
background-color: transparent; background-color: transparent;
border-radius: 5px; border-radius: 5px;
line-height: 30px; line-height: 30px;
font-size: 13px; font-size: 13px;
padding: 0 9px; padding: 0 9px;
} }
.btns { .btns {
width: 100%; width: 100%;
padding: 0 60px; padding: 0 60px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.purchase-class { .purchase-class {
@include button; @include button;
background-color: $white; background-color: $white;
color: $color_FF4000; color: $color_FF4000;
} }
.purchase-episode { .purchase-episode {
@include button; @include button;
background-color: $bg_FF4000; background-color: $bg_FF4000;
color: $white; color: $white;
} }
} }
video { .is-aist-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
} position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: #fff;
i {
font-size: 34px;
}
.time {
font-size: 16px;
}
} }
.tab { video {
height: $tabHeight; width: 100%;
max-height: $tabHeight; height: 100%;
line-height: $tabHeight; }
text-align: center; }
background: #F7F9FC;
flex: 1 0 auto; .tab {
display: flex; height: $tabHeight;
justify-content: center; 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;
}
& > div { a {
flex: 1 0 auto; display: inline-block;
} height: $tabHeight;
font-size: $font_16;
border-bottom: 1px solid transparent;
a { &.active {
display: inline-block; border-bottom: 1px solid $active;
height: $tabHeight; }
font-size: $font_16;
border-bottom: 1px solid transparent;
&.active{
border-bottom: 1px solid $active;
}
}
} }
}
.active { .active {
color: $active; color: $active;
.iconiconfront-74 { .iconiconfront-74 {
color: $color_555; color: $color_555;
} }
}
.progress-share-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 290px;
height: 332px;
padding: 18px 15px;
background: url("./images/progress-share-bg.png");
background-size: contain;
& > .title {
font-size: 21px;
color: #00656F;
line-height: 30px;
text-align: center;
margin-bottom: 20px;
} }
.progress-share-modal { .progress-container {
position: absolute; display: flex;
top: 50%; justify-content: space-between;
left: 50%; margin-bottom: 20px;
transform: translate(-50%, -50%);
width: 290px; li {
height: 332px; flex: 1;
padding: 18px 15px;
background: url("./images/progress-share-bg.png"); .title {
background-size: contain; font-size: 14px;
color: #00838F;
& > .title { line-height: 20px;
font-size: 21px; text-align: center;
color: #00656F; flex: 1;
line-height: 30px; margin-bottom: 10px;
text-align: center;
margin-bottom: 20px;
} }
.progress-container { .number {
display: flex; font-size: 15px;
justify-content: space-between; color: #00656F;
margin-bottom: 20px; text-align: center;
li { .num {
flex: 1; font-size: 33px;
color: #00656F;
.title { }
font-size: 14px;
color: #00838F;
line-height: 20px;
text-align: center;
flex: 1;
margin-bottom: 10px;
}
.number {
font-size: 15px;
color: #00656F;
text-align: center;
.num {
font-size: 33px;
color: #00656F;
}
}
}
} }
}
}
.share-container { .share-container {
.title { .title {
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #00838F; color: #00838F;
margin-bottom: 25px; margin-bottom: 25px;
&::before { &::before {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 30px; left: 30px;
transform: translateY(-50%); transform: translateY(-50%);
content: ''; content: '';
display: block; display: block;
width: 70px; width: 70px;
height: 1px; height: 1px;
background: #77c4bf; background: #77c4bf;
}
&::after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
content: '';
display: block;
width: 70px;
height: 1px;
background: #77c4bf;
}
}
ul {
display: flex;
justify-content: space-around;
padding: 0 20px;
text-align: center;
li {
font-size: 12px;
color: #00838F;
.iconfont {
font-size: 40px;
color: #00838f;
}
}
}
} }
.close { &::after {
position: absolute; position: absolute;
left: 50%; top: 50%;
transform: translateX(-50%); right: 30px;
bottom: -63px; transform: translateY(-50%);
color: #fff; content: '';
font-size: 30px; display: block;
width: 70px;
height: 1px;
background: #77c4bf;
} }
}
&-wrapper { ul {
position: fixed; display: flex;
top: 0; justify-content: space-around;
left: 0; padding: 0 20px;
width: 100%; text-align: center;
height: 100%;
background: rgba(0, 0, 0, 0.5);
touch-action: none;
z-index: 100;
li {
font-size: 12px;
color: #00838F;
.iconfont {
font-size: 40px;
color: #00838f;
}
} }
}
}
.close {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -63px;
color: #fff;
font-size: 30px;
}
&-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
touch-action: none;
z-index: 100;
} }
} }
\ 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