Skip to content

M
mr-julyedu
Commit 2fb04c06 by zhanghaozhe
Options

限时免费

parent 29103307
Showing with 603 additions and 584 deletions
src/components/Index/index.js
...@@ -13,6 +13,7 @@ import { connect } from "react-redux"; ...@@ -13,6 +13,7 @@ import { connect } from "react-redux";
import TopSwiper from './TopSwiper' import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast' import ExpandActiveToast from './expandActiveToast'
import CourseBase from '@/common/course-base' import CourseBase from '@/common/course-base'
import { switchTab } from "@components/study/myCourses/actions"
// const animateTypes = Swiper.animateTypes // const animateTypes = Swiper.animateTypes
...@@ -283,35 +284,31 @@ function CourseList({modules, toDetail}) { ...@@ -283,35 +284,31 @@ function CourseList({modules, toDetail}) {
</div> </div>
) )
const bottom = ( /*const bottom = (
<div> <div>
{item.is_buy {
? <a className="isbuy">已购买</a> item.is_limit_free
: item.is_limit_free ? <LimitFree course={item}/>
? <Link to={`/detail?id=${item.course_id}`}> : item.is_buy
<p className={'course-price'}> ? <a className="isbuy">已购买</a>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{item.price}</span>
</p>
</Link>
: <p className="course-price"> : <p className="course-price">
<span className="new">¥{item.discounts_price}</span> <span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span> <span className="old">¥{item.price}</span>
</p> </p>
} }
</div> </div>
) )*/
const status = item.is_limit_free ? null : ( const bottom = <Bottom course={item}/>
<div>
{item.is_bargain && const status = item.is_limit_free ? null : <div>
<p className='course-status'>砍价减{item.bargain_price}元</p> {item.is_bargain &&
} <p className='course-status'>砍价减{item.bargain_price}元</p>
{item.is_groupon && }
<p className='course-status'>拼团价{item.groupon_price}元</p> {item.is_groupon &&
} <p className='course-status'>拼团价{item.groupon_price}元</p>
</div> }
) </div>
return ( return (
<Course <Course
key={index} key={index}
...@@ -334,6 +331,45 @@ function CourseList({modules, toDetail}) { ...@@ -334,6 +331,45 @@ function CourseList({modules, toDetail}) {
) )
} }
//限时免费
function LimitFree({course}) {
/*
*
* limit_free_status: 0-未领取 1-已领取 2-已过期
*
* */
switch (course.limit_free_status) {
case 0:
return <Link to={`/detail?id=${course.course_id}`}>
<p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{course.price}</span>
</p>
</Link>
case 1:
return <div className={'isbuy'}>已领取</div>
default:
return <p className="course-price">
<span className="new">¥{course.discounts_price}</span>
<span className="old">¥{course.price}</span>
</p>
}
}
//课程底部
function Bottom({course}){
if(course.is_buy){
if(course.is_limit_free && course.limit_free_status === 1){
return <div class={'isbuy'}>已领取</div>
}else {
return <div className={'isbuy'}>已购买</div>
}
}else {
return <LimitFree course={course}/>
}
}
//近期直播 //近期直播
function ScrollBox(props) { function ScrollBox(props) {
return ( return (
......
src/components/Index/index.scss
...@@ -364,17 +364,15 @@ ...@@ -364,17 +364,15 @@
.isbuy { .isbuy {
display: inline-block; display: inline-block;
margin-top: 15px; margin-top: 15px;
width: 61px; color: $active;
height: 18px; font-size: 15px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center; text-align: center;
line-height: 18px; line-height: 18px;
font-family: PingFang SC;
font-weight: 400;
} }
.free{ .free {
color: $red; color: $red;
font-size: 15px; font-size: 15px;
} }
...@@ -809,10 +807,12 @@ ...@@ -809,10 +807,12 @@
.bottom { .bottom {
margin-top: 5px; margin-top: 5px;
span{
span {
margin-right: 5px; margin-right: 5px;
} }
span:nth-child(3){
span:nth-child(3) {
margin-right: 0; margin-right: 0;
} }
} }
......
src/components/detail/btnstatus/index.js
...@@ -11,562 +11,565 @@ import BargainConfirmBind from './../bindPhone/confirm'; ...@@ -11,562 +11,565 @@ import BargainConfirmBind from './../bindPhone/confirm';
import Mask from '@/common/Mask/index'; import Mask from '@/common/Mask/index';
class BtnStatus extends Component { class BtnStatus extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
isbuy: 1, isbuy: 1,
is_baoming: 0, is_baoming: 0,
group_status: 3, group_status: 3,
in_cart: false, in_cart: false,
countdown: 0, countdown: 0,
barInfo: {}, barInfo: {},
bindPhone: false, bindPhone: false,
bindConfrm: false, bindConfrm: false,
bindInfo: {}, // 冲突信息 bindInfo: {}, // 冲突信息
formInfo: {}, formInfo: {},
}
} }
}
componentDidMount() {
// this.getBargainInfo() componentDidMount() {
this.group = false; // this.getBargainInfo()
this.group = false;
}
// componentDidUpdate(prevProps) {
// let {courseInfo} = this.props
// let {courseInfo: prevCourseInfo} = prevProps
// if (courseInfo && courseInfo.is_bargain) {
// if (prevCourseInfo && courseInfo.is_bargain !== prevCourseInfo.is_bargain) {
// this.getBargainInfo()
// }
// }
// }
componentWillReceiveProps(nextProps) {
const {data = {}, user = {}} = nextProps;
if (data.is_bargain && user.data && user.data.uid) {
this.getBargainInfo();
} }
// if(nextProps.data && nextProps.data.is_bargain) {
// this.getBargainInfo()
// componentDidUpdate(prevProps) {
// let {courseInfo} = this.props
// let {courseInfo: prevCourseInfo} = prevProps
// if (courseInfo && courseInfo.is_bargain) {
// if (prevCourseInfo && courseInfo.is_bargain !== prevCourseInfo.is_bargain) {
// this.getBargainInfo()
// }
// }
// } // }
this.setState({
componentWillReceiveProps(nextProps) { courseInfo: data,
const { data = {}, user = {}} = nextProps; countdown: nextProps.countdown,
if(data.is_bargain && user.data && user.data.uid) { });
this.getBargainInfo(); }
// // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
// toCart = (type) => {
// const { history, addCourseToCart } = this.props;
// let data = {
// course_id: getParam('id')
// };
// http.post(`${API.home}/m/cart/add`, data).then((res) => {
// if (res.data.code === 200) {
// if (type === 1) {
// Toast.info('已加入购物车', 2)
// // this.props.getCourses()
// // document.location.reload()
// addCourseToCart();
// } else {
// history.replace('/shopcart');ß
// }
// } else if (res.data.code === 15001) {
// history.replace('/shopcart');
// } else if (res.data.code === 4030) {
// history.replace('/passport');
// } else {
// Toast.info(res.data.msg, 2);
// }
// })
// };
// 返现课程的立即购买
signUpNow = () => {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
} else {
let cidArr = JSON.stringify([Number(getParam('id'))]);
http.get(`${API['base-api']}/m/cart/addtopreorder/${cidArr}?type=1`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push("/order?id=" + res.data.data[0], {type: 1});
} else {
Toast.info(res.data.msg, 2);
} }
// if(nextProps.data && nextProps.data.is_bargain) { })
// this.getBargainInfo()
// }
this.setState({
courseInfo: data,
countdown: nextProps.countdown,
});
} }
};
// // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
// toCart = (type) => { // 普通课程的立即报名 要模拟结算过程
// const { history, addCourseToCart } = this.props; simpleCourse = () => {
// let data = { if (this.props.user.hasError) {
// course_id: getParam('id') // 未登录 去登陆
// }; this.props.history.push('/passport');
// http.post(`${API.home}/m/cart/add`, data).then((res) => { } else {
// if (res.data.code === 200) { http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
// if (type === 1) { if (res.data.errno === 0) {
// Toast.info('已加入购物车', 2) this.props.history.push(`/order?id=${getParam('id')}`, {simple: 1})
// // this.props.getCourses()
// // document.location.reload()
// addCourseToCart();
// } else {
// history.replace('/shopcart');ß
// }
// } else if (res.data.code === 15001) {
// history.replace('/shopcart');
// } else if (res.data.code === 4030) {
// history.replace('/passport');
// } else {
// Toast.info(res.data.msg, 2);
// }
// })
// };
// 返现课程的立即购买
signUpNow = () => {
if(this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
}else{
let cidArr = JSON.stringify([Number(getParam('id'))]);
http.get(`${API['base-api']}/m/cart/addtopreorder/${cidArr}?type=1`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push("/order?id=" + res.data.data[0], {type: 1});
} else {
Toast.info(res.data.msg, 2);
}
})
}
};
// 普通课程的立即报名 要模拟结算过程
simpleCourse = () => {
if(this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
}else{
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push(`/order?id=${getParam('id')}`, {simple: 1})
} else {
Toast.info(res.data.msg, 2);
}
})
}
};
// 格式化开课时间
formatDate = (date) => {
let ary = date.split('-');
return `${ary[1]}月${ary[2]}日开课`;
};
// 直接购买
tobuy = () => {
const {user} = this.props;
const {barInfo} = this.state;
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
} else { } else {
if (barInfo.bargain_status === 2) { Toast.info(res.data.msg, 2);
// this.toCart(2)
// 新需求 不需要加入购物车 直接走普通课程的立即报名流程 跳到订单页
this.simpleCourse();
} else {
// 取消砍价记录
this.setState({
isShowOverlay: true,
bargainStatus: 1,
})
}
}
};
// 一键开团
keyToGroup = () => {
if(this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
return;
}
this.props.history.push(`/order?id=${getParam('id')}`, {group: 1})
};
// 砍完价去支付
bargainToOrder = () => {
if(this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
}else{
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
} else {
Toast.info(res.data.msg, 2);
}
})
}
};
// 取消砍价
cancel = () => {
let data = {
courseId: getParam('id')
} }
http.post(`${API.home}/m/bargain/cancel`, data).then((res) => { })
if (res.data.code === 200) {
this.setState({
isShowOverlay: false,
bargainStatus: '',
})
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1});
} else {
Toast.info(res.data.msg, 2);
}
})
// window.location.href = '/shopcart'
// this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1})
} else {
Toast.info(res.data.msg, 2)
}
})
} }
};
close = () => {
// 格式化开课时间
formatDate = (date) => {
let ary = date.split('-');
return `${ary[1]}月${ary[2]}日开课`;
};
// 直接购买
tobuy = () => {
const {user} = this.props;
const {barInfo} = this.state;
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
} else {
if (barInfo.bargain_status === 2) {
// this.toCart(2)
// 新需求 不需要加入购物车 直接走普通课程的立即报名流程 跳到订单页
this.simpleCourse();
} else {
// 取消砍价记录
this.setState({ this.setState({
isShowOverlay: false, isShowOverlay: true,
bargainStatus: '', bargainStatus: 1,
}) })
}
}
};
// 一键开团
keyToGroup = () => {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
return;
} }
// 砍价接口 this.props.history.push(`/order?id=${getParam('id')}`, {group: 1})
toKanjia = () => { };
const {user, history} = this.props;
const uid = user && user.data && user.data.uid; // 砍完价去支付
const course_id = getParam('id'); bargainToOrder = () => {
if (!uid) { if (this.props.user.hasError) {
this.props.history.push('/passport/login') // 未登录 去登陆
this.props.history.push('/passport');
} else {
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
} else { } else {
let data = { Toast.info(res.data.msg, 2);
course_id,
type: 1, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: 0 // 被助力人id 【自己本人操作传0】
}
http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
const {data, code, msg} = res.data;
if (code === 200) {
// user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
if(data.user_status === 2) {
this.setState({
bindPhone: true
})
}else {
history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
}
} else {
Toast.info(msg, 2)
}
})
} }
})
} }
};
// 开始学习 // 取消砍价
toStudy=(vCourseId,isHaveVideo)=>{ cancel = () => {
const { history } = this.props; let data = {
if(isHaveVideo == 0){ courseId: getParam('id')
Toast.info('尚未开课，开课后立即上传课程～', 2) }
http.post(`${API.home}/m/bargain/cancel`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
isShowOverlay: false,
bargainStatus: '',
})
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1});
} else {
Toast.info(res.data.msg, 2);
}
})
// window.location.href = '/shopcart'
// this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1})
} else {
Toast.info(res.data.msg, 2)
}
})
}
close = () => {
this.setState({
isShowOverlay: false,
bargainStatus: '',
})
}
// 砍价接口
toKanjia = () => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
const course_id = getParam('id');
if (!uid) {
this.props.history.push('/passport/login')
} else {
let data = {
course_id,
type: 1, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: 0 // 被助力人id 【自己本人操作传0】
}
http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
const {data, code, msg} = res.data;
if (code === 200) {
// user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
if (data.user_status === 2) {
this.setState({
bindPhone: true
})
} else {
history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
}
} else { } else {
history.push(`/play/video?id=${vCourseId}`) Toast.info(msg, 2)
} }
})
} }
}
//获取砍价信息
getBargainInfo = () => { // 开始学习
const {user} = this.props toStudy = (vCourseId, isHaveVideo) => {
const uid = user && user.data && user.data.uid const {history} = this.props;
let data = { if (isHaveVideo == 0) {
courseId: getParam('id') Toast.info('尚未开课，开课后立即上传课程～', 2)
} } else {
http.post(`${API.home}/m/bargain/courseDetail`, data).then((res) => { history.push(`/play/video?id=${vCourseId}`)
if (res.data.code === 200) {
this.setState({
barInfo: res.data.data
})
} else {
Toast.info(res.data.msg, 2)
}
})
} }
}
//获取砍价信息
getBargainInfo = () => {
const {user} = this.props
const uid = user && user.data && user.data.uid
let data = {
courseId: getParam('id')
}
http.post(`${API.home}/m/bargain/courseDetail`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
barInfo: res.data.data
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 付定金 付尾款
expandPay = (info, type) => {
// type 等于1是定金 等于2是尾款
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
if (type == 1) {
this.props.history.push(
`/deposit-order?oid=${getParam('id')}&source=${1}`,
{
id: getParam('id'),
isexpand: 1,
sourcenum: 1
}
)
} else {
let timeStamp = Date.parse(new Date()) / 1000;
if (timeStamp >= info.start_timestamp) {
this.props.history.push(
'/final-deposit-order?source=1',
{
id: getParam('id'),
sourcenum: 1
// 付定金 付尾款
expandPay = (info,type)=>{
// type 等于1是定金 等于2是尾款
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
if(type == 1){
this.props.history.push(
`/deposit-order?oid=${getParam('id')}&source=${1}`,
{
id: getParam('id'),
isexpand: 1,
sourcenum: 1
}
)
} else {
let timeStamp = Date.parse(new Date()) / 1000;
if (timeStamp >= info.start_timestamp) {
this.props.history.push(
'/final-deposit-order?source=1',
{
id: getParam('id'),
sourcenum: 1
}
)
} else {
Toast.info("付尾款时间将在" + info.final_start_time + "开启",2);
}
} }
)
} else {
Toast.info("付尾款时间将在" + info.final_start_time + "开启", 2);
} }
}
} }
}
// 隐藏弹窗
handleToHide = (key) => {
this.setState({
[key]: false
});
}
// 绑定手机号 -- 确认
confirmBindPhone = (params, bindInfo) => {
this.setState({
bindPhone: false,
bindConfrm: true,
formInfo: params,
bindInfo
});
}
qimoChatClick = () => {
qimoChatClick()
}
render() {
// data 课程信息；barInfo 砍价信息
const {user = {}, toCart, country} = this.props;
const {
countdown,
barInfo,
courseInfo: info = {},
bindPhone,
bindConfrm,
bindInfo,
formInfo,
} = this.state;
const uid = user.data && user.data.uid;
return (
<div>
{/* 绑定手机号 */}
<Mask visible={bindPhone} handleToHide={() => this.handleToHide('bindPhone')}>
<BindPhone
country={country}
handleToBargain={this.toKanjia}
confirmBindPhone={this.confirmBindPhone}
/>
</Mask>
{/* 绑定手机号--确认 */}
<Mask visible={bindConfrm} handleToHide={() => this.handleToHide('bindConfrm')}>
<BargainConfirmBind
data={formInfo}
bindInfo={bindInfo}
handleToHide={() => this.handleToHide('bindConfrm')}
handleToBargain={this.toKanjia}
/>
</Mask>
{/*正常购买*/}
{
info.is_baoming === 0 && info.group_status !== 3 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
{
info.in_cart &&
<Link to='/shopcart' className='btn btn-s bg-FCCD05'>去购物车结算</Link>
}
{
!info.in_cart &&
<button className='btn btn-s bg-FCCD05' onClick={e => toCart(1)}>加入购物车</button>
// 隐藏弹窗 }
handleToHide = (key) => { <span className='btn btn-s bg-FD7700' onClick={e => this.simpleCourse()}>立即报名</span>
this.setState({ </div>
[key]: false }
});
}
// 绑定手机号 -- 确认 {/* 定金课程 is_deposit 是否定金课程 0-否 1-付定金 2-付尾款*/}
confirmBindPhone = (params, bindInfo) => { {
this.setState({ info.is_baoming === 0 && info.is_deposit != 0 &&
bindPhone: false, <div className='btns-box'>
bindConfrm: true, <a className='consult consult-m' onClick={() => this.qimoChatClick()}>
formInfo: params, <i className='iconfont iconerji'/>
bindInfo <span>课程咨询</span>
}); </a>
} <div className='btn btn-m bg-FD7700' onClick={() => this.expandPay(info.deposit_info, info.is_deposit)}>
{info.is_deposit == 1 ? '立即付定金' : '立即付尾款'}
</div>
</div>
}
qimoChatClick=()=>{ {/*已购买*/}
qimoChatClick() {
} info.is_baoming === 1 &&
render() { <div className='btns-box'>
// data 课程信息；barInfo 砍价信息 <a className='consult consult-m' onClick={() => this.qimoChatClick()}>
const { user = {}, toCart, country } = this.props; <i className='iconfont iconerji'/>
const { <span>课程咨询</span>
countdown, </a>
barInfo, <a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id, info.is_have_video)}>
courseInfo: info = {}, 开始学习
bindPhone, </a>
bindConfrm, </div>
bindInfo, }
formInfo, {/*拼团 未开团*/}
} = this.state; {
const uid = user.data && user.data.uid; info.is_baoming === 0 && info.group_status === 3 &&
return ( <div className='btns-box'>
<div> <a className='consult consult-s' onClick={() => this.qimoChatClick()}>
{/* 绑定手机号 */} <i className='iconfont iconerji'></i>
<Mask visible={bindPhone} handleToHide={() => this.handleToHide('bindPhone')}> <span>课程咨询</span>
<BindPhone </a>
country={country} <button className='btn btn-s bg-F4AAA7' onClick={this.simpleCourse}>
handleToBargain={this.toKanjia} <span>{`¥ ${info.price1}`}</span>
confirmBindPhone={this.confirmBindPhone} <span>直接购买</span>
/> </button>
</Mask> <button className='btn btn-s bg-E02E24'>
{/* 绑定手机号--确认 */}
<Mask visible={bindConfrm} handleToHide={() => this.handleToHide('bindConfrm')}>
<BargainConfirmBind
data={formInfo}
bindInfo={bindInfo}
handleToHide={() => this.handleToHide('bindConfrm')}
handleToBargain={this.toKanjia}
/>
</Mask>
{/*正常购买*/}
{
info.is_baoming === 0 && info.group_status !== 3 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
{
info.in_cart &&
<Link to='/shopcart' className='btn btn-s bg-FCCD05'>去购物车结算</Link>
}
{
!info.in_cart &&
<button className='btn btn-s bg-FCCD05' onClick={e => toCart(1)}>加入购物车</button>
}
<span className='btn btn-s bg-FD7700' onClick={e => this.simpleCourse()}>立即报名</span>
</div>
}
{/* 定金课程 is_deposit 是否定金课程 0-否 1-付定金 2-付尾款*/}
{
info.is_baoming === 0 && info.is_deposit != 0 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji' />
<span>课程咨询</span>
</a>
<div className='btn btn-m bg-FD7700' onClick={()=>this.expandPay(info.deposit_info,info.is_deposit)}>
{info.is_deposit == 1 ? '立即付定金':'立即付尾款'}
</div>
</div>
}
{/*已购买*/}
{
info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji' />
<span>课程咨询</span>
</a>
<a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id,info.is_have_video)}>
开始学习
</a>
</div>
}
{/*拼团 未开团*/}
{
info.is_baoming === 0 && info.group_status === 3 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7' onClick={this.simpleCourse}>
<span>{`¥ ${info.price1}`}</span>
<span>直接购买</span>
</button>
<button className='btn btn-s bg-E02E24'>
<span onClick={this.keyToGroup}> <span onClick={this.keyToGroup}>
<span>{`¥ ${info.pdd_group_info.price}`}</span> <span>{`¥ ${info.pdd_group_info.price}`}</span>
<span>一键开团</span> <span>一键开团</span>
</span> </span>
</button> </button>
</div> </div>
}
{/*拼团 已开团*/}
{
info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
邀请好友参团 {countdown} 后结束
</div>
</div>
}
{/*砍价*/}
{
info.is_baoming === 0 && this.props.data && this.props.data.is_bargain &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥{info.price1}</span>
<span onClick={this.tobuy}>直接购买</span>
</button>
{
(barInfo.bargain_status === 2|| (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
<button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
我要砍价
</button>
}
{
(barInfo.bargain_status === 0 || barInfo.bargain_status === 1) && (uid) &&
<button className='btn btn-s bg-E02E24'>
<span>¥{barInfo.amount}</span>
<span onClick={this.bargainToOrder}>去支付</span>
</button>
}
</div>
}
{/*特殊课程*/}
{
this.state.isbuy === 20 &&
<div className='btns-box'>
<a className='consult-l' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
</div>
}
{/*特训营课程 未登录 未报名*/}
{
(info.is_aist && (this.props.user.hasError || info.is_baoming === 0)) &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn sign-up-now' onClick={e => this.signUpNow()}>
<span>立即报名</span>
</button>
</div>
}
{/*特训营课程 登陆且已报名*/}
{
info.is_aist && !this.props.user.hasError && info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
{
info.aist_start_time === "" ?
(
<a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id,info.is_have_video)}>开始学习</a>
) : (
<button className='btn btn-m wait-open' >
<span>{this.formatDate(info.aist_start_time)}</span>
</button>
)
}
</div>
}
{
this.state.isShowOverlay &&
<Overlay>
{/*引导关注公众号*/}
{
this.state.bargainStatus === 1 &&
<CancelBargain close={this.close} cancel={this.cancel}/>
}
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
</Overlay>
}
{
/*
*
* limit_free_status: 0 未领取 1已领取未过期 2已过期
* */
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={() => {
const {history, user, getCourse} = this.props
if(user.hasError){
history.push('/passport')
}else {
getCourse(info.course_id, info.v_course_id)
}
}}>立即领取</button>
</div>
}
}
{/*拼团 已开团*/}
{
info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
邀请好友参团 {countdown} 后结束
</div> </div>
) </div>
} }
{/*砍价*/}
{
info.is_baoming === 0 && this.props.data && this.props.data.is_bargain &&
<div className='btns-box'>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥{info.price1}</span>
<span onClick={this.tobuy}>直接购买</span>
</button>
{
(barInfo.bargain_status === 2 || (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
<button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
我要砍价
</button>
}
{
(barInfo.bargain_status === 0 || barInfo.bargain_status === 1) && (uid) &&
<button className='btn btn-s bg-E02E24'>
<span>¥{barInfo.amount}</span>
<span onClick={this.bargainToOrder}>去支付</span>
</button>
}
</div>
}
{/*特殊课程*/}
{
this.state.isbuy === 20 &&
<div className='btns-box'>
<a className='consult-l' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
</div>
}
{/*特训营课程 未登录 未报名*/}
{
(info.is_aist && (this.props.user.hasError || info.is_baoming === 0)) &&
<div className='btns-box'>
<a className='consult consult-m' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn sign-up-now' onClick={e => this.signUpNow()}>
<span>立即报名</span>
</button>
</div>
}
{/*特训营课程 登陆且已报名*/}
{
info.is_aist && !this.props.user.hasError && info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
{
info.aist_start_time === "" ?
(
<a className='btn btn-m bg-09f'
onClick={() => this.toStudy(info.v_course_id, info.is_have_video)}>开始学习</a>
) : (
<button className='btn btn-m wait-open'>
<span>{this.formatDate(info.aist_start_time)}</span>
</button>
)
}
</div>
}
{
this.state.isShowOverlay &&
<Overlay>
{/*引导关注公众号*/}
{
this.state.bargainStatus === 1 &&
<CancelBargain close={this.close} cancel={this.cancel}/>
}
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
</Overlay>
}
{
/*
*
* limit_free_status: 0 未领取 1已领取未过期 2已过期
* */
info.is_baoming === 0 && 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={() => {
const {history, user, getCourse} = this.props
if (user.hasError) {
history.push('/passport')
} else {
getCourse(info.course_id, info.v_course_id)
}
}}>立即领取
</button>
</div>
}
</div>
)
}
} }
function CancelBargain(props) { function CancelBargain(props) {
return ( return (
<div className='cancel-bargain'> <div className='cancel-bargain'>
<p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p> <p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
<p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p> <p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p>
<div className="btns"> <div className="btns">
<button onClick={props.close}>取消</button> <button onClick={props.close}>取消</button>
<button onClick={props.cancel}>确定</button> <button onClick={props.cancel}>确定</button>
</div> </div>
</div> </div>
) )
} }
export default connect( export default connect(
state => ({ state => ({
user: state.user user: state.user
}), }),
{getCourses} {getCourses}
)(BtnStatus) )(BtnStatus)
src/components/detail/index.js
...@@ -413,29 +413,6 @@ class Detail extends Component { ...@@ -413,29 +413,6 @@ class Detail extends Component {
} }
} }
// componentWillReceiveProps(nextProps) {
// let _this = this;
// if (nextProps.courseInfo.course_info) {
// let courseInfo = nextProps.courseInfo.course_info;
// if (courseInfo.group_status === 3 || courseInfo.group_status === 4) {
// let endTime = courseInfo.pdd_group_info.groupon_member.end_time;
// let date = endTime * 1000,
// hours = 0,
// minutes = 0,
// seconds = 0;
// setInterval(() => {
// date -= 1000
// hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
// minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
// seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);
// _this.setState({
// countdown: `${hours}:${minutes}:${seconds}`
// });
// }, 1000)
// }
// }
// }
// 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付 // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
toCart = (type) => { toCart = (type) => {
const {history, addCourseToCart} = this.props; const {history, addCourseToCart} = this.props;
...@@ -619,7 +596,7 @@ class Detail extends Component { ...@@ -619,7 +596,7 @@ class Detail extends Component {
</div> </div>
} }
{ {
course_info.is_limit_free course_info.is_baoming === 0 && course_info.is_limit_free
? ?
course_info.limit_free_status == 0 course_info.limit_free_status == 0
? <div className="limit-free"> ? <div className="limit-free">
...@@ -659,7 +636,7 @@ class Detail extends Component { ...@@ -659,7 +636,7 @@ class Detail extends Component {
{ {
!(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 && !(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'> <div className='group'>
请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid} 请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}
</div> </div>
} }
......
src/components/limit-free/index.js
...@@ -130,11 +130,11 @@ class LimitFree extends Component { ...@@ -130,11 +130,11 @@ class LimitFree extends Component {
<div className="prev-cover"></div> <div className="prev-cover"></div>
<ul ref={el => this.nav = el}> <ul ref={el => this.nav = el}>
{ {
tab && !!Object.keys(tab).length && Object.keys(tab).map((item, index) => { tab && !!tab.length && tab.map((item, index) => {
return ( return (
<li key={index} className={index === tabActiveIndex ? 'active' : ''} style={navItemStyle} <li key={index} className={index === tabActiveIndex ? 'active' : ''} style={navItemStyle}
onClick={e => this.changeTab(e, index)}> onClick={e => this.changeTab(e, index)}>
<a href={`#category${item}`} target={'_self'}>{tab[item]}</a> <a href={`#category${item.id}`} target={'_self'}>{item.category_name}</a>
</li> </li>
) )
}) })
...@@ -146,18 +146,18 @@ class LimitFree extends Component { ...@@ -146,18 +146,18 @@ class LimitFree extends Component {
<div className="course-list"> <div className="course-list">
<ul> <ul>
{ {
tab && !!Object.keys(tab).length && Object.keys(tab).map(key => { tab && !!tab.length && tab.map(category => {
return ( return (
<li key={key} className={'category'}> <li key={category.id} className={'category'}>
<h2 id={`category${key}`}> <h2 id={`category${category.id}`}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png" <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
alt=""/> alt=""/>
<span>{tab[key]}</span> <span>{category.category_name}</span>
</h2> </h2>
<ul className={'courses'}> <ul className={'courses'}>
{ {
courses && courses.length && courses.map((item, index) => { courses && courses.length && courses.map((item, index) => {
if (item.category_id != key) { if (item.category_id != category.id) {
return null return null
} }
/* /*
...@@ -188,8 +188,7 @@ class LimitFree extends Component { ...@@ -188,8 +188,7 @@ class LimitFree extends Component {
<span>{d}天{h}时{m}分后过期</span> <span>{d}天{h}时{m}分后过期</span>
</div> </div>
bottom = <div className={'bottom'}> bottom = <div className={'bottom'}>
<span className={'red'}>限时免费</span> <span>已领取</span>
<span className={'origin-price'}>¥{item.price0}</span>
<StudyButton id={item.course_id}/> <StudyButton id={item.course_id}/>
</div> </div>
break break
......
src/components/limit-free/index.scss
...@@ -51,14 +51,18 @@ ...@@ -51,14 +51,18 @@
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
& li:nth-last-child(1){
margin-right: 0;
}
} }
li { li {
width: 20%;
text-align: center; text-align: center;
height: 100%; height: 100%;
line-height: 39px; line-height: 39px;
flex-shrink: 0; flex-shrink: 0;
margin-right: 23px;
&.active { &.active {
color: #09f; color: #09f;
......
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