限时免费

src/components/limit-free/index.js

@@ -14,44 +14,8 @@ class LimitFree extends Component {
 
   nav
   state = {
-    tab: {
-      0: 'tab0',
-      1: 'tab1',
-      2: 'tab2',
-      3: 'tab3',
-      4: 'tab4',
-      5: 'tab5',
-      6: 'tab6',
-      7: 'tab7',
-      8: 'tab8',
-      9: 'tab9',
-    },
-    courses: [
-      {
-        img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg',
-        title: 'NLP到Word2Vec实战班',
-        count: '1212',
-        status: 1,
-        price: 99,
-        price1: 199,
-      },
-      {
-        img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg',
-        title: 'NLP到Word2Vec实战班',
-        count: '1212',
-        status: 1,
-        price: 99,
-        price1: 199,
-      },
-      {
-        img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg',
-        title: 'NLP到Word2Vec实战班',
-        count: '1212',
-        status: 1,
-        price: 99,
-        price1: 199,
-      },
-    ],
+    tab: {},
+    courses: [],
     navItemStyle: {},
     tabActiveIndex: 0
   }
@@ -127,7 +91,7 @@ class LimitFree extends Component {
             {
               tab && !!Object.keys(tab).length && Object.keys(tab).map(key => {
                 return (
-                  <li key={key}>
+                  <li key={key} className={'category'}>
                     <h2 id={`category${key}`}>
                       <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
                            alt=""/>
@@ -136,16 +100,23 @@ class LimitFree extends Component {
                     <ul className={'courses'}>
                       {
                         courses && courses.length && courses.map((item, index) => {
+                          if(item.category_id != key){
+                            return null
+                          }
+                          /*
+                          * course_status:
+                          * 0未领取 1已领取未过期 2 已领取已过期 3 正常已购买
+                          * */
                           let des, bottom
-                          switch (item.status) {
-                            case 1:
+                          switch (item.course_status) {
+                            case 0:
                               des = <div className={'learner'}>
                                 <i className='iconfont iconRectangleCopy4'/>
                                 <span>{item.play_times}人学习</span>
                               </div>
                               bottom = <div className={'bottom'}>
                                 <span className={'red'}>限时免费</span>
-                                <span className={'origin-price'}>¥{item.price1}</span>
+                                <span className={'origin-price'}>¥{item.price0}</span>
                                 <button>免费领取</button>
                               </div>
                               break

src/components/limit-free/index.scss

@@ -69,17 +69,26 @@
 
   .course-list {
     border-top: 1px solid transparent;
-    padding: 0 12px;
-    background: #fff;
+  }
 
+
+  .category {
+    padding: 12px 12px 0;
+    background: #fff;
+    margin-bottom: 8px;
   }
 
-  .course-list li{
-    scroll-margin-top: 100px;
+
+  h2 {
+    scroll-margin-top: 45px;
   }
 
   .courses li:nth-last-child(1) {
     margin-bottom: 0;
+
+    & div {
+      border-bottom: none;
+    }
   }
 
   .v-list-base-item {