限时免费

src/components/limit-free/index.js

@@ -2,17 +2,30 @@ import React, { Component } from 'react'
 import { http } from "@/utils"
 import './index.scss'
 import { HeaderBar } from "@common/index"
-import { WhiteSpace } from "antd-mobile";
+import { WhiteSpace, Toast } from "antd-mobile";
 import VList from '@/common/v-list-base'
+import WithFullSize from "@/HOCs/WithFullSize"
 
+function showToast(msg) {
+  Toast.info(msg, 2, null, false)
+}
 
 class LimitFree extends Component {
 
   nav
   state = {
-    tabs: new Array(10).fill('a').map((item, i) => ({
-      title: `${i + 1}th Tab`
-    })),
+    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',
@@ -39,44 +52,68 @@ class LimitFree extends Component {
         price1: 199,
       },
     ],
-    navItemStyle: {}
+    navItemStyle: {},
+    tabActiveIndex: 0
   }
 
   componentDidMount() {
-    this.initializeNav()
+    this.getData()
+  }
+
+  getData = () => {
+    Promise.all([http.get(`${API.home}/sys/category`), http.get(`${API.home}/sys/course`)])
+      .then(res => {
+        const [tab, courses] = res
+        const {data: tabData, code: tabCode, msg: tabMsg} = tab.data
+        const {data: coursesData, code: coursesCode, msg: coursesMsg} = courses.data
+        if (tabCode == 200) {
+          this.setState({
+            tab: tabData
+          })
+        } else {
+          showToast(tabMsg)
+        }
+        if (coursesCode === 200) {
+          this.setState({
+            courses: coursesData
+          })
+        } else {
+          showToast(coursesMsg)
+        }
+      })
   }
 
   handleClick = id => {
 
   }
 
-  initializeNav = () => {
-    const {tabs} = this.state
-    const navItemNum = 5
-    const navItemLen = tabs.length
-    console.log(getComputedStyle(this.nav).paddingLeft)
-    if(navItemLen <= navItemNum){
-      return
+  changeTab = (e, index) => {
+    const {tabActiveIndex} = this.state
+    if (tabActiveIndex !== index) {
+      this.setState({
+          tabActiveIndex: index
+        }
+      )
     }
-
   }
 
   render() {
-    const {tabs, courses, navItemStyle} = this.state
+    const {tab, courses, navItemStyle, tabActiveIndex} = this.state
     return (
       <div className='limit-free'>
         <HeaderBar arrow={true} title={'限时免费'}></HeaderBar>
         <div className="banner">
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/banner.png" alt=""/>
         </div>
-        <nav ref={el => this.nav = el}>
+        <nav>
           <div className="prev-cover"></div>
-          <ul>
+          <ul ref={el => this.nav = el}>
             {
-              tabs && !!tabs.length && tabs.map((item, index) => {
+              tab && !!Object.keys(tab).length && Object.keys(tab).map((item, index) => {
                 return (
-                  <li key={index} className={index === 0 ? 'active' : ''} style={navItemStyle}>
-                    {item.title}
+                  <li key={index} className={index === tabActiveIndex ? 'active' : ''} style={navItemStyle}
+                      onClick={e => this.changeTab(e, index)}>
+                    <a href={`#category${item}`} target={'_self'}>{tab[item]}</a>
                   </li>
                 )
               })
@@ -87,56 +124,63 @@ class LimitFree extends Component {
         <WhiteSpace/>
         <div className="course-list">
           <ul>
-            <li>
-              <h2>
-                <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
-                     alt=""/>
-                <span>分类1</span>
-              </h2>
-              <ul className={'courses'}>
-                {
-                  courses && courses.length && courses.map((item, index) => {
-                    let des, bottom
-                    switch (item.status) {
-                      case 1:
-                        des = <div className={'learner'}>
-                          <i className='iconfont iconRectangleCopy4'/>
-                          <span>{item.count}人学习</span>
-                        </div>
-                        bottom = <div className={'bottom'}>
-                          <span className={'red'}>限时免费</span>
-                          <span className={'origin-price'}>¥{item.price1}</span>
-                          <button>免费领取</button>
-                        </div>
-                        break
-                      case 2:
-                        des = <div className={'remain-time'}>
-                          <i className={'iconfont iconiconfront-21'}/>
-                          <span>12天55时55分后过期</span>
-                        </div>
-                        break
-                      case 3:
+            {
+              tab && !!Object.keys(tab).length && Object.keys(tab).map(key => {
+                return (
+                  <li key={key}>
+                    <h2 id={`category${key}`}>
+                      <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
+                           alt=""/>
+                      <span>{tab[key]}</span>
+                    </h2>
+                    <ul className={'courses'}>
+                      {
+                        courses && courses.length && courses.map((item, index) => {
+                          let des, bottom
+                          switch (item.status) {
+                            case 1:
+                              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>
+                                <button>免费领取</button>
+                              </div>
+                              break
+                            case 2:
+                              des = <div className={'remain-time'}>
+                                <i className={'iconfont iconiconfront-21'}/>
+                                <span>12天55时55分后过期</span>
+                              </div>
+                              break
+                            case 3:
+
+                          }
 
-                    }
+                          const info = (
+                            <div className='info'>
+                              <div className='title'>{item.course_title}</div>
+                              {des}
+                              {bottom}
+                            </div>
+                          )
+                          return (
+                            <VList img={item.image_name}
+                                   handleClick={this.handleClick}
+                                   info={info}
+                                   key={index}
+                            />
+                          )
+                        })
+                      }
+                    </ul>
+                  </li>
 
-                    const info = (
-                      <div className='info'>
-                        <div className='title'>{item.title}</div>
-                        {des}
-                        {bottom}
-                      </div>
-                    )
-                    return (
-                      <VList img={item.img}
-                             handleClick={this.handleClick}
-                             info={info}
-                             key={index}
-                      />
-                    )
-                  })
-                }
-              </ul>
-            </li>
+                )
+              })
+            }
           </ul>
         </div>
         <div className="no-more">
@@ -147,4 +191,4 @@ class LimitFree extends Component {
   }
 }
 
-export default LimitFree
+export default WithFullSize(LimitFree)
\ No newline at end of file

src/components/limit-free/index.scss

 .limit-free {
   background: #F9F9FB;
+  min-height: 100%;
 
   .banner {
     font-size: 0;
@@ -10,18 +11,22 @@
   }
 
   nav {
-    position: relative;
+    position: sticky;
+    top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     height: 39px;
-    padding: 0 18px;
     background: #fff;
+    overflow: hidden;
+    z-index: 999;
 
     .prev-cover, .next-cover {
       position: absolute;
       top: 0;
       width: 44px;
       height: 39px;
+      pointer-events: none;
     }
 
     .prev-cover {
@@ -38,15 +43,22 @@
     ul {
       width: 100%;
       height: 100%;
+      padding: 0 18px;
       display: flex;
       align-items: center;
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
 
     li {
-      margin-right: 23px;
+      width: 20%;
       text-align: center;
       height: 100%;
       line-height: 39px;
+      flex-shrink: 0;
 
       &.active {
         color: #09f;
@@ -62,6 +74,10 @@
 
   }
 
+  .course-list li{
+    scroll-margin-top: 100px;
+  }
+
   .courses li:nth-last-child(1) {
     margin-bottom: 0;
   }