82 lines
3.2 KiB
Vue
82 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
|
|
import { fetchAdminOrders, type Order } from '@/api/orders'
|
|
import { handoffStatusLabel, orderStatusLabel, settlementStatusLabel } from '@/utils/statusLabels'
|
|
import { formatDateTime } from '@/utils/time'
|
|
|
|
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="overdue" />
|
|
<el-option label="待归还确认" value="pending_return_confirm" />
|
|
<el-option label="申诉中" value="disputing" />
|
|
<el-option label="异常" value="abnormal" />
|
|
<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 label="状态" width="140">
|
|
<template #default="{ row }">{{ orderStatusLabel(row.status) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="交接" width="180">
|
|
<template #default="{ row }">{{ handoffStatusLabel(row.handoff_status) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="结算" width="120">
|
|
<template #default="{ row }">{{ settlementStatusLabel(row.settlement_status) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="rent_amount" label="订单金额" width="100" />
|
|
<el-table-column prop="deposit_amount" label="押金" width="100" />
|
|
<el-table-column label="创建时间" min-width="180">
|
|
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
|
|
</el-table-column>
|
|
<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>
|