优化支付

src/views/console/components/token.vue

@@ -150,8 +150,13 @@
         </el-checkbox>
       </div>
       <template #footer>
-        <el-button @click="safetyDialog.visible = false">取消</el-button>
-        <el-button type="primary" :disabled="!safetyDialog.checked" @click="confirmRecharge">确认充值</el-button>
+        <el-button :disabled="safetyDialog.submitting" @click="safetyDialog.visible = false">取消</el-button>
+        <el-button
+          type="primary"
+          :disabled="!safetyDialog.checked"
+          :loading="safetyDialog.submitting"
+          @click="confirmRecharge"
+        >确认充值</el-button>
       </template>
     </el-dialog>
 
@@ -296,7 +301,8 @@ function handleRecharge() {
 }
 
 // 确认充值
-function confirmRecharge() {
+async function confirmRecharge() {
+  if (safetyDialog.value.submitting) return; // 防双击
   if (!safetyDialog.value.checked) {
     proxy.$modal.msgError("请先勾选同意安全使用条款");
     return;
@@ -305,43 +311,60 @@ function confirmRecharge() {
   // 记录用户已同意安全承诺
   localStorage.setItem(STORAGE_KEY_SAFETY_AGREED, 'true');
 
-  safetyDialog.value.visible = false;
-  doRecharge();
+  // 进入提交态：弹窗不关，按钮转 loading，直到二维码生成成功才关闭
+  safetyDialog.value.submitting = true;
+  try {
+    await doRecharge();              // 成功（QR 已展示）后再走下面
+    safetyDialog.value.visible = false;
+  } catch (e) {
+    // 失败时弹窗保留，方便用户直接重试；错误提示由 doRecharge 内 msgError 处理
+  } finally {
+    safetyDialog.value.submitting = false;
+  }
 }
 
 function doRecharge() {
-  rechargeLoading.value = true;
-  qrCode.value.url = "";
-
-  createRecharge(rechargeForm.amount).then(response => {
-    if (response && response.data && response.data.id) {
-      // 保存当前充值ID用于轮询
-      currentRechargeId.value = response.data.id;
-
-      // 生成二维码
-      if (response.data.qrCodeUrl) {
-        QRCode.toDataURL(response.data.qrCodeUrl, { errorCorrectionLevel: 'L', margin: 2, width: 200 }, (err, url) => {
-          if (err) {
-            proxy.$modal.msgError("生成二维码失败");
+  // 返回 Promise：resolve = 二维码已展示，reject = 出错（弹窗保留）
+  return new Promise((resolve, reject) => {
+    rechargeLoading.value = true;
+    qrCode.value.url = "";
+
+    createRecharge(rechargeForm.amount).then(response => {
+      if (response && response.data && response.data.id) {
+        // 保存当前充值ID用于轮询
+        currentRechargeId.value = response.data.id;
+
+        // 生成二维码
+        if (response.data.qrCodeUrl) {
+          QRCode.toDataURL(response.data.qrCodeUrl, { errorCorrectionLevel: 'L', margin: 2, width: 200 }, (err, url) => {
             rechargeLoading.value = false;
-            return;
-          }
-          qrCode.value.url = url;
-          qrCode.value.visible = true;
-          // 开始轮询
-          createQueryInterval(currentRechargeId.value);
-        });
+            if (err) {
+              proxy.$modal.msgError("生成二维码失败");
+              reject(err);
+              return;
+            }
+            qrCode.value.url = url;
+            qrCode.value.visible = true;
+            // 开始轮询
+            createQueryInterval(currentRechargeId.value);
+            proxy.$modal.msgSuccess("充值订单已创建");
+            resolve();
+          });
+        } else {
+          rechargeLoading.value = false;
+          proxy.$modal.msgError("获取支付链接失败");
+          reject(new Error("no qrCodeUrl"));
+        }
       } else {
-        proxy.$modal.msgError("获取支付链接失败");
+        rechargeLoading.value = false;
+        proxy.$modal.msgError("创建充值订单失败");
+        reject(new Error("invalid response"));
       }
-      proxy.$modal.msgSuccess("充值订单已创建");
-    } else {
-      proxy.$modal.msgError("创建充值订单失败");
-    }
-    rechargeLoading.value = false;
-  }).catch(error => {
-    rechargeLoading.value = false;
-    proxy.$modal.msgError("充值失败: " + (error.message || "未知错误"));
+    }).catch(error => {
+      rechargeLoading.value = false;
+      proxy.$modal.msgError("充值失败: " + (error.message || "未知错误"));
+      reject(error);
+    });
   });
 }