限时免费

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/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;