diff --git a/frontend/portal/src/views/order/PaymentView.vue b/frontend/portal/src/views/order/PaymentView.vue index 882795d..c80a68e 100644 --- a/frontend/portal/src/views/order/PaymentView.vue +++ b/frontend/portal/src/views/order/PaymentView.vue @@ -19,6 +19,9 @@ const isScanning = ref(false); const isSuccess = ref(false); let timer = null; let pollTimer = null; +let pollRetries = 0; +const MAX_POLL_RETRIES = 20; +const errorMessage = ref(""); const paymentMethodName = computed(() => { return paymentMethod.value === "alipay" ? "支付宝" : "余额"; @@ -46,33 +49,28 @@ const loadOrder = async () => { isSuccess.value = true; isScanning.value = false; } + return res; } catch (e) { console.error("Load order failed", e); + throw e; } }; const payOrder = async () => { try { isScanning.value = true; + errorMessage.value = ""; await orderApi.pay(orderId, { method: paymentMethod.value }); - // 支付接口若未立即更新状态,将继续依赖轮询 + // 触发一次立即刷新,后续由轮询收敛 + await loadOrder(); } catch (e) { console.error("Pay order failed", e); + errorMessage.value = "支付请求失败,请重试"; + } finally { isScanning.value = false; } }; -const simulateSuccess = () => { - isScanning.value = true; - setTimeout(() => { - isScanning.value = false; - isSuccess.value = true; - setTimeout(() => { - router.replace(tenantRoute(`/me/orders/${orderId}`)); - }, 1500); - }, 1000); -}; - onMounted(() => { timer = setInterval(() => { if (timeLeft.value > 0) timeLeft.value--; @@ -80,9 +78,10 @@ onMounted(() => { loadOrder(); - // Poll Status + // Poll Status (节流 + 成功即停) pollTimer = setInterval(async () => { try { + pollRetries += 1; const res = await orderApi.status(orderId); orderStatus.value = res?.status || ""; if (res?.amount_paid !== undefined) { @@ -94,14 +93,23 @@ onMounted(() => { if (orderStatus.value === "paid" || orderStatus.value === "completed") { isScanning.value = false; isSuccess.value = true; + errorMessage.value = ""; clearInterval(pollTimer); setTimeout( () => router.replace(tenantRoute(`/me/orders/${orderId}`)), - 1500, + 1200, ); } + if (pollRetries >= MAX_POLL_RETRIES && pollTimer) { + clearInterval(pollTimer); + isScanning.value = false; + errorMessage.value = "支付结果获取超时,请刷新页面或稍后重试"; + } } catch (e) { console.error("Poll status failed", e); + isScanning.value = false; + errorMessage.value = "获取支付状态失败,请重试"; + if (pollTimer) clearInterval(pollTimer); } }, 3000); }); @@ -143,16 +151,20 @@ onUnmounted(() => {
-
-

订单提交成功,请尽快支付

-
¥ {{ amount }}
-
- 商品:{{ productName || "加载中..." }} +
+

订单提交成功,请尽快支付

+
¥ {{ amount }}
+
+ 商品:{{ productName || "加载中..." }} +
+
+ 状态:{{ orderStatus || "pending" }} +
+
+ {{ errorMessage }} +
-
- 状态:{{ orderStatus || "pending" }} -
-
+
@@ -237,19 +249,13 @@ onUnmounted(() => {

二维码有效时间 2小时

-
-