feat(pay): 支付二维码展示使用组件替换

components/qr-code/index.vue

@@ -5,6 +5,7 @@
       mode="center"
       closeable
       :round="10"
+      @close="closeHandler"
     >
       <view class="qr-code-container-content">
         <view class="qr-code-container-title">{{ title }}</view>
@@ -55,6 +56,9 @@ export default {
     }
   },
   methods: {
+    closeHandler() {
+      this.$emit('update:show', false)
+    },
     initQRCode() {
       if (!this.qrData) return
       this.$nextTick(() => {
@@ -64,11 +68,6 @@ export default {
         qrCode.make()
         const canvasContext = uni.createCanvasContext('QRCodeCanvas', this)
         qrCode.canvasContext = canvasContext
-        console.log(
-          '%c [ qrCode ]-58',
-          'font-size:13px; background:#777244; color:#bbb688;',
-          qrCode
-        )
         qrCode.drawCanvas()
       })
     }

config/request.js

@@ -8,7 +8,7 @@ import { getToken, removeToken } from '@/config/auth.js'
 module.exports = (vm) => {
   // 初始化请求配置
   uni.$u.http.setConfig((config) => {
-    config.baseURL = 'http://t-app.beida413.com/prod-api'
+    config.baseURL = 'http://192.168.0.104:8080'
     // 192.168.0.100:8080
 
     //#ifdef DEV_SERVER

pages/pay/index.vue

@@ -10,17 +10,17 @@
     <view class="contxt">
       <!-- 充值 -->
       <template v-if="ifcz">
-        <div class="tit4">{{ '充值金额' }}</div>
+        <div class="tit4">充值金额</div>
         <u-input class="czinputbox" v-model="czJe"></u-input>
       </template>
       <template v-else>
-        <view class="tit">{{ '待支付金额' }}</view>
+        <view class="tit">待支付金额</view>
         <view class="tit1">
           {{ userInfo.currencyIcon
           }}{{ orderData.orderAmount | numberToCurrency }}
         </view>
         <view class="tit2"
-          >{{ '请在' }} <view class="tit3">{{ countDown }}</view
+          >请在 <view class="tit3">{{ countDown }}</view
           >{{ '内完成支付，否则订单将会被自动取消' }}
         </view>
       </template>
@@ -642,7 +642,7 @@
             @tap="quickPay(ifcz)"
             color="linear-gradient(to right, #fb3024, #fb3024 )"
           >
-            {{ '立即支付' }}
+            立即支付
           </u-button>
         </view>
       </view>
@@ -658,19 +658,12 @@
       :asyncClose="true"
     ></u-modal>
     <!-- 二维码 -->
-    <u-popup :show="wxPopup" mode="center" closeable @close="closewxPopup">
+    <!-- <u-popup :show="wxPopup" mode="center" closeable @close="closewxPopup">
       <view class="t_tit">{{ '微信支付' }}</view>
       <view class="pay_code">
         <canvas canvas-id="qrcodeCanvasWx" style="width: 280px; height: 280px;"></canvas>
       </view>
-    </u-popup>
+    </u-popup> -->
-    <!-- 支付宝二维码 -->
-    <u-popup :show="wxPopup1" mode="center" closeable @close="closewxPopup">
-      <view class="t_tit">{{ '支付宝支付' }}</view>
-      <view class="pay_code">
-        <canvas canvas-id="qrcodeCanvasAlipay" style="width: 280px; height: 280px;"></canvas>
-      </view>
-    </u-popup>
     <successDialog
       @successClose="successClose"
       ref="successDialog"
@@ -684,7 +677,7 @@
       :showCancelButton="true"
       content="是否确定解绑该银行卡"
     ></u-modal>
-    <QRCode :qrData="qrData" :show="qrCodeVisible" />
+    <QRCode :qrData="qrData" :show.sync="qrCodeVisible" />
   </view>
 </template>
 
@@ -732,8 +725,6 @@ export default {
       showSucce: false, //
       sucPay: 0,
       content: '支付成功',
-      wxPopup: false,
-      wxPopup1: false,
       luckydrawData: {},
       ifcz: false,
       czJe: '',
@@ -803,6 +794,10 @@ export default {
     // 获取银行卡
     // this.getBankList()
   },
+  onUnload() {
+    clearInterval(this.clockTime)
+    clearInterval(this.payStatus)
+  },
   methods: {
     showQRCode(text) {
       this.qrCodeVisible = true
@@ -849,11 +844,6 @@ export default {
           }
         })
     },
-    closewxPopup() {
-      this.wxPopup = false
-      this.wxPopup1 = false
-      clearInterval(payStatus)
-    },
     // 绑定银行卡
     bindBank(val) {
       uni.navigateTo({
@@ -1174,115 +1164,51 @@ export default {
       }
     },
     scanPayBfWx(val) {
-      let params
+      const params = {
-      if (this.ifcz) {
+        businessType: this.ifcz ? 3 : this.businessType, //订单类型充值
-        params = {
+        businessCode: this.orderCode,
-          businessType: 3, //订单类型充值
+        payChannel: val,
-          businessCode: this.orderCode,
+        payType: 2,
-          payChannel: val,
-          payType: 2,
-        }
-      } else {
-        params = {
-          businessType: this.businessType, //订单类型充值
-          businessCode: this.orderCode,
-          payChannel: val,
-          payType: 2,
-        }
       }
       api.unifiedorder(params).then(res => {
-        this.wxPopup = true
+        this.showQRCode(res.data)
-        this.$nextTick(() => {
-          const ctx = uni.createCanvasContext('qrcodeCanvasWx', this)
-          const uqrcode = new UQRCode(ctx, { width: 280, height: 280 })
-          uqrcode.make(res.data).then(() => {
-            uqrcode.drawCanvas()
-          })
-        })
       })
       this.checkPayStatus(params)
     },
     // 微信支付
     scanPayWx(val) {
-      let params
+      const params = {
-      if (this.ifcz) {
+        businessType: this.ifcz ? 3 : this.businessType, //订单类型充值
-        params = {
+        businessCode: this.orderCode,
-          businessType: 3, //订单类型充值
+        payChannel: val,
-          businessCode: this.orderCode,
+        payType: 2,
-          payChannel: val,
-          payType: 2,
-        }
-      } 
-      else {
-        params = {
-          businessType: this.businessType, //订单类型充值
-          businessCode: this.orderCode,
-          payChannel: val,
-          payType: 2,
-        }
-    
-        api.unifiedorder(params).then(res => {
-          this.wxPopup = true
-          this.$nextTick(() => {
-            const ctx = uni.createCanvasContext('qrcodeCanvasWx', this)
-            const uqrcode = new UQRCode(ctx, { width: 280, height: 280 })
-            uqrcode.make(res.data).then(() => {
-              uqrcode.drawCanvas()
-            })
-          })
-        })
-        this.checkPayStatus(params)
       }
+      api.unifiedorder(params).then(res => {
+        this.showQRCode(res.data)
+      })
+      this.checkPayStatus(params)
     },
     // 支付宝支付
     scanPayAl(val) {
-      let params
+      const params = {
-      if (this.ifcz) {
+        businessType: this.ifcz ? 3 : this.businessType, //订单类型充值
-        params = {
+        businessCode: this.orderCode,
-          businessType: 3, //订单类型充值
+        payChannel: val,
-          businessCode: this.orderCode,
+        payType: 1,
-          payChannel: val,
-          payType: 1,
-        }
-      } else {
-        params = {
-          businessType: this.businessType, //订单类型充值
-          businessCode: this.orderCode,
-          payChannel: val,
-          payType: 1,
-        }
       }
       api.unifiedorder(params).then(res => {
-        this.wxPopup1 = true
+        this.showQRCode(res.data)
-        this.$nextTick(() => {
-          const ctx = uni.createCanvasContext('qrcodeCanvasAlipay', this)
-          const uqrcode = new UQRCode(ctx, { width: 280, height: 280 })
-          uqrcode.make(res.data).then(() => {
-            uqrcode.drawCanvas()
-          })
-        })
       })
       this.checkPayStatus(params)
     },
     // 宝付微信支付
     scanPayBfWxJump(val) {
-      let params
+      const params = {
-      if (this.ifcz) {
+        businessType: this.ifcz ? 3 : this.businessType, //订单类型充值
-        params = {
+        businessCode: this.orderCode,
-          businessType: 3, //订单类型充值
+        payChannel: val,
-          businessCode: this.orderCode,
+        payType: 2,
-          payChannel: val,
+        appletFlag: 0,
-          payType: 2,
-          appletFlag: 0,
-        }
-      } else {
-        params = {
-          businessType: this.businessType, //订单类型充值
-          businessCode: this.orderCode,
-          payChannel: val,
-          payType: 2,
-          appletFlag: 0,
-        }
       }
       api.unifiedorder(params).then(res => {
         let url =
@@ -1297,23 +1223,12 @@ export default {
     },
     // 通联微信支付
     scanPayTlWxJump(val) {
-      let params
+      const params = {
-      if (this.ifcz) {
+        businessType: this.ifcz ? 3 : this.businessType, //订单类型充值
-        params = {
+        businessCode: this.orderCode,
-          businessType: 3, //订单类型充值
+        payChannel: val,
-          businessCode: this.orderCode,
+        payType: 2,
-          payChannel: val,
+        appletFlag: 0,
-          payType: 2,
-          appletFlag: 0,
-        }
-      } else {
-        params = {
-          businessType: this.businessType, //订单类型充值
-          businessCode: this.orderCode,
-          payChannel: val,
-          payType: 2,
-          appletFlag: 0,
-        }
       }
       api.unifiedorder(params).then(res => {
         let url =
@@ -1418,8 +1333,7 @@ export default {
               this.$refs.successDialog.showSuccess(res.data)
             })
           } else {
-            this.wxPopup = false
+            this.qrCodeVisible = false
-            this.wxPopup1 = false
             this.showSucce = true
           }
         } else {