接入订单支付与钱包充值前端入口

frontend/src/views/account/OrdersView.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
-import { fetchOrders, type Order } from '@/api/orders'
+import { fetchOrders, payOrder, type Order } from '@/api/orders'
 import { orderStatusLabel } from '@/utils/statusLabels'
 
 const loading = ref(false)
 const orders = ref<Order[]>([])
+const payingOrderId = ref<number | null>(null)
 
 onMounted(loadOrders)
 
@@ -17,6 +19,27 @@ async function loadOrders() {
     loading.value = false
   }
 }
+
+async function handlePay(order: Order) {
+  payingOrderId.value = order.id
+  try {
+    await payOrder(order.id)
+    ElMessage.success('支付成功，等待号主交接')
+    await loadOrders()
+  } catch (error) {
+    ElMessage.error(readError(error, '支付失败'))
+  } finally {
+    payingOrderId.value = null
+  }
+}
+
+function readError(error: unknown, fallback: string) {
+  if (typeof error === 'object' && error && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: string } } }).response
+    return response?.data?.message || fallback
+  }
+  return fallback
+}
 </script>
 
 <template>
@@ -24,7 +47,7 @@ async function loadOrders() {
     <div class="page-header">
       <p class="eyebrow">Orders</p>
       <h1>我的订单</h1>
-      <p>跟踪待交接、使用中、待归还、申诉中和已完成订单。</p>
+      <p>跟踪待支付、待交接、使用中、待归还、申诉中和已完成订单。</p>
     </div>
 
     <el-table v-loading="loading" class="table-panel" :data="orders">
@@ -35,8 +58,17 @@ async function loadOrders() {
       <el-table-column label="状态" width="140">
         <template #default="{ row }">{{ orderStatusLabel(row.status) }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="100">
+      <el-table-column label="操作" width="160">
         <template #default="{ row }">
+          <el-button
+            v-if="row.status === 'pending_payment'"
+            size="small"
+            type="primary"
+            :loading="payingOrderId === row.id"
+            @click="handlePay(row)"
+          >
+            支付
+          </el-button>
           <RouterLink :to="`/orders/${row.id}`">
             <el-button size="small">详情</el-button>
           </RouterLink>