feat: 微信支付

src/views/billing/wxpay/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+    import { ref, computed, onMounted, onUnmounted } from 'vue';
+    import { useRoute } from 'vue-router';
+    import { useRouterPush } from '@/hooks/common/router';
+    import { doGetOrderInfo } from '@/service/api/order';
+
+    const route = useRoute();
+    const { routerPushByKey } = useRouterPush();
+
+    const qrCodeImg = ref<string>(route.query.url);
+    const orderId = ref<number>(route.query.orderId);
+    
+    let orderStatusInterval = ref<number | null>(null);
+
+    // 设置订单状态轮询定时器
+    const setOrderStatusInterval = () => {
+        orderStatusInterval = setInterval(async () => {
+            let res = await doGetOrderInfo(orderId.value);
+            if (res.data.status == 1) {
+                routerPushByKey('home')
+            }
+        }, 2000)
+    };
+    onMounted(() => {
+        setOrderStatusInterval();
+    });
+    onUnmounted(() => {
+        clearInterval(orderStatusInterval)
+    });
+</script>
+
+<template>
+  <div class="weChat__card--div">
+    <a-card class="weChat__card" :bordered="false">
+      <template #title>
+        <span class="title__span">微信支付</span>
+      </template>
+      <div class="weChat__card__content">
+        <p>
+          <img :src="qrCodeImg" class="weChat__card_qrCodeImg" />
+        </p>
+      <div class="bottomContent">
+        <span class="weChat__card_span">使用微信扫码支付</span>
+      </div>
+     </div>
+    </a-card>
+  </div>
+</template>