125 lines
4.8 KiB
Vue
125 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
|
|
import { fetchAdminOrders, type Order } from '@/features/orders'
|
|
import { handoffStatusLabel, orderStatusLabel, settlementStatusLabel } from '@/utils/statusLabels'
|
|
import { formatDateTime } from '@/utils/time'
|
|
import { centToYuan, formatMoney } from '@/shared/utils/money'
|
|
import { formatListingNo } from '@/utils/listingDisplay'
|
|
import AdminTablePagination from '../components/AdminTablePagination.vue'
|
|
|
|
const status = ref('')
|
|
const loading = ref(false)
|
|
const orders = ref<Order[]>([])
|
|
const total = ref(0)
|
|
const currentPage = ref(1)
|
|
const currentPageSize = ref(20)
|
|
|
|
onMounted(loadOrders)
|
|
|
|
async function loadOrders() {
|
|
loading.value = true
|
|
try {
|
|
const result = await fetchAdminOrders(currentPage.value, currentPageSize.value)
|
|
orders.value = result.items
|
|
total.value = result.total
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function handlePageChange() {
|
|
await loadOrders()
|
|
}
|
|
|
|
const filteredOrders = computed(() => {
|
|
if (!status.value) return orders.value
|
|
return orders.value.filter(item => item.status === status.value)
|
|
})
|
|
|
|
function amountYuan(cent: unknown, legacyYuan?: unknown) {
|
|
if (cent !== undefined && cent !== null) return centToYuan(Number(cent || 0))
|
|
return Number(legacyYuan || 0)
|
|
}
|
|
|
|
function money(value: unknown) {
|
|
return formatMoney(Number(value || 0))
|
|
}
|
|
</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_payment" />
|
|
<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="pending_checkout_confirm" />
|
|
<el-option label="待租客确认修正" value="pending_checkout_accept" />
|
|
<el-option label="结账争议中" value="checkout_disputing" />
|
|
<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 label="商品编号" width="140">
|
|
<template #default="{ row }">{{
|
|
formatListingNo(row.listing_no, row.listing_id)
|
|
}}</template>
|
|
</el-table-column>
|
|
<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 label="订单金额" width="100">
|
|
<template #default="{ row }">¥{{ money(amountYuan(row.rent_amount_cent, row.rent_amount)) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="押金" width="100">
|
|
<template #default="{ row }">¥{{ money(amountYuan(row.deposit_amount_cent, row.deposit_amount)) }}</template>
|
|
</el-table-column>
|
|
<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>
|
|
|
|
<AdminTablePagination
|
|
v-if="total > 0"
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="currentPageSize"
|
|
:total="total"
|
|
:loading="loading"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</section>
|
|
</template>
|