index.js

import React, { Component } from 'react'
import { http } from "@/utils"
import './index.scss'
import { HeaderBar } from "@common/index"
import { WhiteSpace } from "antd-mobile";
import VList from '@/common/v-list-base'


class LimitFree extends Component {

  state = {
    tabs: new Array(5).fill('a').map((item, i) => ({
      title: String.fromCharCode(97 + i)
    })),
    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,
      },
    ]
  }

  componentDidMount() {

  }

  handleClick = id => {

  }

  render() {
    const {tabs, courses} = 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>
          <ul>
            <li></li>
          </ul>
        </nav>
        <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:

                    }

                    const info = (
                      <div className='info'>
                        <div className='title'>{item.title}</div>
                        {des}
                        {bottom}
                      </div>
                    )
                    return (
                      <VList img={item.img}
                             handleClick={this.handleClick}
                             info={info}
                      />
                    )
                  })
                }
              </ul>
            </li>
          </ul>
        </div>
        <div className="no-more">
          -没有更多了-
        </div>
      </div>
    );
  }
}

export default LimitFree