限时免费

src/components/detail/btnstatus/index.js

@@ -526,13 +526,13 @@ class BtnStatus extends Component {
 
                 {
                     //todo 联调
-                    false && <div className='btns-box'>
+                    info.is_limit_free && info.limit_free_status == 0 && <div className='btns-box'>
                         <a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
                             <i className='iconfont iconerji'></i>
                             <span>课程咨询</span>
                         </a>
 
-                        <button className={'get-course btn'}>立即领取</button>
+                        <button className={'get-course btn'} onClick={() => {this.props.getCourse(info.course_id)}}>立即领取</button>
                     </div>
                 }
 

src/components/detail/index.js

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import './index.scss'
 import Bargain from './bargain'
 import Group from './group'
 import OutLine from './outline'
-import {HeaderBar, CallApp} from '../../common'
+import { HeaderBar, CallApp } from '../../common'
 import ShareRank from "./shareRank"
 import Audition from "./audition"
 import Single from "./single"
@@ -11,15 +11,14 @@ import SingleSuccess from './single/singleSuccess';
 import BtnStatus from "./btnstatus"
 import Barrage from './barrage'
 import Deposit from './deposit'
-import {connect} from "react-redux"
-import {getCourses, addCourseToCart} from "./actions"
-import {getParam, http, browser, wxShare} from "@/utils"
-import {Toast} from 'antd-mobile'
-import {bindActionCreators} from "redux";
-import {delCountryNum} from './../country/countryRedux';
-
+import { connect } from "react-redux"
+import { getCourses, addCourseToCart } from "./actions"
+import { getParam, http, browser, wxShare } from "@/utils"
+import { Toast } from 'antd-mobile'
+import { bindActionCreators } from "redux";
+import { delCountryNum } from './../country/countryRedux';
+import { Popup } from "@common/index"
 import RedPacket from './redPacket';
-import {Link} from "react-router-dom";
 import ExpandActiveToast from "../Index/expandActiveToast";
 
 class Detail extends Component {
@@ -76,7 +75,7 @@ class Detail extends Component {
       });
     }
 
-        if(getParam('ac') && Number(getParam('ac')) === 11) {
+    if (getParam('ac') && Number(getParam('ac')) === 11) {
       this.getBorwerCourse();
     }
 
@@ -85,13 +84,13 @@ class Detail extends Component {
   getBorwerCourse = () => {
     http.get(`${API.home}/sys/user/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
       let {code, data: {today_browsed_courses}} = res.data;
-            if(code === 200) {
+      if (code === 200) {
         let currentCourseId = getParam('id');
-                if(today_browsed_courses.includes(Number(currentCourseId))) {
+        if (today_browsed_courses.includes(Number(currentCourseId))) {
           this.setState({
             countDownTime: '任务完成'
           });
-                }else{
+        } else {
           this.startActivity();
         }
       }
@@ -100,19 +99,19 @@ class Detail extends Component {
 
   startActivity = () => {
     let _this = this;
-        let countDownInterval = setInterval(function() {
+    let countDownInterval = setInterval(function () {
       let countDown = parseInt(_this.state.countDownTime);
       countDown--;
-            if(countDown > 0) {
+      if (countDown > 0) {
         _this.setState({
           countDownTime: countDown + 's'
         });
-            } else if(countDown === 0) {
+      } else if (countDown === 0) {
         clearInterval(countDownInterval);
         countDownInterval = null;
         http.post(`${API.home}/sys/add/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
           let {code} = res.data;
-                    if(code === 200) {
+          if (code === 200) {
             _this.setState({
               countDownTime: '任务完成'
             });
@@ -333,14 +332,14 @@ class Detail extends Component {
     http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
       const {data, code} = res.data;
       if (code === 200) {
-                if(data['redirect_url'] !== ''){
+        if (data['redirect_url'] !== '') {
           window.location.href = data['redirect_url']
         }
         this.setState({
           course: data
         });
         if (data.course_info) {
-                    if(data.course_info.is_it_course == 1){
+          if (data.course_info.is_it_course == 1) {
             this.props.history.push(`/python?id=${id}`)
           }
 
@@ -348,7 +347,7 @@ class Detail extends Component {
           document.title = `${course_info.course_title} - 七月在线`;
           if (course_info.group_status === 3 || course_info.group_status === 4) {
             let endTime = course_info.pdd_group_info.groupon_member.end_time;
-                        if(endTime && endTime > 0) {
+            if (endTime && endTime > 0) {
               let date = endTime * 1000,
                 hours = 0,
                 minutes = 0,
@@ -377,19 +376,19 @@ class Detail extends Component {
   }
 
   // 点击子组件试听按钮
-    toAudition = (vCourseId,videoId) => {
+  toAudition = (vCourseId, videoId) => {
     const {user} = this.props
     const uid = user && user.data && user.data.uid
     if (!uid) {
       this.props.history.push('/passport/login')
     } else {
-            if(videoId == '' || videoId == 0 || videoId == undefined){
+      if (videoId == '' || videoId == 0 || videoId == undefined) {
         return false;
       }
       http.post(`${API['base-api']}/sys/get_class_audition?video_id=${videoId}`).then((res) => {
         if (res.data.errno == 200) {
           this.props.history.push(`/play/video?id=${vCourseId + '&video_id=' + videoId}`)
-                }else {
+        } else {
           Toast.info(res.data.msg, 2);
         }
       })
@@ -493,6 +492,50 @@ class Detail extends Component {
     this.props.history.push(`/detail?id=${getParam('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')
+  })
+
+  getCourse = id => {
+    const {history} = this.props
+    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.fetchCourseInfo()
+              }}>知道了
+              </button>
+              <button onClick={() => {
+                history.push(`/play/video?id=${id}`)
+              }}>立即学习
+              </button>
+            </div>
+          })
+
+        } else {
+          Toast.info(msg, 2, null, false)
+        }
+      })
+
+  }
+
+
   render() {
     const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket, countDownTime} = this.state;
 
@@ -525,7 +568,7 @@ class Detail extends Component {
         {
           Number(getParam('ac')) === 11 ? (
             <div className='activity__blessing'>
-                            <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/count_donw.png' />
+              <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/count_donw.png'/>
               <span className='count__down__time'>{`${countDownTime}`}</span>
             </div>
           ) : (null)
@@ -541,7 +584,7 @@ class Detail extends Component {
           <ExpandActiveToast/>
 
 
-                    <CallApp className='toapp' path={`/detail/id=${getParam('id')}`} />
+          <CallApp className='toapp' path={`/detail/id=${getParam('id')}`}/>
 
           {/*弹幕*/}
           <Barrage isShow={course_info.is_show}/>
@@ -560,30 +603,34 @@ class Detail extends Component {
               <p className='contact text-overflow-2'>{course_info.simpledescription}</p>
               <div className='des'>
                 {
-                                    course_info.is_baoming === 0 &&
+                  course_info.is_baoming === 0 && !course_info.is_limit_free &&
                   <p className="course-price">
                     <span className="new">¥{course_info.price1}</span>
                     <span className="old">¥{course_info.price0}</span>
                   </p>
                 }
                 {
-                                    !!course_info.is_deposit && course_info.is_deposit!= 0 &&
+                  !!course_info.is_deposit && course_info.is_deposit != 0 &&
                   <div className="openExpand">
                     支付定金￥{course_info.deposit_info.deposit_amount}，可抵扣￥{course_info.deposit_info.deduction_amount}
                   </div>
                 }
                 {
                   //todo 联调
-                                    false && <div className="limit-free">
+                  course_info.is_limit_free
+                    ?
+                    course_info.limit_free_status == 0
+                      ? <div className="limit-free">
                         <span>限时免费</span>
                         <span className={'origin-price'}>¥{course_info.price0}</span>
                       </div>
-                                }
-                                {
-                                    //todo 联调
-                                    false && <div className={'time-limit'}>
+                      :
+                      course_info.limit_free_status == 1
+                        ? <div className={'time-limit'}>
                           <span>有效期7天，05天14时23分后过期</span>
                         </div>
+                        : null
+                    : null
                 }
               </div>
             </div>
@@ -634,12 +681,11 @@ class Detail extends Component {
 
           {/*定金相关信息*/}
           {
-                        !!course_info.is_deposit && course_info.is_deposit!= 0 &&
+            !!course_info.is_deposit && course_info.is_deposit != 0 &&
             <Deposit courseInfo={course_info}/>
           }
 
 
-
           {/*服务承诺*/}
           <div className='promise'>
             <label>服务承诺</label>
@@ -757,6 +803,7 @@ class Detail extends Component {
               data={course_info}
               user={this.props.user}
               invitedFriends={this.invitedFriends}
+              getCourse={this.getCourse}
               // addCourseToCart={this.props.addCourseToCart}
               toCart={this.toCart}
               history={this.props.history}

src/components/detail/index.scss

@@ -270,3 +270,49 @@
     left: 8px;
   }
 }
+
+.get-course-popup {
+  top: 210px !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+
+  .title {
+    text-align: center;
+    margin-bottom: 30px;
+
+    img {
+      width: 30px;
+      height: 30px;
+    }
+
+    div {
+      font-size: 14px;
+      color: #525C65;
+    }
+  }
+
+  .btns {
+    border-top: 1px solid #DDD;
+    display: flex;
+    height: 40px;
+
+    button {
+      -webkit-appearance: none;
+      width: 50%;
+      border: none;
+      outline: none;
+      color: #333;
+      background: #fff;
+      border-radius: 0 0 5px 5px;
+    }
+
+    & button:first-child {
+      border-right: 1px solid #DDD;
+    }
+
+    & button:last-child {
+      color: #09f;
+    }
+  }
+}
\ No newline at end of file