限时免费

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;