Merge branch '00' of gitlab.julyedu.com:baiguangyao/mr-julyedu into 00

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

 import React, { Component } from 'react';
 import './index.scss';
 import { Toast } from 'antd-mobile';
-import { http } from '@/utils';
+import {Link, withRouter} from "react-router-dom"
+import { getParam, http, SendMessageToApp, browser } from "@/utils"
 import CommonContainer from './../../common/commonContainer/index'
 import CommonPopup from './../../common/commonPopup/index';
-
-export default class index extends Component {
+import { connect } from 'react-redux';
+import { Popup } from "@common/index"
+import QRCode from 'qrcode'
+@connect(state => ({
+  user: state.user
+}))
+class LiveRoom extends Component {
   constructor(props) {
     super(props);
     this.state = {
       list: [],
-      showMark: true,
+      showMark: false,
+      subUrl: '',
     }
   }
 
   componentDidMount() {
+    this.getLiveInfo();
+  }
+  getLiveInfo = () => {
     http.get(`${API.home}/activity/get_live_info`).then(res => {
       const { code, data, msg } = res.data;
       if (code === 200) {
@@ -28,14 +38,19 @@ export default class index extends Component {
   }
   // 预约直播
   subscribe = (id) => {
-    // TODO 检查是否已登录
-    // this.checkLogin();
+    // 检查是否已登录
+    this.checkLogin();
     http.get(`${API['base-api']}/sys/createLiveQrcode/${id}`).then(res => {
       let { errno, data, msg } = res.data;
+      console.log(res);
       if (errno === 200) {
-        // this.livingUrl = data.url;
-        // this.isSubscribe = true;
         // TODO 显示二维码地址 并且传递给二维码的图片/地址
+        QRCode.toDataURL(data.url, (err, url) => {
+          this.setState({
+            showMark: true,
+            subUrl: url,
+          })
+        })
       } else {
         Toast.info(msg);
       }
@@ -47,15 +62,13 @@ export default class index extends Component {
   }
   // 去直播间
   toLivingRoom = (id) => {
-    // TODO 检查是否已登录
-    // this.checkLogin();
+    this.checkLogin();
     window.location.href = `${window.location.protocol}//www.julyedu.com/live/m_room/${id}`
   }
   // 查看回放
   checkVideo = (url) => {
-    // TODO 检查是否已登录
-    // this.checkLogin();
-    // TODO 这里需要课程ID
+    this.checkLogin();
+    // TODO 这里需要课程ID 如何获取？
     const vCourseId = url.split('/')[0];
     history.push(`/play/video?id=${vCourseId}`)
   }
@@ -64,17 +77,45 @@ export default class index extends Component {
     this.setState({
       showMark: false,
     })
+    // 关闭弹框的时候再次查询接口 查询预约状态
+    this.getLiveInfo();
+  }
+  // 检查是否登录
+  checkLogin = () => {
+    const {hasError, data = {}} = this.props.user;
+    if(hasError) { // 未登录
+      return;
+    }
+  }
+
+  // TODO  APP内需要保存图片 是否还是这样做 需要确认
+  saveImage = () => {
+    let version = getParam('version')
+    version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
+    const {QRCodeUrl} = this.state
+    if (version && parseInt(version) < 451) {
+      Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 2, null, false)
+    } else {
+      SendMessageToApp('generateQRCode', QRCodeUrl)
+    }
   }
 
   render() {
-    const { list,showMark } = this.state;
+    const { list,showMark,subUrl } = this.state;
     return (
       <div className='live__container'>
         {
           showMark && (
             <CommonPopup top={50} closePopup={this.closePopup} mark={true}>
-              <div>1</div>
-              <div>2</div>
+              <div className='sub__code_container'>
+                <p className='sub__title'>扫码关注“七月在线”服务号即可预约</p>
+                <img className='sub__qr_code' id={'live-qr-code'} src={subUrl} alt=""/>
+              {
+                browser.isAndroidApp ? (
+                  <button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
+                ) : null
+              }
+              </div>
             </CommonPopup>
           )
         }
@@ -101,7 +142,7 @@ export default class index extends Component {
                       </div>
                       {
                         item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 0 && (
-                          <span onClick={this.subscribe(item.live_id)} className="order__btn">立即预约</span>
+                          <span onClick={ ()=>this.subscribe(item.live_id)} className="order__btn">立即预约</span>
                         )
                       }
                       {
@@ -111,12 +152,12 @@ export default class index extends Component {
                       }
                       {
                         item.on_live == 1 && item.is_end == 0 && (
-                          <span onClick={this.toLivingRoom(item.room_url)} className="order__btn living">正在直播</span>
+                          <span onClick={()=>this.toLivingRoom(item.room_url)} className="order__btn living">正在直播</span>
                         )
                       }
                       {
                         item.is_end == 1 && item.transcribe_url != '' && (
-                          <span onClick={this.checkVideo(item.transcribe_url)} className="order__btn check__video">查看回放</span>
+                          <span onClick={() => this.checkVideo(item.transcribe_url)} className="order__btn check__video">查看回放</span>
                         )
                       }
 
@@ -131,3 +172,4 @@ export default class index extends Component {
     )
   }
 }
+export default withRouter(LiveRoom)

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

@@ -97,4 +97,33 @@
       }
     }
   }
+
+  .sub__code_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .sub__title {
+      color: #525C65;
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: 500;
+      text-align: center;
+      margin: 20px 0;
+    }
+  }
+
+  .save-image {
+    width: 133px;
+    height: 30px;
+    margin-top: 16px;
+    background: rgba(83, 39, 250, 1);
+    border-radius: 15px;
+    font-size: 14px;
+    color: #fff;
+    -webkit-appearance: none;
+    outline: 0;
+    border: none;
+}
 }

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 {
+
+    state = {
+        showMark: false
+    }
+
+    // 关闭弹框
+    closePopup = () => {
+        this.setState({
+            showMark: false,
+        })
+    }
+
     render() {
         return (
             <div className={'year-index'}>
                 <TreasureNav></TreasureNav>
-        <LiveRoom />
-        <YearCourse />
+                <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