后台“资金流水

frontend/src/views/admin/AdminOrderDetailView.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { fetchAdminHandoffRecords, fetchAdminOrder, type HandoffRecord, type Order } from '@/api/orders'
+
+const route = useRoute()
+const loading = ref(false)
+const order = ref<Order | null>(null)
+const handoffRecords = ref<HandoffRecord[]>([])
+
+const snapshotText = computed(() => JSON.stringify(order.value?.account_snapshot || {}, null, 2))
+
+onMounted(loadOrder)
+
+async function loadOrder() {
+  loading.value = true
+  try {
+    order.value = await fetchAdminOrder(String(route.params.id))
+    handoffRecords.value = await fetchAdminHandoffRecords(String(route.params.id))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="page" v-loading="loading">
+    <div v-if="order" class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">{{ order.order_no }}</p>
+        <h1>订单详情</h1>
+        <p>{{ order.title }} · {{ order.server_region }} / {{ order.login_platform }}</p>
+      </div>
+      <RouterLink to="/admin/orders">
+        <el-button>返回列表</el-button>
+      </RouterLink>
+    </div>
+
+    <div v-if="order" class="metric-grid dashboard-metrics">
+      <div class="metric-card">
+        <span>订单状态</span>
+        <strong>{{ order.status }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>交接状态</span>
+        <strong>{{ order.handoff_status }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>租金</span>
+        <strong>¥{{ order.rent_amount }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>押金</span>
+        <strong>¥{{ order.deposit_amount }}</strong>
+      </div>
+    </div>
+
+    <div v-if="order" class="dashboard-panels">
+      <div class="order-panel dashboard-panel">
+        <h2>用户信息</h2>
+        <p>租客：{{ order.renter_phone || order.renter_id }}</p>
+        <p>号主：{{ order.owner_phone || order.owner_id }}</p>
+        <p>租期：{{ order.rent_hours }} 小时</p>
+        <p>开始：{{ order.rent_start_at || '未开始' }}</p>
+        <p>结束：{{ order.rent_end_at || '未设置' }}</p>
+      </div>
+
+      <div class="order-panel dashboard-panel">
+        <h2>交接记录</h2>
+        <el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
+        <div v-for="record in handoffRecords" :key="record.id" class="timeline-item">
+          <strong>{{ record.type }}</strong>
+          <p>{{ record.content }}</p>
+          <span>{{ record.created_at }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="order" class="order-panel dashboard-panel code-panel">
+      <h2>账号快照</h2>
+      <pre>{{ snapshotText }}</pre>
+    </div>
+  </section>
+</template>