弹窗

src/components/activity/newyear-2019/preheat/index.js

-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import './index.scss'
-import LiveRoom from './LiveRoom/index';
-import YearCourse from './YearCourse/index';
-import TreasureBox from './../treasure-box/index';
-import TreasureNav from './nav';
+import LiveRoom from './LiveRoom/index'
+import YearCourse from './YearCourse/index'
+import TreasureBox from './../treasure-box/index'
+import TreasureNav from './nav'
+import CommonPopup from './../common/commonPopup/index'
 
 export default class index extends Component {
-  render() {
-    return (
-      <div className={'year-index'}>
-        <TreasureNav></TreasureNav>
-        <LiveRoom />
-        <YearCourse />
-        <TreasureBox></TreasureBox>
-      </div>
-    )
-  }
+
+    state = {
+        showMark: true
+    }
+
+    // 关闭弹框
+    closePopup = () => {
+        this.setState({
+            showMark: false,
+        })
+    }
+
+    render() {
+        return (
+            <div className={'year-index'}>
+                <TreasureNav></TreasureNav>
+                <LiveRoom/>
+                <YearCourse/>
+                <TreasureBox></TreasureBox>
+                {/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
+                {
+                    this.state.showMark &&
+                    <CommonPopup top={50} closePopup={this.closePopup} mark={true}>
+                        <div className='sub__code_container'>
+                            <p className='sub__title'>提醒服务</p>
+                            <p className='sub__tip'>有好友加入队伍后第一时间通知我~</p>
+                            <img className='sub__qr_code' id={'live-qr-code'} src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
+                            <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号即可预约</p>
+                        </div>
+                    </CommonPopup>
+                }
+
+                {/*规则弹窗*/}
+                {
+                    !this.state.showMark &&
+                    <CommonPopup top={50} closePopup={this.closePopup} mark={true}>
+                        <div className='sub__code_container'>
+                            <p className='sub__title'>组队开宝箱活动规则</p>
+                            <p className='sub__rule'>
+                                1. 活动期间（12月18日-12月31日）可随时参与开宝箱；<br/>
+                                2. 当前队伍满员后可继续创建新队伍；<br/>
+                                3. 每人有一次机会加入好友的队伍；<br/>
+                                4. 队伍满员后所有成员均可随机获得宝箱内奖品，队长奖励更丰厚哦~<br/>
+                                5. 代金券、课程等虚拟奖品将直接发放至账户，实物奖品活动结束后统一邮寄；<br/>
+                                6. 现金可提现：我的 → 赚奖学金 → 提现。
+                            </p>
+                        </div>
+                    </CommonPopup>
+                }
+
+            </div>
+        )
+    }
 }

src/components/activity/newyear-2019/preheat/index.scss

 .year-index {
   padding-bottom: 30px;
   background-color: #BC2A18;
+
+  .sub__code_container {
+    padding: 20px 30px;
+    text-align: center;
+
+    .sub__title {
+      font-size: 18px;
+      color: #111;
+      font-weight: normal;
+    }
+
+    .sub__qr_code {
+      width: 137px;
+      height: 137px;
+    }
+
+    .sub__tip {
+      font-size: 14px;
+      color: #666;
+      margin: 13px 0;
+    }
+
+    .sub__rule {
+      font-size: 14px;
+      color: #666;
+      text-align: left;
+      margin-top: 20px;
+      margin-bottom: 5px;
+    }
+  }
 }
\ No newline at end of file