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

frontend/src/views/account/OrderDetailView.vue

@@ -11,6 +11,7 @@ import {
   confirmReturn,
   fetchHandoffRecords,
   fetchOrder,
+  payOrder,
   submitHandoff,
   submitReturn,
   type HandoffRecord,
@@ -25,6 +26,7 @@ const router = useRouter()
 const session = useSessionStore()
 const loading = ref(false)
 const cancelling = ref(false)
+const paying = ref(false)
 const handoffing = ref(false)
 const confirming = ref(false)
 const returning = ref(false)
@@ -72,6 +74,20 @@ async function handleCancel() {
   }
 }
 
+async function handlePay() {
+  if (!order.value) return
+  paying.value = true
+  try {
+    await payOrder(order.value.id)
+    ElMessage.success('支付成功，等待号主交接')
+    await loadOrder()
+  } catch (error) {
+    ElMessage.error(readError(error, '支付失败'))
+  } finally {
+    paying.value = false
+  }
+}
+
 async function handleSubmitHandoff() {
   if (!order.value) return
   handoffing.value = true
@@ -210,7 +226,11 @@ function readError(error: unknown, fallback: string) {
     <div v-if="order" class="order-panel">
       <p>开始：{{ formatDateTime(order.rent_start_at, '未开始') }}</p>
       <p>预计截止：{{ formatDateTime(order.rent_end_at, '未设置') }}</p>
-      <el-button v-if="order.status === 'pending_handoff'" type="danger" :loading="cancelling" @click="handleCancel">
+      <p v-if="order.status === 'pending_payment'">订单待支付，支付后账号进入交接流程。</p>
+      <el-button v-if="order.status === 'pending_payment' && isRenter" type="primary" :loading="paying" @click="handlePay">
+        支付订单
+      </el-button>
+      <el-button v-if="['pending_payment', 'pending_handoff'].includes(order.status)" type="danger" :loading="cancelling" @click="handleCancel">
         取消订单并释放账号
       </el-button>
     </div>