限时免费首页和落地页

src/components/Index/index.js

-import React, {Component} from 'react'
-import {Course, CallApp} from '../../common'
+import React, { Component } from 'react'
+import { Course, CallApp } from '../../common'
 import './index.scss'
-import {WithTab} from '@/HOCs'
+import { WithTab } from '@/HOCs'
 // import Swiper from 'react-mobile-swiper'
 // import createStyle from './createStyle'
 import LazyLoad from 'react-lazy-load'
-import {http} from '@/utils'
+import { http } from '@/utils'
 import LiveRoom from './liveRoom'
-import {Link} from "react-router-dom"
-import {Toast} from 'antd-mobile'
-import {connect} from "react-redux";
+import { Link } from "react-router-dom"
+import { Toast } from 'antd-mobile'
+import { connect } from "react-redux";
 import TopSwiper from './TopSwiper'
 import ExpandActiveToast from './expandActiveToast'
 import CourseBase from '@/common/course-base'
@@ -57,44 +57,6 @@ class Index extends Component {
           'href': 'https://ask.julyedu.com'
         }
       ],
-      limitFree: [
-        {
-          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
-          title: '集训营就业优秀学员面试分享',
-          status: 1,
-          count: 1000,
-          price: '1000',
-          price1: '1000',
-          id: 1,
-        },
-        {
-          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
-          title: '集训营就业优秀学员面试分享',
-          status: 2,
-          count: 1000,
-          price: '1000',
-          price1: '1000',
-          id: 15,
-        },
-        {
-          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
-          title: '集训营就业优秀学员面试分享',
-          status: 3,
-          count: 1000,
-          price: '1000',
-          price1: '1000',
-          id: 13,
-        },
-        {
-          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
-          title: '集训营就业优秀学员面试分享',
-          status: 1,
-          count: 1000,
-          price: '1000',
-          price1: '1000',
-          id: 2,
-        },
-      ]
     }
   }
 
@@ -154,13 +116,7 @@ class Index extends Component {
     return false;
   }
 
-  handleLimitFreeClick = () => {
-
-  }
-
   render() {
-    //todo 联调
-    const {limitFree} = this.state
     return (
       <div className='index-box'>
         <div className='header'>
@@ -222,19 +178,6 @@ class Index extends Component {
         }
 
         {
-          limitFree && limitFree.length &&
-          <div className="limit-free">
-            <h2 className="limit-free-title">
-              限时免费
-              <span className={'hot'}>hot</span>
-            </h2>
-            <LimitFree courses={limitFree}
-                       handleClick={this.handleLimitFreeClick}
-            />
-          </div>
-        }
-
-        {
           (this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
             return (
               <div key={index}>
@@ -271,45 +214,6 @@ class Index extends Component {
 
 }
 
-
-// function TopSwiper({bannerList}) {
-//     return (
-//         <Swiper
-//             type={animateTypes.CARD}
-//             loop={true}
-//             height={168}
-//             autoPlay={true}
-//             typePro
-//             createStyle={createStyle}
-//         >
-//             {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
-//                 return (
-//                     Number.isNaN(parseInt(item.jump_url)) ?
-//                         <a href={item.jump_url} key={index}>
-//                             {/* <Link to={item.jump_url} key={index}> */}
-//                             <img className="item" src={item.name} alt="" />
-//                             {/* </Link> */}
-//                         </a> :
-//                         <Link
-//                             to={{
-//                                 pathname: '/detail',
-//                                 search: `?id=${item.jump_url}`
-//                             }}
-//                             key={index}
-//                         >
-//                             <img
-//                                 className="item"
-//                                 src={item.name}
-//                                 alt=""
-//                             />
-//                         </Link>
-//                 )
-//             })
-//             }
-//         </Swiper>
-//     )
-// }
-
 // 课程模块儿公共组件
 // 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
 function CourseList({modules, toDetail}) {
@@ -324,28 +228,32 @@ function CourseList({modules, toDetail}) {
   }
   return (
     <div className='category'>
-      <h2 className="title">{modules.name}</h2>
+      <h2 className="title">
+        {modules.name}
+        {
+          modules.name === '限时免费' && <span className={'hot'}>hot</span>
+        }
+      </h2>
+
       {
         modules.show_more === 1 &&
         <Link className="more" to='/classify'>更多 ></Link>
       }
       {
         modules.show_more === 2 &&
-        <Link className="more" to={modules.more_page}>更多 ></Link>
+        <Link className="more" to={modules.name === '限时免费' ? '/free' : modules.more_page}>更多 ></Link>
       }
       <LazyLoad offset={50}>
         <ul className='index-course-detail'>
           {
             !isOdd && modules.list[0].course_img !== modules.list[0].course_img_small &&
             <div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}>
-              {/* <Link to={`/detail?id=${modules.list[0].course_id}`}> */}
               <img src={modules.list[0].course_img} alt=""/>
-              {/* </Link> */}
             </div>
           }
           {
             filterList.map((item, index) => {
-              const top = (
+              const top = item.is_limit_free ? null : (
                 <div>
                   {item.is_audition === true &&
                   <span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
@@ -354,22 +262,26 @@ function CourseList({modules, toDetail}) {
                   <span className='return_bash'></span>
                   }
                 </div>
-              );
+              )
 
               const bottom = (
                 <div>
-                  {!item.isbuy && <p className="course-price">
-                    <span className="new">¥{item.discounts_price}</span>
-                    <span className="old">¥{item.price}</span>
-                  </p>
-                  }
-                  {item.isbuy &&
-                  <a className="isbuy">已购买</a>
+                  {item.is_buy
+                    ? <a className="isbuy">已购买</a>
+                    : item.is_limit_free
+                      ? <p className={'course-price'}>
+                        <span className={'free'}>免费领取</span>
+                        <span className={'old'}>¥{item.price}</span>
+                      </p>
+                      : <p className="course-price">
+                        <span className="new">¥{item.discounts_price}</span>
+                        <span className="old">¥{item.price}</span>
+                      </p>
                   }
                 </div>
               )
 
-              const status = (
+              const status = item.is_limit_free ? null : (
                 <div>
                   {item.is_bargain &&
                   <p className='course-status'>砍价减{item.bargain_price}元</p>
@@ -449,47 +361,4 @@ function ScrollBox(props) {
   )
 }
 
-//限时免费
-function LimitFree({courses, handleClick}) {
-  return (
-    <div className="courses">
-      <ul>
-        {
-          courses.map(course => {
-            let Status
-            switch (course.status) {
-              case 1:
-                Status = <span className={'free'}>免费领取</span>
-                break
-              case 2:
-                Status = <button>已购买</button>
-                break
-              default:
-                Status = <span className={'current-price'}>¥{course.price}</span>
-            }
-            const Bottom = (
-              <div className={'bottom'}>
-                {Status}
-                <span className={'origin-price'}>¥{course.price1}</span>
-                <span className={'count'}>{course.count}人学过</span>
-              </div>
-            )
-            return (
-              <CourseBase
-                img={course.img}
-                title={course.title}
-                id={course.id}
-                handleClick={handleClick}
-                key={course.id}
-                bottom={Bottom}
-              />
-            )
-          })
-        }
-      </ul>
-    </div>
-  )
-}
-
-
 export default WithTab(Index);

src/components/Index/index.scss

@@ -284,6 +284,20 @@
       font-size: 16px;
       color: $color_333;
       display: inline-block;
+
+      .hot {
+        display: inline-block;
+        width: 25px;
+        height: 14px;
+        margin-left: 5px;
+        transform: translateY(-5px);
+        background: rgba(255, 64, 0, 1);
+        border-radius: 7px 7px 7px 0;
+        color: #fff;
+        text-align: center;
+        line-height: 14px;
+        font-size: 12px;
+      }
     }
 
     .more {
@@ -359,6 +373,11 @@
       text-align: center;
       line-height: 18px;
     }
+
+    .free{
+      color: $red;
+      font-size: 15px;
+    }
   }
 
   /*

src/components/limit-free/index.js

@@ -6,6 +6,9 @@ import { WhiteSpace, Toast } from "antd-mobile";
 import VList from '@/common/v-list-base'
 import { Popup } from "@common/index"
 import WithFullSize from "@/HOCs/WithFullSize"
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+
 
 function showToast(msg) {
   Toast.info(msg, 2, null, false)
@@ -22,6 +25,10 @@ class LimitFree extends Component {
   }
 
   componentDidMount() {
+    const {user, history} = this.props
+    if (user.hasError) {
+      history.push('/passport')
+    }
     this.getData()
   }
 
@@ -48,8 +55,9 @@ class LimitFree extends Component {
       })
   }
 
-  handleClick = id => {
 
+  handleClick = id => {
+    this.props.history.push(`/detail?id=${id}`)
   }
 
   changeTab = (e, index) => {
@@ -63,25 +71,48 @@ class LimitFree extends Component {
   }
 
   getCourse = id => {
-    //todo 联调
-    const instance = Popup({
-      className: 'get-course-popup',
-      closable: false,
-      clickMaskClose: false,
-      title: <div>
-        <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/check.png" alt=""/>
-        <div>课程有效期7天，快去学习吧~</div>
-      </div>,
-      content: <div className={'btns'}>
-        <button onClick={() => {
-          instance.close()
-        }}>知道了
-        </button>
-        <button>立即学习</button>
-      </div>
+    http.post(`${API.home}/sys/limitFree/receive`, {
+      course_id: id
     })
+      .then(res => {
+        const {code, msg} = res.data
+        if (code === 200) {
+
+          const instance = Popup({
+            className: 'get-course-popup',
+            closable: false,
+            clickMaskClose: false,
+            title: <div>
+              <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/check.png" alt=""/>
+              <div>课程有效期7天，快去学习吧~</div>
+            </div>,
+            content: <div className={'btns'}>
+              <button onClick={() => {
+                instance.close()
+                this.getData()
+              }}>知道了
+              </button>
+              <button onClick={this.toPlay.bind(this, id)}>立即学习</button>
+            </div>
+          })
+
+        } else {
+          showToast(msg)
+        }
+      })
+
   }
 
+  toPlay = id => {
+    this.props.history.push(`/play/video?id=${id}`)
+  }
+
+  formatTime = seconds => ({
+    d: Math.floor(seconds / 60 / 60 / 24).toString().padStart(2, '0'),
+    h: Math.floor(seconds / 60 / 60 % 24).toString().padStart(2, '0'),
+    m: Math.floor(seconds / 60 % 60).toString().padStart(2, '0')
+  })
+
   render() {
     const {tab, courses, navItemStyle, tabActiveIndex} = this.state
     return (
@@ -128,7 +159,6 @@ class LimitFree extends Component {
                           * course_status:
                           * 0未领取 1已领取未过期 2 已领取已过期 3 正常已购买
                           * */
-                          //todo 状态2
                           let des, bottom
                           switch (item.course_status) {
                             case 0:
@@ -143,14 +173,15 @@ class LimitFree extends Component {
                               </div>
                               break
                             case 1:
+                              const {d, h, m} = this.formatTime(item.course_expire)
                               des = <div className={'remain-time'}>
                                 <i className={'iconfont iconiconfront-21'}/>
-                                <span>12天55时55分后过期</span>
+                                <span>{d}天{h}时{m}分后过期</span>
                               </div>
                               bottom = <div className={'bottom'}>
                                 <span className={'red'}>限时免费</span>
                                 <span className={'origin-price'}>¥{item.price0}</span>
-                                <button>立即学习</button>
+                                <StudyButton id={item.course_id}/>
                               </div>
                               break
                             case 2:
@@ -161,7 +192,7 @@ class LimitFree extends Component {
                               bottom = <div className={'bottom'}>
                                 <span className={'red'}>¥{item.price1}</span>
                                 <span className={'origin-price'}>¥{item.price0}</span>
-                                <button>立即购买</button>
+                                <Link to={`/detail?id=${item.course_id}`}>立即购买</Link>
                               </div>
                               break
                             case 3:
@@ -171,7 +202,7 @@ class LimitFree extends Component {
                               </div>
                               bottom = <div className="bottom">
                                 <span>已购买</span>
-                                <button>立即学习</button>
+                                <StudyButton id={item.course_id}/>
                               </div>
                           }
 
@@ -185,6 +216,7 @@ class LimitFree extends Component {
                           return (
                             <VList img={item.image_name}
                                    handleClick={this.handleClick}
+                                   id={item.course_id}
                                    info={info}
                                    key={index}
                             />
@@ -207,4 +239,12 @@ class LimitFree extends Component {
   }
 }
 
-export default WithFullSize(LimitFree)
+function StudyButton({id}) {
\ No newline at end of file
+  return <Link to={`/play/video?id=${id}`}>立即学习</Link>
+}
+
+export default connect(
+  state => ({user: state.user}),
+  null
+)
+(WithFullSize(LimitFree))
\ No newline at end of file

src/components/limit-free/index.scss

@@ -137,18 +137,22 @@
       text-decoration: line-through;
     }
 
-    button {
+    button, a {
       width: 68px;
       height: 24px;
       float: right;
       border-radius: 3px;
       background: #09f;
       border: none;
-      outline: 0;
       font-size: 13px;
       color: #fff;
       line-height: 24px;
+      text-align: center;
+    }
+
+    button {
       -webkit-appearance: none;
+      outline: 0;
     }
 
     .bottom {
@@ -214,7 +218,8 @@
     & button:first-child {
       border-right: 1px solid #DDD;
     }
-    & button:last-child{
+
+    & button:last-child {
       color: #09f;
     }
   }

src/components/video/index.js

@@ -109,6 +109,7 @@ class Video extends Component {
 
 
   componentDidMount() {
+    console.log(this.props.location.hash)
     if (window.location.protocol === 'https:') {
       window.location.replace('http' + window.location.href.slice(5))
       return