380 lines
11 KiB
Vue
380 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { Refresh, Search } from '@element-plus/icons-vue'
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
|
|
import { fetchAdminOrders, type AdminOrderQuery, type Order } from '@/features/orders'
|
|
import {
|
|
handoffStatusLabel,
|
|
orderStatusLabel,
|
|
settlementStatusLabel,
|
|
} from '@/shared/utils/statusLabels'
|
|
import { formatDateTime } from '@/shared/utils/time'
|
|
import { centToYuan, formatMoney } from '@/shared/utils/money'
|
|
import { formatListingNo } from '@/shared/utils/listingDisplay'
|
|
import { adminPath } from '@/shared/utils/adminPath'
|
|
import AdminTablePagination from '../components/AdminTablePagination.vue'
|
|
|
|
const filters = reactive<AdminOrderQuery>({
|
|
keyword: '',
|
|
status: '',
|
|
handoff_status: '',
|
|
settlement_status: '',
|
|
})
|
|
const loading = ref(false)
|
|
const orders = ref<Order[]>([])
|
|
const total = ref(0)
|
|
const currentPage = ref(1)
|
|
const currentPageSize = ref(20)
|
|
|
|
const orderStatusOptions = [
|
|
{ label: '待支付', value: 'pending_payment' },
|
|
{ label: '待交接', value: 'pending_handoff' },
|
|
{ label: '使用中', value: 'renting' },
|
|
{ label: '逾期中', value: 'overdue' },
|
|
{ label: '待号主确认结账', value: 'pending_checkout_confirm' },
|
|
{ label: '待租客确认修正', value: 'pending_checkout_accept' },
|
|
{ label: '结账争议中', value: 'checkout_disputing' },
|
|
{ label: '申诉中', value: 'disputing' },
|
|
{ label: '异常', value: 'abnormal' },
|
|
{ label: '已完成', value: 'completed' },
|
|
{ label: '已关闭', value: 'closed' },
|
|
{ label: '已取消', value: 'cancelled' },
|
|
] as const
|
|
|
|
const handoffStatusOptions = [
|
|
{ label: '待号主交接', value: 'pending_owner' },
|
|
{ label: '号主交接超时', value: 'owner_timeout' },
|
|
{ label: '待租客确认', value: 'pending_renter_confirm' },
|
|
{ label: '已确认收号', value: 'received' },
|
|
{ label: '归还逾期', value: 'return_overdue' },
|
|
{ label: '待号主确认结账', value: 'pending_owner_checkout' },
|
|
{ label: '待租客确认修正', value: 'pending_renter_checkout' },
|
|
{ label: '已归还', value: 'returned' },
|
|
{ label: '客服关闭', value: 'admin_closed' },
|
|
{ label: '客服标记异常', value: 'admin_abnormal' },
|
|
] as const
|
|
|
|
const settlementStatusOptions = [
|
|
{ label: '未结算', value: 'unsettled' },
|
|
{ label: '待结算', value: 'pending' },
|
|
{ label: '冻结中', value: 'frozen' },
|
|
{ label: '已结算', value: 'settled' },
|
|
{ label: '已退款', value: 'refunded' },
|
|
{ label: '已取消', value: 'cancelled' },
|
|
{ label: '已关闭', value: 'closed' },
|
|
{ label: '争议中', value: 'disputed' },
|
|
{ label: '已仲裁', value: 'arbitrated' },
|
|
] as const
|
|
|
|
onMounted(loadOrders)
|
|
|
|
async function loadOrders() {
|
|
loading.value = true
|
|
try {
|
|
const result = await fetchAdminOrders(currentPage.value, currentPageSize.value, {
|
|
keyword: filters.keyword?.trim(),
|
|
status: filters.status,
|
|
handoff_status: filters.handoff_status,
|
|
settlement_status: filters.settlement_status,
|
|
})
|
|
orders.value = result.items
|
|
total.value = result.total
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function handlePageChange() {
|
|
await loadOrders()
|
|
}
|
|
|
|
async function queryOrders() {
|
|
currentPage.value = 1
|
|
await loadOrders()
|
|
}
|
|
|
|
function resetFilters() {
|
|
filters.keyword = ''
|
|
filters.status = ''
|
|
filters.handoff_status = ''
|
|
filters.settlement_status = ''
|
|
void queryOrders()
|
|
}
|
|
|
|
function amountYuan(cent: unknown) {
|
|
if (cent !== undefined && cent !== null) return centToYuan(Number(cent || 0))
|
|
return 0
|
|
}
|
|
|
|
function money(value: unknown) {
|
|
return formatMoney(Number(value || 0))
|
|
}
|
|
|
|
function userText(value: string | number | undefined) {
|
|
return value || '-'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page admin-orders-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-button :icon="Refresh" @click="loadOrders">刷新</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-filter-bar">
|
|
<el-form inline @submit.prevent>
|
|
<el-form-item label="关键词">
|
|
<el-input
|
|
v-model="filters.keyword"
|
|
clearable
|
|
placeholder="订单号 / 商品编号 / 账号 / 手机号"
|
|
style="width: 280px"
|
|
@keyup.enter="queryOrders"
|
|
@clear="queryOrders"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="订单状态">
|
|
<el-select
|
|
v-model="filters.status"
|
|
clearable
|
|
placeholder="全部"
|
|
style="width: 150px"
|
|
@change="queryOrders"
|
|
>
|
|
<el-option
|
|
v-for="item in orderStatusOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="交接状态">
|
|
<el-select
|
|
v-model="filters.handoff_status"
|
|
clearable
|
|
placeholder="全部"
|
|
style="width: 170px"
|
|
@change="queryOrders"
|
|
>
|
|
<el-option
|
|
v-for="item in handoffStatusOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="结算状态">
|
|
<el-select
|
|
v-model="filters.settlement_status"
|
|
clearable
|
|
placeholder="全部"
|
|
style="width: 140px"
|
|
@change="queryOrders"
|
|
>
|
|
<el-option
|
|
v-for="item in settlementStatusOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" :icon="Search" :loading="loading" @click="queryOrders"
|
|
>查询</el-button
|
|
>
|
|
<el-button @click="resetFilters">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
class="table-panel admin-orders-table"
|
|
:data="orders"
|
|
empty-text="未找到匹配的订单"
|
|
>
|
|
<el-table-column label="订单信息" min-width="230">
|
|
<template #default="{ row }">
|
|
<div class="order-main-cell">
|
|
<RouterLink class="order-link" :to="adminPath(`orders/${row.id}`)">
|
|
{{ row.order_no }}
|
|
</RouterLink>
|
|
<span>商品编号 {{ formatListingNo(row.listing_no, row.listing_id) }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="账号" min-width="170" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
<div class="stacked-cell">
|
|
<strong>{{ row.title }}</strong>
|
|
<span>{{ row.server_region }} / {{ row.login_platform }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="用户" min-width="170">
|
|
<template #default="{ row }">
|
|
<div class="stacked-cell compact">
|
|
<span>租客 {{ userText(row.renter_phone || row.renter_id) }}</span>
|
|
<span>号主 {{ userText(row.owner_phone || row.owner_id) }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="150">
|
|
<template #default="{ row }">
|
|
<div class="stacked-cell compact">
|
|
<strong>{{ orderStatusLabel(row.status) }}</strong>
|
|
<span>{{ handoffStatusLabel(row.handoff_status) }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结算" width="110">
|
|
<template #default="{ row }">{{ settlementStatusLabel(row.settlement_status) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="金额" width="130" align="right">
|
|
<template #default="{ row }">
|
|
<div class="stacked-cell money-cell">
|
|
<strong>¥{{ money(amountYuan(row.rent_amount_cent)) }}</strong>
|
|
<span>押金 ¥{{ money(amountYuan(row.deposit_amount_cent)) }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" width="170">
|
|
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="88" align="center">
|
|
<template #default="{ row }">
|
|
<RouterLink :to="adminPath(`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>
|
|
|
|
<style scoped>
|
|
.admin-orders-page {
|
|
min-width: 0;
|
|
}
|
|
|
|
.order-filter-bar {
|
|
margin-bottom: 16px;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
padding: 16px 18px 0;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.order-filter-bar :deep(.el-form) {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 0 14px;
|
|
}
|
|
|
|
.order-filter-bar :deep(.el-form-item) {
|
|
margin-right: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.order-filter-bar :deep(.el-form-item__label) {
|
|
color: #6b7785;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.admin-orders-table {
|
|
--el-table-fixed-right-column: #ffffff;
|
|
}
|
|
|
|
.admin-orders-table :deep(.el-table__inner-wrapper) {
|
|
min-width: 0;
|
|
}
|
|
|
|
.admin-orders-table :deep(.el-scrollbar__wrap) {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.admin-orders-table :deep(.el-scrollbar__bar.is-horizontal) {
|
|
display: none;
|
|
}
|
|
|
|
.order-main-cell,
|
|
.stacked-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.order-main-cell span,
|
|
.stacked-cell span {
|
|
overflow: hidden;
|
|
color: #8f9bba;
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stacked-cell strong {
|
|
overflow: hidden;
|
|
color: #1b2559;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stacked-cell.compact {
|
|
gap: 2px;
|
|
}
|
|
|
|
.money-cell {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.order-link {
|
|
overflow: hidden;
|
|
color: #2f6bff;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.order-link:hover {
|
|
color: #174edb;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.order-filter-bar :deep(.el-input),
|
|
.order-filter-bar :deep(.el-select) {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.order-filter-bar :deep(.el-form-item) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|