cps：支付

htmldev/cps/src/views/paymentCode/index.vue

@@ -39,6 +39,15 @@
         ref="myPicker"
       />
     </van-popup>
+    <van-popup
+      closeable
+      v-model="showQrCode">
+      <div class="qrcode-wrap">
+        <img
+          :src="qrcodeSrc"
+          alt="">
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -46,6 +55,7 @@
 import { Form, Field, Popup, Picker, Button, Toast } from 'vant'
 import { apiOrgList, apiWechatPay } from './api/api'
 import { yuan2Fen } from '@/utils'
+import QRCode from 'qrcodejs2'
 
 export default {
   name: 'index',
@@ -60,11 +70,14 @@ export default {
     return {
       accountName: '', // 账号名称
       id: '', // 账号ID
-      orderPrice: '', // 重置金额
+      orderPrice: '0.01', // 充值金额
       showPicker: false,
       columns: [],
       errorList: [],
-      booLock: false
+      booLock: false,
+      qrcode: '',
+      qrcodeSrc: '',
+      showQrCode: false
     }
   },
   created () {
@@ -116,14 +129,35 @@ export default {
       }
       try {
         this.booLock = true
+        this.qrcodeSrc = ''
+        this.showQrCode = true
         const { status, data, msg } = await apiWechatPay(this.id, yuan2Fen(this.orderPrice))
         this.booLock = false
         if (status) {
-          top.location.href = data.code_url
+          this.createQRCode(data.code_url)
         } else {
           Toast(msg)
         }
       } catch (err) {}
+    },
+    createQRCode (link) {
+      if (!this.qrcode) {
+        this.qrcode = new QRCode('fbt-qr-code', {
+          width: 346,
+          height: 346,
+          text: link,
+          colorDark: '#000',
+          colorLight: '#fff'
+        })
+      } else {
+        this.qrcode.clear()
+        this.qrcode.makeCode(link)
+      }
+      const timer = setTimeout(() => {
+        clearTimeout(timer)
+        const canvas = document.getElementById('fbt-qr-code').getElementsByTagName('canvas')[0]
+        this.qrcodeSrc = canvas.toDataURL('image/png', 1)
+      }, 500)
     }
   }
 }
@@ -142,4 +176,19 @@ export default {
     }
   }
 }
+
+.qrcode-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 243px;
+  padding-top: 16px;
+  height: 263px;
+
+  img {
+    display: block;
+    width: 190px;
+    height: 190px;
+  }
+}
 </style>