Skip to content

M
mr-julyedu
Commit 5c5de6e3 by zhanghaozhe
Options

Merge branch 'limit-free' into dev

parents 3acad2bd 51265987
Showing with 255 additions and 211 deletions
src/components/Index/index.js
......@@ -269,10 +269,12 @@ function CourseList({modules, toDetail}) {
{item.is_buy
? <a className="isbuy">已购买</a>
: item.is_limit_free
? <p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{item.price}</span>
</p>
? <Link to={`/detail?id=${item.course_id}`}>
<p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{item.price}</span>
</p>
</Link>
: <p className="course-price">
<span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span>
......
src/components/detail/btnstatus/index.js
......@@ -525,14 +525,20 @@ class BtnStatus extends Component {
}
{
//todo 联调
info.is_limit_free && info.limit_free_status == 0 && <div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className={'get-course btn'} onClick={() => {this.props.getCourse(info.course_id)}}>立即领取</button>
<button className={'get-course btn'} onClick={() => {
const {history, user, getCourse} = this.props
if(user.hasError){
history.push('/passport')
}else {
getCourse(info.course_id)
}
}}>立即领取</button>
</div>
}
......
src/components/detail/index.js
......@@ -523,6 +523,7 @@ class Detail extends Component {
</button>
<button onClick={() => {
history.push(`/play/video?id=${id}`)
instance.close()
}}>立即学习
</button>
</div>
......@@ -539,6 +540,8 @@ class Detail extends Component {
render() {
const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket, countDownTime} = this.state;
const {d, h, m} = this.formatTime(course_info.limit_free_time)
let courseInfo = '',
service = '',
number = 0,
......@@ -616,7 +619,6 @@ class Detail extends Component {
</div>
}
{
//todo 联调
course_info.is_limit_free
?
course_info.limit_free_status == 0
......@@ -627,7 +629,7 @@ class Detail extends Component {
:
course_info.limit_free_status == 1
? <div className={'time-limit'}>
<span>有效期7天，05天14时23分后过期</span>
<span>有效期7天，{d}天{h}时{m}分后过期</span>
</div>
: null
: null
......@@ -649,15 +651,15 @@ class Detail extends Component {
is_vip 1是属于vip赠的 0是不在vip范围内的
*/}
{
course_info.is_baoming === 1 && course_info.is_pay == 1 && course_info.contact_type == 1 && course_info.course_qq &&
!(course_info.is_limit_free && course_info.limit_free_status == 1) && course_info.is_baoming === 1 && course_info.is_pay == 1 && course_info.contact_type == 1 && course_info.course_qq &&
<div className='group'>
上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}
</div>
}
{
course_info.is_baoming === 1 && course_info.is_pay == 1 && course_info.contact_type == 2 && course_info.course_qq &&
!(course_info.is_limit_free && course_info.limit_free_status == 1) && course_info.is_baoming === 1 && course_info.is_pay == 1 && course_info.contact_type == 2 && course_info.course_qq &&
<div className='group'>
请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}
请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}
</div>
}
......
src/components/limit-free/index.js
......@@ -92,7 +92,11 @@ class LimitFree extends Component {
this.getData()
}}>知道了
</button>
<button onClick={this.toPlay.bind(this, id)}>立即学习</button>
<button onClick={() => {
this.toPlay(id)
instance.close()
}}>立即学习
</button>
</div>
})
......@@ -169,7 +173,11 @@ class LimitFree extends Component {
bottom = <div className={'bottom'}>
<span className={'red'}>限时免费</span>
<span className={'origin-price'}>¥{item.price0}</span>
<button onClick={this.getCourse.bind(this, item.course_id)}>免费领取</button>
<button onClick={e => {
e.stopPropagation()
this.getCourse(item.course_id)
}}>免费领取
</button>
</div>
break
case 1:
......
src/components/purchased/index.js
......@@ -18,7 +18,6 @@ class Purchased extends Component {
componentDidMount() {
this.getList()
this.limitFreeCountDown()
}
// 获取订单
......@@ -41,14 +40,6 @@ class Purchased extends Component {
history.push(`/detail?id=${id}`)
// }));
}
limitFreeCountDown = timestamp => {
//todo 联调
const later = new Date(timestamp)
const earlier = Date.now()
return dateCountDown(later, earlier)
}
render() {
const {user} = this.props
const uid = user && user.data && user.data.uid
......@@ -84,8 +75,7 @@ class Purchased extends Component {
</div>
)
const status = (
// item.is_aist && <span className='status'>返现</span>
<span className='limit-free-status'>{'*'}天{'*'}时{'*'}分后过期</span>
item.is_aist && <span className='status'>返现</span>
)
const courseExpire = (
item.course_expire && item.course_expire != '' &&
......
src/components/purchased/index.scss
......@@ -112,20 +112,6 @@ html, body, #root {
background: linear-gradient(to bottom, #FF4000, #FD7700);
}
.limit-free-status {
position: absolute;
right: 0;
top: 8px;
width: 112px;
height: 20px;
background: #FF0000;
border-radius: 10px 0 0 10px;
line-height: 20px;
color: #fff;
text-align: center;
font-size: 11px;
}
.course-expire {
display: inline-block;
text-align: center;
......
src/components/study/myCourses/index.js
......@@ -11,200 +11,199 @@ import { Loading } from "@/common";
function getStudyTime(seconds) {
return {
hour: Math.floor(seconds / (60 * 60)),
min: Math.floor(seconds / 60) % 60,
sec: seconds % 60
}
return {
hour: Math.floor(seconds / (60 * 60)),
min: Math.floor(seconds / 60) % 60,
sec: seconds % 60
}
}
const AddCourse = React.memo(({addCourseClick}) => (
<div className='add-course'>
<button className='add' onClick={addCourseClick}>添加课程+</button>
</div>
<div className='add-course'>
<button className='add' onClick={addCourseClick}>添加课程+</button>
</div>
))
function Record({record: {seconds, lesson_name}}) {
let re = /第[\s\S]+?课/,
result = ''
let re = /第[\s\S]+?课/,
result = ''
if (lesson_name) {
let matchResult = re.exec(lesson_name)
result += (matchResult && matchResult[0]) ? matchResult[0] : ''
}
if (lesson_name) {
let matchResult = re.exec(lesson_name)
result += (matchResult && matchResult[0]) ? matchResult[0] : ''
}
if (seconds) {
let studyTime = getStudyTime(seconds)
let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '',
min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '',
sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : ''
if (seconds) {
let studyTime = getStudyTime(seconds)
let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '',
min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '',
sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : ''
result += hour + min + sec
}
result += hour + min + sec
}
return (
<span className={'record'}>
return (
<span className={'record'}>
{
result.length ? `学习到${result}` : null
result.length ? `学习到${result}` : null
}
</span>
)
)
}
const Bottom = React.memo(({item}) => {
if (item.ago || item.seconds) {
let date = new Date(item.ago * 1000)
let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日')
return (
<div className="des">
<span className='time'>{time}</span>
<Record record={item}/>
</div>
)
}
if (item.ago || item.seconds) {
let date = new Date(item.ago * 1000)
let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日')
return (
<button className='start-learn'>开始学习</button>
<div className="des">
<span className='time'>{time}</span>
<Record record={item}/>
</div>
)
}
return (
<button className='start-learn'>开始学习</button>
)
})
class MyCourses extends Component {
list
list
state = {
isLoading: true
}
handleClick = (id, item) => {
const {history} = this.props
const {mode, course_id} = item
if(mode && mode == 6){
history.push(`/python?id=${course_id}`)
return
}
history.push(`/play/video?id=${id}`)
}
addCourseClick = () => {
this.props.history.push('/classify')
}
state = {
isLoading: true
}
componentDidMount() {
this.props.switchTab(false)
this.props.fetchCoursesListIfNeeded()
handleClick = (id, item) => {
const {history} = this.props
const {mode, course_id} = item
if (mode && mode == 6) {
history.push(`/python?id=${course_id}`)
return
}
componentWillUnmount() {
this.props.switchTab(true);
history.push(`/play/video?id=${id}`)
}
addCourseClick = () => {
this.props.history.push('/classify')
}
componentDidMount() {
this.props.switchTab(false)
this.props.fetchCoursesListIfNeeded()
}
componentWillUnmount() {
this.props.switchTab(true);
}
loadFunc = debounce(() => {
if (this.props.courseList.length % 10 === 0) {
this.props.fetchCoursesListIfNeeded()
}
}, 200)
render() {
let {courseList, user} = this.props
return <Loading isLoading={this.props.isLoading}>
{
courseList && courseList.length !== 0
?
<>
<div className="my-course-uid">
{`加群请备注您的学号：${!user.hasError && this.props.user.data.uid}`}
</div>
<InfiniteScroll
pageStart={0}
hasMore={true}
loadMore={this.loadFunc}
useWindow={false}
>
<ul ref={el => this.list = el}>
{
courseList.map((item, index) => {
const Info = (
<div className="info">
<div className='title'>{item.course_title}</div>
{
item.is_aist &&
<div className='contact'>助教微信：{item.assist_weixin}</div>
}
{
!item.is_aist && item.contact_type == 1 && item.course_qq &&
<div className='contact'>QQ群：{item.course_qq}</div>
}
{
!item.is_aist && item.contact_type == 2 && item.course_qq &&
<div className='contact'>班主任微信：{item.course_qq}</div>
}
loadFunc = debounce(() => {
if (this.props.courseList.length % 10 === 0) {
this.props.fetchCoursesListIfNeeded()
}
}, 200)
render() {
let {courseList, user} = this.props
return <Loading isLoading={this.props.isLoading}>
{
courseList && courseList.length !== 0
?
<>
<div className="my-course-uid">
{`加群请备注您的学号：${!user.hasError && this.props.user.data.uid}`}
</div>
<InfiniteScroll
pageStart={0}
hasMore={true}
loadMore={this.loadFunc}
useWindow={false}
>
<ul ref={el => this.list = el}>
{
courseList.map((item, index) => {
const Info = (
<div className="info">
<div className='title'>{item.course_title}</div>
{
item.is_aist &&
<div className='contact'>助教微信：{item.assist_weixin}</div>
}
{
!item.is_aist && item.contact_type == 1 && item.course_qq &&
<div className='contact'>QQ群：{item.course_qq}</div>
}
{
!item.is_aist && item.contact_type == 2 && item.course_qq &&
<div className='contact'>班主任微信：{item.course_qq}</div>
}
{
item.is_aist && item.aist_schedule &&
<div className="process-status">
<div className="process-wrapper">
<div className="process-bar"
style={{width: `${parseFloat(item.aist_schedule)}%`}}/>
</div>
<div className="process-text">{item.aist_schedule}</div>
</div>
}
<Bottom item={item}/>
</div>
)
const status = (
item.is_aist && <span className='status'>返现</span>
)
const courseExpire = (
item.course_expire && item.course_expire!='' &&
<span className='course-expire'>{item.course_expire}</span>
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
{...item}
key={index}
info={Info}
status={status}
courseExpire={courseExpire}
item={item}
id={item['v_course_id']}
/>
)
})
}
</ul>
</InfiniteScroll>
{
courseList.length % 10 !== 0 ?
<AddCourse addCourseClick={this.addCourseClick}/>
: null
item.is_aist && item.aist_schedule &&
<div className="process-status">
<div className="process-wrapper">
<div className="process-bar"
style={{width: `${parseFloat(item.aist_schedule)}%`}}/>
</div>
<div className="process-text">{item.aist_schedule}</div>
</div>
}
</>
:
<div className="empty">
<p><i className='iconfont iconfish'/></p>
<p className='empty-prompt'>您还没有课程哦，赶快去选课吧~</p>
<p>
<Link className='select-course' to='/classify'>去选课</Link>
</p>
</div>
<Bottom item={item}/>
</div>
)
const status = (
item.is_aist
? <span className='status'>返现</span>
: item.course_expire
? <span className='course-expire'>{item.course_expire}</span>
: null
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
{...item}
key={index}
info={Info}
status={status}
item={item}
id={item['v_course_id']}
/>
)
})
}
</ul>
</InfiniteScroll>
{
courseList.length % 10 !== 0 ?
<AddCourse addCourseClick={this.addCourseClick}/>
: null
}
</Loading>
}
</>
:
<div className="empty">
<p><i className='iconfont iconfish'/></p>
<p className='empty-prompt'>您还没有课程哦，赶快去选课吧~</p>
<p>
<Link className='select-course' to='/classify'>去选课</Link>
</p>
</div>
}
</Loading>
}
}
export default connect(
state => ({
courseList: state.myCourses.courseList,
user: state.user,
isLoading: state.myCourses.isLoading
}),
{
fetchCoursesListIfNeeded,
switchTab
})(MyCourses)
state => ({
courseList: state.myCourses.courseList,
user: state.user,
isLoading: state.myCourses.isLoading
}),
{
fetchCoursesListIfNeeded,
switchTab
})(MyCourses)
src/components/video/index.js
import React, { Component } from 'react'
import HeaderBar from '@/common/HeaderBar'
import './video.scss'
import { NavLink, Route, Redirect, Switch} from 'react-router-dom'
import { NavLink, Route, Redirect, Switch } from 'react-router-dom'
import { http, getParam, browser } from '@/utils'
import Recommendation from './recommendation'
import VideoCatalog from './video-catalog'
......@@ -9,8 +9,8 @@ import DatumCatalog from './datum-catalog'
import { Toast } from 'antd-mobile'
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import { Modal} from "antd-mobile"
import { Loading} from '@/common'
import { Modal } from "antd-mobile"
import { Loading } from '@/common'
import { connect } from "react-redux"
import jsCookie from 'js-cookie'
import Single from "@/components/detail/single";
......@@ -104,12 +104,12 @@ class Video extends Component {
nowPrice: 0,// 单集购买需要
laterPrice: 0,// 单集购买需要
limitFreeNoPromptChecked: false,
showLimitFreePopup: true //todo 联调
showLimitFreePopup: false,
limitFreePopup: {}
}
componentDidMount() {
console.log(this.props.location.hash)
if (window.location.protocol === 'https:') {
window.location.replace('http' + window.location.href.slice(5))
return
......@@ -527,6 +527,11 @@ class Video extends Component {
}
clearInterval(this.timer);
this.timer = null;
if (this.state.limitFreePopup.is_free) {
this.setState({
showLimitFreePopup: true
})
}
})
}
......@@ -607,6 +612,7 @@ class Video extends Component {
}),
this.playSetup
)
this.getLimitFreePopup(data.course.course_id)
} else {
Toast.info(data.msg)
}
......@@ -736,9 +742,54 @@ class Video extends Component {
}
}
getLimitFreePopup = id => {
http.post(`${API.home}/sys/popup`, {
course_id: id
})
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
limitFreePopup: data
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
checkNeverShowLimitFreePopup = () => {
http.post(`${API.home}/sys/checklist`, {
course_id: this.state.course.course_id
})
.then(res => {
const {code, msg} = res.data
if (code === 200) {
this.setState({
limitFreePopup: {...this.state.limitFreePopup, is_free: 0}
})
}else {
Toast.info(msg, 2, null, false)
}
})
}
render() {
let {match, location, history} = this.props
const {videoList, activeIndex, isAuth, salePrice, course, singleBox, singleType, showLimitFreePopup} = this.state;
const {
videoList,
activeIndex,
isAuth,
salePrice,
course,
singleBox,
singleType,
showLimitFreePopup,
limitFreePopup
} = this.state;
let toHref = '';
if (location.state && location.state.to && location.state.to === 'detail') {
toHref = `/detail?id=${course.course_id}`
......@@ -875,13 +926,13 @@ class Video extends Component {
<div className={'limit-free-cover'}>
<div className="free-popup">
<div className="title">
<span>想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!</span>
<span>{limitFreePopup.pop_descbition}</span>
</div>
<div className={'des'}>
<img className="qrcode"
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=''/>
src={limitFreePopup.wechat_img} alt=''/>
<span>长按/扫码识别</span>
<span>添加时请备注<span>142</span>哦</span>
<span>添加时请备注<span>{course.course_id}</span>哦</span>
<div className="no-prompt">
<label htmlFor="no-prompt">
<span className={`checkbox-label ${this.state.limitFreeNoPromptChecked ? 'checked' : 'unchecked'}`}>
......@@ -900,7 +951,7 @@ class Video extends Component {
this.setState({
showLimitFreePopup: false
})
localStorage.setItem('neverShowLimitFreePopup', '1')
this.checkNeverShowLimitFreePopup()
}}/>
</div>
</div>
......
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