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

frontend/src/views/mobile/MobileListingDetailView.vue

@@ -133,7 +133,7 @@ async function handleCreateOrder() {
   ordering.value = true;
   try {
     await createOrder(listing.value.id);
-    showToast({ message: "订单已创建，账号已锁定", icon: "passed" });
+    showToast({ message: "订单已创建，请完成支付", icon: "passed" });
     await router.push(`/m/orders`);
   } catch (error) {
     showToast({ message: readError(error, "下单失败"), icon: "cross" });

frontend/src/views/mobile/MobileOrdersView.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { showToast } from "vant";
 
-import { fetchOrders, type Order } from "@/api/orders";
+import { fetchOrders, payOrder, type Order } from "@/api/orders";
 import { formatDateMinute } from "@/utils/time";
 
 const router = useRouter();
@@ -11,6 +11,7 @@ const route = useRoute();
 const loading = ref(false);
 const orders = ref<Order[]>([]);
 const activeTab = ref("all");
+const payingOrderId = ref<number | null>(null);
 
 /** 判断当前底部导航是否激活 */
 function isNavActive(path: string) {
@@ -34,6 +35,7 @@ async function loadOrders() {
 /* 状态筛选 */
 const statusTabs = [
   { key: "all", label: "全部" },
+  { key: "pending_payment", label: "待支付" },
   { key: "pending_handoff", label: "待交接" },
   { key: "renting", label: "使用中" },
   { key: "pending_return_confirm", label: "待归还" },
@@ -48,6 +50,7 @@ const displayOrders = computed(() => {
 /* 状态颜色映射 */
 function statusColor(status: string) {
   const map: Record<string, string> = {
+    pending_payment: "#ff6a00",
     pending_handoff: "#ff9800",
     renting: "#1477ff",
     overdue: "#e91e63",
@@ -63,6 +66,7 @@ function statusColor(status: string) {
 
 function statusLabel(status: string) {
   const map: Record<string, string> = {
+    pending_payment: "待支付",
     pending_handoff: "待交接",
     renting: "使用中",
     overdue: "已逾期",
@@ -79,6 +83,28 @@ function statusLabel(status: string) {
 function goDetail(id: number) {
   router.push(`/m/orders/${id}`);
 }
+
+async function handlePay(order: Order) {
+  payingOrderId.value = order.id;
+  try {
+    await payOrder(order.id);
+    showToast({ message: "支付成功", icon: "passed" });
+    await loadOrders();
+  } catch (error) {
+    showToast({ message: readError(error, "支付失败"), icon: "cross" });
+  } 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>
@@ -155,7 +181,16 @@ function goDetail(id: number) {
         <!-- 卡片底：时间 + 操作 -->
         <div class="card-footer">
           <span class="order-time">{{ formatDateMinute(order.created_at) }}</span>
-          <span class="detail-link">查看详情 ›</span>
+          <van-button
+            v-if="order.status === 'pending_payment'"
+            size="mini"
+            type="primary"
+            :loading="payingOrderId === order.id"
+            @click.stop="handlePay(order)"
+          >
+            支付
+          </van-button>
+          <span v-else class="detail-link">查看详情 ›</span>
         </div>
       </div>
     </section>