视频页面点击返回

src/App.js

@@ -82,8 +82,8 @@ class App extends Component {
         location.state = {
             ...state, ...{
                 record: _state.record ?
-                    [..._state.record, {pathname: location.pathname}] :
-                    [{pathname: location.pathname}]
+                    [..._state.record, {pathname: location.pathname, search: location.search, hash: location.hash}] :
+                    [{pathname: location.pathname, search: '', hash: ''}]
             }
         }
     }

src/components/video/index.js

 import React, { Component } from 'react'
 import HeaderBar from '@/common/HeaderBar'
 import './video.scss'
-import {NavLink, Route, Redirect, Switch, Link} from 'react-router-dom'
-import {http, getParam, browser} from '@/utils'
+import { NavLink, Route, Redirect, Switch, Link } from 'react-router-dom'
+import { http, getParam, browser } from '@/utils'
 import Recommendation from './recommendation'
 import VideoCatalog from './video-catalog'
 import DatumCatalog from './datum-catalog'
@@ -103,9 +103,8 @@ class Video extends Component {
 
 
     componentDidMount() {
-        const location = window.location;
-        if (location.protocol === 'https:') {
-            location.replace('http' + location.href.slice(5))
+        if (window.location.protocol === 'https:') {
+            window.location.replace('http' + window.location.href.slice(5))
             return
         }
 
@@ -117,8 +116,8 @@ class Video extends Component {
         this.setState({
             courseId: this.courseID
         })
-        const { location: { state = {} } } = this.props;
-        if(state.oid) {
+        const {location, location: {state = {}}} = this.props;
+        if (state.oid) {
             this.check(state.oid);
         }
         if (getParam('is_class') === 1 || getParam('weixinpay')) {
@@ -136,7 +135,7 @@ class Video extends Component {
     // 直接购买
     tobuy = () => {
         // 详情页单集购买到该页面，url中的id不是课程id
-        const { course={} } = this.state;
+        const {course = {}} = this.state;
         http.get(`${API['base-api']}/m/cart/addtopreorder/[${course.course_id}]`).then((res) => {
             if (res.data.errno === 0) {
                 this.props.history.push(`/order?id=${course.course_id}`, {simple: 1})
@@ -162,11 +161,11 @@ class Video extends Component {
     }
 
     // 单集购买 H5支付成功后回调
-    payCallback =() => {
+    payCallback = () => {
         const _this = this;
-        if(!getParam('oid')) {
+        if (!getParam('oid')) {
             return;
-        }else{
+        } else {
             this.setState({
                 singMess: JSON.parse(window.localStorage.getItem('singMess'))
             })
@@ -209,7 +208,7 @@ class Video extends Component {
         }
     };
     // 单集购买 微信内支付成功后回调
-    isweixinPay =()=> {
+    isweixinPay = () => {
         let _this = this;
         let weixin_code = getParam('code');
         if (weixin_code) {
@@ -223,6 +222,7 @@ class Video extends Component {
                 http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
                     if (res.data.errno === 0) {
                         const data = res.data.data;
+
                         function onBridgeReady() {
                             WeixinJSBridge.invoke(
                                 'getBrandWCPayRequest', {
@@ -278,6 +278,7 @@ class Video extends Component {
                                 }
                             )
                         }
+
                         if (typeof WeixinJSBridge == "undefined") {
                             if (document.addEventListener) {
                                 document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
@@ -386,7 +387,7 @@ class Video extends Component {
     }
 
     sendMessage = message => {
-        this.ws && this.ws.send(JSON.stringify(message))
+        this.ws && this.ws.readyState === 1 && this.ws.send(JSON.stringify(message))
     }
 
     //视频结束请求接口
@@ -402,12 +403,12 @@ class Video extends Component {
 
     //告诉服务端计算进度 普通课程不发送
     countSchedule = () => {
-        const {videoList, activeIndex, vCourseId, course={}} = this.state
-        if(Number(course.course_id) === 0 || course.course_id === '') {
+        const {videoList, activeIndex, vCourseId, course = {}} = this.state
+        if (Number(course.course_id) === 0 || course.course_id === '') {
             console.log('免费课程 拦截');
             return;
         }
-        if(course.is_aist) {
+        if (course.is_aist) {
             // 返现课程
             this.sendMessage({
                 mtype: 'count_schedule',
@@ -415,7 +416,7 @@ class Video extends Component {
                 token: this.token,
                 platform: 5
             })
-        }else{
+        } else {
             // 普通课程
             this.sendMessage({
                 mtype: 'c_count_schedule',
@@ -433,16 +434,16 @@ class Video extends Component {
     sendWatchTime = (sec, rate) => {
         const {videoList, activeIndex, vCourseId, course = {}} = this.state
         // 免费课程不发送
-        if(Number(course.course_id) === 0 || course.course_id === '') {
+        if (Number(course.course_id) === 0 || course.course_id === '') {
             console.log('免费课程 拦截');
             return;
         }
         // 时间为0 不发送消息
-        if(Number(sec) === 0) {
+        if (Number(sec) === 0) {
             return;
         }
         let info_type = 'c_watch_time';
-        if(course.is_aist) {
+        if (course.is_aist) {
             info_type = 'watch_time';
         }
         this.sendMessage({
@@ -546,7 +547,7 @@ class Video extends Component {
                     this.setPlayerSrc(this.state.videoList[index]['play_url'])
                     this.sendLastRecord()
                     this.playVideo()
-                }else {
+                } else {
                     this.getCoursePrice();
                 }
             }
@@ -565,17 +566,17 @@ class Video extends Component {
             url = `${API.home}/m/course/play/${this.courseID}`
         }
         http.get(url).then(res => {
-            const { data={}, code } = res.data;
-            if (code === 200) {
-                this.setState(
-                    state => ({
-                        videoList: data['lessons'],
-                        currentVideoSrc: data['lessons'][state.activeIndex]['play_url'],
-                        course: data.course,
-                        courseId: data.course['course_id'],
-                        vCourseId: data.course['v_course_id'],
-                        title: data.course['course_title'],
-                        isLoading: false
+                const {data = {}, code} = res.data;
+                if (code === 200) {
+                    this.setState(
+                        state => ({
+                            videoList: data['lessons'],
+                            currentVideoSrc: data['lessons'][state.activeIndex]['play_url'],
+                            course: data.course,
+                            courseId: data.course['course_id'],
+                            vCourseId: data.course['v_course_id'],
+                            title: data.course['course_title'],
+                            isLoading: false
                         }),
                         this.playSetup
                     )
@@ -588,10 +589,10 @@ class Video extends Component {
 
     playSetup = () => {
         // is_aist,是否AI特训营
-        const { course={} } = this.state;
+        const {course = {}} = this.state;
         if (Number(course.course_id) === 0 || course.course_id === '') {
             console.log('免费课程 拦截');
-        }else{
+        } else {
             this.setupWS();
             this.setupTimer();
             this.countSchedule();
@@ -601,7 +602,7 @@ class Video extends Component {
         this.setState(
             {
                 activeIndex: index
-            }, 
+            },
             () => {
                 if (this.lessonAvailable(index)) {
                     if (this.hasAuth(index)) {
@@ -661,7 +662,7 @@ class Video extends Component {
     }
 
     getCoursePrice = () => {
-        const { course = {} } = this.state;
+        const {course = {}} = this.state;
         http.get(`${API.home}/sys/course/price/${course.course_id}`)
             .then(res => {
                 const {data} = res
@@ -705,19 +706,19 @@ class Video extends Component {
         let {match, location, history} = this.props
         const {videoList, activeIndex, isAuth, salePrice, course, singleBox, singleType} = this.state;
         let toHref = '';
-        if(location.state && location.state.to && location.state.to === 'detail') {
-            toHref=`/detail?id=${course.course_id}`
+        if (location.state && location.state.to && location.state.to === 'detail') {
+            toHref = `/detail?id=${course.course_id}`
         }
         return (
             <div className='play'>
-                <HeaderBar title={this.state.title} arrow={true} toHref={()=>{
-                    history.push(
+                <HeaderBar title={this.state.title} arrow={true} toHref={() => {
+                    toHref ? history.push(
                         toHref,
                         {
                             to: 'classify'
                         }
-                    )
-                }} />
+                    ) : history.go(-1)
+                }}/>
                 <Loading isLoading={this.state.isLoading}>
                     <div className="video">
                         <video className={'video-js'} ref={el => this.video = el}>
@@ -728,14 +729,14 @@ class Video extends Component {
                                 <div className="purchase-box">
                                     <div className='hint'>您尚未购买该课时，请购买后学习。</div>
                                     <div className='btns'>
-                                        <button 
+                                        <button
                                             type='button'
                                             onClick={this.tobuy}
                                             className='purchase-class'
                                         >
                                             ¥{salePrice} 购买课程
                                         </button>
-                                        <button 
+                                        <button
                                             type='button'
                                             onClick={this.toSingleset.bind(this, videoList[activeIndex])}
                                             className='purchase-episode'
@@ -774,16 +775,16 @@ class Video extends Component {
                     {/*单集购买*/}
                     {
                         singleBox &&
-                        <Single 
-                        courseId={course.course_id}
-                        singleBox={this.state.singleBox} 
-                        boxHide={this.boxHide} 
-                        data={this.state.singMess}
-                                singleType={this.state.singleType}
-                                vcourseId={course.v_course_id}
-                                videoId={this.state.singMess.video_id}
-                                check={this.check}
-                                title={this.state.singMess.course_tile}/>
+                        <Single
+                            courseId={course.course_id}
+                            singleBox={this.state.singleBox}
+                            boxHide={this.boxHide}
+                            data={this.state.singMess}
+                            singleType={this.state.singleType}
+                            vcourseId={course.v_course_id}
+                            videoId={this.state.singMess.video_id}
+                            check={this.check}
+                            title={this.state.singMess.course_tile}/>
                     }
                     {/* 单集购买成功 */}
                     {
@@ -806,8 +807,8 @@ class Video extends Component {
                         pathname: '/play/video',
                         search: location.search
                     }}/>
-                    <Route 
-                        path={`${match.path}/video`} 
+                    <Route
+                        path={`${match.path}/video`}
                         render={props => {
                             return (
                                 <VideoCatalog