feat(admin): modernize business views including listings, review, users, orders, pickups, and mohong
This commit is contained in:
yml2213
@@ -587,23 +587,22 @@ async function openScreenshot(url: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" v-loading="loading">
|
||||
<div v-if="listing" class="listing-detail-header">
|
||||
<div class="listing-title-block">
|
||||
<div class="listing-code-line">
|
||||
<span>商品编号</span>
|
||||
<strong>{{ formatListingCode(listing) }}</strong>
|
||||
<div class="finance-page-container" v-loading="loading">
|
||||
<!-- 头部卡片 -->
|
||||
<header v-if="listing" class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<span>ITEM CODE: {{ formatListingCode(listing) }}</span>
|
||||
</div>
|
||||
<h1>{{ listing.title || '商品详情' }}</h1>
|
||||
<div class="listing-subtitle">
|
||||
<span>{{ listing.server_region || '-' }}</span>
|
||||
<span>{{ listing.rank_level || '-' }}</span>
|
||||
<span>{{ listing.login_platform || '-' }}</span>
|
||||
<span>账号 {{ listing.account_id }}</span>
|
||||
<span v-if="listing.is_external_upload"
|
||||
>外部 API · {{ listing.source_channel || '未填写' }}</span
|
||||
<h1 class="page-title">{{ listing.title || '商品详情' }}</h1>
|
||||
<p class="page-subtitle">
|
||||
{{ listing.server_region || '-' }} · {{ listing.rank_level || '-' }} ·
|
||||
{{ listing.login_platform || '-' }} · 账号 {{ listing.account_id }}
|
||||
<span v-if="listing.is_external_upload">
|
||||
· 外部 API ({{ listing.source_channel || '未填写' }})</span
|
||||
>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<el-button :icon="CopyDocument" @click="copyListingCode">复制编号</el-button>
|
||||
@@ -622,16 +621,18 @@ async function openScreenshot(url: string) {
|
||||
type="success"
|
||||
:disabled="!canTransfer"
|
||||
@click="openTransfer"
|
||||
>转移所有权</el-button
|
||||
>
|
||||
<el-button type="warning" :disabled="!canOperate" @click="openAction('offline')"
|
||||
>强制下架</el-button
|
||||
>
|
||||
<el-button type="danger" :disabled="!canOperate" @click="openAction('abnormal')"
|
||||
>标记异常</el-button
|
||||
>
|
||||
转移所有权
|
||||
</el-button>
|
||||
<el-button type="warning" :disabled="!canOperate" @click="openAction('offline')">
|
||||
强制下架
|
||||
</el-button>
|
||||
<el-button type="danger" :disabled="!canOperate" @click="openAction('abnormal')">
|
||||
标记异常
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<el-dialog
|
||||
v-model="externalAdjustVisible"
|
||||
@@ -1024,10 +1025,77 @@ async function openScreenshot(url: string) {
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #2563eb;
|
||||
background: #eff6ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.listing-detail-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown, Search } from '@element-plus/icons-vue'
|
||||
import {
|
||||
ArrowDown,
|
||||
Check,
|
||||
Clock,
|
||||
DocumentCopy,
|
||||
Download,
|
||||
Lock,
|
||||
Refresh,
|
||||
Search,
|
||||
Shop,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||
|
||||
import AdminTablePagination from '../components/AdminTablePagination.vue'
|
||||
import {
|
||||
emptyListingPublishOptions,
|
||||
fetchAdminListings,
|
||||
@@ -83,7 +94,6 @@ const rentedCount = computed(() => listings.value.filter(item => item.status ===
|
||||
const pendingCount = computed(
|
||||
() => listings.value.filter(item => item.review_status === 'pending').length
|
||||
)
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(totalListings.value / pageSize.value)))
|
||||
const insuranceOptions = computed(() =>
|
||||
publishOptions.value.insurance_options.length
|
||||
? publishOptions.value.insurance_options
|
||||
@@ -337,22 +347,6 @@ function setReviewStatusFilter(reviewStatus: string) {
|
||||
void queryListings()
|
||||
}
|
||||
|
||||
async function handlePageSizeChange(size: number) {
|
||||
pageSize.value = size
|
||||
currentPage.value = 1
|
||||
await loadListings()
|
||||
}
|
||||
|
||||
async function prevPage() {
|
||||
currentPage.value = Math.max(1, currentPage.value - 1)
|
||||
await loadListings()
|
||||
}
|
||||
|
||||
async function nextPage() {
|
||||
currentPage.value = Math.min(totalPages.value, currentPage.value + 1)
|
||||
await loadListings()
|
||||
}
|
||||
|
||||
async function copyTableScreenshot() {
|
||||
try {
|
||||
const blob = await createTableScreenshotBlob()
|
||||
@@ -618,56 +612,99 @@ function formatQuantity(value: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page admin-listings-page">
|
||||
<div class="page-header-row">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">Listings</p>
|
||||
<h1>商品管理</h1>
|
||||
<p>查看商品编码、地区、上号方式、账号资产、号主备注、租金押金、比例和预计租期。</p>
|
||||
<div class="finance-page-container admin-listings-page">
|
||||
<!-- 头部卡片 -->
|
||||
<header class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<el-icon><Shop /></el-icon>
|
||||
<span>LISTINGS & INVENTORY</span>
|
||||
</div>
|
||||
<h1 class="page-title">商品管理</h1>
|
||||
<p class="page-subtitle">
|
||||
查看出租商品编码、区服、上号方式、账号资产（哈夫币/保险/体力/负重/皮肤）、租金押金与预计租期。
|
||||
</p>
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<el-button :icon="Refresh" :loading="loading" @click="queryListings">刷新数据</el-button>
|
||||
<el-button :disabled="!listings.length" :icon="DocumentCopy" @click="copyTableScreenshot"
|
||||
>复制截图</el-button
|
||||
>
|
||||
<el-button :disabled="!listings.length" :icon="Download" @click="downloadTableScreenshot"
|
||||
>下载截图</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="listing-control-panel">
|
||||
<!-- 统计指标行 -->
|
||||
<div class="listing-stats-row">
|
||||
<!-- 汇总指标卡片（支持点击切换快捷筛选） -->
|
||||
<section class="summary-metric-grid">
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
class="metric-card metric-card--total clickable"
|
||||
:class="{ active: !filters.status && !filters.review_status }"
|
||||
@click="resetFilters"
|
||||
>
|
||||
<span class="stat-label">全部商品</span>
|
||||
<strong class="stat-value">{{ totalListings }}</strong>
|
||||
<div class="metric-icon-wrap indigo">
|
||||
<el-icon><Shop /></el-icon>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: filters.status === 'published' }"
|
||||
@click="setStatusFilter('published')"
|
||||
>
|
||||
<span class="stat-label">已上架</span>
|
||||
<strong class="stat-value">{{ publishedCount }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: filters.status === 'rented' }"
|
||||
@click="setStatusFilter('rented')"
|
||||
>
|
||||
<span class="stat-label">已锁定</span>
|
||||
<strong class="stat-value">{{ rentedCount }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: filters.review_status === 'pending' }"
|
||||
@click="setReviewStatusFilter('pending')"
|
||||
>
|
||||
<span class="stat-label">待审核</span>
|
||||
<strong class="stat-value">{{ pendingCount }}</strong>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">全量商品库</span>
|
||||
<strong class="metric-val indigo-val">{{ totalListings }} 件</strong>
|
||||
<span class="metric-sub-pill info">点击查看全部</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选和操作行 -->
|
||||
<div class="listing-filter-row">
|
||||
<el-form class="listing-filter-bar" label-position="top">
|
||||
<el-form-item class="filter-keyword" label="编号">
|
||||
<div
|
||||
class="metric-card metric-card--published clickable"
|
||||
:class="{ active: filters.status === 'published' }"
|
||||
@click="setStatusFilter('published')"
|
||||
>
|
||||
<div class="metric-icon-wrap emerald">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">已上架出租</span>
|
||||
<strong class="metric-val emerald-val">{{ publishedCount }} 件</strong>
|
||||
<span class="metric-sub-pill success">正常对外出租</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="metric-card metric-card--rented clickable"
|
||||
:class="{ active: filters.status === 'rented' }"
|
||||
@click="setStatusFilter('rented')"
|
||||
>
|
||||
<div class="metric-icon-wrap amber">
|
||||
<el-icon><Lock /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">已出租锁定</span>
|
||||
<strong class="metric-val amber-val">{{ rentedCount }} 件</strong>
|
||||
<span class="metric-sub-pill warning">履约租用中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="metric-card metric-card--pending clickable"
|
||||
:class="{ active: filters.review_status === 'pending' }"
|
||||
@click="setReviewStatusFilter('pending')"
|
||||
>
|
||||
<div class="metric-icon-wrap rose">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">待审核商品</span>
|
||||
<strong class="metric-val rose-val">{{ pendingCount }} 件</strong>
|
||||
<span class="metric-sub-pill danger">等待审核上线</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 筛选面板 -->
|
||||
<section class="section-card filter-card">
|
||||
<el-form class="filter-grid" label-position="top" @submit.prevent="queryListings">
|
||||
<el-form-item label="商品/订单编号">
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
@@ -676,11 +713,19 @@ function formatQuantity(value: number) {
|
||||
@clear="queryListings"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-owner" label="号主 ID">
|
||||
<el-input v-model="filters.owner_id" clearable placeholder="筛选号主" />
|
||||
|
||||
<el-form-item label="号主 ID / 手机号">
|
||||
<el-input
|
||||
v-model="filters.owner_id"
|
||||
clearable
|
||||
placeholder="输入号主用户 ID"
|
||||
@keyup.enter="queryListings"
|
||||
@clear="queryListings"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-range" label="纯币(M)">
|
||||
<div class="admin-range-filter">
|
||||
|
||||
<el-form-item label="纯币数量 (M)">
|
||||
<div class="range-input-group">
|
||||
<el-input-number
|
||||
v-model="filters.min_coin"
|
||||
:min="0"
|
||||
@@ -688,8 +733,9 @@ function formatQuantity(value: number) {
|
||||
:step="10"
|
||||
:controls="false"
|
||||
placeholder="最低"
|
||||
class="range-num-input"
|
||||
/>
|
||||
<span class="admin-range-separator">-</span>
|
||||
<span class="range-sep">-</span>
|
||||
<el-input-number
|
||||
v-model="filters.max_coin"
|
||||
:min="0"
|
||||
@@ -697,11 +743,13 @@ function formatQuantity(value: number) {
|
||||
:step="10"
|
||||
:controls="false"
|
||||
placeholder="最高"
|
||||
class="range-num-input"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-range" label="押金(元)">
|
||||
<div class="admin-range-filter">
|
||||
|
||||
<el-form-item label="押金金额 (元)">
|
||||
<div class="range-input-group">
|
||||
<el-input-number
|
||||
v-model="filters.min_deposit"
|
||||
:min="0"
|
||||
@@ -709,8 +757,9 @@ function formatQuantity(value: number) {
|
||||
:step="100"
|
||||
:controls="false"
|
||||
placeholder="最低"
|
||||
class="range-num-input"
|
||||
/>
|
||||
<span class="admin-range-separator">-</span>
|
||||
<span class="range-sep">-</span>
|
||||
<el-input-number
|
||||
v-model="filters.max_deposit"
|
||||
:min="0"
|
||||
@@ -718,11 +767,19 @@ function formatQuantity(value: number) {
|
||||
:step="100"
|
||||
:controls="false"
|
||||
placeholder="最高"
|
||||
class="range-num-input"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-select" label="商品状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部状态">
|
||||
|
||||
<el-form-item label="商品状态">
|
||||
<el-select
|
||||
v-model="filters.status"
|
||||
clearable
|
||||
placeholder="全部状态"
|
||||
class="full-control"
|
||||
@change="queryListings"
|
||||
>
|
||||
<el-option label="草稿" value="draft" />
|
||||
<el-option label="已上架" value="published" />
|
||||
<el-option label="已锁定" value="rented" />
|
||||
@@ -731,15 +788,23 @@ function formatQuantity(value: number) {
|
||||
<el-option label="异常" value="abnormal" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-select" label="审核状态">
|
||||
<el-select v-model="filters.review_status" clearable placeholder="全部审核">
|
||||
|
||||
<el-form-item label="审核状态">
|
||||
<el-select
|
||||
v-model="filters.review_status"
|
||||
clearable
|
||||
placeholder="全部审核"
|
||||
class="full-control"
|
||||
@change="queryListings"
|
||||
>
|
||||
<el-option label="未提交" value="none" />
|
||||
<el-option label="待审核" value="pending" />
|
||||
<el-option label="已通过" value="approved" />
|
||||
<el-option label="已拒绝" value="rejected" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-select" label="资产">
|
||||
|
||||
<el-form-item label="资产规格">
|
||||
<el-popover
|
||||
:visible="activeFilterPopover === 'asset'"
|
||||
trigger="click"
|
||||
@@ -833,7 +898,8 @@ function formatQuantity(value: number) {
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-skin" label="皮肤">
|
||||
|
||||
<el-form-item label="皮肤筛选">
|
||||
<el-popover
|
||||
:visible="activeFilterPopover === 'skin'"
|
||||
trigger="click"
|
||||
@@ -862,11 +928,7 @@ function formatQuantity(value: number) {
|
||||
全部皮肤
|
||||
</button>
|
||||
<div v-if="!skinFilterGroups.length" class="admin-filter-empty">暂无皮肤选项</div>
|
||||
<div
|
||||
v-for="group in skinFilterGroups"
|
||||
:key="group.key"
|
||||
class="admin-filter-section"
|
||||
>
|
||||
<div v-for="group in skinFilterGroups" :key="group.key" class="admin-filter-section">
|
||||
<div class="admin-skin-filter-title">
|
||||
<strong>{{ group.title }}</strong>
|
||||
<button
|
||||
@@ -894,121 +956,596 @@ function formatQuantity(value: number) {
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="listing-action-strip">
|
||||
|
||||
<el-form-item label=" " class="filter-actions-item">
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="queryListings">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="queryListings"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button :disabled="!listings.length" @click="copyTableScreenshot">复制截图</el-button>
|
||||
<el-button :disabled="!listings.length" @click="downloadTableScreenshot"
|
||||
>下载截图</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<!-- 商品列表表格卡片 -->
|
||||
<section class="section-card table-section-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><Shop /></el-icon>
|
||||
<span>出租商品清单</span>
|
||||
</div>
|
||||
<span class="count-badge">共 {{ totalListings }} 件商品</span>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
class="table-panel admin-listings-table"
|
||||
class="custom-enterprise-table"
|
||||
:data="listings"
|
||||
row-key="id"
|
||||
stripe
|
||||
empty-text="暂无商品"
|
||||
empty-text="暂无匹配商品"
|
||||
>
|
||||
<el-table-column label="商品编码" width="88">
|
||||
<el-table-column label="商品编码" width="100" fixed="left">
|
||||
<template #default="{ row }">
|
||||
<strong class="listing-code">{{ formatListingCode(row) }}</strong>
|
||||
<strong class="listing-code font-mono">{{ formatListingCode(row) }}</strong>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="地区" width="86">
|
||||
<template #default="{ row }">{{ regionText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="login_platform" label="上号方式" width="78" />
|
||||
<el-table-column label="哈夫币(M)" width="82">
|
||||
<template #default="{ row }">{{ listingCoinM(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="保险" width="54">
|
||||
<template #default="{ row }">{{ assetText(row, 'season_insurance') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="体力(级)" width="68">
|
||||
<template #default="{ row }">{{ levelText(row, 'stamina_level') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负重(级)" width="68">
|
||||
<template #default="{ row }">{{ levelText(row, 'load_level') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账号等级" width="74">
|
||||
<template #default="{ row }">{{ assetText(row, 'fire_level') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="绝密KD" width="66">
|
||||
<template #default="{ row }">{{ assetText(row, 'secret_kd') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="awm子弹" width="72">
|
||||
<template #default="{ row }">{{ resourceText(row, 'awmAmmo') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="六头" width="48">
|
||||
<template #default="{ row }">{{ resourceText(row, 'helmet6') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="六甲" width="48">
|
||||
<template #default="{ row }">{{ resourceText(row, 'armor6') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="特殊刀皮" width="104">
|
||||
|
||||
<el-table-column label="地区" width="90">
|
||||
<template #default="{ row }">
|
||||
{{ skinGroupText(row, 'melee') }}
|
||||
<el-tag size="small" type="info" effect="plain">{{ regionText(row) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="人物红皮/人物金皮/武器皮肤" min-width="226">
|
||||
|
||||
<el-table-column prop="login_platform" label="上号方式" width="90">
|
||||
<template #default="{ row }">
|
||||
{{ characterAndWeaponSkinText(row) }}
|
||||
<span class="platform-tag">{{ row.login_platform || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="号主备注" min-width="150">
|
||||
<template #default="{ row }">{{ ownerRemarkText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="租金/押金" width="90">
|
||||
<template #default="{ row }">{{ rentAndDepositText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="比例" width="62">
|
||||
<template #default="{ row }">{{ formatRatio(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="租期" width="82">
|
||||
|
||||
<el-table-column label="哈夫币(M)" width="95" align="right">
|
||||
<template #default="{ row }">
|
||||
<span :title="estimateTitle(row)">{{ formatEstimatedRentalDuration(row) }}</span>
|
||||
<span v-if="getDailyLoss(row)" class="table-subtext">日耗 {{ getDailyLoss(row) }}</span>
|
||||
<span class="font-mono font-bold text-amber">{{ listingCoinM(row) }}M</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="详情" width="60">
|
||||
|
||||
<el-table-column label="保险" width="65" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono">{{ assetText(row, 'season_insurance') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="体力/负重" width="95" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-muted">
|
||||
{{ levelText(row, 'stamina_level') }} / {{ levelText(row, 'load_level') }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="等级" width="65" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono">{{ assetText(row, 'fire_level') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="KD" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono">{{ assetText(row, 'secret_kd') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="AWM/6头/6甲" width="115" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-muted">
|
||||
{{ resourceText(row, 'awmAmmo') }}/{{ resourceText(row, 'helmet6') }}/{{
|
||||
resourceText(row, 'armor6')
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="特殊刀皮" width="110" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="skin-knife-text">{{ skinGroupText(row, 'melee') || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="人物红皮/金皮/枪皮" min-width="190" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="skin-summary-text">{{ characterAndWeaponSkinText(row) || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="号主备注" min-width="130" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="owner-remark text-muted">{{ ownerRemarkText(row) || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="租金 / 押金" width="125" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="price-stack">
|
||||
<strong class="font-mono text-primary font-bold">{{
|
||||
rentAndDepositText(row).split('/')[0] || '-'
|
||||
}}</strong>
|
||||
<small class="font-mono text-muted"
|
||||
>押 {{ rentAndDepositText(row).split('/')[1] || '-' }}</small
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="比例" width="75" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono ratio-badge">{{ formatRatio(row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="预计租期" width="105" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="duration-stack" :title="estimateTitle(row)">
|
||||
<span class="duration-main font-mono">{{
|
||||
formatEstimatedRentalDuration(row)
|
||||
}}</span>
|
||||
<small v-if="getDailyLoss(row)" class="daily-loss font-mono"
|
||||
>日耗 {{ getDailyLoss(row) }}</small
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="80" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<RouterLink :to="adminPath(`listings/${row.id}`)">
|
||||
<el-button size="small">详情</el-button>
|
||||
<el-button link type="primary" size="small">详情</el-button>
|
||||
</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="table-pagination">
|
||||
<span class="pagination-summary"
|
||||
>当前页 {{ listings.length }} 条，共 {{ totalListings }} 条</span
|
||||
>
|
||||
<div class="pagination-controls">
|
||||
<span class="pagination-size-label">每页</span>
|
||||
<el-select
|
||||
:model-value="pageSize"
|
||||
class="page-size-select"
|
||||
size="small"
|
||||
@update:model-value="handlePageSizeChange"
|
||||
>
|
||||
<el-option :value="10" label="10条" />
|
||||
<el-option :value="20" label="20条" />
|
||||
<el-option :value="50" label="50条" />
|
||||
<el-option :value="100" label="100条" />
|
||||
</el-select>
|
||||
<span class="pagination-page">{{ currentPage }}/{{ totalPages }}页</span>
|
||||
<el-button size="small" :disabled="currentPage <= 1" @click="prevPage">上页</el-button>
|
||||
<el-button size="small" :disabled="currentPage >= totalPages" @click="nextPage"
|
||||
>下页</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<AdminTablePagination
|
||||
v-if="totalListings > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="totalListings"
|
||||
@page-change="loadListings"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
/* ================= 头部卡片 ================= */
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #2563eb;
|
||||
background: #eff6ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ================= 核心指标卡片 ================= */
|
||||
.summary-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.metric-card.clickable:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.metric-card.active {
|
||||
border-color: #3b82f6;
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(59, 130, 246, 0.15),
|
||||
0 8px 24px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.metric-card--total::before {
|
||||
background: linear-gradient(90deg, #6366f1, #818cf8);
|
||||
}
|
||||
|
||||
.metric-card--published::before {
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.metric-card--rented::before {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
}
|
||||
|
||||
.metric-card--pending::before {
|
||||
background: linear-gradient(90deg, #f43f5e, #fb7185);
|
||||
}
|
||||
|
||||
.metric-icon-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.indigo {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.emerald {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.amber {
|
||||
background: #fffbeb;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.rose {
|
||||
background: #fff1f2;
|
||||
color: #f43f5e;
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.indigo-val {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.emerald-val {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.amber-val {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.rose-val {
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.metric-sub-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.metric-sub-pill.info {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.metric-sub-pill.success {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.metric-sub-pill.warning {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.metric-sub-pill.danger {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
/* ================= 筛选面板 ================= */
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
align-items: flex-end;
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.filter-grid :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-grid :deep(.el-form-item__label) {
|
||||
padding-bottom: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.range-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range-num-input {
|
||||
flex: 1;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.range-sep {
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.full-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-filter-chip {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-filter-chip:hover {
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.admin-filter-chip.active {
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ================= 表格卡片 ================= */
|
||||
.table-section-card {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: #2563eb;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #2563eb;
|
||||
background: #eff6ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__header-wrapper th) {
|
||||
background-color: #f8fafc !important;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 11px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__body-wrapper td) {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.listing-code {
|
||||
color: #2563eb;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.platform-tag {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.price-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.ratio-badge {
|
||||
font-size: 11.5px;
|
||||
color: #0284c7;
|
||||
background: #e0f2fe;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.duration-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.duration-main {
|
||||
font-size: 12px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.daily-loss {
|
||||
font-size: 10.5px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.text-amber {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import { Check, Folder, Plus, Present, Refresh } from '@element-plus/icons-vue'
|
||||
import {
|
||||
createAdminMohongCategory,
|
||||
deleteAdminMohongCategory,
|
||||
@@ -23,6 +23,11 @@ const form = reactive({
|
||||
status: 'enabled',
|
||||
})
|
||||
|
||||
const enabledCount = computed(() => items.value.filter(i => i.status === 'enabled').length)
|
||||
const totalProductCount = computed(() =>
|
||||
items.value.reduce((sum, i) => sum + Number(i.product_count || 0), 0)
|
||||
)
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
@@ -91,92 +96,483 @@ async function handleDelete(item: MohongCategory) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="admin-page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2>撞车分类</h2>
|
||||
<p>大红 / 四格大红 / 炫彩等分类，前台左侧筛选使用</p>
|
||||
<div class="finance-page-container">
|
||||
<!-- 头部卡片 -->
|
||||
<header class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<el-icon><Present /></el-icon>
|
||||
<span>CRASH MALL CATEGORIES</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<h1 class="page-title">撞车分类</h1>
|
||||
<p class="page-subtitle">
|
||||
大红 / 四格大红 / 炫彩等分类管理，用于前台撞车商城左侧导航、筛选与商品归类。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<el-table v-loading="loading" :data="items" border stripe>
|
||||
<el-table-column prop="name" label="名称" min-width="140" />
|
||||
<el-table-column prop="code" label="编码" width="140" />
|
||||
<el-table-column prop="sort_order" label="排序" width="90" />
|
||||
<el-table-column label="商品数" width="90">
|
||||
<template #default="{ row }">{{ row.product_count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<!-- 汇总指标卡片 -->
|
||||
<section class="summary-metric-grid">
|
||||
<div class="metric-card metric-card--total">
|
||||
<div class="metric-icon-wrap indigo">
|
||||
<el-icon><Folder /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">分类总数</span>
|
||||
<strong class="metric-val indigo-val">{{ items.length }} 个</strong>
|
||||
<span class="metric-sub-pill info">全部品类</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--enabled">
|
||||
<div class="metric-icon-wrap emerald">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">启用中分类</span>
|
||||
<strong class="metric-val emerald-val">{{ enabledCount }} 个</strong>
|
||||
<span class="metric-sub-pill success">前台可见</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--products">
|
||||
<div class="metric-icon-wrap amber">
|
||||
<el-icon><Present /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">覆盖撞车商品</span>
|
||||
<strong class="metric-val amber-val">{{ totalProductCount }} 件</strong>
|
||||
<span class="metric-sub-pill warning">挂载商品</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<section class="section-card table-section-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><Folder /></el-icon>
|
||||
<span>分类列表</span>
|
||||
</div>
|
||||
<span class="count-badge">共 {{ items.length }} 个分类</span>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
class="custom-enterprise-table"
|
||||
:data="items"
|
||||
stripe
|
||||
empty-text="暂无分类数据"
|
||||
>
|
||||
<el-table-column label="分类名称" min-width="160">
|
||||
<template #default="{ row }">
|
||||
{{ row.status === 'enabled' ? '启用' : '停用' }}
|
||||
<strong class="category-name">{{ row.name }}</strong>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
|
||||
<el-table-column label="英文/标识编码" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
<span class="font-mono text-muted">{{ row.code || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="排序权重" width="110" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono font-semibold">{{ row.sort_order }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="关联商品数" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="info" class="count-tag font-mono">
|
||||
{{ row.product_count }} 件
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="110" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="row.status === 'enabled' ? 'success' : 'info'"
|
||||
size="small"
|
||||
class="status-pill"
|
||||
>
|
||||
{{ row.status === 'enabled' ? '启用中' : '已停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="140" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-btn-group">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新建/编辑分类弹窗 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="editingId ? '编辑分类' : '新建分类'"
|
||||
:title="editingId ? '编辑撞车分类' : '新建撞车分类'"
|
||||
width="480px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="名称" required>
|
||||
<el-input v-model="form.name" maxlength="64" />
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="分类名称" required>
|
||||
<el-input v-model="form.name" placeholder="例如：大红 / 炫彩" maxlength="32" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编码">
|
||||
<el-input v-model="form.code" maxlength="64" placeholder="可选" />
|
||||
<el-form-item label="分类标识编码（可选）">
|
||||
<el-input v-model="form.code" placeholder="例如：da_hong / xuancai" maxlength="32" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort_order" />
|
||||
<span class="hint">越小越靠前</span>
|
||||
<el-form-item label="排序权重（数字越大越靠前）">
|
||||
<el-input-number v-model="form.sort_order" :min="0" :max="9999" class="full-control" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="form.status" style="width: 160px">
|
||||
<el-option label="启用" value="enabled" />
|
||||
<el-option label="停用" value="disabled" />
|
||||
</el-select>
|
||||
<el-form-item label="启用状态">
|
||||
<el-radio-group v-model="form.status" class="direction-group">
|
||||
<el-radio-button value="enabled">启用展示</el-radio-button>
|
||||
<el-radio-button value="disabled">停用隐藏</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="handleSave">确认保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
/* ================= 头部卡片 ================= */
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #db2777;
|
||||
background: #fdf2f8;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ================= 核心指标卡片 ================= */
|
||||
.summary-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.page-head {
|
||||
|
||||
.metric-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.metric-card--total::before {
|
||||
background: linear-gradient(90deg, #6366f1, #818cf8);
|
||||
}
|
||||
|
||||
.metric-card--enabled::before {
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.metric-card--products::before {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
}
|
||||
|
||||
.metric-icon-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.indigo {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.emerald {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.amber {
|
||||
background: #fffbeb;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.indigo-val {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.emerald-val {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.amber-val {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.metric-sub-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.metric-sub-pill.info {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.metric-sub-pill.success {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.metric-sub-pill.warning {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
/* ================= 表格卡片 ================= */
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.table-section-card {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.page-head h2 {
|
||||
margin: 0 0 4px;
|
||||
|
||||
.table-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
|
||||
.header-icon {
|
||||
color: #db2777;
|
||||
font-size: 18px;
|
||||
}
|
||||
.hint {
|
||||
margin-left: 8px;
|
||||
color: #8a94a6;
|
||||
|
||||
.count-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #db2777;
|
||||
background: #fdf2f8;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__header-wrapper th) {
|
||||
background-color: #f8fafc !important;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__body-wrapper td) {
|
||||
padding: 12px 0;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 13.5px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.action-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.full-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction-group :deep(.el-radio-button) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.direction-group :deep(.el-radio-button__inner) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Upload } from '@element-plus/icons-vue'
|
||||
import { Check, Setting, Upload } from '@element-plus/icons-vue'
|
||||
import {
|
||||
fetchAdminMohongConfig,
|
||||
updateAdminMohongConfig,
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { uploadAdminFile } from '@/shared/api/files'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
import AuthImage from '@/shared/components/business/AuthImage.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
@@ -17,6 +18,17 @@ const form = reactive<MohongConfig>({
|
||||
order_copy_template: '',
|
||||
})
|
||||
|
||||
const templateVariables = [
|
||||
{ key: '{{order_no}}', label: '订单号' },
|
||||
{ key: '{{created_at}}', label: '下单时间' },
|
||||
{ key: '{{items}}', label: '商品清单明细' },
|
||||
{ key: '{{product_title}}', label: '商品主标题' },
|
||||
{ key: '{{quantity}}', label: '购买件数' },
|
||||
{ key: '{{amount}}', label: '实付总额' },
|
||||
{ key: '{{buyer_phone}}', label: '买家手机号' },
|
||||
{ key: '{{unit}}', label: '计价单位' },
|
||||
]
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
@@ -39,7 +51,7 @@ async function handleSave() {
|
||||
order_copy_template: form.order_copy_template,
|
||||
})
|
||||
Object.assign(form, config)
|
||||
ElMessage.success('已保存')
|
||||
ElMessage.success('撞车配置已成功保存')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '保存失败'))
|
||||
} finally {
|
||||
@@ -51,98 +63,304 @@ async function uploadQrcode(file: File) {
|
||||
try {
|
||||
const uploaded = await uploadAdminFile(file, 'crash')
|
||||
form.default_qrcode_url = uploaded.url
|
||||
ElMessage.success('上传成功')
|
||||
ElMessage.success('二维码上传成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '上传失败'))
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function insertVariable(v: string) {
|
||||
form.order_copy_template = (form.order_copy_template || '') + ` ${v}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="admin-page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2>撞车配置</h2>
|
||||
<p>
|
||||
全局默认固定二维码与订单复制模板。商品可覆盖默认二维码；支付后用户在订单详情扫码并复制信息联系客服。
|
||||
</p>
|
||||
<div v-loading="loading" class="finance-page-container">
|
||||
<!-- 头部卡片 -->
|
||||
<header class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>CRASH MALL CONFIGURATION</span>
|
||||
</div>
|
||||
<el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
|
||||
<h1 class="page-title">撞车配置</h1>
|
||||
<p class="page-subtitle">配置撞车商城的全局默认接待二维码与订单一键复制通知文案模板。</p>
|
||||
</div>
|
||||
|
||||
<el-form label-width="140px" class="config-form">
|
||||
<el-form-item label="默认固定二维码">
|
||||
<div class="qr-row">
|
||||
<el-image
|
||||
<div class="toolbar-actions">
|
||||
<el-button type="primary" :icon="Check" :loading="saving" @click="handleSave">
|
||||
保存配置
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 配置面板 -->
|
||||
<div class="config-grid-layout">
|
||||
<!-- 二维码配置卡片 -->
|
||||
<section class="section-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><Setting /></el-icon>
|
||||
<span>默认客服接待二维码</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="section-desc">
|
||||
若具体撞车商品未配置专属接待码，前台订单支付后将默认向买家展示此全局二维码。
|
||||
</p>
|
||||
|
||||
<div class="qr-upload-panel">
|
||||
<div class="qr-preview-area">
|
||||
<AuthImage
|
||||
v-if="form.default_qrcode_url"
|
||||
:src="form.default_qrcode_url"
|
||||
:source="form.default_qrcode_url"
|
||||
fit="contain"
|
||||
style="width: 160px; height: 160px; border-radius: 12px; background: #f7f9fc"
|
||||
class="qr-img-box"
|
||||
/>
|
||||
<div class="qr-actions">
|
||||
<div v-else class="qr-empty-box">暂未上传二维码</div>
|
||||
</div>
|
||||
<div class="qr-action-area">
|
||||
<el-upload :show-file-list="false" accept="image/*" :before-upload="uploadQrcode">
|
||||
<el-button :icon="Upload">上传二维码</el-button>
|
||||
<el-button :icon="Upload">上传新二维码图片</el-button>
|
||||
</el-upload>
|
||||
<el-input v-model="form.default_qrcode_url" placeholder="或直接填写图片 URL" />
|
||||
<el-input
|
||||
v-model="form.default_qrcode_url"
|
||||
clearable
|
||||
placeholder="或直接粘贴图片存储 URL / 对象键"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="复制文案模板">
|
||||
<el-input v-model="form.order_copy_template" type="textarea" :rows="8" />
|
||||
<div class="hint">
|
||||
可用变量：{{order_no}} {{created_at}}
|
||||
{{items}}（多商品明细） {{product_title}}
|
||||
{{quantity}} {{amount}}
|
||||
{{buyer_name}} {{buyer_phone}}
|
||||
{{unit}}
|
||||
</section>
|
||||
|
||||
<!-- 模板文案配置卡片 -->
|
||||
<section class="section-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><Setting /></el-icon>
|
||||
<span>买家联系客服一键复制文案模板</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="section-desc">
|
||||
买家在订单完成支付后，点击「复制订单信息」时自动生成的格式化文本。
|
||||
</p>
|
||||
|
||||
<el-input
|
||||
v-model="form.order_copy_template"
|
||||
type="textarea"
|
||||
:rows="7"
|
||||
placeholder="编写格式化订单文本模板..."
|
||||
/>
|
||||
|
||||
<div class="variables-box">
|
||||
<span class="var-title">点击快速插入可用动态变量：</span>
|
||||
<div class="var-chips">
|
||||
<span
|
||||
v-for="item in templateVariables"
|
||||
:key="item.key"
|
||||
class="var-chip"
|
||||
@click="insertVariable(item.key)"
|
||||
>
|
||||
{{ item.label }} <small class="font-mono">{{ item.key }}</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
.page-head {
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
/* ================= 头部卡片 ================= */
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.page-head h2 {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
.config-form {
|
||||
max-width: 820px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #eef1f5;
|
||||
}
|
||||
.qr-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.qr-actions {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.hint {
|
||||
margin-top: 8px;
|
||||
color: #8a94a6;
|
||||
font-size: 12px;
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #db2777;
|
||||
background: #fdf2f8;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ================= 卡片容器 ================= */
|
||||
.config-grid-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.table-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: #db2777;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.qr-upload-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.qr-preview-area {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-img-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.qr-empty-box {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.qr-action-area {
|
||||
flex: 1;
|
||||
min-width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.variables-box {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.var-title {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.var-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.var-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 12px;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.var-chip:hover {
|
||||
background: #eef2ff;
|
||||
border-color: #c7d2fe;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Money, Refresh } from '@element-plus/icons-vue'
|
||||
import {
|
||||
Clock,
|
||||
DocumentChecked,
|
||||
Refresh,
|
||||
Search,
|
||||
Tickets,
|
||||
UserFilled,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
cancelAdminMohongOrder,
|
||||
completeAdminMohongOrder,
|
||||
@@ -26,6 +33,10 @@ const status = ref('')
|
||||
const detail = ref<MohongOrder | null>(null)
|
||||
const refundingId = ref<number | null>(null)
|
||||
|
||||
const paidCount = computed(() => items.value.filter(i => i.status === 'paid').length)
|
||||
const receivingCount = computed(() => items.value.filter(i => i.status === 'receiving').length)
|
||||
const completedCount = computed(() => items.value.filter(i => i.status === 'completed').length)
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
@@ -46,6 +57,18 @@ async function load() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
page.value = 1
|
||||
void load()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
keyword.value = ''
|
||||
status.value = ''
|
||||
page.value = 1
|
||||
void load()
|
||||
}
|
||||
|
||||
async function handleReceive(row: MohongOrder) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认接待订单 ${row.order_no}？标记后状态变为「接待中」。`, '提示', {
|
||||
@@ -138,207 +161,703 @@ function canRefund(row: MohongOrder) {
|
||||
async function copyText(text: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
ElMessage.success('已复制')
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
function statusTagType(status: string): 'success' | 'warning' | 'danger' | 'info' {
|
||||
if (status === 'completed') return 'success'
|
||||
if (status === 'receiving' || status === 'paid') return 'warning'
|
||||
if (status === 'cancelled') return 'info'
|
||||
return 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="admin-page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2>撞车订单</h2>
|
||||
<p>查看订单、接待买家、完成履约、复制用户订单信息</p>
|
||||
<div class="finance-page-container">
|
||||
<!-- 头部卡片 -->
|
||||
<header class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
<span>CRASH MALL ORDERS</span>
|
||||
</div>
|
||||
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
||||
<h1 class="page-title">撞车订单</h1>
|
||||
<p class="page-subtitle">全量监控撞车商城订单流转、客服接待状态、履约进度与退款审核。</p>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<div class="toolbar-actions">
|
||||
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 汇总指标卡片 -->
|
||||
<section class="summary-metric-grid">
|
||||
<div class="metric-card metric-card--total">
|
||||
<div class="metric-icon-wrap indigo">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">撞车全量订单</span>
|
||||
<strong class="metric-val indigo-val">{{ total }} 笔</strong>
|
||||
<span class="metric-sub-pill info">订单总数</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--paid">
|
||||
<div class="metric-icon-wrap amber">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">本页待接待订单</span>
|
||||
<strong class="metric-val amber-val">{{ paidCount }} 笔</strong>
|
||||
<span class="metric-sub-pill warning">等待客服接入</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--receiving">
|
||||
<div class="metric-icon-wrap emerald">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">本页接待中</span>
|
||||
<strong class="metric-val emerald-val">{{ receivingCount }} 笔</strong>
|
||||
<span class="metric-sub-pill success">正在履约</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--completed">
|
||||
<div class="metric-icon-wrap rose">
|
||||
<el-icon><DocumentChecked /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">本页已完结订单</span>
|
||||
<strong class="metric-val rose-val">{{ completedCount }} 笔</strong>
|
||||
<span class="metric-sub-pill danger">已完成履约</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 筛选面板 -->
|
||||
<section class="section-card filter-card">
|
||||
<el-form class="filter-grid" label-position="top" @submit.prevent="handleQuery">
|
||||
<el-form-item label="关键词检索">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
clearable
|
||||
placeholder="订单号"
|
||||
style="width: 220px"
|
||||
@keyup.enter="load"
|
||||
placeholder="搜索订单号 / 买家手机号 / 账号"
|
||||
@keyup.enter="handleQuery"
|
||||
@clear="handleQuery"
|
||||
/>
|
||||
<el-select v-model="status" clearable placeholder="状态" style="width: 140px">
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订单状态">
|
||||
<el-select
|
||||
v-model="status"
|
||||
clearable
|
||||
placeholder="全部状态"
|
||||
class="full-control"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option label="待支付" value="pending_payment" />
|
||||
<el-option label="已支付" value="paid" />
|
||||
<el-option label="已支付（待接待）" value="paid" />
|
||||
<el-option label="接待中" value="receiving" />
|
||||
<el-option label="已完成" value="completed" />
|
||||
<el-option label="已取消" value="cancelled" />
|
||||
<el-option label="已退款" value="refunded" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click=";((page = 1), load())">查询</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" ">
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="handleQuery">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<!-- 订单数据表格 -->
|
||||
<section class="section-card table-section-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><Tickets /></el-icon>
|
||||
<span>撞车订单列表</span>
|
||||
</div>
|
||||
<span class="count-badge">共 {{ total }} 笔订单</span>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="items" border stripe>
|
||||
<el-table-column prop="order_no" label="订单号" min-width="170" />
|
||||
<el-table-column prop="product_title" label="商品" min-width="140" />
|
||||
<el-table-column label="数量" width="70" prop="quantity" />
|
||||
<el-table-column label="金额" width="100">
|
||||
<template #default="{ row }">¥{{ row.amount || formatCent(row.amount_cent) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="买家" min-width="140">
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
class="custom-enterprise-table"
|
||||
:data="items"
|
||||
stripe
|
||||
empty-text="未找到匹配的撞车订单"
|
||||
>
|
||||
<el-table-column label="订单号" min-width="190" fixed="left">
|
||||
<template #default="{ row }">
|
||||
{{ row.buyer_nickname || '-' }}
|
||||
<div class="sub">{{ row.buyer_phone || '' }}</div>
|
||||
<span class="font-mono text-primary font-bold">{{ row.order_no }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">{{ mohongOrderStatusLabel(row.status) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="下单时间" min-width="160">
|
||||
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="310" fixed="right">
|
||||
|
||||
<el-table-column label="购买商品" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="detail = row">详情</el-button>
|
||||
<el-button v-if="canReceive(row)" link type="warning" @click="handleReceive(row)">
|
||||
<div class="product-info-cell">
|
||||
<strong class="p-title">{{ row.product_title }}</strong>
|
||||
<small class="p-qty font-mono">x {{ row.quantity }} 份</small>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="买家手机" width="135">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono">{{ row.buyer_phone || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="订单金额" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<strong class="font-mono text-emerald font-bold"
|
||||
>¥{{ formatCent(row.amount_cent) }}</strong
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="订单状态" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTagType(row.status)" size="small" class="status-pill">
|
||||
{{ mohongOrderStatusLabel(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="接待客服" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="text-muted">{{
|
||||
row.receiver_admin_id ? `客服 ${row.receiver_admin_id}` : '未指派'
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="下单时间" min-width="165">
|
||||
<template #default="{ row }">
|
||||
<span class="time-cell">{{ formatDateTime(row.created_at) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="230" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-btn-group">
|
||||
<el-button link type="primary" size="small" @click="detail = row">详情</el-button>
|
||||
<el-button
|
||||
v-if="canReceive(row)"
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleReceive(row)"
|
||||
>
|
||||
接待
|
||||
</el-button>
|
||||
<el-button v-if="canComplete(row)" link type="success" @click="handleComplete(row)">
|
||||
<el-button
|
||||
v-if="canComplete(row)"
|
||||
link
|
||||
type="success"
|
||||
size="small"
|
||||
@click="handleComplete(row)"
|
||||
>
|
||||
完成
|
||||
</el-button>
|
||||
<el-button v-if="canCancel(row)" link type="danger" @click="handleCancel(row)">
|
||||
<el-button
|
||||
v-if="canCancel(row)"
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleCancel(row)"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canRefund(row)"
|
||||
link
|
||||
type="warning"
|
||||
:icon="Money"
|
||||
size="small"
|
||||
:loading="refundingId === row.id"
|
||||
@click="handleRefund(row)"
|
||||
>
|
||||
退款
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<AdminTablePagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
v-if="total > 0"
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
@update:current-page="page = $event"
|
||||
@update:page-size="pageSize = $event"
|
||||
@page-change="load"
|
||||
@change="load"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<el-drawer
|
||||
:model-value="Boolean(detail)"
|
||||
size="420px"
|
||||
title="订单详情"
|
||||
destroy-on-close
|
||||
@update:model-value="(v: boolean) => !v && (detail = null)"
|
||||
<!-- 订单详情弹窗 -->
|
||||
<el-dialog v-model="detail" title="撞车订单详情" width="560px" destroy-on-close>
|
||||
<div v-if="detail" class="detail-body">
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="label">订单号</span>
|
||||
<span class="val font-mono" @click="copyText(detail.order_no)">
|
||||
{{ detail.order_no }} (点击复制)
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">商品名称</span>
|
||||
<span class="val font-bold">{{ detail.product_title }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">购买数量</span>
|
||||
<span class="val font-mono">{{ detail.quantity }} 份</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">实付总额</span>
|
||||
<span class="val font-mono text-emerald font-bold"
|
||||
>¥{{ formatCent(detail.amount_cent) }}</span
|
||||
>
|
||||
<template v-if="detail">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="订单号">{{ detail.order_no }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">买家手机</span>
|
||||
<span class="val font-mono">{{ detail.buyer_phone || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">订单状态</span>
|
||||
<span class="val">
|
||||
<el-tag :type="statusTagType(detail.status)" size="small">
|
||||
{{ mohongOrderStatusLabel(detail.status) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="商品">{{ detail.product_title }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数量">{{ detail.quantity }}</el-descriptions-item>
|
||||
<el-descriptions-item label="金额">
|
||||
¥{{ detail.amount || formatCent(detail.amount_cent) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="买家">
|
||||
{{ detail.buyer_nickname }} {{ detail.buyer_phone }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div v-if="detail.items?.length" class="items-box">
|
||||
<strong>商品明细</strong>
|
||||
<div v-for="item in detail.items" :key="item.product_id" class="item-line">
|
||||
<span>{{ item.title }} × {{ item.quantity }}</span>
|
||||
<em>¥{{ item.amount || formatCent(item.amount_cent) }}</em>
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">支付时间</span>
|
||||
<span class="val">{{ formatDateTime(detail.paid_at, '-') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">完成时间</span>
|
||||
<span class="val">{{ formatDateTime(detail.completed_at, '-') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">取消时间</span>
|
||||
<span class="val">{{ formatDateTime(detail.cancelled_at, '-') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">后台备注</span>
|
||||
<span class="val">{{ detail.admin_remark || '无' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="detail.copy_text" class="copy-box">
|
||||
<div class="copy-head">
|
||||
<strong>复制文案</strong>
|
||||
<el-button size="small" @click="copyText(detail.copy_text)">复制</el-button>
|
||||
</div>
|
||||
<pre>{{ detail.copy_text }}</pre>
|
||||
</div>
|
||||
<div v-if="detail.qrcode_url_snapshot" class="qr-box">
|
||||
<strong>二维码快照</strong>
|
||||
<el-image
|
||||
:src="detail.qrcode_url_snapshot"
|
||||
fit="contain"
|
||||
style="width: 180px; height: 180px"
|
||||
/>
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<el-button @click="detail = null">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
.page-head {
|
||||
|
||||
/* ================= 头部卡片 ================= */
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.page-head h2 {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.page-head p,
|
||||
.sub {
|
||||
margin: 0;
|
||||
color: #6b7a90;
|
||||
font-size: 12px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.items-box {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.item-line {
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #db2777;
|
||||
background: #fdf2f8;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ================= 核心指标卡片 ================= */
|
||||
.summary-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.metric-card--total::before {
|
||||
background: linear-gradient(90deg, #6366f1, #818cf8);
|
||||
}
|
||||
|
||||
.metric-card--paid::before {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
}
|
||||
|
||||
.metric-card--receiving::before {
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.metric-card--completed::before {
|
||||
background: linear-gradient(90deg, #f43f5e, #fb7185);
|
||||
}
|
||||
|
||||
.metric-icon-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.indigo {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.amber {
|
||||
background: #fffbeb;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.emerald {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.rose {
|
||||
background: #fff1f2;
|
||||
color: #f43f5e;
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.indigo-val {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.amber-val {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.emerald-val {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.rose-val {
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.metric-sub-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.metric-sub-pill.info {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.metric-sub-pill.warning {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.metric-sub-pill.success {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.metric-sub-pill.danger {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
/* ================= 筛选面板 ================= */
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 180px auto;
|
||||
align-items: flex-end;
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.filter-grid :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-grid :deep(.el-form-item__label) {
|
||||
padding-bottom: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.full-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ================= 表格卡片 ================= */
|
||||
.table-section-card {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: #db2777;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #db2777;
|
||||
background: #fdf2f8;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__header-wrapper th) {
|
||||
background-color: #f8fafc !important;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__body-wrapper td) {
|
||||
padding: 12px 0;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
.item-line em {
|
||||
font-style: normal;
|
||||
color: #ff6a00;
|
||||
|
||||
.product-info-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.p-title {
|
||||
font-size: 13px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.p-qty {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
font-weight: 600;
|
||||
}
|
||||
.copy-box,
|
||||
.qr-box {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.copy-head {
|
||||
|
||||
.action-btn-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.copy-box pre {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
background: #f7f9fc;
|
||||
border-radius: 8px;
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
|
||||
.time-cell {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
.qr-box {
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.text-emerald {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* ================= 弹窗样式 ================= */
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.detail-item .label {
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-item .val {
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -899,12 +899,16 @@ function paymentPaidAt(record: AdminPayment) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" v-loading="loading">
|
||||
<div v-if="order" class="page-header-row">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">{{ order.order_no }}</p>
|
||||
<h1>订单详情</h1>
|
||||
<p>
|
||||
<div class="finance-page-container" v-loading="loading">
|
||||
<!-- 头部卡片 -->
|
||||
<header v-if="order" class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<span>ORDER: {{ order.order_no }}</span>
|
||||
</div>
|
||||
<h1 class="page-title">订单详情</h1>
|
||||
<p class="page-subtitle">
|
||||
商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
|
||||
{{ order.login_platform }}
|
||||
</p>
|
||||
@@ -1003,6 +1007,7 @@ function paymentPaidAt(record: AdminPayment) {
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="order" class="metric-grid dashboard-metrics order-metrics">
|
||||
<div class="metric-card">
|
||||
@@ -1652,10 +1657,77 @@ function paymentPaidAt(record: AdminPayment) {
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.order-metrics {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft, Refresh, Search } from '@element-plus/icons-vue'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Clock,
|
||||
DocumentChecked,
|
||||
Refresh,
|
||||
Search,
|
||||
Tickets,
|
||||
Warning,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
@@ -33,6 +41,7 @@ const router = useRouter()
|
||||
const canReturnToWithdrawals = computed(() => route.query.from === 'withdrawals')
|
||||
|
||||
const orderStatusOptions = [
|
||||
{ label: '全部状态', value: '' },
|
||||
{ label: '待支付', value: 'pending_payment' },
|
||||
{ label: '待交接', value: 'pending_handoff' },
|
||||
{ label: '使用中', value: 'renting' },
|
||||
@@ -48,6 +57,7 @@ const orderStatusOptions = [
|
||||
] as const
|
||||
|
||||
const handoffStatusOptions = [
|
||||
{ label: '全部交接状态', value: '' },
|
||||
{ label: '待号主交接', value: 'pending_owner' },
|
||||
{ label: '号主交接超时', value: 'owner_timeout' },
|
||||
{ label: '待租客确认', value: 'pending_renter_confirm' },
|
||||
@@ -61,11 +71,13 @@ const handoffStatusOptions = [
|
||||
] as const
|
||||
|
||||
const handoffModeOptions = [
|
||||
{ label: '正常订单', value: 'owner' },
|
||||
{ label: '全部类型', value: '' },
|
||||
{ label: '普通订单', value: 'owner' },
|
||||
{ label: '平台代管', value: 'platform' },
|
||||
] as const
|
||||
|
||||
const settlementStatusOptions = [
|
||||
{ label: '全部结算状态', value: '' },
|
||||
{ label: '未结算', value: 'unsettled' },
|
||||
{ label: '待结算', value: 'pending' },
|
||||
{ label: '冻结中', value: 'frozen' },
|
||||
@@ -77,8 +89,20 @@ const settlementStatusOptions = [
|
||||
{ label: '已仲裁', value: 'arbitrated' },
|
||||
] as const
|
||||
|
||||
const rentingCount = computed(() => orders.value.filter(o => o.status === 'renting').length)
|
||||
const pendingHandoffCount = computed(
|
||||
() =>
|
||||
orders.value.filter(
|
||||
o => o.status === 'pending_handoff' || o.handoff_status?.includes('pending')
|
||||
).length
|
||||
)
|
||||
const disputeCount = computed(
|
||||
() =>
|
||||
orders.value.filter(o => ['disputing', 'checkout_disputing', 'abnormal'].includes(o.status))
|
||||
.length
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
// 支持从提现审核等页面跳转预填号主/租客搜索
|
||||
const keyword = route.query.keyword
|
||||
if (typeof keyword === 'string' && keyword.trim()) {
|
||||
filters.keyword = keyword.trim()
|
||||
@@ -156,16 +180,39 @@ function userText(value: string | number | undefined) {
|
||||
function isPlatformManaged(row: Order) {
|
||||
return row.handoff_mode === 'platform' || row.settlement_mode === 'platform_managed'
|
||||
}
|
||||
|
||||
function orderStatusType(status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
|
||||
if (status === 'completed') return 'success'
|
||||
if (status === 'renting') return 'primary'
|
||||
if (['pending_payment', 'pending_handoff'].includes(status)) return 'warning'
|
||||
if (['disputing', 'checkout_disputing', 'abnormal'].includes(status)) return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
function settlementStatusType(
|
||||
status: string
|
||||
): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
|
||||
if (status === 'settled') return 'success'
|
||||
if (['pending', 'frozen'].includes(status)) return 'warning'
|
||||
if (['disputed', 'refunded'].includes(status)) return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
</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 class="finance-page-container">
|
||||
<!-- 头部卡片 -->
|
||||
<header class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
<span>ORDERS & TRANSACTIONS</span>
|
||||
</div>
|
||||
<h1 class="page-title">订单管理</h1>
|
||||
<p class="page-subtitle">全量监控租号订单流转、交接履约状态、押金退还与号主结算分配。</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<el-button v-if="canReturnToWithdrawals" :icon="ArrowLeft" @click="returnToWithdrawals">
|
||||
返回提现审核
|
||||
@@ -173,25 +220,74 @@ function isPlatformManaged(row: Order) {
|
||||
<el-button :icon="Refresh" @click="loadOrders">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="order-filter-bar">
|
||||
<el-form inline @submit.prevent>
|
||||
<el-form-item label="关键词">
|
||||
<!-- 汇总指标卡片 -->
|
||||
<section class="summary-metric-grid">
|
||||
<div class="metric-card metric-card--total">
|
||||
<div class="metric-icon-wrap indigo">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">全量订单总数</span>
|
||||
<strong class="metric-val indigo-val">{{ total }} 笔</strong>
|
||||
<span class="metric-sub-pill info">平台累计订单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--renting">
|
||||
<div class="metric-icon-wrap emerald">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">本页履约租用中</span>
|
||||
<strong class="metric-val emerald-val">{{ rentingCount }} 笔</strong>
|
||||
<span class="metric-sub-pill success">正在租用</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--handoff">
|
||||
<div class="metric-icon-wrap amber">
|
||||
<el-icon><DocumentChecked /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">本页待交接发货</span>
|
||||
<strong class="metric-val amber-val">{{ pendingHandoffCount }} 笔</strong>
|
||||
<span class="metric-sub-pill warning">等待交接</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card metric-card--dispute">
|
||||
<div class="metric-icon-wrap rose">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">本页争议 / 异常</span>
|
||||
<strong class="metric-val rose-val">{{ disputeCount }} 笔</strong>
|
||||
<span class="metric-sub-pill danger">需客服介入</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 筛选面板 -->
|
||||
<section class="section-card filter-card">
|
||||
<el-form class="filter-grid" label-position="top" @submit.prevent="queryOrders">
|
||||
<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"
|
||||
placeholder="全部状态"
|
||||
class="full-control"
|
||||
@change="queryOrders"
|
||||
>
|
||||
<el-option
|
||||
@@ -202,12 +298,13 @@ function isPlatformManaged(row: Order) {
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="交接状态">
|
||||
|
||||
<el-form-item label="交接履约状态">
|
||||
<el-select
|
||||
v-model="filters.handoff_status"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
style="width: 170px"
|
||||
placeholder="全部交接状态"
|
||||
class="full-control"
|
||||
@change="queryOrders"
|
||||
>
|
||||
<el-option
|
||||
@@ -218,12 +315,13 @@ function isPlatformManaged(row: Order) {
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单类型">
|
||||
|
||||
<el-form-item label="订单交付模式">
|
||||
<el-select
|
||||
v-model="filters.handoff_mode"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
style="width: 130px"
|
||||
placeholder="全部类型"
|
||||
class="full-control"
|
||||
@change="queryOrders"
|
||||
>
|
||||
<el-option
|
||||
@@ -234,12 +332,13 @@ function isPlatformManaged(row: Order) {
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算状态">
|
||||
|
||||
<el-form-item label="资金结算状态">
|
||||
<el-select
|
||||
v-model="filters.settlement_status"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
style="width: 140px"
|
||||
placeholder="全部结算状态"
|
||||
class="full-control"
|
||||
@change="queryOrders"
|
||||
>
|
||||
<el-option
|
||||
@@ -250,90 +349,147 @@ function isPlatformManaged(row: Order) {
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="线下结算">
|
||||
<el-select
|
||||
v-model="filters.offline_settlement_status"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
style="width: 150px"
|
||||
class="full-control"
|
||||
@change="queryOrders"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="待确认线下结算" value="pending" />
|
||||
<el-option label="已确认线下结算" value="settled" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="queryOrders"
|
||||
>查询</el-button
|
||||
>
|
||||
|
||||
<el-form-item label=" ">
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="queryOrders">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<!-- 订单数据表格 -->
|
||||
<section class="section-card table-section-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><Tickets /></el-icon>
|
||||
<span>订单列表明细</span>
|
||||
</div>
|
||||
<span class="count-badge">共 {{ total }} 笔订单</span>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
class="table-panel admin-orders-table"
|
||||
class="custom-enterprise-table"
|
||||
:data="orders"
|
||||
stripe
|
||||
empty-text="未找到匹配的订单"
|
||||
>
|
||||
<el-table-column label="订单信息" min-width="230">
|
||||
<el-table-column label="订单信息" min-width="210" fixed="left">
|
||||
<template #default="{ row }">
|
||||
<div class="order-main-cell">
|
||||
<div class="order-info-cell">
|
||||
<RouterLink class="order-link" :to="adminPath(`orders/${row.id}`)">
|
||||
{{ row.order_no }}
|
||||
</RouterLink>
|
||||
<span>商品编号 {{ formatListingNo(row.listing_no, row.listing_id) }}</span>
|
||||
<small class="listing-no"
|
||||
>编号: {{ formatListingNo(row.listing_no, row.listing_id) }}</small
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账号" min-width="170" show-overflow-tooltip>
|
||||
|
||||
<el-table-column label="商品账号" min-width="190" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="stacked-cell">
|
||||
<strong>{{ row.title }}</strong>
|
||||
<span>{{ row.server_region }} / {{ row.login_platform }}</span>
|
||||
<div class="account-cell">
|
||||
<strong class="account-title">{{ row.title }}</strong>
|
||||
<div class="region-platform-tags">
|
||||
<span class="meta-tag">{{ row.server_region || '默认区' }}</span>
|
||||
<span class="meta-tag platform">{{ row.login_platform || '全平台' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户" min-width="170">
|
||||
|
||||
<el-table-column label="租客 / 号主" min-width="190">
|
||||
<template #default="{ row }">
|
||||
<div class="stacked-cell compact">
|
||||
<span>租客 {{ userText(row.renter_phone || row.renter_id) }}</span>
|
||||
<span v-if="isPlatformManaged(row)" class="platform-managed-owner">号主 平台代管</span>
|
||||
<span v-else>号主 {{ userText(row.owner_phone || row.owner_id) }}</span>
|
||||
<div class="parties-cell">
|
||||
<div class="party-line renter-line">
|
||||
<span class="role-badge renter">租</span>
|
||||
<span class="phone-text">{{ userText(row.renter_phone || row.renter_id) }}</span>
|
||||
</div>
|
||||
<div class="party-line owner-line">
|
||||
<span class="role-badge owner">主</span>
|
||||
<span v-if="isPlatformManaged(row)" class="platform-managed-text"
|
||||
>平台代管资产</span
|
||||
>
|
||||
<span v-else class="phone-text">{{
|
||||
userText(row.owner_phone || row.owner_id)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="150">
|
||||
|
||||
<el-table-column label="状态" width="140">
|
||||
<template #default="{ row }">
|
||||
<div class="stacked-cell compact">
|
||||
<strong>{{ orderStatusLabel(row.status) }}</strong>
|
||||
<span>{{ orderHandoffStatusLabel(row) }}</span>
|
||||
<div class="status-cell">
|
||||
<el-tag :type="orderStatusType(row.status)" size="small" class="status-pill">
|
||||
{{ orderStatusLabel(row.status) }}
|
||||
</el-tag>
|
||||
<small class="handoff-text">{{ orderHandoffStatusLabel(row) }}</small>
|
||||
</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">
|
||||
|
||||
<el-table-column label="结算状态" width="110" align="center">
|
||||
<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>
|
||||
<el-tag
|
||||
:type="settlementStatusType(row.settlement_status)"
|
||||
size="small"
|
||||
effect="plain"
|
||||
class="settle-pill"
|
||||
>
|
||||
{{ settlementStatusLabel(row.settlement_status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="金额明细" min-width="140" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="amount-stack">
|
||||
<strong class="rent-amount font-mono"
|
||||
>¥{{ money(amountYuan(row.rent_amount_cent)) }}</strong
|
||||
>
|
||||
<small class="deposit-text"
|
||||
>押金 ¥{{ money(amountYuan(row.deposit_amount_cent)) }}</small
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
|
||||
|
||||
<el-table-column label="下单时间" min-width="165">
|
||||
<template #default="{ row }">
|
||||
<span class="time-cell">{{ formatDateTime(row.created_at) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="88" align="center">
|
||||
|
||||
<el-table-column label="操作" width="90" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<RouterLink :to="adminPath(`orders/${row.id}`)">
|
||||
<el-button size="small">详情</el-button>
|
||||
<el-button link type="primary" size="small">详情</el-button>
|
||||
</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<AdminTablePagination
|
||||
v-if="total > 0"
|
||||
@@ -344,116 +500,472 @@ function isPlatformManaged(row: Order) {
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</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) {
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
/* ================= 头部卡片 ================= */
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 14px;
|
||||
}
|
||||
|
||||
.order-filter-bar :deep(.el-form-item) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.order-filter-bar :deep(.el-form-item__label) {
|
||||
color: #6b7785;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.admin-orders-table {
|
||||
--el-table-fixed-right-column: #ffffff;
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.admin-orders-table :deep(.el-table__inner-wrapper) {
|
||||
min-width: 0;
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.admin-orders-table :deep(.el-scrollbar__wrap) {
|
||||
overflow-x: hidden !important;
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-orders-table :deep(.el-scrollbar__bar.is-horizontal) {
|
||||
display: none;
|
||||
/* ================= 核心指标卡片 ================= */
|
||||
.summary-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.order-main-cell,
|
||||
.stacked-cell {
|
||||
.metric-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.metric-card--total::before {
|
||||
background: linear-gradient(90deg, #6366f1, #818cf8);
|
||||
}
|
||||
|
||||
.metric-card--renting::before {
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.metric-card--handoff::before {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
}
|
||||
|
||||
.metric-card--dispute::before {
|
||||
background: linear-gradient(90deg, #f43f5e, #fb7185);
|
||||
}
|
||||
|
||||
.metric-icon-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.indigo {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.emerald {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.amber {
|
||||
background: #fffbeb;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.rose {
|
||||
background: #fff1f2;
|
||||
color: #f43f5e;
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
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;
|
||||
.metric-label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.indigo-val {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.emerald-val {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.amber-val {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.rose-val {
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.metric-sub-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.metric-sub-pill.info {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.metric-sub-pill.success {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.metric-sub-pill.warning {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.metric-sub-pill.danger {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
/* ================= 筛选面板 ================= */
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
align-items: flex-end;
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.filter-grid :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-grid :deep(.el-form-item__label) {
|
||||
padding-bottom: 4px;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stacked-cell strong {
|
||||
overflow: hidden;
|
||||
color: #1b2559;
|
||||
font-size: 14px;
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.full-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ================= 表格卡片 ================= */
|
||||
.table-section-card {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.stacked-cell.compact {
|
||||
.header-icon {
|
||||
color: #3b82f6;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__header-wrapper th) {
|
||||
background-color: #f8fafc !important;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.custom-enterprise-table :deep(.el-table__body-wrapper td) {
|
||||
padding: 12px 0;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.order-info-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stacked-cell .platform-managed-owner {
|
||||
color: #d97706;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.money-cell {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.order-link {
|
||||
overflow: hidden;
|
||||
color: #2f6bff;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-link:hover {
|
||||
color: #174edb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.order-filter-bar :deep(.el-input),
|
||||
.order-filter-bar :deep(.el-select) {
|
||||
width: 100% !important;
|
||||
}
|
||||
.listing-no {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.order-filter-bar :deep(.el-form-item) {
|
||||
width: 100%;
|
||||
}
|
||||
.account-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.account-title {
|
||||
font-size: 13px;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.region-platform-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.meta-tag.platform {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.parties-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.party-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.role-badge.renter {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.role-badge.owner {
|
||||
background: #fdf2f8;
|
||||
color: #db2777;
|
||||
border: 1px solid #fbcfe8;
|
||||
}
|
||||
|
||||
.phone-text {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.platform-managed-text {
|
||||
font-size: 11.5px;
|
||||
color: #0d9488;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
width: fit-content;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.handoff-text {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.settle-pill {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.amount-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.rent-amount {
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.deposit-text {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.time-cell {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -336,12 +336,16 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" v-loading="loading">
|
||||
<div v-if="pickup" class="page-header-row">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">{{ pickup.pickup_no }}</p>
|
||||
<h1>提号详情</h1>
|
||||
<p>
|
||||
<div class="finance-page-container" v-loading="loading">
|
||||
<!-- 头部卡片 -->
|
||||
<header v-if="pickup" class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<span>PICKUP: {{ pickup.pickup_no }}</span>
|
||||
</div>
|
||||
<h1 class="page-title">提号详情</h1>
|
||||
<p class="page-subtitle">
|
||||
商品编号 {{ listingCode }} · {{ pickup.account_title }} · {{ pickup.server_region }} /
|
||||
{{ pickup.login_platform }}
|
||||
</p>
|
||||
@@ -370,6 +374,7 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="pickup" class="metric-grid pickup-metrics">
|
||||
<div class="metric-card">
|
||||
@@ -677,10 +682,77 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #0284c7;
|
||||
background: #e0f2fe;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pickup-metrics {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Check, Close, Refresh, View } from '@element-plus/icons-vue'
|
||||
import { Check, Close, Money, Refresh, ShoppingBag, View, Warning } from '@element-plus/icons-vue'
|
||||
import {
|
||||
adminApproveRefund,
|
||||
adminRejectRefund,
|
||||
@@ -22,6 +22,10 @@ const rejectVisible = ref(false)
|
||||
const rejectOrder = ref<Order | null>(null)
|
||||
const orders = ref<Order[]>([])
|
||||
|
||||
const totalRefundAmountCent = computed(() =>
|
||||
orders.value.reduce((sum, item) => sum + Number(item.refund_amount_cent || 0), 0)
|
||||
)
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -36,7 +40,7 @@ async function loadOrders() {
|
||||
async function handleApprove(row: Order) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认通过「${row.order_no}」的退款申请？通过后将原路退回 ${formatCentWithSymbol(row.refund_amount_cent || 0)}，订单取消。`,
|
||||
`确认通过订单「${row.order_no}」的退款申请？通过后将原路退回 ${formatCentWithSymbol(row.refund_amount_cent || 0)}，订单取消。`,
|
||||
'退款审核通过确认',
|
||||
{ confirmButtonText: '通过退款', cancelButtonText: '取消', type: 'warning' }
|
||||
)
|
||||
@@ -111,75 +115,147 @@ async function handleRejectClose() {
|
||||
}
|
||||
|
||||
function openDetail(order: Order) {
|
||||
router.push(adminPath(`orders/${order.id}`))
|
||||
void router.push(adminPath(`orders/${order.id}`))
|
||||
}
|
||||
|
||||
onMounted(loadOrders)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="refund-review-page">
|
||||
<div class="page-toolbar">
|
||||
<h2>退款审核</h2>
|
||||
<el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新</el-button>
|
||||
<div class="finance-page-container">
|
||||
<!-- 头部卡片 -->
|
||||
<header class="page-header-card">
|
||||
<div class="header-main">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow-tag">
|
||||
<el-icon><Money /></el-icon>
|
||||
<span>REFUND AUDIT</span>
|
||||
</div>
|
||||
<h1 class="page-title">退款审核</h1>
|
||||
<p class="page-subtitle">
|
||||
审核租客取消订单发起的退款申请，核验订单流转状态并执行原路退回或驳回处理。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading" class="review-list">
|
||||
<div v-if="!loading && orders.length === 0" class="empty-state">
|
||||
<el-empty description="暂无待审核退款" />
|
||||
<div class="toolbar-actions">
|
||||
<el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新数据</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 汇总指标卡片 -->
|
||||
<section class="summary-metric-grid">
|
||||
<div class="metric-card metric-card--pending">
|
||||
<div class="metric-icon-wrap amber">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">待审核退款申请</span>
|
||||
<strong class="metric-val amber-val">{{ orders.length }} 笔</strong>
|
||||
<span class="metric-sub-pill warning">等待人工审核</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-cards">
|
||||
<div class="metric-card metric-card--amount">
|
||||
<div class="metric-icon-wrap rose">
|
||||
<el-icon><Money /></el-icon>
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<span class="metric-label">待退款总金额</span>
|
||||
<strong class="metric-val rose-val">{{
|
||||
formatCentWithSymbol(totalRefundAmountCent)
|
||||
}}</strong>
|
||||
<span class="metric-sub-pill danger">待原路退回资金</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 退款列表卡片 -->
|
||||
<section class="section-card review-list-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-header-title">
|
||||
<el-icon class="header-icon"><ShoppingBag /></el-icon>
|
||||
<span>待审核退款列表</span>
|
||||
</div>
|
||||
<span class="count-badge">共 {{ orders.length }} 笔待办</span>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading" class="review-items-wrap">
|
||||
<div v-if="!loading && orders.length === 0" class="empty-box">
|
||||
<el-empty description="暂无待审核的退款申请，运营秩序良好" />
|
||||
</div>
|
||||
|
||||
<div v-else class="review-cards-grid">
|
||||
<div v-for="order in orders" :key="order.id" class="review-card">
|
||||
<div class="card-header">
|
||||
<div class="order-info">
|
||||
<div class="rc-header">
|
||||
<div class="rc-order-info">
|
||||
<span class="order-no" @click="openDetail(order)">{{ order.order_no }}</span>
|
||||
<el-tag size="small" type="warning">待客服审核退款</el-tag>
|
||||
<el-tag size="small" type="warning" class="status-tag">待客服审核退款</el-tag>
|
||||
</div>
|
||||
<div class="order-time">{{ formatDateTime(order.updated_at) }}</div>
|
||||
<span class="time-text">{{ formatDateTime(order.updated_at) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品</span>
|
||||
<span class="info-value">{{ order.title || '-' }}</span>
|
||||
<div class="rc-body">
|
||||
<div class="rc-info-row">
|
||||
<span class="label">商品标题</span>
|
||||
<span class="val title-val">{{ order.title || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">订单状态</span>
|
||||
<span class="info-value">{{ orderStatusLabel(order.status) }}</span>
|
||||
<div class="rc-info-grid">
|
||||
<div class="rc-info-row">
|
||||
<span class="label">租客信息</span>
|
||||
<span class="val font-mono">{{ order.renter_phone || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">交接状态</span>
|
||||
<span class="info-value">{{ handoffStatusLabel(order.handoff_status) }}</span>
|
||||
<div class="rc-info-row">
|
||||
<span class="label">号主信息</span>
|
||||
<span class="val font-mono">{{ order.owner_phone || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">号主</span>
|
||||
<span class="info-value">{{ order.owner_phone || '-' }}</span>
|
||||
<div class="rc-info-row">
|
||||
<span class="label">订单状态</span>
|
||||
<span class="val">{{ orderStatusLabel(order.status) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">租客</span>
|
||||
<span class="info-value">{{ order.renter_phone || '-' }}</span>
|
||||
<div class="rc-info-row">
|
||||
<span class="label">交接状态</span>
|
||||
<span class="val">{{ handoffStatusLabel(order.handoff_status) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">订单总额</span>
|
||||
<span class="info-value"
|
||||
>{{
|
||||
formatCentWithSymbol((order.rent_amount_cent || 0) + order.deposit_amount_cent)
|
||||
}}（租金{{ formatCentWithSymbol(order.rent_amount_cent || 0) }} / 押金{{
|
||||
formatCentWithSymbol(order.deposit_amount_cent)
|
||||
}}）</span
|
||||
</div>
|
||||
|
||||
<div class="rc-amount-row">
|
||||
<div class="amount-detail">
|
||||
<span class="label">订单总付：</span>
|
||||
<span class="val font-mono">
|
||||
{{
|
||||
formatCentWithSymbol(
|
||||
(order.rent_amount_cent || 0) + order.deposit_amount_cent
|
||||
)
|
||||
}}
|
||||
<small
|
||||
>（租金 {{ formatCentWithSymbol(order.rent_amount_cent || 0) }} + 押金
|
||||
{{ formatCentWithSymbol(order.deposit_amount_cent) }}）</small
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">退款金额</span>
|
||||
<span class="info-value refund-amount">{{
|
||||
<div class="refund-badge">
|
||||
<span class="refund-label">申请退款</span>
|
||||
<strong class="refund-val font-mono">{{
|
||||
formatCentWithSymbol(order.refund_amount_cent || 0)
|
||||
}}</span>
|
||||
}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<el-button :icon="View" size="small" @click="openDetail(order)"> 查看详情 </el-button>
|
||||
<div class="rc-footer">
|
||||
<el-button :icon="View" size="small" @click="openDetail(order)"> 查看订单 </el-button>
|
||||
<div class="action-btn-group">
|
||||
<el-button
|
||||
:icon="Close"
|
||||
type="danger"
|
||||
size="small"
|
||||
plain
|
||||
:loading="submitting"
|
||||
@click="openReject(order)"
|
||||
>
|
||||
驳回退款
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="Check"
|
||||
type="primary"
|
||||
@@ -189,97 +265,323 @@ onMounted(loadOrders)
|
||||
>
|
||||
通过退款
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="Close"
|
||||
type="danger"
|
||||
size="small"
|
||||
:loading="submitting"
|
||||
@click="openReject(order)"
|
||||
>
|
||||
驳回
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 驳回退款弹窗 -->
|
||||
<el-dialog v-model="rejectVisible" title="驳回退款申请" width="480px" destroy-on-close>
|
||||
<div v-if="rejectOrder" class="reject-dialog-body">
|
||||
<div class="reject-order-badge">
|
||||
<span>待处理订单：</span>
|
||||
<strong class="font-mono">{{ rejectOrder.order_no }}</strong>
|
||||
</div>
|
||||
<p class="reject-tip-text">请根据争议核实情况选择驳回模式：</p>
|
||||
<div class="reject-mode-list">
|
||||
<div class="reject-mode-card" @click="handleRejectRestore">
|
||||
<div class="mode-header">
|
||||
<el-button type="primary" size="small" :loading="submitting">
|
||||
仅驳回退款（恢复订单）
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mode-desc">
|
||||
仅驳回退款请求，订单恢复至待交接状态，号主与租客可继续完成交接履约。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 驳回弹窗 -->
|
||||
<el-dialog v-model="rejectVisible" title="驳回退款" width="420px">
|
||||
<div v-if="rejectOrder" class="reject-dialog">
|
||||
<p class="reject-tip">请选择驳回方式：</p>
|
||||
<div class="reject-options">
|
||||
<el-button type="primary" :loading="submitting" @click="handleRejectRestore">
|
||||
驳回退款（恢复订单）
|
||||
</el-button>
|
||||
<p class="option-desc">仅驳回退款请求，订单恢复至待交接状态，交接流程可继续</p>
|
||||
|
||||
<el-button type="danger" :loading="submitting" @click="handleRejectClose">
|
||||
<div class="reject-mode-card" @click="handleRejectClose">
|
||||
<div class="mode-header">
|
||||
<el-button type="danger" size="small" :loading="submitting">
|
||||
驳回退款并关闭订单
|
||||
</el-button>
|
||||
<p class="option-desc">驳回退款且关闭订单，商品下架归档，订单不可再操作</p>
|
||||
</div>
|
||||
<p class="mode-desc">驳回退款请求并强制关闭订单，商品将下架归档，后续不可再流转。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<el-button @click="rejectVisible = false">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.refund-review-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
.finance-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 4px 32px;
|
||||
}
|
||||
|
||||
.page-toolbar {
|
||||
/* ================= 头部卡片 ================= */
|
||||
.page-header-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
color: #ea580c;
|
||||
background: #fff7ed;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ================= 核心指标卡片 ================= */
|
||||
.summary-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.metric-card--pending::before {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
}
|
||||
|
||||
.metric-card--amount::before {
|
||||
background: linear-gradient(90deg, #f43f5e, #fb7185);
|
||||
}
|
||||
|
||||
.metric-icon-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.amber {
|
||||
background: #fffbeb;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.metric-icon-wrap.rose {
|
||||
background: #fff1f2;
|
||||
color: #f43f5e;
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.amber-val {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.rose-val {
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.metric-sub-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.metric-sub-pill.warning {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.metric-sub-pill.danger {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
/* ================= 列表卡片 ================= */
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-toolbar h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.review-cards {
|
||||
.table-header-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: #ea580c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #ea580c;
|
||||
background: #fff7ed;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.review-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background: var(--el-bg-color);
|
||||
background: #f8fafc;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.review-card:hover {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
.rc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.rc-order-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #2563eb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -287,66 +589,173 @@ onMounted(loadOrders)
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.refund-amount {
|
||||
.status-tag {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
.time-text {
|
||||
font-size: 11.5px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.reject-dialog {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reject-tip {
|
||||
margin-bottom: 16px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.reject-options {
|
||||
.rc-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
.rc-info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.rc-info-row .label {
|
||||
color: #64748b;
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rc-info-row .val {
|
||||
color: #1e293b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-val {
|
||||
font-weight: 600 !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.rc-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.rc-amount-row {
|
||||
margin-top: 4px;
|
||||
padding: 10px 12px;
|
||||
background: #fff1f2;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fecdd3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.amount-detail .label {
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.amount-detail .val {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0 0 12px 0;
|
||||
text-align: left;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.amount-detail small {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.refund-badge {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.refund-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.refund-val {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.rc-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #e2e8f0;
|
||||
}
|
||||
|
||||
.action-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
/* ================= 弹窗样式 ================= */
|
||||
.reject-dialog-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.reject-order-badge {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.reject-tip-text {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.reject-mode-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.reject-mode-card {
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.reject-mode-card:hover {
|
||||
background: #ffffff;
|
||||
border-color: #cbd5e1;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.mode-desc {
|
||||
margin: 0;
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -306,7 +306,9 @@ export function useOrderActions(options: UseOrderActionsOptions) {
|
||||
cancelling.value = true
|
||||
try {
|
||||
await cancelOrder(order.value.id)
|
||||
options.notifySuccess(needsRefundReview ? '退款申请已提交，等待客服审核' : '订单已取消，账号已释放')
|
||||
options.notifySuccess(
|
||||
needsRefundReview ? '退款申请已提交，等待客服审核' : '订单已取消，账号已释放'
|
||||
)
|
||||
await router.push(options.ordersPath)
|
||||
} catch (error) {
|
||||
options.notifyError(readError(error, '取消失败'))
|
||||
|
||||
Reference in New Issue
Block a user