Skip to content

M
mr-julyedu
Commit 2fb04c06 by zhanghaozhe
Options

限时免费

parent 29103307
Showing with 72 additions and 56 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/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