Merge branch 'live' into 11-11

src/common/closable-popup/index.scss

@@ -25,7 +25,7 @@
 
         .close {
             position: absolute;
-            bottom: -88px;
+            bottom: -74px;
             left: 50%;
             transform: translateX(-50%);
             font-size: 36px;

src/components/blessingPreheat/live/index.js

 import React, { Component } from 'react'
 import './index.scss'
 import { Tabs, Toast } from "antd-mobile"
-import { getParam, http, SendMessageToApp } from "@/utils"
+import { getParam, http, SendMessageToApp, browser } from "@/utils"
 import { Popup } from "@common/index"
 import QRCode from 'qrcode'
 import { uniqBy } from 'lodash'
@@ -12,12 +12,15 @@ import { withRouter } from 'react-router-dom'
 @connect(state => ({user: state.user}))
 class Live extends Component {
 
+  popupInstance = null
+
   state = {
     tabs: [],
     lives: {},
     preheatLives: [],
     today: '',
-    isApp: getParam('version')
+    isApp: getParam('version'),
+    QRCodeUrl: '',
   }
 
 
@@ -69,22 +72,33 @@ class Live extends Component {
   }
 
   toLiveRoom = id => {
-    const {history,isLogin} = this.props;
+    const {history, isLogin} = this.props
     if (this.state.isApp) {
-      if(isLogin){
+      if (isLogin) {
         SendMessageToApp('toLiveRoom', id)
-      }else {
+      } else {
         SendMessageToApp("toLogin")
       }
     } else {
-      if(isLogin){
+      if (isLogin) {
         window.location.href = `${window.location.protocol}//www.julyedu.com/live/m_room/${id}`
-      }else {
+      } else {
         history.push('/passport')
       }
     }
   }
 
+  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)
+    }
+  }
+
   makeSubscribe = id => {
     const {user, history} = this.props
     if (user.hasError) {
@@ -94,11 +108,29 @@ class Live extends Component {
       .then(res => {
         const {data} = res
         if (data.errno == 200) {
+          this.setState(() => ({
+            QRCodeUrl: data.data.url,
+          }))
           QRCode.toDataURL(data.data.url, (err, url) => {
-            Popup({
-              title: '扫码关注“七月在线”服务号即可预约',
-              content: <img id={'live-qr-code'} src={url} alt=""/>
-            })
+            if (!this.popupInstance) {
+              this.popupInstance = Popup({
+                title: '扫码关注“七月在线”服务号即可预约',
+                content: (
+                  <>
+                    <img id={'live-qr-code'} src={url} alt=""/>
+                    {
+                      browser.isAndroidApp ? (
+                        <button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
+                      ) : null
+                    }
+                  </>
+                ),
+                close: () => new Promise(resolve => {
+                  this.popupInstance = null
+                  resolve()
+                })
+              })
+            }
           })
         } else {
           Toast.info(data.msg, 2, null, false)
@@ -136,27 +168,29 @@ class Live extends Component {
                         {
                           todayLives.map((item, index) => {
                             return (
-                              <LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe} toLiveRoom={this.toLiveRoom}/>
+                              <LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}
+                                           toLiveRoom={this.toLiveRoom}/>
+                            )
+                          })
+                        }
+                      </div>
+                    )
+                  })
+                  : tabs.map((item, index) => {
+                    const todayLives = preheatLives[item.title]
+                    return (
+                      <div key={index}>
+                        {
+                          todayLives.map((item, index) => {
+                            return (
+                              <LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}
+                                           toLiveRoom={this.toLiveRoom}/>
                             )
                           })
                         }
                       </div>
                     )
                   })
-                  :tabs.map((item, index) => {
-                      const todayLives = preheatLives[item.title]
-                      return (
-                          <div key={index}>
-                            {
-                              todayLives.map((item, index) => {
-                                return (
-                                    <LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe} toLiveRoom={this.toLiveRoom}/>
-                                )
-                              })
-                            }
-                          </div>
-                      )
-                    })
               }
             </Tabs>
 
@@ -201,7 +235,9 @@ function LiveContent({item, makeSubscribe, toLiveRoom}) {
       </div>
       {
         item['on_live']
-          ? <button className={'on-living'} onClick={() => {toLiveRoom(item['room_url'])}}>正在直播</button>
+          ? <button className={'on-living'} onClick={() => {
+            toLiveRoom(item['room_url'])
+          }}>正在直播</button>
           :
           item['is_end']
             ? <button className={'subscribed'}>已结束</button>

src/components/blessingPreheat/live/index.scss

@@ -227,12 +227,27 @@
 
     .content {
         display: flex;
-        justify-content: center;
+        flex-direction: column;
+        align-items: center;
 
         img {
             width: 120px;
             height: 120px;
+            margin-top: 10px;
         }
     }
+
+    .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/utils/index.js

@@ -83,7 +83,9 @@ const browser = (function () {
         isWeixin: /MicroMessenger/i.test(ua),
         isAndroid: /Android/i.test(ua),
         isIOS: /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua),
-        isIPad: /iPad/i.test(ua)
+        isIPad: /iPad/i.test(ua),
+        isAndroidApp: /Android/i.test(ua) && getParam('version'),
+        isIOSApp: /iPhone/i.test(ua) && getParam('version')
     }
 })()