Skip to content

M
mr-julyedu
Commit 5aedbc91 by xuzhenghua
Options

test

parents a5fbd668 ce46660f
Showing with 608 additions and 468 deletions
package-lock.json
...@@ -1973,9 +1973,9 @@ ...@@ -1973,9 +1973,9 @@
} }
}, },
"antd-mobile": { "antd-mobile": {
"version": "2.2.13", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/antd-mobile/-/antd-mobile-2.2.13.tgz", "resolved": "https://registry.npmjs.org/antd-mobile/-/antd-mobile-2.3.1.tgz",
"integrity": "sha512-izBPlj5yvjPwzqvpjYYmKp9HOSoeIbqY4Z7gzFpxJXnDvaDoeY3ULr4AHQ1gdeJo6BpqjlcCHHw1IwX8DWN3JQ==", "integrity": "sha512-CBegyQuQiNxmwQH4Ck619Y9UO7EVN8FuhnUlV7kmbSSxxy+V704dSGy7uLNn7AUePRK5UZfm6ifLsZix6khZfQ==",
"requires": { "requires": {
"array-tree-filter": "~2.1.0", "array-tree-filter": "~2.1.0",
"babel-runtime": "6.x", "babel-runtime": "6.x",
...@@ -4105,9 +4105,9 @@ ...@@ -4105,9 +4105,9 @@
"integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg=" "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
}, },
"css-animation": { "css-animation": {
"version": "1.5.0", "version": "1.6.1",
"resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.5.0.tgz", "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz",
"integrity": "sha512-hWYoWiOZ7Vr20etzLh3kpWgtC454tW5vn4I6rLANDgpzNSkO7UfOqyCEeaoBSG9CYWQpRkFWTWbWW8o3uZrNLw==", "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==",
"requires": { "requires": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"component-classes": "^1.2.5" "component-classes": "^1.2.5"
...@@ -4743,9 +4743,9 @@ ...@@ -4743,9 +4743,9 @@
} }
}, },
"dom-align": { "dom-align": {
"version": "1.8.3", "version": "1.10.2",
"resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.3.tgz", "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.10.2.tgz",
"integrity": "sha512-thE1qB8mvtRZgwN4+IGFz1rv7zVsr08c2/IEYtOJIeTzW4YDadIOd5nQ4BpiiAvUWg55xTeGq7zLTDxDYWDrnw==" "integrity": "sha512-AYZUzLepy05E9bCY4ExoqHrrIlM49PEak9oF93JEFoibqKL0F7w5DLM70/rosLOawerWZ3MlepQcl+EmHskOyw=="
}, },
"dom-converter": { "dom-converter": {
"version": "0.2.0", "version": "0.2.0",
...@@ -11927,15 +11927,16 @@ ...@@ -11927,15 +11927,16 @@
} }
}, },
"rc-animate": { "rc-animate": {
"version": "2.8.3", "version": "2.10.0",
"resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.8.3.tgz", "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.10.0.tgz",
"integrity": "sha512-VPSHJF/PW9zrPVCdQ94/YOI2lFfJVlaiAeQveJN2nlPVMivgvXkuFJyfe42GbZqm+qlnRjH9B4WbY9rCZz9miw==", "integrity": "sha512-gZM3WteZO0e3X8B71KP0bs95EY2tAPRuiZyKnlhdLpOjTX/64SrhDZM3pT2Z8mJjKWNiiB5q2SSSf+BD8ljwVw==",
"requires": { "requires": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"css-animation": "^1.3.2", "css-animation": "^1.3.2",
"prop-types": "15.x", "prop-types": "15.x",
"raf": "^3.4.0", "raf": "^3.4.0",
"rc-util": "^4.8.0",
"react-lifecycles-compat": "^3.0.4" "react-lifecycles-compat": "^3.0.4"
} }
}, },
...@@ -12012,26 +12013,28 @@ ...@@ -12012,26 +12013,28 @@
} }
}, },
"rc-trigger": { "rc-trigger": {
"version": "2.6.2", "version": "2.6.5",
"resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.2.tgz", "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.5.tgz",
"integrity": "sha512-op4xCu95/gdHVaysyxxiYxbY+Z+UcIBSUY9nQfLqm1FlitdtnAN+owD5iMPfnnsRXntgcQ5+RdYKNUFQT5DjzA==", "integrity": "sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw==",
"requires": { "requires": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"prop-types": "15.x", "prop-types": "15.x",
"rc-align": "^2.4.0", "rc-align": "^2.4.0",
"rc-animate": "2.x", "rc-animate": "2.x",
"rc-util": "^4.4.0" "rc-util": "^4.4.0",
"react-lifecycles-compat": "^3.0.4"
} }
}, },
"rc-util": { "rc-util": {
"version": "4.6.0", "version": "4.11.0",
"resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.6.0.tgz", "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.11.0.tgz",
"integrity": "sha512-rbgrzm1/i8mgfwOI4t1CwWK7wGe+OwX+dNa7PVMgxZYPBADGh86eD4OcJO1UKGeajIMDUUKMluaZxvgraQIOmw==", "integrity": "sha512-nB29kXOXsSVjBkWfH+Z1GVh6tRg7XGZtZ0Yfie+OI0stCDixGQ1cPrS6iYxlg+AV2St6COCK5MFrCmpTgghh0w==",
"requires": { "requires": {
"add-dom-event-listener": "^1.1.0", "add-dom-event-listener": "^1.1.0",
"babel-runtime": "6.x", "babel-runtime": "6.x",
"prop-types": "^15.5.10", "prop-types": "^15.5.10",
"react-lifecycles-compat": "^3.0.4",
"shallowequal": "^0.2.2" "shallowequal": "^0.2.2"
} }
}, },
...@@ -12312,6 +12315,15 @@ ...@@ -12312,6 +12315,15 @@
"recompose": "0.27.1 - 0.30.0" "recompose": "0.27.1 - 0.30.0"
} }
}, },
"react-sticky": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/react-sticky/-/react-sticky-6.0.3.tgz",
"integrity": "sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==",
"requires": {
"prop-types": "^15.5.8",
"raf": "^3.3.0"
}
},
"react-tween-state": { "react-tween-state": {
"version": "0.1.5", "version": "0.1.5",
"resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz", "resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
...@@ -12769,9 +12781,9 @@ ...@@ -12769,9 +12781,9 @@
} }
}, },
"rmc-date-picker": { "rmc-date-picker": {
"version": "6.0.9", "version": "6.0.10",
"resolved": "https://registry.npmjs.org/rmc-date-picker/-/rmc-date-picker-6.0.9.tgz", "resolved": "https://registry.npmjs.org/rmc-date-picker/-/rmc-date-picker-6.0.10.tgz",
"integrity": "sha512-3XRfkTwBeDjJzQuAHq8VOKBaj8qZaqzbudg1KkvggVEdF67HAzIMEzjXrOH1MR2MmSJ7Z3NxTKJXY8P8WddYSg==", "integrity": "sha512-/9+I6lm3EDEl6M7862V6++zFuxwsM0UEq8wSHbotYIPPmyB/65gx1cviblghOv2QfB0O9+U2w3qEJlRP/WsMrA==",
"requires": { "requires": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"rmc-picker": "~5.0.0" "rmc-picker": "~5.0.0"
...@@ -12850,9 +12862,9 @@ ...@@ -12850,9 +12862,9 @@
} }
}, },
"rmc-picker": { "rmc-picker": {
"version": "5.0.9", "version": "5.0.10",
"resolved": "https://registry.npmjs.org/rmc-picker/-/rmc-picker-5.0.9.tgz", "resolved": "https://registry.npmjs.org/rmc-picker/-/rmc-picker-5.0.10.tgz",
"integrity": "sha512-loulflyMa6SCReU/LcbWxNvy46gpoW5DEZW78GqkPuAEjwQVQjKtpvq/VzBND8Yt0SBetWUTAZ3AOKTVH3qxcQ==", "integrity": "sha512-KZ70+WjcaZHnG5GyCxWCPFWAZ12s6NqyrbW73LeqH0WEqaTMMs0sOrk2f4mQAZ/CGT0XcFN6VZLw7Ozoxfn7LA==",
"requires": { "requires": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"classnames": "^2.2.6", "classnames": "^2.2.6",
......
package.json
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
"@babel/plugin-proposal-decorators": "^7.4.4", "@babel/plugin-proposal-decorators": "^7.4.4",
"@loadable/component": "^5.10.1", "@loadable/component": "^5.10.1",
"@svgr/webpack": "4.1.0", "@svgr/webpack": "4.1.0",
"antd-mobile": "^2.2.13", "antd-mobile": "^2.3.1",
"autoprefixer": "^9.6.0", "autoprefixer": "^9.6.0",
"axios": "^0.19.0", "axios": "^0.19.0",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
"react-redux": "^7.0.2", "react-redux": "^7.0.2",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.0.1",
"react-spinners": "^0.5.4", "react-spinners": "^0.5.4",
"react-sticky": "^6.0.3",
"redux": "^4.0.1", "redux": "^4.0.1",
"redux-immutable": "^4.0.0", "redux-immutable": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
......
src/common/VList/index.js
import React from 'react'; import React from 'react';
import './index.scss' import './index.scss'
import {Link} from 'react-router-dom'
const VList = (props) => { const VList = (props) => {
return ( return (
<li className='v-list-item'> <li className='v-list-item' onClick={() => props.toDetail(props.id)}>
<div className="content"> <div className="content">
<div className="cover"> <div className="cover">
{props.status} {props.status}
{/* <Link to={`/detail?id=${props.id}`}> */} {props.toDetail
{props.toDetail ? (<img src={props.img} alt=""/>)
?(<img src={props.img} alt="" onClick={() => props.toDetail(props.id)} />) : (<img src={props.img} alt=""/>)
:(<img src={props.img} alt="" />)
} }
{/* </Link> */}
</div> </div>
{props.info} {props.info}
</div> </div>
......
src/common/index.js
...@@ -7,5 +7,6 @@ export { default as CallApp } from './CallApp' ...@@ -7,5 +7,6 @@ export { default as CallApp } from './CallApp'
export { default as Captcha } from './Captcha' export { default as Captcha } from './Captcha'
export { default as ClearableInput } from "./ClearableInput"; export { default as ClearableInput } from "./ClearableInput";
export { default as Loading } from './Loading' export { default as Loading } from './Loading'
export { default as RenderTabBar } from './renderTabBar'
src/common/renderTabBar/index.js 0 → 100644
import { Sticky } from 'react-sticky'
import { Tabs } from "antd-mobile"
import React from "react"
export default function RenderTabBar({topOffset = 0,zIndex = 1, ...rest}) {
return (
<Sticky topOffset={topOffset}>
{({style}) => <div style={{...style, zIndex}}>
<Tabs.DefaultTabBar {...rest}/>
</div>}
</Sticky>
)
}
src/components/Index/index.js
...@@ -94,7 +94,7 @@ class Index extends Component { ...@@ -94,7 +94,7 @@ class Index extends Component {
roomMess: item roomMess: item
}) })
} else { } else {
window.location.href = `http://www.julyedu.com/live/m_room/${item.room_id}` window.location.href = `${window.location.href.includes('pre') ? 'http://www-pre.julyedu.com' : 'http://www.julyedu.com'}/live/m_room/${item.room_id}`
} }
} }
} }
......
src/components/ShareCourse/index.js
...@@ -3,15 +3,15 @@ import './index.scss'; ...@@ -3,15 +3,15 @@ import './index.scss';
import {HeaderBar, VList} from '@/common'; import {HeaderBar, VList} from '@/common';
import {http, getParam, SendMessageToApp} from '@/utils'; import {http, getParam, SendMessageToApp} from '@/utils';
import {Toast} from 'antd-mobile'; import {Toast} from 'antd-mobile';
import {Link} from "react-router-dom";
import FollowQRcode from "../detail/followQRcode";
class ShareCourse extends Component { class ShareCourse extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {list: []}; this.state = {
list: [],
fromApp: !getParam('from') ? false : true
};
} }
componentDidMount() { componentDidMount() {
...@@ -27,11 +27,12 @@ class ShareCourse extends Component { ...@@ -27,11 +27,12 @@ class ShareCourse extends Component {
} }
toCourseDetail = (id) => { toCourseDetail = (id) => {
if (!getParam('from')) { const _this = this
if (_this.state.fromApp) {
SendMessageToApp("toCourse", id)
} else {
const {history} = this.props; const {history} = this.props;
history.push(`/detail?id=${id}`) history.push(`/detail?id=${id}`)
} else {
SendMessageToApp("toCourse", id)
} }
} }
...@@ -39,8 +40,11 @@ class ShareCourse extends Component { ...@@ -39,8 +40,11 @@ class ShareCourse extends Component {
const {list} = this.state; const {list} = this.state;
return ( return (
<div className={'share-course'}> <div className={'share-course'}>
<HeaderBar title='分享领红包' arrow={true}/> {
<FollowQRcode/> !this.state.fromApp &&
<HeaderBar title='分享领红包' arrow={true}/>
}
{ {
list && list.length > 0 ? <div> list && list.length > 0 ? <div>
{ {
...@@ -53,10 +57,12 @@ class ShareCourse extends Component { ...@@ -53,10 +57,12 @@ class ShareCourse extends Component {
</div> </div>
) )
return ( return (
<div key={index} onClick={() => this.toCourseDetail(item.course_id)}> <div key={index}>
<VList <VList
img={item.image_name} img={item.image_name}
info={Info} info={Info}
id={item.course_id}
toDetail={this.toCourseDetail}
/> />
</div> </div>
......
src/components/classify/courselist.js
import React, {Component} from 'react' import React, { Component } from 'react'
import {VList} from '../../common' import { VList } from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile' import { Tabs, WhiteSpace, Toast } from 'antd-mobile'
import './courselist.scss' import './courselist.scss'
import HeaderSearch from '../../common/HeaderSearch/index' import HeaderSearch from '../../common/HeaderSearch/index'
import {http, getParam} from "@/utils" import { http, getParam } from "@/utils"
import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import Loading from '@/common/Loading' import Loading from '@/common/Loading'
import {connect} from 'react-redux'; import { connect } from 'react-redux';
import {getCourses} from './../detail/actions'; import { StickyContainer } from "react-sticky";
function stopScroll(e) {
e.preventDefault()
}
@connect(({user}) => ({ @connect(({user}) => ({
user user
...@@ -33,6 +36,11 @@ class Classify extends Component { ...@@ -33,6 +36,11 @@ class Classify extends Component {
this.getList() this.getList()
} }
componentWillUnmount() {
document.removeEventListener('touchmove', stopScroll)
}
// 获取tabs接口 // 获取tabs接口
getTabs = () => { getTabs = () => {
let data = 0 let data = 0
...@@ -93,7 +101,11 @@ class Classify extends Component { ...@@ -93,7 +101,11 @@ class Classify extends Component {
this.setState(status => ({ this.setState(status => ({
ispull: !status.ispull, ispull: !status.ispull,
display: status.ispull ? 'none' : 'block' display: status.ispull ? 'none' : 'block'
})); }), () => {
this.state.ispull ? document.addEventListener('touchmove', stopScroll, {
passive: false
}) : document.removeEventListener('touchmove', stopScroll)
});
} }
// 弹窗里面tab点击查询 // 弹窗里面tab点击查询
...@@ -108,19 +120,19 @@ class Classify extends Component { ...@@ -108,19 +120,19 @@ class Classify extends Component {
} }
toCourseDetail = (id) => { toCourseDetail = (id) => {
const { dispatch, history } = this.props; const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => { // dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`) history.push(`/detail?id=${id}`)
// })); // }));
} }
toClassify=()=>{ toClassify = () => {
location.replace('/classify'); this.props.history.replace('/classify');
} }
render() { render() {
const { user ={} } = this.props; const {user = {}} = this.props;
let isLogin = user.data && user.data.uid? true : false; let isLogin = user.data && user.data.uid ? true : false;
const bottom = ( const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i> <i className={'iconfont iconiconfront-69 pull-down'}></i>
) )
...@@ -129,10 +141,9 @@ class Classify extends Component { ...@@ -129,10 +141,9 @@ class Classify extends Component {
) )
let page = this.state.allClass.findIndex((item) => item.title === this.state.activeTab) let page = this.state.allClass.findIndex((item) => item.title === this.state.activeTab)
return ( return (
<div className='class-child'> <div className='class-child'>
<HeaderSearch <HeaderSearch
isLogin={isLogin} isLogin={isLogin}
toHref={this.toClassify} toHref={this.toClassify}
/> />
...@@ -142,62 +153,68 @@ class Classify extends Component { ...@@ -142,62 +153,68 @@ class Classify extends Component {
<div onClick={this.pulldown.bind(this)}> <div onClick={this.pulldown.bind(this)}>
{this.state.ispull ? top : bottom} {this.state.ispull ? top : bottom}
</div> </div>
<Tabs <StickyContainer>
tabs={this.state.allClass} <Tabs
animated={false} tabs={this.state.allClass}
page={page} animated={false}
onChange={(tab) => this.ontabclick(tab)} page={page}
> onChange={(tab) => this.ontabclick(tab)}
<div className='tabs'> renderTabBar={props => <div className={'custom-render-bar'}>
<ul> <Tabs.DefaultTabBar {...props}/>
{this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => { </div>}
const Info = ( >
<div className="info"> <div className='tabs'>
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}> <ul>
{/* <Link to={`/detail?id=${item.course_id}`}> */} {this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'
onClick={() => this.toCourseDetail(item.course_id)}>
{item.course_title} {item.course_title}
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{!item.is_buy && <p className="course-price">
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p> </p>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{!item.is_buy && <p className="course-price">
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p>
}
{item.is_buy &&
<span className="isbuy">已购买</span>
}
</div>
</div>
)
const status = (
!item.is_buy &&
<div>
{item.bargain_num === 0 && item.groupon_num !== 0 &&
<p className='course-status'>拼团减{item.groupon_num}元</p>
} }
{item.is_buy && {item.bargain_num !== 0 && item.groupon_num === 0 &&
<span className="isbuy">已购买</span> <p className='course-status'>砍价减{item.bargain_num}元</p>
}
{
item.is_aist && <span className='return_cash'></span>
} }
</div> </div>
</div> )
) return (
const status = ( <VList
<div> key={index}
{item.bargain_num === 0 && item.groupon_num !== 0 && status={status}
<p className='course-status'>拼团减{item.groupon_num}元</p> img={item.image_name}
} id={item.course_id}
{item.bargain_num !== 0 && item.groupon_num === 0 && info={Info}
<p className='course-status'>砍价减{item.bargain_num}元</p> toDetail={this.toCourseDetail}
} />
{ )
item.is_aist && <span className='return_cash'></span> })}
} </ul>
</div> </div>
) </Tabs>
return (
<VList </StickyContainer>
key={index}
status={status}
img={item.image_name}
id={item.course_id}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/> <WhiteSpace/>
</div> </div>
<div className='mbc-box' style={{display: this.state.display}}> <div className='mbc-box' style={{display: this.state.display}}>
......
src/components/classify/courselist.scss
...@@ -5,10 +5,29 @@ html,body,#root { ...@@ -5,10 +5,29 @@ html,body,#root {
position: relative; position: relative;
height: 100%; height: 100%;
.preferential{
width: 100%;
height: 44px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.class-content { .class-content {
padding: 0 12px; padding: 88px 12px 0;
position: relative; position: relative;
.custom-render-bar{
position: fixed;
top: 43px;
left: 0;
z-index: 10;
padding-left: 11px;
background: #fff;
}
.v-list-item { .v-list-item {
padding: 10px 0 0; padding: 10px 0 0;
...@@ -105,10 +124,10 @@ html,body,#root { ...@@ -105,10 +124,10 @@ html,body,#root {
width: 32px; width: 32px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
position: absolute; position: fixed;
top: 4px; top: 48px;
right: 0; right: 0;
z-index: 2; z-index: 20;
background-color: $bg_fff; background-color: $bg_fff;
color: $color_666; color: $color_666;
} }
...@@ -138,7 +157,7 @@ html,body,#root { ...@@ -138,7 +157,7 @@ html,body,#root {
.mbc-box { .mbc-box {
position: absolute; position: absolute;
left: 0; left: 0;
top: 88px; top: 87px;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
......
src/components/detail/carousel/index.js → src/components/detail/barrage/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import {Carousel, WingBlank} from 'antd-mobile' import {WingBlank} from 'antd-mobile'
import './index.scss' import './index.scss'
import {api, getParam, http} from "@/utils" import {api, getParam, http} from "@/utils"
// 课程页面滚动广告 // 课程页面滚动广告
class Carouselw extends Component { class Carouselw extends Component {
timer
barageTimer
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
list: [] list: [],
isShowBarrage: false
} }
} }
componentDidMount() { setupBarrage = () => {
const _this = this const periods = [
_this.getList() {start: 0, end: 7, interval: 60000},
this.timer = setInterval(function () { {start: 7, end: 8, interval: 30000},
_this.getList() {start: 8, end: 23, interval: 15000},
}, 10000); {start: 23, end: 24, interval: 30000},
]
const now = new Date(Date.now()).getHours()
for (let period of periods) {
if(now >= period.start && now <= period.end){
this.timer = setTimeout(() => {
this.getList()
this.setupBarrage()
}, period.interval)
break
}
}
}
componentDidUpdate(prevProps) {
const {isShow} = this.props
const {isShow: prevIsShow} = prevProps
if(prevIsShow !== isShow && isShow !== undefined){
if(isShow){
this.setupBarrage()
}
this.componentDidUpdate = null
}
} }
componentWillUnmount() { componentWillUnmount() {
this.timer && clearTimeout(this.timer); this.timer && clearTimeout(this.timer);
this.barageTimer && clearTimeout(this.barageTimer)
} }
// 获取课程接口 // 获取课程接口
...@@ -35,6 +62,11 @@ class Carouselw extends Component { ...@@ -35,6 +62,11 @@ class Carouselw extends Component {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
list: res.data.data, list: res.data.data,
isShowBarrage: true
}, () => {
this.barageTimer = setTimeout(() => {
this.setState({isShowBarrage: !this.state.isShowBarrage})
}, 5000)
}); });
} }
}) })
...@@ -43,6 +75,16 @@ class Carouselw extends Component { ...@@ -43,6 +75,16 @@ class Carouselw extends Component {
render() { render() {
return ( return (
<WingBlank> <WingBlank>
<div className="my-carousel" style={{opacity: this.state.isShowBarrage ? 1 : 0}}>
{
this.state.list &&
<div className="v-item text-overflow-one">
<img src={this.state.list.avatar} alt=""/>
{this.state.list.user_name} {this.state.list.live_msg}
</div>
}
</div>
{/*
<Carousel className="my-carousel" <Carousel className="my-carousel"
vertical vertical
dots={false} dots={false}
...@@ -58,6 +100,7 @@ class Carouselw extends Component { ...@@ -58,6 +100,7 @@ class Carouselw extends Component {
} }
</Carousel> </Carousel>
*/}
</WingBlank> </WingBlank>
) )
} }
......
src/components/detail/carousel/index.scss → src/components/detail/barrage/index.scss
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
border-radius: 3px; border-radius: 3px;
padding: 6px 9px; padding: 6px 9px;
z-index:99; z-index:99;
opacity: 0;
transition: opacity .3s;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
......
src/components/detail/index.js
import React, {Component} from 'react' import React, { Component } from 'react'
import './index.scss' import './index.scss'
import Bargain from './bargain' import Bargain from './bargain'
import Group from './group' import Group from './group'
import OutLine from './outline' import OutLine from './outline'
import {HeaderBar, CallApp} from '../../common' import { HeaderBar, CallApp } from '../../common'
import ShareRank from "./shareRank" import ShareRank from "./shareRank"
import Audition from "./audition" import Audition from "./audition"
import Single from "./single" import Single from "./single"
import SingleSuccess from './single/singleSuccess'; import SingleSuccess from './single/singleSuccess';
import BtnStatus from "./btnstatus" import BtnStatus from "./btnstatus"
import Carouselw from "./carousel" import Barrage from './barrage'
import {connect} from "react-redux" import { connect } from "react-redux"
import {getCourses, addCourseToCart} from "./actions" import { getCourses, addCourseToCart } from "./actions"
import {getParam, http, browser,wxShare} from "@/utils" import { getParam, http, browser, wxShare } from "@/utils"
import {Toast} from 'antd-mobile' import { Toast } from 'antd-mobile'
import {compose, bindActionCreators} from "redux"; import { bindActionCreators } from "redux";
class Detail extends Component { class Detail extends Component {
...@@ -47,8 +47,8 @@ class Detail extends Component { ...@@ -47,8 +47,8 @@ class Detail extends Component {
componentDidMount() { componentDidMount() {
this.fetchCourseInfo(); this.fetchCourseInfo();
const { location: { state = {} } } = this.props; const {location: {state = {}}} = this.props;
if(state.oid) { if (state.oid) {
this.check(state.oid); this.check(state.oid);
} }
if (getParam('is_class') === 1 || getParam('weixinpay')) { if (getParam('is_class') === 1 || getParam('weixinpay')) {
...@@ -60,16 +60,16 @@ class Detail extends Component { ...@@ -60,16 +60,16 @@ class Detail extends Component {
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if(prevProps.user.hasError !== this.props.user.hasError){ if (prevProps.user.hasError !== this.props.user.hasError) {
this.fetchCourseInfo() this.fetchCourseInfo()
} }
} }
payCallback =() => { payCallback = () => {
const _this = this; const _this = this;
if(!getParam('oid')) { if (!getParam('oid')) {
return; return;
}else{ } else {
this.setState({ this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess')) singMess: JSON.parse(window.localStorage.getItem('singMess'))
}) })
...@@ -112,7 +112,7 @@ class Detail extends Component { ...@@ -112,7 +112,7 @@ class Detail extends Component {
}, 1000) }, 1000)
} }
}; };
isweixinPay =()=> { isweixinPay = () => {
let _this = this; let _this = this;
let weixin_code = getParam('code'); let weixin_code = getParam('code');
if (weixin_code) { if (weixin_code) {
...@@ -126,6 +126,7 @@ class Detail extends Component { ...@@ -126,6 +126,7 @@ class Detail extends Component {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => { http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) { if (res.data.errno === 0) {
const data = res.data.data; const data = res.data.data;
function onBridgeReady() { function onBridgeReady() {
WeixinJSBridge.invoke( WeixinJSBridge.invoke(
'getBrandWCPayRequest', { 'getBrandWCPayRequest', {
...@@ -182,6 +183,7 @@ class Detail extends Component { ...@@ -182,6 +183,7 @@ class Detail extends Component {
} }
) )
} }
if (typeof WeixinJSBridge == "undefined") { if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) { if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false) document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
...@@ -239,13 +241,13 @@ class Detail extends Component { ...@@ -239,13 +241,13 @@ class Detail extends Component {
payCallBack = (singleType, nowPrice, laterPrice) => { payCallBack = (singleType, nowPrice, laterPrice) => {
// Toast.info(singleType, 2); // Toast.info(singleType, 2);
const _this = this; const _this = this;
if(singleType === 2) { if (singleType === 2) {
_this.setState({ _this.setState({
singleType, singleType,
nowPrice, nowPrice,
laterPrice laterPrice
}) })
}else{ } else {
_this.setState({ _this.setState({
singleType, singleType,
}) })
...@@ -282,7 +284,7 @@ class Detail extends Component { ...@@ -282,7 +284,7 @@ class Detail extends Component {
title: course_info.course_title, title: course_info.course_title,
desc: course_info.index_description, desc: course_info.index_description,
link: encodeURI(location.origin + '/detail?id=' + getParam('id')), link: encodeURI(location.origin + '/detail?id=' + getParam('id')),
imgUrl:course_info.image_name imgUrl: course_info.image_name
}); });
} }
...@@ -343,7 +345,7 @@ class Detail extends Component { ...@@ -343,7 +345,7 @@ class Detail extends Component {
// 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付 // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
toCart = (type) => { toCart = (type) => {
const { history, addCourseToCart } = this.props; const {history, addCourseToCart} = this.props;
let data = { let data = {
course_id: getParam('id') course_id: getParam('id')
}; };
...@@ -356,7 +358,8 @@ class Detail extends Component { ...@@ -356,7 +358,8 @@ class Detail extends Component {
addCourseToCart(); addCourseToCart();
this.fetchCourseInfo(); this.fetchCourseInfo();
} else { } else {
history.replace('/shopcart');ß history.replace('/shopcart');
ß
} }
} else if (res.data.code === 15001) { } else if (res.data.code === 15001) {
history.replace('/shopcart'); history.replace('/shopcart');
...@@ -380,9 +383,9 @@ class Detail extends Component { ...@@ -380,9 +383,9 @@ class Detail extends Component {
// } else { // } else {
// Toast.info('请在微信中使用分享功能！', 2); // Toast.info('请在微信中使用分享功能！', 2);
// } // }
const { history } = this.props; const {history} = this.props;
const { course = {} } = this.state; const {course = {}} = this.state;
if(course.course_info && course.course_info.self_oid) { if (course.course_info && course.course_info.self_oid) {
history.push(`/togroup?id=${course.course_info.self_oid}`); history.push(`/togroup?id=${course.course_info.self_oid}`);
} }
} }
...@@ -399,7 +402,7 @@ class Detail extends Component { ...@@ -399,7 +402,7 @@ class Detail extends Component {
} }
render() { render() {
const { course: { course_info={} }, barInfo, singleBox, singleType } = this.state; const {course: {course_info = {}}, barInfo, singleBox, singleType} = this.state;
let courseInfo = '', let courseInfo = '',
service = '', service = '',
number = 0, number = 0,
...@@ -407,195 +410,195 @@ class Detail extends Component { ...@@ -407,195 +410,195 @@ class Detail extends Component {
// if (this.props.courseInfo.course_info) { // if (this.props.courseInfo.course_info) {
// courseInfo = this.props.courseInfo.course_info; // courseInfo = this.props.courseInfo.course_info;
// service = courseInfo.service; // service = courseInfo.service;
if (course_info.group_status === 3 || course_info.group_status === 4) { if (course_info.group_status === 3 || course_info.group_status === 4) {
number = course_info.pdd_group_info.groupon_member.number; number = course_info.pdd_group_info.groupon_member.number;
} }
// } // }
const {share, countdown, list, outList} = this.state; const {share, countdown, list, outList} = this.state;
let href = ''; let href = '';
const { location: { state = {}} } = this.props; const {location: {state = {}}} = this.props;
if(state.to && state.to === 'classify') { if (state.to && state.to === 'classify') {
href = '/classify' href = '/classify'
} }
if(state.oid) { if (state.oid) {
href='/classify' href = '/classify'
} }
if(getParam('dist_code')) { if (getParam('dist_code')) {
href='/' href = '/'
} }
return ( return (
<div> <div>
<div className='detail-box'> <div className='detail-box'>
<HeaderBar <HeaderBar
title='课程详情' title='课程详情'
arrow={true} arrow={true}
cart={true} cart={true}
toHref={href} toHref={href}
/> />
<CallApp className='toapp' /> <CallApp className='toapp'/>
{/*弹幕*/} {/*弹幕*/}
<Carouselw /> <Barrage isShow={course_info.is_show}/>
{/*课程*/} {/*课程*/}
<div className='course-content'> <div className='course-content'>
<div className='cover'> <div className='cover'>
<img src={course_info.image_name} alt="" /> <img src={course_info.image_name} alt=""/>
{
course_info.is_aist &&
<span className='return_cash' />
}
</div>
<div className="info">
<p className='title'>{course_info.course_title}</p>
<p className='contact text-overflow-2'>{course_info.simpledescription}</p>
<div className='des'>
{
course_info.is_baoming === 0 &&
<p className="course-price">
<span className="new">¥{course_info.price1}</span>
<span className="old">¥{course_info.price0}</span>
</p>
}
{ {
course_info.is_baoming === 1 && course_info.is_aist &&
<span className="isbuy">已购买</span> <span className='return_cash'/>
} }
</div> </div>
<div className="info">
<p className='title'>{course_info.course_title}</p>
<p className='contact text-overflow-2'>{course_info.simpledescription}</p>
<div className='des'>
{
course_info.is_baoming === 0 &&
<p className="course-price">
<span className="new">¥{course_info.price1}</span>
<span className="old">¥{course_info.price0}</span>
</p>
}
{
course_info.is_baoming === 1 &&
<span className="isbuy">已购买</span>
}
</div>
</div>
</div> </div>
</div>
{/*正常课程已购买时显示*/} {/*正常课程已购买时显示*/}
{ {
course_info.is_baoming === 1 && course_info.is_baoming === 1 &&
<div className='group'> <div className='group'>
上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid} 上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}
</div> </div>
} }
{/*vip课程显示*/} {/*vip课程显示*/}
{ {
course_info.vip_range && course_info.vip_range &&
<div className="vip"> <div className="vip">
<p>已开通年会员：{course_info.vip_range}</p> <p>已开通年会员：{course_info.vip_range}</p>
<p>年会员QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}</p> <p>年会员QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}</p>
</div>
}
{/*服务承诺*/}
<div className='promise'>
<label>服务承诺</label>
<p>
{
course_info.service && course_info.service.length > 0 && course_info.service.map((item, index) => {
return (
<span key={index}> {item} </span>
)
})
}
</p>
</div> </div>
}
{/*服务承诺*/} {/*试听弹窗*/}
<div className='promise'> <Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
<label>服务承诺</label>
<p> {/*单集购买弹窗*/}
{ {
course_info.service && course_info.service.length > 0 && course_info.service.map((item, index) => { singleBox &&
return ( <Single
<span key={index}> {item} </span> singleType={this.state.singleType}
) singleBox={this.state.singleBox}
}) boxHide={this.boxHide}
} data={this.state.singMess}
</p> vcourseId={course_info.v_course_id}
</div> videoId={this.state.singMess.video_id}
title={course_info.course_title}
check={this.check}
courseId={course_info.course_id}
/>}
{/* 单集购买成功弹窗 */}
{
singleType !== 1 &&
<SingleSuccess
boxHide={this.boxHide}
data={this.state.singMess}
singleType={singleType}
vcourseId={course_info.v_course_id}
videoId={this.state.singMess.video_id}
nowPrice={this.state.nowPrice}
isPdd={this.state.isPdd}
laterPrice={this.state.laterPrice}
courseId={course_info.course_id}
/>
}
{/*payCallback={this.payCallback}*/}
{/*weixinPay = {this.weixinPay}*/}
{/*试听弹窗*/} {/*分享赚钱*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/> {
course_info.is_dist &&
{/*单集购买弹窗*/} <ShareRank courseInfo={course_info}/>
{ }
singleBox &&
<Single
singleType={this.state.singleType}
singleBox={this.state.singleBox}
boxHide={this.boxHide}
data={this.state.singMess}
vcourseId={course_info.v_course_id}
videoId={this.state.singMess.video_id}
title={course_info.course_title}
check={this.check}
courseId={course_info.course_id}
/>}
{/* 单集购买成功弹窗 */}
{
singleType !== 1 &&
<SingleSuccess
boxHide={this.boxHide}
data={this.state.singMess}
singleType={singleType}
vcourseId={course_info.v_course_id}
videoId={this.state.singMess.video_id}
nowPrice={this.state.nowPrice}
isPdd={this.state.isPdd}
laterPrice={this.state.laterPrice}
courseId={course_info.course_id}
/>
}
{/*payCallback={this.payCallback}*/}
{/*weixinPay = {this.weixinPay}*/}
{/*分享赚钱*/} {/**
{ * 拼团
course_info.is_dist && * is_aist: 是否AI特训营
<ShareRank courseInfo={course_info} /> * group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团
} */}
{
!course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
<Group
courseInfo={course_info}
history={this.props.history}
countdown={countdown}
invitedFriends={this.invitedFriends}
/>
}
{/** {/*砍价*/}
* 拼团 {
* is_aist: 是否AI特训营 course_info.is_baoming === 0 && (!course_info.is_aist) && course_info.is_bargain &&
* group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团 <Bargain/>
*/} }
{
!course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
<Group
courseInfo={course_info}
history={this.props.history}
countdown={countdown}
invitedFriends={this.invitedFriends}
/>
}
{/*砍价*/} {/*课程介绍、大纲*/}
{ <OutLine
course_info.is_baoming === 0 && (!course_info.is_aist) && course_info.is_bargain && data={course_info}
<Bargain /> toAudition={this.toAudition}
} toSingleset={this.toSingleset}
/>
{/*课程介绍、大纲*/} {/*课程按钮*/}
<OutLine {
data={course_info} course_info &&
toAudition={this.toAudition} <BtnStatus
toSingleset={this.toSingleset} countdown={countdown}
/> data={course_info}
user={this.props.user}
{/*课程按钮*/} invitedFriends={this.invitedFriends}
{ // addCourseToCart={this.props.addCourseToCart}
course_info && toCart={this.toCart}
<BtnStatus history={this.props.history}
countdown={countdown} />}
data={course_info}
user={this.props.user} {
invitedFriends={this.invitedFriends} share ? (
// addCourseToCart={this.props.addCourseToCart} <div
toCart={this.toCart} className='groupSuccessMbc'
history={this.props.history} onClick={() => {
/>} this.setState({share: false})
}}
{ >
share ? ( <div className='tipContent'>
<div {`还差${number}人，分享到3个群，成团率高达98%`}
className='groupSuccessMbc' </div>
onClick={() => { <div className='tipArrow'>
this.setState({share: false}) <i className='iconfont iconyindao'/>
}} </div>
>
<div className='tipContent'>
{`还差${number}人，分享到3个群，成团率高达98%`}
</div> </div>
<div className='tipArrow'> ) : null
<i className='iconfont iconyindao' /> }
</div> </div>
</div>
) : null
}
</div>
</div> </div>
) )
} }
......
src/components/detail/outline/index.js
import React, {Component} from 'react' import React, { Component } from 'react'
import {Link} from 'react-router-dom' import { Link } from 'react-router-dom'
import {Tabs, WhiteSpace} from 'antd-mobile' import { Tabs, WhiteSpace } from 'antd-mobile'
import './index.scss' import './index.scss'
import {api, getParam, http} from "@/utils" import { getParam, http } from "@/utils"
import {Toast} from 'antd-mobile' import { Toast } from 'antd-mobile'
import { StickyContainer } from "react-sticky";
import {RenderTabBar} from "@/common";
class OutLine extends Component { class OutLine extends Component {
constructor(props) { constructor(props) {
...@@ -14,26 +15,22 @@ class OutLine extends Component { ...@@ -14,26 +15,22 @@ class OutLine extends Component {
} }
} }
componentDidMount() {
this.getList()
}
htmlDecode = (content) => { htmlDecode = (content) => {
// let e = document.createElement('div'); if (content) {
// e.innerHTML = content; content = content.replace(/&lt;/g, '<');
// return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; content = content.replace(/&gt;/g, '>');
if(content) { content = content.replace(/&amp;gt;/g, '');
content = content.replace(/&lt;/g , '<'); content = content.replace(/&quot;/g, '"');
content = content.replace(/&gt;/g , '>'); content = content.replace(/&amp;nbsp;/g, '');
content = content.replace(/&amp;gt;/g , '');
content = content.replace(/&quot;/g , '"');
content = content.replace(/&amp;nbsp;/g , '');
} }
return content; return content;
} }
tabchange = (tab, index) => {
if(index === 1) {
this.getList()
}
};
// 获取大纲数据 // 获取大纲数据
getList = () => { getList = () => {
http.get(`${API.home}/m/course/syllabuses/${getParam('id')}`).then((res) => { http.get(`${API.home}/m/course/syllabuses/${getParam('id')}`).then((res) => {
...@@ -59,31 +56,33 @@ class OutLine extends Component { ...@@ -59,31 +56,33 @@ class OutLine extends Component {
return ( return (
<div className='course-detail'> <div className='course-detail'>
<WhiteSpace/> <WhiteSpace/>
<Tabs tabs={tabs} <StickyContainer>
initialPage={0} <Tabs tabs={tabs}
onChange={(tab, index) => { this.tabchange(tab, index) }} initialPage={0}
> swipeable={false}
{/*介绍*/} renderTabBar={RenderTabBar}
<div className='introduce'> >
<p>讲师：{introduce.teachers}</p> {/*介绍*/}
<p>课时：{introduce.course_hour}</p> <div className='introduce'>
<p>时间：{introduce.start_time}</p> <p>讲师：{introduce.teachers}</p>
<div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div> <p>课时：{introduce.course_hour}</p>
</div> <p>时间：{introduce.start_time}</p>
{/*大纲*/} <div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div>
<div className='outline'> </div>
{ {/*大纲*/}
this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => { <div className='outline'>
return ( {
<div className='stagebox' key={index}> this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => {
<h1 className='stage text-overflow-1'>{item.stage_name}</h1> return (
{ <div className='stagebox' key={index}>
item.lesson.map((item, index) => { <h1 className='stage text-overflow-1'>{item.stage_name}</h1>
return ( {
<ul key={index}> item.lesson.map((item, index) => {
<h2 className='classhour'> return (
<span className='title text-overflow-1'>{item.name}</span> <ul key={index}>
{/* <h2 className='classhour'>
<span className='title text-overflow-1'>{item.name}</span>
{/*
class_status class_status
0-未购买未开单集购买 0-未购买未开单集购买
1-未购买已开单集购买 1-未购买已开单集购买
...@@ -93,112 +92,117 @@ class OutLine extends Component { ...@@ -93,112 +92,117 @@ class OutLine extends Component {
5-可试听且有试听权限 5-可试听且有试听权限
6-可试听但无试听权限 6-可试听但无试听权限
*/} */}
{ // 试听 { // 试听
!introduce.is_aist && item.class_status === 6 && !introduce.is_aist && item.class_status === 6 &&
<span className='btn-right-10 audition' <span className='btn-right-10 audition'
onClick={this.props.toAudition}>试听 onClick={this.props.toAudition}>试听
<i className='iconfont iconcelluar'></i> <i className='iconfont iconcelluar'></i>
</span> </span>
} }
{ // 未购买未开单集购买：上锁标志，点击提示购买 { // 未购买未开单集购买：上锁标志，点击提示购买
!introduce.is_aist && item.class_status === 0 && !introduce.is_aist && item.class_status === 0 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i> <i className='iconfont iconiconfront-74 icon-right-22'></i>
} }
{ // 未购买已开单集购买：显示单集价格，点击购买单集 { // 未购买已开单集购买：显示单集价格，点击购买单集
!introduce.is_aist && item.class_status === 1 && !introduce.is_aist && item.class_status === 1 &&
<span className='btn-right-10 singleset' <span className='btn-right-10 singleset'
onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span> onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span>
} }
{ {
!introduce.is_aist && item.class_status === 4 && !introduce.is_aist && item.class_status === 4 &&
item.video_auth === 1 && item.is_video === 4 && item.video_auth === 1 && item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i <span className='live icon-right-22'>正在直播<i
className='iconfont icondanseshixintubiao-23'></i></span> className='iconfont icondanseshixintubiao-23'></i></span>
} }
{ {
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程 // 已购买直播结束已上传视频：正常播放按钮，点击播放课程
!introduce.is_aist && item.class_status === 2 && !introduce.is_aist && item.class_status === 2 &&
<Link to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`} className='iconfont icondanseshixintubiao-23 icon-right-22'></Link> <Link
} to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='iconfont icondanseshixintubiao-23 icon-right-22'></Link>
}
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && item.is_open && introduce.is_baoming === 1 && introduce.is_aist && item.is_open && introduce.is_baoming === 1 &&
<Link to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`} className='aist aist_open'></Link> <Link
to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='aist aist_open'></Link>
} }
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && (!item.is_open || introduce.is_baoming === 0) && introduce.is_aist && (!item.is_open || introduce.is_baoming === 0) &&
<i className='aist iconfont iconiconfront-74'></i> <i className='aist iconfont iconiconfront-74'></i>
} }
</h2> </h2>
{ {
item.point && item.point.length > 0 && item.point.map((item, index) => { item.point && item.point.length > 0 && item.point.map((item, index) => {
const type = ( const type = (
<span> <span>
{ {
item.type === 1 && item.type === 1 &&
<span>知识点{index + 1}：</span> <span>知识点{index + 1}：</span>
} }
{ {
item.type === 2 && item.type === 2 &&
<span className='red'>实战项目：</span> <span className='red'>实战项目：</span>
} }
</span> </span>
) )
return ( return (
<li className='points text-overflow-1' <li className='points text-overflow-1'
key={index}>{type}{item.name}</li> key={index}>{type}{item.name}</li>
) )
}) })
} }
{ {
<> <>
{ {
introduce.is_aist && item.practice.title !== "" && (!item.is_open || introduce.is_baoming === 0) && 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 && introduce.is_baoming === 1 && !item.practice.is_tested && introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && !item.practice.is_tested &&
<Link to={{ <Link to={{
pathname: `/campTest`, pathname: `/campTest`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`, search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {from: `/detail${window.location.search}`} state: {from: `/detail${window.location.search}`}
}} className='camp camp_test' key={index}> }} 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 && introduce.is_baoming === 1 && item.practice.is_tested && introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && item.practice.is_tested &&
<Link to={{ <Link to={{
pathname: `/campResolve`, pathname: `/campResolve`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`, search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {from: `/detail${window.location.search}`} state: {from: `/detail${window.location.search}`}
}} className='camp camp_test' key={index}> }} 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'/>
</Link> </Link>
} }
</> </>
} }
</ul> </ul>
) )
}) })
} }
</div> </div>
) )
}) })
} }
</div> </div>
</Tabs> </Tabs>
</StickyContainer>
<WhiteSpace/> <WhiteSpace/>
</div> </div>
); );
......
src/components/preferential/index.js
...@@ -4,11 +4,8 @@ import {Tabs, WhiteSpace, Toast} from 'antd-mobile' ...@@ -4,11 +4,8 @@ import {Tabs, WhiteSpace, Toast} from 'antd-mobile'
import './index.scss' import './index.scss'
import HeaderSearch from '../../common/HeaderSearch/index' import HeaderSearch from '../../common/HeaderSearch/index'
import {http} from "@/utils" import {http} from "@/utils"
import {Link} from 'react-router-dom'
import Loading from '@/common/Loading' import Loading from '@/common/Loading'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {getCourses} from './../detail/actions';
@connect(({user}) => ({ @connect(({user}) => ({
user user
...@@ -106,6 +103,10 @@ class Preferential extends Component { ...@@ -106,6 +103,10 @@ class Preferential extends Component {
tabs={tabs} tabs={tabs}
animated={false} animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)} onChange={(tab, index) => this.ontabclick(tab, index)}
swipeable={false}
renderTabBar={props => <div className={'custom-tab-bar'}>
<Tabs.DefaultTabBar {...props}/>
</div>}
> >
<div className='tabs'> <div className='tabs'>
<ul> <ul>
...@@ -135,6 +136,7 @@ class Preferential extends Component { ...@@ -135,6 +136,7 @@ class Preferential extends Component {
</div> </div>
) )
const status = ( const status = (
!item.is_buy &&
<div> <div>
{this.state.courseStatus === 1 && {this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.bargain_price}元</p> <p className='course-status'>砍价减{item.bargain_price}元</p>
......
src/components/preferential/index.scss
.preferential { .preferential {
padding-top: 88px;
.preferential{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
z-index: 10;
padding-top: 0;
}
.custom-tab-bar{
width: 100%;
position: fixed;
top: 43px;
left: 0;
padding: 15px 0 15px 11px;
z-index: 10;
background: #fff;
}
.class-content { .class-content {
padding: 0 12px; padding: 0 12px;
position: relative; position: relative;
......
src/router/router-config.js
...@@ -156,8 +156,7 @@ export default [ ...@@ -156,8 +156,7 @@ export default [
}, },
{ {
path: '/togroup', path: '/togroup',
component: ToGroup, component: ToGroup
isPrivate: true
}, },
{ {
path: '/aist-share', path: '/aist-share',
......
yarn.lock
...@@ -1567,10 +1567,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1: ...@@ -1567,10 +1567,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
dependencies: dependencies:
color-convert "^1.9.0" color-convert "^1.9.0"
antd-mobile@^2.2.13: antd-mobile@^2.3.1:
version "2.2.13" version "2.3.1"
resolved "https://registry.yarnpkg.com/antd-mobile/-/antd-mobile-2.2.13.tgz#ae9a2b33ed8af52ed92127b50691af401ac4c8ce" resolved "https://registry.yarnpkg.com/antd-mobile/-/antd-mobile-2.3.1.tgz#04d8709c198eee27c3c41b903cb2ad77a16028e3"
integrity sha512-izBPlj5yvjPwzqvpjYYmKp9HOSoeIbqY4Z7gzFpxJXnDvaDoeY3ULr4AHQ1gdeJo6BpqjlcCHHw1IwX8DWN3JQ== integrity sha512-CBegyQuQiNxmwQH4Ck619Y9UO7EVN8FuhnUlV7kmbSSxxy+V704dSGy7uLNn7AUePRK5UZfm6ifLsZix6khZfQ==
dependencies: dependencies:
array-tree-filter "~2.1.0" array-tree-filter "~2.1.0"
babel-runtime "6.x" babel-runtime "6.x"
...@@ -9076,7 +9076,7 @@ querystringify@^2.0.0: ...@@ -9076,7 +9076,7 @@ querystringify@^2.0.0:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA== integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
raf@3.4.1, raf@^3.1.0, raf@^3.3.2, raf@^3.4.0: raf@3.4.1, raf@^3.1.0, raf@^3.3.0, raf@^3.3.2, raf@^3.4.0:
version "3.4.1" version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
...@@ -9390,6 +9390,14 @@ react-spinners@^0.5.4: ...@@ -9390,6 +9390,14 @@ react-spinners@^0.5.4:
prop-types "^15.5.10" prop-types "^15.5.10"
recompose "0.27.1 - 0.30.0" recompose "0.27.1 - 0.30.0"
react-sticky@^6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
integrity sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==
dependencies:
prop-types "^15.5.8"
raf "^3.3.0"
react-tween-state@^0.1.5: react-tween-state@^0.1.5:
version "0.1.5" version "0.1.5"
resolved "https://registry.yarnpkg.com/react-tween-state/-/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339" resolved "https://registry.yarnpkg.com/react-tween-state/-/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339"
...@@ -9519,11 +9527,6 @@ redux-logger@^3.0.6: ...@@ -9519,11 +9527,6 @@ redux-logger@^3.0.6:
dependencies: dependencies:
deep-diff "^0.3.5" deep-diff "^0.3.5"
redux-persist@^5.10.0:
version "5.10.0"
resolved "https://registry.npm.taobao.org/redux-persist/download/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
integrity sha1-XY2ALFVx5Vkk78HDqbI1dSg75is=
redux-thunk@^2.3.0: redux-thunk@^2.3.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
......
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