Skip to content

M
mr-julyedu
Commit 2fb04c06 by zhanghaozhe
Options

限时免费

parent 29103307
Showing with 116 additions and 97 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,27 +284,24 @@ function CourseList({modules, toDetail}) {
</div>
)
const bottom = (
/*const bottom = (
<div>
{item.is_buy
{
item.is_limit_free
? <LimitFree course={item}/>
: 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>
: <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>
const bottom = <Bottom course={item}/>
const status = item.is_limit_free ? null : <div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
......@@ -311,7 +309,6 @@ function CourseList({modules, toDetail}) {
<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
......@@ -44,8 +44,8 @@ class BtnStatus extends Component {
// }
componentWillReceiveProps(nextProps) {
const { data = {}, user = {}} = nextProps;
if(data.is_bargain && user.data && user.data.uid) {
const {data = {}, user = {}} = nextProps;
if (data.is_bargain && user.data && user.data.uid) {
this.getBargainInfo();
}
// if(nextProps.data && nextProps.data.is_bargain) {
......@@ -85,10 +85,10 @@ class BtnStatus extends Component {
// 返现课程的立即购买
signUpNow = () => {
if(this.props.user.hasError) {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
}else{
} 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) {
......@@ -102,10 +102,10 @@ class BtnStatus extends Component {
// 普通课程的立即报名 要模拟结算过程
simpleCourse = () => {
if(this.props.user.hasError) {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
}else{
} 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})
......@@ -146,7 +146,7 @@ class BtnStatus extends Component {
// 一键开团
keyToGroup = () => {
if(this.props.user.hasError) {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
return;
......@@ -156,10 +156,10 @@ class BtnStatus extends Component {
// 砍完价去支付
bargainToOrder = () => {
if(this.props.user.hasError) {
if (this.props.user.hasError) {
// 未登录 去登陆
this.props.history.push('/passport');
}else{
} 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});
......@@ -219,11 +219,11 @@ class BtnStatus extends Component {
const {data, code, msg} = res.data;
if (code === 200) {
// user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
if(data.user_status === 2) {
if (data.user_status === 2) {
this.setState({
bindPhone: true
})
}else {
} else {
history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
}
} else {
......@@ -234,9 +234,9 @@ class BtnStatus extends Component {
}
// 开始学习
toStudy=(vCourseId,isHaveVideo)=>{
const { history } = this.props;
if(isHaveVideo == 0){
toStudy = (vCourseId, isHaveVideo) => {
const {history} = this.props;
if (isHaveVideo == 0) {
Toast.info('尚未开课，开课后立即上传课程～', 2)
} else {
history.push(`/play/video?id=${vCourseId}`)
......@@ -262,14 +262,14 @@ class BtnStatus extends Component {
}
// 付定金 付尾款
expandPay = (info,type)=>{
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){
if (type == 1) {
this.props.history.push(
`/deposit-order?oid=${getParam('id')}&source=${1}`,
{
......@@ -290,7 +290,7 @@ class BtnStatus extends Component {
}
)
} else {
Toast.info("付尾款时间将在" + info.final_start_time + "开启",2);
Toast.info("付尾款时间将在" + info.final_start_time + "开启", 2);
}
}
}
......@@ -313,12 +313,13 @@ class BtnStatus extends Component {
});
}
qimoChatClick=()=>{
qimoChatClick = () => {
qimoChatClick()
}
render() {
// data 课程信息；barInfo 砍价信息
const { user = {}, toCart, country } = this.props;
const {user = {}, toCart, country} = this.props;
const {
countdown,
barInfo,
......@@ -354,7 +355,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.group_status !== 3 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -375,12 +376,12 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.is_deposit != 0 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji' />
<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 className='btn btn-m bg-FD7700' onClick={() => this.expandPay(info.deposit_info, info.is_deposit)}>
{info.is_deposit == 1 ? '立即付定金' : '立即付尾款'}
</div>
</div>
}
......@@ -389,11 +390,11 @@ class BtnStatus extends Component {
{
info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji' />
<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 className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id, info.is_have_video)}>
开始学习
</a>
</div>
......@@ -402,7 +403,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.group_status === 3 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -423,7 +424,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -437,7 +438,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && this.props.data && this.props.data.is_bargain &&
<div className='btns-box'>
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<a className='consult consult-s' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -446,7 +447,7 @@ class BtnStatus extends Component {
<span onClick={this.tobuy}>直接购买</span>
</button>
{
(barInfo.bargain_status === 2|| (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
(barInfo.bargain_status === 2 || (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
<button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
我要砍价
</button>
......@@ -465,7 +466,7 @@ class BtnStatus extends Component {
{
this.state.isbuy === 20 &&
<div className='btns-box'>
<a className='consult-l' onClick={()=>this.qimoChatClick()}>
<a className='consult-l' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -476,7 +477,7 @@ class BtnStatus extends Component {
{
(info.is_aist && (this.props.user.hasError || info.is_baoming === 0)) &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<a className='consult consult-m' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -490,7 +491,7 @@ class BtnStatus extends Component {
{
info.is_aist && !this.props.user.hasError && info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<a className='consult consult-m' onClick={() => this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -498,9 +499,10 @@ class BtnStatus extends Component {
{
info.aist_start_time === "" ?
(
<a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id,info.is_have_video)}>开始学习</a>
<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' >
<button className='btn btn-m wait-open'>
<span>{this.formatDate(info.aist_start_time)}</span>
</button>
)
......@@ -528,20 +530,21 @@ class BtnStatus extends Component {
*
* 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()}>
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){
if (user.hasError) {
history.push('/passport')
}else {
} else {
getCourse(info.course_id, info.v_course_id)
}
}}>立即领取</button>
}}>立即领取
</button>
</div>
}
......
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">
......
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