fix(account): keep actionable traffic orders after payment start

src/views/AccountView/AccountView.vue

@@ -87,18 +87,18 @@
           <template #content="{ row }">{{ orderContentLabel(row) }}</template>
           <template #unitPrice="{ row }">{{ money(row.unitPrice) }}</template>
           <template #totalPrice="{ row }"><strong>{{ money(row.totalPrice) }}</strong></template>
-          <template #payStatus="{ row }"><em :class="{ processing: row.payStatus === 'unpaid' }">{{ payStatusName(row.payStatus) }}</em></template>
+          <template #payStatus="{ row }"><em :class="{ processing: row.payStatus === 'unpaid' || row.payStatus === 'processing' }">{{ payStatusName(row.payStatus) }}</em></template>
           <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
           <template #actions="{ row }">
             <t-button
-              v-if="row.payStatus === 'unpaid'"
+              v-if="isTrafficOrderActionable(row)"
               variant="text"
               theme="primary"
               :loading="payingOrderId === row.id"
               @click="payTrafficOrder(row)"
             >去支付</t-button>
             <t-button
-              v-if="row.payStatus === 'unpaid'"
+              v-if="isTrafficOrderActionable(row)"
               variant="text"
               theme="danger"
               @click="cancelTrafficOrder(row.id)"
@@ -344,11 +344,15 @@ function sourceName(type) { return ({ live: '直播', replay: '回放', download
 function payStatusName(status) {
   return ({
     unpaid: '待支付',
+    processing: '支付中',
     paid: '已支付',
     cancelled: '已取消',
     closed: '已关闭'
   })[status] || status || '--'
 }
+function isTrafficOrderActionable(row) {
+  return row?.payStatus === 'unpaid' || row?.payStatus === 'processing'
+}
 function describePayment(payment) {
   if (!payment) return '支付已创建'
   const amount = moneyFromFen(payment.totalFeeFen)
@@ -412,18 +416,24 @@ async function createTrafficOrderAndPay() {
     return
   }
   trafficOrdering.value = true
+  let orderCreated = false
   try {
     const order = await request.post(urls.TRAFFIC_ORDERS, {
       packageId: Number(selectedTrafficPackageId.value)
     })
+    orderCreated = true
+    orderPageNum.value = 1
     const payment = await createPayment('traffic_order', order.id)
     ui.toast(describePayment(payment))
-    orderPageNum.value = 1
     await Promise.all([loadOrders(), request.get(urls.TRAFFIC_BALANCE).then((data) => {
       balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
     })])
   } catch (error) {
     ui.toast(error.message || '购买失败')
+    if (orderCreated) {
+      orderPageNum.value = 1
+      await loadOrders()
+    }
   } finally {
     trafficOrdering.value = false
   }
@@ -441,7 +451,7 @@ async function payTrafficOrder(row) {
   }
 }
 async function cancelTrafficOrder(id) {
-  const ok = await ui.confirm('取消该流量订单？', '仅未支付订单可取消。', ['订单将关闭', '可重新选择套餐下单'])
+  const ok = await ui.confirm('取消该流量订单？', '仅待支付/支付中订单可取消。', ['订单将关闭', '可重新选择套餐下单'])
   if (!ok) return
   try {
     await request.delete(urls.TRAFFIC_ORDER(id))