直播icon

src/components/activity/2020-717/activity/index.js

@@ -14,7 +14,6 @@ import { REDO, addData } from "@components/activity/2020-717/question/store/redu
 
 
 class Anniversary2020 extends Component {
-
   nav = null
   store = storage.namespace('anniversary2020')
   stages = {
@@ -108,10 +107,19 @@ class Anniversary2020 extends Component {
     prizeRecordsPagination: 0,
     bulletScreenList: [],
     prizeType: '',
-    needMobile: false // 是否需要绑定手机号
+    needMobile: false, // 是否需要绑定手机号
+    istime: true,
+    isshowLive: true,
   }
 
   componentDidMount() {
+
+    let now = new Date().getTime()
+    let future = new Date('2020-7-17 20:30:00').getTime()
+    this.setState({
+      istime: future > now ? true : false
+    })
+
     this.getActivityStage()
     this.getTeam()
     this.getUserAddress()
@@ -593,6 +601,8 @@ class Anniversary2020 extends Component {
       isShowFollow,
       qrcode,
       countDown,
+      isshowLive,
+      istime
     } = this.state
     const {history, user} = this.props
 
@@ -622,6 +632,24 @@ class Anniversary2020 extends Component {
         {
           !activityData.is_sign && <div className="sign" onClick={this.sign}></div>
         }
+
+
+        {
+          istime && isshowLive &&
+          <div className='live-icon-box'>
+            <div className="live-icon">
+              <img className="live-icon-img" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/live-icon-m.png" alt=""/>
+              <img className="live-icon-close" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/close_icon.png" alt=""
+                   onClick={() => {
+                     this.setState({
+                       isshowLive: false
+                     })
+                   }}/>
+            </div>
+          </div>
+        }
+
+
         <nav ref={el => this.nav = el}>
           <ul>
             {
@@ -1268,7 +1296,7 @@ class Anniversary2020 extends Component {
           }}></TeamMember>
         }
         {
-          isShowFollow && <div className={'modal-cover follow'}>
+          isShowFollow && (!istime || !isshowLive) && <div className={'modal-cover follow'}>
             <div className="modal">
               <div className="title">邀请好友/进度提醒</div>
               <div className="tip">邀请好友加入队伍，获得更多抽奖机会</div>

src/components/activity/2020-717/activity/index.scss

@@ -98,6 +98,32 @@
     z-index: 101;
   }
 
+  .live-icon-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0,0,0,.6);
+    z-index: 101;
+    text-align: center;
+    .live-icon {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      width: 218px;
+      z-index: 102;
+      margin-left: -109px;
+      margin-top: -114px;
+    }
+    .live-icon-close {
+      width: 24px;
+      height: 24px;
+      margin-top: 15px;
+    }
+  }
+
+
   a.rule-btn {
     font-size: 14px;
     color: #fff;