yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化财务明细

Browse Source
This commit is contained in:
yml
2026-06-09 10:36:22 +08:00
parent 0c9e3ec1ac
commit b9df2c3ee5
1 changed files with 192 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/views/AdminFinanceDetailsView.vue
+192 -57
View File
@@ -93,6 +93,12 @@ function settlementStatusLabel(status: string) {
return map[status] || status || '-'
}
function shortDateTime(value?: string) {
if (!value) return '-'
const text = formatDateTime(value)
return text.replace(/^\d{4}-/, '')
}
function defaultStartDate() {
const date = new Date()
date.setDate(date.getDate() - 29)
@@ -109,7 +115,7 @@ function formatInputDate(date: Date) {
</script>
<template>
<section class="page">
<section class="page finance-details-page">
<div class="page-header-row">
<div class="page-header">
<p class="eyebrow">Finance Details</p>
@@ -124,7 +130,7 @@ function formatInputDate(date: Date) {
</div>
</div>
<el-form class="filter-panel" label-position="top">
<el-form class="filter-panel finance-filter-panel" label-position="top">
<el-form-item label="日期类型">
<el-select v-model="filters.date_type" class="full-control">
<el-option label="结算日期" value="settled" />
@@ -175,63 +181,65 @@ function formatInputDate(date: Date) {
</el-form-item>
</el-form>
<el-table v-loading="loading" class="table-panel" :data="details">
<el-table-column label="订单" min-width="180">
<template #default="{ row }">
<RouterLink :to="`/admin/orders/${row.order_id}`">{{ row.order_no }}</RouterLink>
</template>
</el-table-column>
<el-table-column label="状态" width="150">
<template #default="{ row }">
<div>{{ orderStatusLabel(row.order_status) }}</div>
<small>{{ settlementStatusLabel(row.settlement_status) }}</small>
</template>
</el-table-column>
<el-table-column label="租客/号主" min-width="170">
<template #default="{ row }">
<div>{{ row.renter_phone || row.renter_nickname || row.renter_id }}</div>
<small>{{ row.owner_phone || row.owner_nickname || row.owner_id }}</small>
</template>
</el-table-column>
<el-table-column label="收款" width="110">
<template #default="{ row }">{{ moneyCent(row.paid_amount_cent) }}</template>
</el-table-column>
<el-table-column label="已退款" width="110">
<template #default="{ row }">{{ moneyCent(row.refunded_amount_cent) }}</template>
</el-table-column>
<el-table-column label="退款中" width="110">
<template #default="{ row }">{{ moneyCent(row.refunding_amount_cent) }}</template>
</el-table-column>
<el-table-column label="净流入" width="110">
<template #default="{ row }">{{ moneyCent(row.channel_net_amount_cent) }}</template>
</el-table-column>
<el-table-column label="平台收入" width="110">
<template #default="{ row }">{{ money(row.checkout_platform_fee) }}</template>
</el-table-column>
<el-table-column label="号主应得" width="110">
<template #default="{ row }">{{ money(row.checkout_owner_income) }}</template>
</el-table-column>
<el-table-column label="号主入账" width="110">
<template #default="{ row }">{{ money(row.owner_wallet_income_amount) }}</template>
</el-table-column>
<el-table-column label="差异" width="110">
<template #default="{ row }">
<span :class="{ 'amount-danger': Math.abs(row.settlement_diff_amount) >= 0.05 }">
<div v-loading="loading" class="table-panel finance-details-table">
<div class="finance-grid-header">
<div>订单</div>
<div>状态</div>
<div>租客/号主</div>
<div class="amount-cell">收款</div>
<div class="amount-cell">已退</div>
<div class="amount-cell">退中</div>
<div class="amount-cell">净入</div>
<div class="amount-cell">平台</div>
<div class="amount-cell">应得</div>
<div class="amount-cell">入账</div>
<div class="amount-cell">差异</div>
</div>
<div v-if="details.length > 0" class="finance-grid-body">
<div v-for="row in details" :key="row.order_id" class="finance-grid-row">
<div class="order-cell">
<RouterLink class="order-no" :to="`/admin/orders/${row.order_id}`">
{{ row.order_no }}
</RouterLink>
<span class="cell-muted">结算 {{ shortDateTime(row.settled_at) }}</span>
</div>
<div class="status-stack">
<span>{{ orderStatusLabel(row.order_status) }}</span>
<small>{{ settlementStatusLabel(row.settlement_status) }}</small>
<el-tag size="small" :type="financeStatusType(row.finance_status)">
{{ financeStatusLabel(row.finance_status) }}
</el-tag>
</div>
<div class="party-cell">
<span>租 {{ row.renter_phone || row.renter_nickname || row.renter_id }}</span>
<span>主 {{ row.owner_phone || row.owner_nickname || row.owner_id }}</span>
</div>
<span class="amount-text amount-cell">{{ moneyCent(row.paid_amount_cent) }}</span>
<span class="amount-text amount-cell muted-amount">
{{ moneyCent(row.refunded_amount_cent) }}
</span>
<span class="amount-text amount-cell muted-amount">
{{ moneyCent(row.refunding_amount_cent) }}
</span>
<span class="amount-text amount-cell">{{ moneyCent(row.channel_net_amount_cent) }}</span>
<span class="amount-text amount-cell">{{ money(row.checkout_platform_fee) }}</span>
<span class="amount-text amount-cell">{{ money(row.checkout_owner_income) }}</span>
<span class="amount-text amount-cell">{{ money(row.owner_wallet_income_amount) }}</span>
<span
class="amount-text amount-cell"
:class="{ 'amount-danger': Math.abs(row.settlement_diff_amount) >= 0.05 }"
>
{{ money(row.settlement_diff_amount) }}
</span>
</template>
</el-table-column>
<el-table-column label="财务状态" width="120">
<template #default="{ row }">
<el-tag :type="financeStatusType(row.finance_status)">
{{ financeStatusLabel(row.finance_status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="结算时间" min-width="170">
<template #default="{ row }">{{ row.settled_at ? formatDateTime(row.settled_at) : '-' }}</template>
</el-table-column>
</el-table>
</div>
</div>
<el-empty v-else :image-size="80" description="暂无财务明细" />
</div>
<AdminTablePagination
v-if="total > 0"
@@ -245,8 +253,135 @@ function formatInputDate(date: Date) {
</template>
<style scoped>
.finance-details-page {
--finance-muted: #7f8aa3;
}
.finance-details-page :deep(.page-header-row) {
margin-bottom: 18px;
}
.finance-details-page :deep(.page-header h1) {
font-size: 28px;
}
.finance-filter-panel {
grid-template-columns: 7% 10% 10% 29% 23% 10% 11%;
gap: 10px;
margin-bottom: 16px;
padding: 14px 16px;
}
.finance-filter-panel :deep(.el-form-item__label) {
margin-bottom: 4px;
line-height: 18px;
}
.finance-filter-panel :deep(.el-input__wrapper),
.finance-filter-panel :deep(.el-select__wrapper) {
min-height: 32px;
}
.finance-details-table {
padding: 0;
}
.finance-grid-header,
.finance-grid-row {
display: grid;
grid-template-columns: 15% 9% 16% repeat(8, 7.5%);
align-items: center;
width: 100%;
}
.finance-grid-header {
border-bottom: 1px solid #edf1f7;
color: #7f8aa3;
font-size: 12px;
font-weight: 650;
letter-spacing: 0;
line-height: 1.35;
text-transform: none;
}
.finance-grid-header > div,
.finance-grid-row > div,
.finance-grid-row > span {
min-width: 0;
padding: 8px 7px;
}
.finance-grid-row {
border-bottom: 1px solid #edf1f7;
}
.finance-grid-row:last-child {
border-bottom: 0;
}
.order-cell,
.status-stack,
.party-cell {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.order-no {
display: block;
max-width: 100%;
overflow: hidden;
color: #364152;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.cell-muted,
.status-stack small,
.party-cell span {
color: var(--finance-muted);
font-size: 12px;
}
.status-stack > span {
color: #364152;
font-weight: 600;
}
.party-cell span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.amount-text {
display: block;
overflow: hidden;
color: #344054;
font-size: 12px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.amount-cell {
text-align: right;
}
.muted-amount {
color: #667085;
}
.amount-danger {
color: #dc2626;
font-weight: 700;
}
@media (max-width: 1440px) {
.finance-filter-panel {
grid-template-columns: repeat(4, 1fr);
}
}
</style>