优化乐刷通知与钱包充值流程

frontend/src/views/account/WalletView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import QRCode from 'qrcode'
 
@@ -27,8 +27,11 @@ const rechargeDialogVisible = ref(false)
 const activeRechargePayment = ref<PaymentOrder | null>(null)
 const rechargeQRCodeURL = ref('')
 const qrGenerating = ref(false)
+const checkingRecharge = ref(false)
+let rechargePollingTimer: number | undefined
 
 onMounted(loadWallet)
+onBeforeUnmount(stopRechargePolling)
 
 async function loadWallet() {
   loading.value = true
@@ -71,7 +74,8 @@ async function handleRecharge() {
 function showRechargePaymentDialog(payment: PaymentOrder) {
   activeRechargePayment.value = payment
   rechargeDialogVisible.value = true
-  renderRechargeQRCode(payment)
+  void renderRechargeQRCode(payment)
+  startRechargePolling()
 }
 
 function rechargePayURL(payment = activeRechargePayment.value) {
@@ -102,24 +106,54 @@ async function renderRechargeQRCode(payment = activeRechargePayment.value) {
   }
 }
 
-async function refreshRechargePayment(paymentID: number) {
-  const payment = await queryWalletRechargePayment(paymentID)
-  if (payment.paid) {
-    ElMessage.success('充值成功')
-    rechargeDialogVisible.value = false
-    await loadWallet()
-  } else {
-    activeRechargePayment.value = payment
-    await renderRechargeQRCode(payment)
-    ElMessage.info('支付未完成')
+function startRechargePolling() {
+  stopRechargePolling()
+  rechargePollingTimer = window.setInterval(() => {
+    void refreshRechargePayment(true)
+  }, 3000)
+}
+
+function stopRechargePolling() {
+  if (rechargePollingTimer !== undefined) {
+    window.clearInterval(rechargePollingTimer)
+    rechargePollingTimer = undefined
+  }
+}
+
+async function refreshRechargePayment(silent = false) {
+  const paymentID = activeRechargePayment.value?.id
+  if (!paymentID || checkingRecharge.value) {
+    return
+  }
+  checkingRecharge.value = true
+  const currentPayURL = rechargePayURL()
+  try {
+    const payment = await queryWalletRechargePayment(paymentID)
+    if (payment.paid) {
+      stopRechargePolling()
+      ElMessage.success('充值成功')
+      rechargeDialogVisible.value = false
+      await loadWallet()
+    } else {
+      activeRechargePayment.value = payment
+      if (rechargePayURL(payment) !== currentPayURL) {
+        await renderRechargeQRCode(payment)
+      }
+      if (!silent) {
+        ElMessage.info('支付未完成')
+      }
+    }
+  } catch (error) {
+    if (!silent) {
+      ElMessage.error(readError(error, '刷新支付状态失败'))
+    }
+  } finally {
+    checkingRecharge.value = false
   }
 }
 
 async function handleRefreshRechargePayment() {
-  if (!activeRechargePayment.value) {
-    return
-  }
-  await refreshRechargePayment(activeRechargePayment.value.id)
+  await refreshRechargePayment(false)
 }
 
 function readError(error: unknown, fallback: string) {
@@ -156,7 +190,7 @@ function readError(error: unknown, fallback: string) {
 
     <div class="table-panel recharge-panel">
       <h2>支付充值</h2>
-      <el-input-number v-model="rechargeAmount" :min="1" :precision="0" controls-position="right" />
+      <el-input-number v-model="rechargeAmount" :min="0.01" :step="0.01" :precision="2" controls-position="right" />
       <el-button type="primary" :loading="recharging" @click="handleRecharge">发起充值</el-button>
     </div>
 
@@ -196,6 +230,7 @@ function readError(error: unknown, fallback: string) {
       append-to-body
       :z-index="4000"
       class="wallet-pay-dialog"
+      @closed="stopRechargePolling"
     >
       <div v-if="activeRechargePayment" class="pay-dialog-body">
         <div class="pay-summary">
@@ -209,14 +244,14 @@ function readError(error: unknown, fallback: string) {
           </div>
           <div class="pay-scan-copy">
             <strong>请使用微信或支付宝扫码支付</strong>
-            <span>不要在电脑浏览器直接打开该链接。扫码完成后点击“我已支付”刷新充值状态。</span>
+            <span>不要在电脑浏览器直接打开该链接。扫码完成后将自动刷新，也可手动确认。</span>
           </div>
         </div>
         <p v-else class="pay-hint">充值支付单已创建，请完成付款后刷新状态。</p>
       </div>
       <template #footer>
         <div class="pay-dialog-footer">
-          <el-button type="primary" @click="handleRefreshRechargePayment">我已支付，刷新状态</el-button>
+          <el-button type="primary" :loading="checkingRecharge" @click="handleRefreshRechargePayment">我已支付，刷新状态</el-button>
         </div>
       </template>
     </el-dialog>