后台“资金流水

frontend/src/views/admin/AdminOrdersView.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { fetchAdminOrders, type Order } from '@/api/orders'
+
+const loading = ref(false)
+const orders = ref<Order[]>([])
+const status = ref('')
+
+const filteredOrders = computed(() => {
+  if (!status.value) return orders.value
+  return orders.value.filter((item) => item.status === status.value)
+})
+
+onMounted(loadOrders)
+
+async function loadOrders() {
+  loading.value = true
+  try {
+    orders.value = await fetchAdminOrders()
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="page">
+    <div class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">Orders</p>
+        <h1>订单管理</h1>
+        <p>查看全量订单、交接状态、金额和结算状态。</p>
+      </div>
+      <div class="toolbar-actions">
+        <el-select v-model="status" clearable placeholder="订单状态" style="width: 180px">
+          <el-option label="待交接" value="pending_handoff" />
+          <el-option label="租赁中" value="renting" />
+          <el-option label="待归还确认" value="pending_return_confirm" />
+          <el-option label="申诉中" value="disputing" />
+          <el-option label="已完成" value="completed" />
+          <el-option label="已关闭" value="closed" />
+          <el-option label="已取消" value="cancelled" />
+        </el-select>
+        <el-button @click="loadOrders">刷新</el-button>
+      </div>
+    </div>
+
+    <el-table v-loading="loading" class="table-panel" :data="filteredOrders">
+      <el-table-column prop="order_no" label="订单号" min-width="230" />
+      <el-table-column prop="title" label="账号" min-width="170" />
+      <el-table-column prop="renter_phone" label="租客" min-width="130" />
+      <el-table-column prop="owner_phone" label="号主" min-width="130" />
+      <el-table-column prop="status" label="状态" width="140" />
+      <el-table-column prop="handoff_status" label="交接" width="180" />
+      <el-table-column prop="settlement_status" label="结算" width="120" />
+      <el-table-column prop="rent_amount" label="租金" width="100" />
+      <el-table-column prop="deposit_amount" label="押金" width="100" />
+      <el-table-column prop="created_at" label="创建时间" min-width="180" />
+      <el-table-column label="操作" width="100">
+        <template #default="{ row }">
+          <RouterLink :to="`/admin/orders/${row.id}`">
+            <el-button size="small">详情</el-button>
+          </RouterLink>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>