大咖直播的预约

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;
+}
 }