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";
import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast'
import CourseBase from '@/common/course-base'
import { switchTab } from "@components/study/myCourses/actions"
// const animateTypes = Swiper.animateTypes
......@@ -283,35 +284,31 @@ function CourseList({modules, toDetail}) {
</div>
)
const bottom = (
/*const bottom = (
<div>
{item.is_buy
? <a className="isbuy">已购买</a>
: item.is_limit_free
? <Link to={`/detail?id=${item.course_id}`}>
<p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{item.price}</span>
</p>
</Link>
{
item.is_limit_free
? <LimitFree course={item}/>
: item.is_buy
? <a className="isbuy">已购买</a>
: <p className="course-price">
<span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span>
</p>
}
</div>
)
)*/
const status = item.is_limit_free ? null : (
<div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{item.is_groupon &&
<p className='course-status'>拼团价{item.groupon_price}元</p>
}
</div>
)
const bottom = <Bottom course={item}/>
const status = item.is_limit_free ? null : <div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{item.is_groupon &&
<p className='course-status'>拼团价{item.groupon_price}元</p>
}
</div>
return (
<Course
key={index}
......@@ -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) {
return (
......
src/components/Index/index.scss
......@@ -364,17 +364,15 @@
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
color: $active;
font-size: 15px;
text-align: center;
line-height: 18px;
font-family: PingFang SC;
font-weight: 400;
}
.free{
.free {
color: $red;
font-size: 15px;
}
......@@ -809,10 +807,12 @@
.bottom {
margin-top: 5px;
span{
span {
margin-right: 5px;
}
span:nth-child(3){
span:nth-child(3) {
margin-right: 0;
}
}
......
src/components/detail/btnstatus/index.js
......@@ -11,562 +11,565 @@ import BargainConfirmBind from './../bindPhone/confirm';
import Mask from '@/common/Mask/index';
class BtnStatus extends Component {
constructor(props) {
super(props)
this.state = {
isbuy: 1,
is_baoming: 0,
group_status: 3,
in_cart: false,
countdown: 0,
barInfo: {},
bindPhone: false,
bindConfrm: false,
bindInfo: {}, // 冲突信息
formInfo: {},
}
constructor(props) {
super(props)
this.state = {
isbuy: 1,
is_baoming: 0,
group_status: 3,
in_cart: false,
countdown: 0,
barInfo: {},
bindPhone: false,
bindConfrm: false,
bindInfo: {}, // 冲突信息
formInfo: {},
}
componentDidMount() {
// this.getBargainInfo()
this.group = false;
}
componentDidMount() {
// 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();
}
// 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()
// }
// }
// if(nextProps.data && nextProps.data.is_bargain) {
// this.getBargainInfo()
// }
componentWillReceiveProps(nextProps) {
const { data = {}, user = {}} = nextProps;
if(data.is_bargain && user.data && user.data.uid) {
this.getBargainInfo();
this.setState({
courseInfo: data,
countdown: nextProps.countdown,
});
}
// // 加入购物车 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;
// 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);
}
})
}
};
// 普通课程的立即报名 要模拟结算过程
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')
};
// 普通课程的立即报名 要模拟结算过程
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 {
if (barInfo.bargain_status === 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')
Toast.info(res.data.msg, 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 = () => {
};
// 格式化开课时间
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({
isShowOverlay: false,
bargainStatus: '',
isShowOverlay: true,
bargainStatus: 1,
})
}
}
};
// 一键开团
keyToGroup = () => {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
return;
}
// 砍价接口
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')
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 {
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 {
Toast.info(msg, 2)
}
})
Toast.info(res.data.msg, 2);
}
})
}
};
// 开始学习
toStudy=(vCourseId,isHaveVideo)=>{
const { history } = this.props;
if(isHaveVideo == 0){
Toast.info('尚未开课，开课后立即上传课程～', 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 = () => {
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 {
history.push(`/play/video?id=${vCourseId}`)
Toast.info(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)
}
})
}
// 开始学习
toStudy = (vCourseId, isHaveVideo) => {
const {history} = this.props;
if (isHaveVideo == 0) {
Toast.info('尚未开课，开课后立即上传课程～', 2)
} else {
history.push(`/play/video?id=${vCourseId}`)
}
}
//获取砍价信息
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) => {
this.setState({
[key]: false
});
}
}
<span className='btn btn-s bg-FD7700' onClick={e => this.simpleCourse()}>立即报名</span>
</div>
}
// 绑定手机号 -- 确认
confirmBindPhone = (params, bindInfo) => {
this.setState({
bindPhone: false,
bindConfrm: true,
formInfo: params,
bindInfo
});
}
{/* 定金课程 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>
}
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>
}
<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'>
{/*已购买*/}
{
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>{`¥ ${info.pdd_group_info.price}`}</span>
<span>一键开团</span>
</span>
</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>
}
{/*砍价*/}
{
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>
}
</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>
}
{/*砍价*/}
{
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) {
return (
<div className='cancel-bargain'>
<p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
<p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p>
<div className="btns">
<button onClick={props.close}>取消</button>
<button onClick={props.cancel}>确定</button>
</div>
</div>
)
return (
<div className='cancel-bargain'>
<p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
<p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p>
<div className="btns">
<button onClick={props.close}>取消</button>
<button onClick={props.cancel}>确定</button>
</div>
</div>
)
}
export default connect(
state => ({
user: state.user
}),
{getCourses}
state => ({
user: state.user
}),
{getCourses}
)(BtnStatus)
src/components/detail/index.js
......@@ -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加入购物车并跳转到购物车页面去支付
toCart = (type) => {
const {history, addCourseToCart} = this.props;
......@@ -619,7 +596,7 @@ class Detail extends Component {
</div>
}
{
course_info.is_limit_free
course_info.is_baoming === 0 && course_info.is_limit_free
?
course_info.limit_free_status == 0
? <div className="limit-free">
......@@ -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 &&
<div className='group'>
请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}
请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}
</div>
}
......
src/components/limit-free/index.js
......@@ -130,11 +130,11 @@ class LimitFree extends Component {
<div className="prev-cover"></div>
<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 (
<li key={index} className={index === tabActiveIndex ? 'active' : ''} style={navItemStyle}
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>
)
})
......@@ -146,18 +146,18 @@ class LimitFree extends Component {
<div className="course-list">
<ul>
{
tab && !!Object.keys(tab).length && Object.keys(tab).map(key => {
tab && !!tab.length && tab.map(category => {
return (
<li key={key} className={'category'}>
<h2 id={`category${key}`}>
<li key={category.id} className={'category'}>
<h2 id={`category${category.id}`}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
alt=""/>
<span>{tab[key]}</span>
<span>{category.category_name}</span>
</h2>
<ul className={'courses'}>
{
courses && courses.length && courses.map((item, index) => {
if (item.category_id != key) {
if (item.category_id != category.id) {
return null
}
/*
......@@ -188,8 +188,7 @@ class LimitFree extends Component {
<span>{d}天{h}时{m}分后过期</span>
</div>
bottom = <div className={'bottom'}>
<span className={'red'}>限时免费</span>
<span className={'origin-price'}>¥{item.price0}</span>
<span>已领取</span>
<StudyButton id={item.course_id}/>
</div>
break
......
src/components/limit-free/index.scss
......@@ -51,14 +51,18 @@
&::-webkit-scrollbar {
display: none;
}
& li:nth-last-child(1){
margin-right: 0;
}
}
li {
width: 20%;
text-align: center;
height: 100%;
line-height: 39px;
flex-shrink: 0;
margin-right: 23px;
&.active {
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