feat 我的钱包

src/components/qrCode.vue

@@ -1,29 +1,56 @@
 <script setup lang='ts'>
-import { onMounted, ref, defineExpose } from 'vue'
+import { onMounted, ref, defineExpose, nextTick, reactive } from 'vue'
 import QRCode from "qrcodejs2-fixes";
 let visible = ref<boolean>(false)
-const qrinit = (v: number) => {
-  console.log('调用子组件方法');
+let amount = ref<Number>(0)
+let qrcode: { makeCode: (arg0: string) => void; clear: () => void; } | null = null
+let payInfo = reactive({
+  data: '',
+  amount: 0
+})
+const props = defineProps({
+  paymentType: Number
+})
+const qrinit = (v: string) => {
   visible.value = true
-  var qrcode = new QRCode(document.getElementById("code"), {
-    text: "http://jindo.dev.naver.com/collie",
-    width: 128,
-    height: 128,
-    colorDark: "#000000",
-    colorLight: "#ffffff",
-    correctLevel: QRCode.CorrectLevel.H
-  });
+  payInfo = JSON.parse(v)
+  amount.value = payInfo.amount
+  if (qrcode) {
+    qrcode.makeCode(payInfo.data)
+  } else {
+    nextTick(() => {
+      qrcode = new QRCode(document.getElementById("code"), {
+        text: payInfo.data,
+        width: 200,
+        height: 200,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H
+      });
+    })
+  }
+}
+const emit = defineEmits(["closeTimer"]);
+const close = () => {
+  console.log('进来关闭');
+  visible.value = false
+  qrcode.clear()
+  emit("closeTimer")
 }
 defineExpose({
-  qrinit
+  qrinit,
+  close
 })
 onMounted(() => {
 
 })
 </script>
 <template>
-  <a-modal v-model:visible="visible" title="支付" :footer="null">
-    <div id="code"></div>
+  <a-modal v-model:visible="visible" :title="`${paymentType === 1 ? '支付宝' : '微信'}支付`" :footer="null" @cancel="close">
+    <div class="flex flex-col items-center">
+      <div id="code"></div>
+      <div class="text-16px mt-20px">扫码支付 {{ amount }} 元</div>
+    </div>
   </a-modal>
 </template>
 <style lang='scss' scoped>

src/views/management/account/myWallet.vue

@@ -14,12 +14,13 @@ let checked = ref<boolean>(false)
 let amount = ref<number>(0)
 let moneyList = reactive([])
 let money = ref<any>('')
+let orderSn = ref<String>('')
+let timer: NodeJS.Timeout | null | undefined = null
 const QrCodeRef = ref()
 let params = reactive({
   money: 0,
   paymentType: 1,
   createType: 1,
-  id: 0
 })
 const handleGetWallet = () => {
   getWallet().then((res: any) => {
@@ -52,18 +53,38 @@ const handleRecharge = () => {
   }
   if (params.id === -1) {
     params.money = money
+    delete params.id
   } else {
     params.money = moneyList.arr.filter(v => { return v.id === params.id })[0].value
   }
   recharge(params).then((res: any) => {
-    console.log(res);
     if (res.code === 200) {
+      orderSn.value = res.data.orderSn
       if (QrCodeRef) {
-        QrCodeRef.value.qrinit()
+        QrCodeRef.value.qrinit(JSON.stringify(res.data))
+        timer = setInterval(() => {
+          handleGetPayResult()
+        }, 4000)
       }
+    } else {
+      message.error(res.msg)
+    }
+  })
+}
+const handleGetPayResult = () => {
+  getPayResult({ orderSn: orderSn.value, payType: params.paymentType }).then((res: any) => {
+    console.log('支付查询：', res);
+    if (res.code === 200 && res.data.status === 1) {
+      closeTimer()
+      message.success('支付成功！')
+      handleGetWallet()
+      QrCodeRef.value.close()
     }
   })
 }
+const closeTimer = () => {
+  clearInterval(timer)
+}
 onMounted(() => {
 
 })
@@ -117,7 +138,7 @@ onMounted(() => {
     </div>
     <a-button class="w-200px h-60px mt-10px" type="primary" :disabled="!checked" @click="handleRecharge">去充值</a-button>
   </div>
-  <QrCode ref="QrCodeRef" :paymentType="params.paymentType"></QrCode>
+  <QrCode ref="QrCodeRef" :paymentType="params.paymentType" @closeTimer="closeTimer"></QrCode>
 </template>
 <style lang='scss' scoped>
 .bg {