wip: 二维码组件封装，支付页面二维码尚未替换

components/qr-code/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="qrCode-container">
+    <u-popup 
+      :show="visible" 
+      mode="center"
+      closeable
+      :round="10"
+    >
+      <view class="qr-code-container-content">
+        <view class="qr-code-container-title">{{ title }}</view>
+        <canvas 
+          canvas-id="QRCodeCanvas"
+          :style="`width: ${size}px; height: ${size}px;`"
+        ></canvas>
+      </view>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+import UQRCode from 'uqrcodejs'
+let qrCode = null
+export default {
+  props: {
+    qrData: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: Number,
+      default: 280
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      qrCode: null
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.show
+      },
+      set(val) {
+        this.$emit('update:show', val)
+      }
+    }
+  },
+  methods: {
+    initQRCode() {
+      if (!this.qrData) return
+      this.$nextTick(() => {
+        qrCode = new UQRCode()
+        qrCode.data = this.qrData
+        qrCode.size = this.size
+        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()
+      })
+    }
+  },
+  onLoad() {
+    // this.initQRCode()
+  },
+  beforeDestroy() {
+    qrCode?.destroy()
+    qrCode = null
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.initQRCode()
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qrCode-container {
+  .qr-code-container-content {
+    text-align: center;
+    margin-top: 20px;
+    padding: 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .qr-code-container-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-bottom: 20rpx;
+    }
+  }
+  
+}
+</style>show

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://localhost:8080'
+    config.baseURL = 'http://t-app.beida413.com/prod-api'
     // 192.168.0.100:8080
 
     //#ifdef DEV_SERVER

pages/pay/index.vue

@@ -684,20 +684,22 @@
       :showCancelButton="true"
       content="是否确定解绑该银行卡"
     ></u-modal>
+    <QRCode :qrData="qrData" :show="qrCodeVisible" />
   </view>
 </template>
 
 <script>
 import * as api from '@/config/pay.js'
-import QRCode from 'qrcodejs2' // 移除旧的引用
 import UQRCode from 'uqrcodejs' // 引入新的库
 import successDialog from '@/components/successDialog.vue'
 import * as act from '@/config/activity.js'
+import QRCode from '@/components/qr-code/index.vue' // 引入新的库
 var payStatus
 
 export default {
   components: {
     successDialog,
+    QRCode
   },
   data() {
     return {
@@ -737,6 +739,8 @@ export default {
       czJe: '',
       onlinePay: true,
       unBindCode: '',
+      qrCodeVisible: false,
+      qrData: '',
     }
   },
   computed: {
@@ -749,23 +753,6 @@ export default {
   },
   onLoad(options) {
     this.paramsPost = JSON.parse(options.paramsPost)
-    this.wxPopup = true
-
-    this.$nextTick(() => {
-      const qr = new UQRCode()
-      qr.data = 'https://uqrcode.cn/doc'
-      qr.size = 280
-      qr.margin = 10
-      qr.make()
-      const canvasContext = uni.createCanvasContext('qrcodeCanvasWx', this)
-      qr.canvasContext = canvasContext
-      qr.drawCanvas()
-    })
-    console.log(
-      '%c [ this.paramsPost ]-734',
-      'font-size:13px; background:#777244; color:#bbb688;',
-      this.paramsPost
-    )
     this.pkCountry = uni.getStorageSync('pkCountry')
     if (this.paramsPost.ifcz) {
       this.ifcz = this.paramsPost.ifcz
@@ -817,6 +804,10 @@ export default {
     // this.getBankList()
   },
   methods: {
+    showQRCode(text) {
+      this.qrCodeVisible = true
+      this.qrData = text
+    },
     toUnBind() {
       api
         .unBind({