安卓二维码添加保存按钮

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

@@ -10,7 +10,6 @@ import { browser, getParam, http, wxShare, SendMessageToApp } from "@/utils"
 import { Link } from "react-router-dom"
 import QRCode from "qrcode"
 import YearCourse from '../preheat/YearCourse'
-import jsCookie from "js-cookie"
 
 
 class Landing extends Component {
@@ -245,33 +244,52 @@ class Landing extends Component {
       })
   }
 
+  // 安卓手机保存二维码
+  saveImage = url => {
+    let version = getParam('version')
+    version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
+    if (version && parseInt(version) < 451) {
+      Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 3, null, false)
+    } else {
+      SendMessageToApp('generateQRCode', url)
+    }
+  }
+
+
   remind = (type = 'create', treasure_code, origin = 1) => {
     const {user} = this.props
     http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
       .then(res => {
         const {data} = res.data
         return data.url
-      })
-    QRCode.toDataURL('http://m.julyedu.com')
-      .then(url => {
-        Popup({
-          title: '提醒服务',
-          className: 'landing-remind',
-          closeIcon: this.closeIcon,
-          content: <div>
-            <div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div>
-            <img src={url} alt=""/>
-            <div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div>
-          </div>,
-          close: () => {
-            // history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
-            this.fetchPageData({
-              treasure_code,
-              origin
-            })
-          }
+      }).then(text => {
+      //todo 使用线上二维码
+      QRCode.toDataURL('http://m.julyedu.com')
+        .then(url => {
+          Popup({
+            title: '提醒服务',
+            className: 'landing-remind',
+            closeIcon: this.closeIcon,
+            content: <div>
+              <div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div>
+              <img src={url} alt=""/>
+              {browser.isAndroidApp ? <div>
+                //todo 使用线上二维码
+                <button className={'android-qr-code-btn'} onClick={this.saveImage.bind(this, 'http://m.julyedu.com')}>保存二维码</button>
+              </div> : null}
+              <div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div>
+            </div>,
+            close: () => {
+              // history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
+              this.fetchPageData({
+                treasure_code,
+                origin
+              })
+            }
+          })
         })
-      })
+    })
+
   }
 
   showShareTip = () => {
@@ -341,6 +359,15 @@ class Landing extends Component {
     }
   }
 
+  toSquare = () => {
+    const {history} = this.props
+    if (!getParam('version')) {
+      history.push('/year/yearindex')
+    } else {
+      history.push('/year/yearindex?version=' + getParam('version'))
+    }
+  }
+
 
   render() {
     const {
@@ -367,7 +394,7 @@ class Landing extends Component {
     return (
       <div id={'landing'}>
         <div id="to-square">
-          <Link to='/year/yearindex'>前往活动会场，享更多福利！ >></Link>
+          <a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a>
         </div>
         <BoxContainer>
           <i className="snow-deco"/>

src/components/activity/newyear-2019/landing/landing.scss

@@ -338,7 +338,7 @@
     }
 
     img {
-        margin: 18px 0 16px;
+        margin: 15px 0 16px;
         width: 137px;
         height: 137px;
     }
@@ -349,7 +349,15 @@
     }
 
     button {
-
+        width: 270px;
+        height: 44px;
+        background: rgba(255, 227, 25, 1);
+        border: 1px solid rgba(9, 9, 9, 1);
+        border-radius: 5px;
+        font-size: 16px;
+        font-weight: normal;
+        color: rgba(9, 9, 9, 1);
+        margin-bottom: 15px;
     }
 }
 
@@ -392,6 +400,6 @@
     }
 }
 
-.year19-index{
+.year19-index {
     display: none;
 }