限时免费

src/common/v-list-base/index.scss

 .v-list-base-item {
-    height: 130px;
+    //height: 130px;
     padding: 10px 10px 0;
     position: relative;
 

src/components/Index/index.js

@@ -149,11 +149,9 @@ class Index extends Component {
   }
 
   toCourseDetail = (id) => {
-    const {dispatch, history} = this.props;
-    // dispatch(getCourses(id, () => {
+    const {history} = this.props;
     history.push(`/detail?id=${id}`);
     return false;
-    // }));
   }
 
   handleLimitFreeClick = () => {
@@ -161,6 +159,7 @@ class Index extends Component {
   }
 
   render() {
+    //todo 联调
     const {limitFree} = this.state
     return (
       <div className='index-box'>

src/components/limit-free/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
\ No newline at end of file

src/components/limit-free/index.scss

+.limit-free {
+  background: #F9F9FB;
+
+  .banner {
+    img {
+      width: 100%;
+    }
+  }
+
+  .course-list {
+    border-top: 1px solid transparent;
+    padding: 0 12px;
+    background: #fff;
+
+  }
+
+  .courses li:nth-last-child(1){
+    margin-bottom: 0;
+  }
+
+  .v-list-base-item {
+    padding: 0;
+    margin-bottom: 18px;
+  }
+
+  h2 {
+    display: flex;
+    align-items: center;
+    margin: 18px 0;
+
+    img {
+      width: 12px;
+      height: 12px;
+      margin-right: 6px;
+    }
+
+    span {
+      font-size: 16px;
+      color: #333;
+    }
+  }
+
+  .iconfont {
+    font-size: 12px;
+    margin-right: 4px;
+  }
+
+  .info {
+    //position: relative;
+    //width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    font-size: 12px;
+    color: #999;
+
+    .red {
+      color: #FF2121;
+      font-size: 15px;
+
+    }
+
+    .origin-price {
+      color: #999;
+      font-size: 12px;
+      text-decoration: line-through;
+    }
+
+    button {
+      width: 68px;
+      height: 24px;
+      border-radius: 3px;
+      background: #09f;
+      border: none;
+      outline: 0;
+      font-size: 13px;
+      color: #fff;
+      line-height: 24px;
+    }
+
+    .bottom {
+      //position: absolute;
+      //left: 0;
+      //bottom: 0;
+      //width: 100%;
+      align-self: flex-end;
+    }
+  }
+
+  .no-more {
+    width: 375px;
+    height: 82px;
+    line-height: 82px;
+    background: #F7F9FC;
+    font-size: 14px;
+    color: #AAA;
+    text-align: center;
+  }
+}
\ No newline at end of file

src/components/purchased/index.js

-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import './index.scss';
-import {HeaderBar, VList} from '../../common'
-import { http } from "@/utils";
-import {Link} from 'react-router-dom'
-import {Toast} from 'antd-mobile'
-import {connect} from "react-redux"
-import {getCourses} from './../detail/actions';
+import { HeaderBar, VList } from '../../common'
+import { http, dateCountDown } from "@/utils";
+import { Link } from 'react-router-dom'
+import { Toast } from 'antd-mobile'
+import { connect } from "react-redux"
 import Loading from '@/common/Loading'
 
 class Purchased extends Component {
@@ -19,6 +18,7 @@ class Purchased extends Component {
 
   componentDidMount() {
     this.getList()
+    this.limitFreeCountDown()
   }
 
   // 获取订单
@@ -36,19 +36,25 @@ class Purchased extends Component {
   }
 
   toCourseDetail = (id) => {
-        const { dispatch, history } = this.props;
+    const {dispatch, history} = this.props;
     // dispatch(getCourses(id, () => {
     history.push(`/detail?id=${id}`)
     // }));
   }
 
+  limitFreeCountDown = timestamp => {
+    //todo 联调
+    const later = new Date(timestamp)
+    const earlier = Date.now()
+    return dateCountDown(later, earlier)
+  }
 
   render() {
     const {user} = this.props
     const uid = user && user.data && user.data.uid
     return (
       <div className='purchased-box'>
-                <HeaderBar arrow={true} title='已购课程' cart={false} toHref='/my' />
+        <HeaderBar arrow={true} title='已购课程' cart={false} toHref='/my'/>
         <Loading isLoading={this.state.isLoading}>
           {
             this.state.data && this.state.data.length > 0 ?
@@ -59,9 +65,7 @@ class Purchased extends Component {
                     const Info = (
                       <div className="info">
                         <p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
-                                                    {/* <Link to={`/detail?id=${item.course_id}`}> */}
                           {item.course_title}
-                                                    {/* </Link> */}
                         </p>
                         <p className='contact text-overflow-2'>{item.simpledescription}</p>
 
@@ -80,10 +84,11 @@ class Purchased extends Component {
                       </div>
                     )
                     const status = (
-                                            item.is_aist && <span className='status'>返现</span>
+                      // item.is_aist && <span className='status'>返现</span>
+                      <span className='limit-free-status'>{'*'}天{'*'}时{'*'}分后过期</span>
                     )
                     const courseExpire = (
-                                            item.course_expire && item.course_expire!='' &&
+                      item.course_expire && item.course_expire != '' &&
                       <span className='course-expire'>{item.course_expire}</span>
                     )
                     return (

src/components/purchased/index.scss

 html, body, #root {
-    height: 100%!important;
+  height: 100% !important;
 }
+
 .purchased-box {
   width: 100%;
   height: 100%;
@@ -110,17 +111,32 @@ html, body, #root {
     color: #fff;
     background: linear-gradient(to bottom, #FF4000, #FD7700);
   }
-    .course-expire{
+
+  .limit-free-status {
+    position: absolute;
+    right: 0;
+    top: 8px;
+    width: 112px;
+    height: 20px;
+    background: #FF0000;
+    border-radius: 10px 0 0 10px;
+    line-height: 20px;
+    color: #fff;
+    text-align: center;
+    font-size: 11px;
+  }
+
+  .course-expire {
     display: inline-block;
     text-align: center;
     position: absolute;
     bottom: 10px;
     left: 0;
-        width:92px;
-        height:20px;
+    width: 92px;
+    height: 20px;
     line-height: 21px;
     background-color: #FF3A3A;
-        border-radius:0 10px 10px 0;
+    border-radius: 0 10px 10px 0;
     color: #fff;
     font-size: 12px;
   }

src/router/router-config.js

@@ -299,4 +299,10 @@ export default [
     exact: true,
     component: loadable(() => import('@/components/college/courseList'))
   },
+  //限时免费落地页
+  {
+    path:'/free',
+    exact: true,
+    component: loadable(() => import(/*limit-free*/'@/components/limit-free'))
+  }
 ]

src/utils/index.js

 import jsCookie from "js-cookie";
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds
+} from 'date-fns'
 
 
 export const getParam = (key, str) => {
@@ -8,7 +14,9 @@ export const getParam = (key, str) => {
   return (found = re.exec(_s)) ? found[2] : null;
 }
 
-const html = content => ({__html: htmlDecode(content)})
+const html = content => ({
+  __html: htmlDecode(content)
+})
 
 const htmlDecode = content => {
   let e = document.createElement('div');
@@ -93,8 +101,38 @@ const isLogin = (function () {
   return jsCookie.get('uid') && jsCookie.get('token')
 })()
 
+const dateCountDown = (later, earlier) => {
+  const d = differenceInDays(later, earlier)
+  const h = differenceInHours(later, earlier) % 24
+  const m = differenceInMinutes(later, earlier) % 60
+  const s = differenceInSeconds(later, earlier) % 60
+  return {
+    d,
+    h,
+    m,
+    s
+  }
+}
+
 
-export {default as http} from './http'
-export {default as wxShare} from './wechat/share'
-export {html, initCaptcha, validateTel, validateEmail, browser, isLogin}
-export {default as SendMessageToApp} from './app'
+export {
+  default as http
+}
+  from './http'
+export {
+  default as wxShare
+}
+  from './wechat/share'
+export {
+  html,
+  initCaptcha,
+  validateTel,
+  validateEmail,
+  browser,
+  isLogin,
+  dateCountDown
+}
+export {
+  default as SendMessageToApp
+}
+  from './app'
\ No newline at end of file