限时免费

src/components/video/index.js

 import React, { Component } from 'react'
 import HeaderBar from '@/common/HeaderBar'
 import './video.scss'
-import { NavLink, Route, Redirect, Switch, Link } from 'react-router-dom'
+import { NavLink, Route, Redirect, Switch} from 'react-router-dom'
 import { http, getParam, browser } from '@/utils'
 import Recommendation from './recommendation'
 import VideoCatalog from './video-catalog'
@@ -9,8 +9,8 @@ import DatumCatalog from './datum-catalog'
 import { Toast } from 'antd-mobile'
 import videojs from 'video.js'
 import 'video.js/dist/video-js.min.css'
-import { Modal } from "antd-mobile"
-import { Loading, Popup } from '@/common'
+import { Modal} from "antd-mobile"
+import { Loading} from '@/common'
 import { connect } from "react-redux"
 import jsCookie from 'js-cookie'
 import Single from "@/components/detail/single";
@@ -103,6 +103,8 @@ class Video extends Component {
     singleType: 1,// 单集购买需要
     nowPrice: 0,// 单集购买需要
     laterPrice: 0,// 单集购买需要
+    limitFreeNoPromptChecked: false,
+    showLimitFreePopup: true //todo 联调
   }
 
 
@@ -133,10 +135,6 @@ class Video extends Component {
     this.token = jsCookie.get('token')
     this.getVideoList()
     this.getDatumCatalog()
-        this.showLimitFreePopup({
-            title: '想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!',
-
-        })
   }
 
   // 直接购买
@@ -360,9 +358,9 @@ class Video extends Component {
     this.ws.addEventListener('message', e => {
       const data = JSON.parse(e.data);
       data.code == 4040 && (this.reconnect = false);
-            if(data.code === 0) {
+      if (data.code === 0) {
         console.log("上次的学习记录" + JSON.stringify(data));
-                if(data.data && data.data.position) {
+        if (data.data && data.data.position) {
           this.player.currentTime(data.data.position);
         }
       }
@@ -371,12 +369,12 @@ class Video extends Component {
 
   sendMessage = message => {
     let readyState = this.ws.readyState, _this = this;
-        if(readyState === 1) {
+    if (readyState === 1) {
       this.ws && this.ws.send(JSON.stringify(message))
-        }else if(readyState === 3) {
+    } else if (readyState === 3) {
       this.ws.close();
       this.ws = null;
-            let reconnect = setTimeout(function() {
+      let reconnect = setTimeout(function () {
         clearTimeout(reconnect);
         reconnect = null;
         _this.ws = new WebSocket(PROCESS_URL);
@@ -493,7 +491,7 @@ class Video extends Component {
     this.player.on('play', () => {
       const {videoList, activeIndex, vCourseId, course = {}} = this.state
       // 当视频播放时 看是否是第一次播放（初次进入页面 刷新页面 切换视频 都是第一次播放  需要获取上次的播放时间）
-            if(this.isCurrentVideoFirstPlay) {
+      if (this.isCurrentVideoFirstPlay) {
         // 当某些原因导致视频暂停时（用户暂停 网络不好等） 再播放时不需要发送
         this.isCurrentVideoFirstPlay = false;
         // 发送消息 recent_learn
@@ -508,7 +506,7 @@ class Video extends Component {
           is_live: 0,
         }))
       }
-            if(!this.timer) {
+      if (!this.timer) {
         this.setupTimer();
       }
     })
@@ -523,7 +521,7 @@ class Video extends Component {
       this.count = this.watchSec = 0;
       this.countSchedule(); // 计算进度 -- 播放完毕
       // 返现课程才出现打卡记录
-            if(this.state.course.is_aist) {
+      if (this.state.course.is_aist) {
         this.getShareProgressInfo()
       }
       clearInterval(this.timer);
@@ -737,19 +735,9 @@ class Video extends Component {
     }
   }
 
-    showLimitFreePopup = (title, id) => {
-        Popup({
-            title: <span>想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!</span>,
-            className: 'free-popup',
-            content: <div className={'des'}>
-                <img className="qrcode" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"/>
-            </div>
-        })
-    }
-
   render() {
     let {match, location, history} = this.props
-        const {videoList, activeIndex, isAuth, salePrice, course, singleBox, singleType} = this.state;
+    const {videoList, activeIndex, isAuth, salePrice, course, singleBox, singleType, showLimitFreePopup} = this.state;
     let toHref = '';
     if (location.state && location.state.to && location.state.to === 'detail') {
       toHref = `/detail?id=${course.course_id}`
@@ -881,6 +869,41 @@ class Video extends Component {
                             closeShareModal={() => this.setState({isShowShareModal: false})}
                             data={this.state.shareData}
         />
+        {
+          showLimitFreePopup &&
+          <div className={'limit-free-cover'}>
+            <div className="free-popup">
+              <div className="title">
+                <span>想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!</span>
+              </div>
+              <div className={'des'}>
+                <img className="qrcode"
+                     src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=''/>
+                <span>长按/扫码识别</span>
+                <span>添加时请备注<span>142</span>哦</span>
+                <div className="no-prompt">
+                  <label htmlFor="no-prompt">
+            <span className={`checkbox-label ${this.state.limitFreeNoPromptChecked ? 'checked' : 'unchecked'}`}>
+              <i className={'iconfont iconiconfront-73'}/>
+            </span>
+                    <input type="checkbox" id={'no-prompt'} onChange={(e) => {
+                      this.setState({
+                        limitFreeNoPromptChecked: e.target.checked
+                      })
+                    }}/>
+                    <span>本课程不再提示</span>
+                  </label>
+                </div>
+              </div>
+              <i className={'close-btn iconfont iconiconfront-2'} onClick={() => {
+                this.setState({
+                  showLimitFreePopup: false
+                })
+                localStorage.setItem('neverShowLimitFreePopup', '1')
+              }}/>
+            </div>
+          </div>
+        }
       </div>
     );
   }

src/components/video/video.scss

@@ -281,12 +281,26 @@ $tabHeight: 44px;
   }
 }
 
+
+.limit-free-cover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, .8);
+  z-index: 999;
+}
+
 .free-popup {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: 290px;
   height: 366px;
   border-radius: 5px !important;
   padding: 0 !important;
-  overflow: hidden;
   background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/popup-bg.png") !important;
   background-size: cover !important;
 
@@ -299,5 +313,90 @@ $tabHeight: 44px;
     font-size: 15px;
   }
 
+  .des {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;
+
+    .qrcode {
+      margin-bottom: 10px;
+      width: 118px;
+      height: 118px;
+    }
+
+    & > span:nth-of-type(1) {
+      color: #666;
+      font-size: 13px;
+      margin-bottom: 10px;
+    }
+
+    & > span:nth-of-type(2) {
+      color: #333;
+      font-size: 15px;
+      margin-bottom: 14px;
+    }
+
+    span span {
+      color: #FF2121;
+    }
+
+    .no-prompt {
+      label {
+        position: relative;
+        padding-left: 21px;
+        height: 14px;
+      }
+
+      input, .checkbox-label {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 13px;
+        height: 13px;
+        -webkit-appearance: none;
+        outline: 0;
+        background: #fff;
+      }
+
+      input {
+        opacity: 0;
+      }
+
+      .checkbox-label {
+        border: 1px solid rgba(84, 92, 100, .6);
+        border-radius: 1px;
+        left: -1px;
+        box-sizing: border-box;
+
+        .iconfont {
+          color: #fff;
+          font-size: 12px;
+        }
+      }
+
+      span {
+        color: #545C64;
+        font-size: 13px;
+        margin-bottom: 0;
+        line-height: 14px;
+      }
+
+      .checked {
+        background: #09f;
+      }
+    }
+  }
+
+  .close-btn {
+    position: absolute;
+    bottom: -44px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 26px;
+    color: #fff;
+  }
 }