feat: 订单自动过期-查看时检查并取消超时订单，收银台倒计时结束自动取消

frontend/src/views/user/Checkout.vue

@@ -78,18 +78,19 @@ const paymentError = ref('')
 const remaining = ref(0)
 const totalTime = ref(0)
 const orderAmount = ref(0)
+const orderId = ref(0)
 let pollTimer: any = null
 let countdownTimer: any = null
 
 async function createPayment() {
   try {
-    const orderId = Number(route.params.id)
-    const res: any = await orderApi.createPayment(orderId)
+    orderId.value = Number(route.params.id)
+    const res: any = await orderApi.createPayment(orderId.value)
     paymentInfo.value = res.data
     totalTime.value = res.data.expiration_time || 600
     remaining.value = totalTime.value
 
-    const orderRes: any = await orderApi.getById(orderId)
+    const orderRes: any = await orderApi.getById(orderId.value)
     orderAmount.value = orderRes.data?.total_amount || 0
 
     if (qrCanvas.value) {
@@ -116,20 +117,22 @@ function startCountdown() {
     if (remaining.value <= 0) {
       clearInterval(countdownTimer)
       clearInterval(pollTimer)
+      orderApi.cancel(orderId.value).catch(() => {})
+      paymentError.value = '支付已超时，订单已取消'
+      paymentInfo.value = null
     }
   }, 1000)
 }
 
 function startPolling() {
-  const orderId = Number(route.params.id)
   pollTimer = setInterval(async () => {
     try {
-      const res: any = await orderApi.checkPaymentStatus(orderId)
+      const res: any = await orderApi.checkPaymentStatus(orderId.value)
       if (res.data?.status === 'pending_confirm' || res.data?.status === 'completed') {
         clearInterval(pollTimer)
         clearInterval(countdownTimer)
         ElMessage.success('支付成功！')
-        setTimeout(() => router.push(`/orders/${orderId}`), 1500)
+        setTimeout(() => router.push(`/orders/${orderId.value}`), 1500)
       }
     } catch {}
   }, 5000)