feat(admin): modernize business views including listings, review, users, orders, pickups, and mohong
This commit is contained in:
yml2213
@@ -587,51 +587,52 @@ async function openScreenshot(url: string) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="page" v-loading="loading">
|
<div class="finance-page-container" v-loading="loading">
|
||||||
<div v-if="listing" class="listing-detail-header">
|
<!-- 头部卡片 -->
|
||||||
<div class="listing-title-block">
|
<header v-if="listing" class="page-header-card">
|
||||||
<div class="listing-code-line">
|
<div class="header-main">
|
||||||
<span>商品编号</span>
|
<div class="title-group">
|
||||||
<strong>{{ formatListingCode(listing) }}</strong>
|
<div class="eyebrow-tag">
|
||||||
|
<span>ITEM CODE: {{ formatListingCode(listing) }}</span>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h1>{{ listing.title || '商品详情' }}</h1>
|
<div class="toolbar-actions">
|
||||||
<div class="listing-subtitle">
|
<el-button :icon="CopyDocument" @click="copyListingCode">复制编号</el-button>
|
||||||
<span>{{ listing.server_region || '-' }}</span>
|
<el-button @click="goBackToList">返回列表</el-button>
|
||||||
<span>{{ listing.rank_level || '-' }}</span>
|
<el-button
|
||||||
<span>{{ listing.login_platform || '-' }}</span>
|
v-if="canAdjustExternal"
|
||||||
<span>账号 {{ listing.account_id }}</span>
|
type="primary"
|
||||||
<span v-if="listing.is_external_upload"
|
:icon="EditPen"
|
||||||
>外部 API · {{ listing.source_channel || '未填写' }}</span
|
:disabled="externalAdjustmentLocked"
|
||||||
|
@click="openExternalAdjustment"
|
||||||
>
|
>
|
||||||
|
调整商品
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
class="transfer-owner-trigger"
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-actions">
|
</header>
|
||||||
<el-button :icon="CopyDocument" @click="copyListingCode">复制编号</el-button>
|
|
||||||
<el-button @click="goBackToList">返回列表</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canAdjustExternal"
|
|
||||||
type="primary"
|
|
||||||
:icon="EditPen"
|
|
||||||
:disabled="externalAdjustmentLocked"
|
|
||||||
@click="openExternalAdjustment"
|
|
||||||
>
|
|
||||||
调整商品
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
class="transfer-owner-trigger"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-model="externalAdjustVisible"
|
v-model="externalAdjustVisible"
|
||||||
@@ -1024,10 +1025,77 @@ async function openScreenshot(url: string) {
|
|||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</section>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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 {
|
.listing-detail-header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr) auto;
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive, ref } from 'vue'
|
import { computed, onMounted, reactive, ref } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
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 {
|
import {
|
||||||
createAdminMohongCategory,
|
createAdminMohongCategory,
|
||||||
deleteAdminMohongCategory,
|
deleteAdminMohongCategory,
|
||||||
@@ -23,6 +23,11 @@ const form = reactive({
|
|||||||
status: 'enabled',
|
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)
|
onMounted(load)
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
@@ -91,92 +96,483 @@ async function handleDelete(item: MohongCategory) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="admin-page">
|
<div class="finance-page-container">
|
||||||
<div class="page-head">
|
<!-- 头部卡片 -->
|
||||||
<div>
|
<header class="page-header-card">
|
||||||
<h2>撞车分类</h2>
|
<div class="header-main">
|
||||||
<p>大红 / 四格大红 / 炫彩等分类，前台左侧筛选使用</p>
|
<div class="title-group">
|
||||||
</div>
|
<div class="eyebrow-tag">
|
||||||
<div class="actions">
|
<el-icon><Present /></el-icon>
|
||||||
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
<span>CRASH MALL CATEGORIES</span>
|
||||||
<el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
|
</div>
|
||||||
</div>
|
<h1 class="page-title">撞车分类</h1>
|
||||||
</div>
|
<p class="page-subtitle">
|
||||||
|
大红 / 四格大红 / 炫彩等分类管理，用于前台撞车商城左侧导航、筛选与商品归类。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="items" border stripe>
|
<div class="toolbar-actions">
|
||||||
<el-table-column prop="name" label="名称" min-width="140" />
|
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
||||||
<el-table-column prop="code" label="编码" width="140" />
|
<el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
|
||||||
<el-table-column prop="sort_order" label="排序" width="90" />
|
</div>
|
||||||
<el-table-column label="商品数" width="90">
|
</div>
|
||||||
<template #default="{ row }">{{ row.product_count }}</template>
|
</header>
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="状态" width="100">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row.status === 'enabled' ? '启用' : '停用' }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" width="160" fixed="right">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
|
||||||
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
|
<!-- 汇总指标卡片 -->
|
||||||
|
<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 }">
|
||||||
|
<strong class="category-name">{{ row.name }}</strong>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="英文/标识编码" min-width="140">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<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
|
<el-dialog
|
||||||
v-model="dialogVisible"
|
v-model="dialogVisible"
|
||||||
:title="editingId ? '编辑分类' : '新建分类'"
|
:title="editingId ? '编辑撞车分类' : '新建撞车分类'"
|
||||||
width="480px"
|
width="480px"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
>
|
>
|
||||||
<el-form label-width="80px">
|
<el-form label-position="top">
|
||||||
<el-form-item label="名称" required>
|
<el-form-item label="分类名称" required>
|
||||||
<el-input v-model="form.name" maxlength="64" />
|
<el-input v-model="form.name" placeholder="例如：大红 / 炫彩" maxlength="32" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="编码">
|
<el-form-item label="分类标识编码（可选）">
|
||||||
<el-input v-model="form.code" maxlength="64" placeholder="可选" />
|
<el-input v-model="form.code" placeholder="例如：da_hong / xuancai" maxlength="32" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="排序">
|
<el-form-item label="排序权重（数字越大越靠前）">
|
||||||
<el-input-number v-model="form.sort_order" />
|
<el-input-number v-model="form.sort_order" :min="0" :max="9999" class="full-control" />
|
||||||
<span class="hint">越小越靠前</span>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="状态">
|
<el-form-item label="启用状态">
|
||||||
<el-select v-model="form.status" style="width: 160px">
|
<el-radio-group v-model="form.status" class="direction-group">
|
||||||
<el-option label="启用" value="enabled" />
|
<el-radio-button value="enabled">启用展示</el-radio-button>
|
||||||
<el-option label="停用" value="disabled" />
|
<el-radio-button value="disabled">停用隐藏</el-radio-button>
|
||||||
</el-select>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<div class="modal-footer">
|
||||||
<el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="saving" @click="handleSave">确认保存</el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
gap: 16px;
|
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;
|
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;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
margin-bottom: 16px;
|
||||||
gap: 12px;
|
|
||||||
}
|
}
|
||||||
.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;
|
.header-icon {
|
||||||
color: #6b7a90;
|
color: #db2777;
|
||||||
font-size: 13px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.hint {
|
|
||||||
margin-left: 8px;
|
.count-badge {
|
||||||
color: #8a94a6;
|
|
||||||
font-size: 12px;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive, ref } from 'vue'
|
import { onMounted, reactive, ref } from 'vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { Upload } from '@element-plus/icons-vue'
|
import { Check, Setting, Upload } from '@element-plus/icons-vue'
|
||||||
import {
|
import {
|
||||||
fetchAdminMohongConfig,
|
fetchAdminMohongConfig,
|
||||||
updateAdminMohongConfig,
|
updateAdminMohongConfig,
|
||||||
@@ -9,6 +9,7 @@ import {
|
|||||||
} from '@/features/mohong/api/mohong'
|
} from '@/features/mohong/api/mohong'
|
||||||
import { uploadAdminFile } from '@/shared/api/files'
|
import { uploadAdminFile } from '@/shared/api/files'
|
||||||
import { readError } from '@/shared/utils/error'
|
import { readError } from '@/shared/utils/error'
|
||||||
|
import AuthImage from '@/shared/components/business/AuthImage.vue'
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const saving = ref(false)
|
const saving = ref(false)
|
||||||
@@ -17,6 +18,17 @@ const form = reactive<MohongConfig>({
|
|||||||
order_copy_template: '',
|
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)
|
onMounted(load)
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
@@ -39,7 +51,7 @@ async function handleSave() {
|
|||||||
order_copy_template: form.order_copy_template,
|
order_copy_template: form.order_copy_template,
|
||||||
})
|
})
|
||||||
Object.assign(form, config)
|
Object.assign(form, config)
|
||||||
ElMessage.success('已保存')
|
ElMessage.success('撞车配置已成功保存')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error(readError(error, '保存失败'))
|
ElMessage.error(readError(error, '保存失败'))
|
||||||
} finally {
|
} finally {
|
||||||
@@ -51,98 +63,304 @@ async function uploadQrcode(file: File) {
|
|||||||
try {
|
try {
|
||||||
const uploaded = await uploadAdminFile(file, 'crash')
|
const uploaded = await uploadAdminFile(file, 'crash')
|
||||||
form.default_qrcode_url = uploaded.url
|
form.default_qrcode_url = uploaded.url
|
||||||
ElMessage.success('上传成功')
|
ElMessage.success('二维码上传成功')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error(readError(error, '上传失败'))
|
ElMessage.error(readError(error, '上传失败'))
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function insertVariable(v: string) {
|
||||||
|
form.order_copy_template = (form.order_copy_template || '') + ` ${v}`
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-loading="loading" class="admin-page">
|
<div v-loading="loading" class="finance-page-container">
|
||||||
<div class="page-head">
|
<!-- 头部卡片 -->
|
||||||
<div>
|
<header class="page-header-card">
|
||||||
<h2>撞车配置</h2>
|
<div class="header-main">
|
||||||
<p>
|
<div class="title-group">
|
||||||
全局默认固定二维码与订单复制模板。商品可覆盖默认二维码；支付后用户在订单详情扫码并复制信息联系客服。
|
<div class="eyebrow-tag">
|
||||||
</p>
|
<el-icon><Setting /></el-icon>
|
||||||
</div>
|
<span>CRASH MALL CONFIGURATION</span>
|
||||||
<el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
|
</div>
|
||||||
</div>
|
<h1 class="page-title">撞车配置</h1>
|
||||||
|
<p class="page-subtitle">配置撞车商城的全局默认接待二维码与订单一键复制通知文案模板。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-form label-width="140px" class="config-form">
|
<div class="toolbar-actions">
|
||||||
<el-form-item label="默认固定二维码">
|
<el-button type="primary" :icon="Check" :loading="saving" @click="handleSave">
|
||||||
<div class="qr-row">
|
保存配置
|
||||||
<el-image
|
</el-button>
|
||||||
v-if="form.default_qrcode_url"
|
</div>
|
||||||
:src="form.default_qrcode_url"
|
</div>
|
||||||
fit="contain"
|
</header>
|
||||||
style="width: 160px; height: 160px; border-radius: 12px; background: #f7f9fc"
|
|
||||||
/>
|
<!-- 配置面板 -->
|
||||||
<div class="qr-actions">
|
<div class="config-grid-layout">
|
||||||
<el-upload :show-file-list="false" accept="image/*" :before-upload="uploadQrcode">
|
<!-- 二维码配置卡片 -->
|
||||||
<el-button :icon="Upload">上传二维码</el-button>
|
<section class="section-card">
|
||||||
</el-upload>
|
<div class="table-card-header">
|
||||||
<el-input v-model="form.default_qrcode_url" placeholder="或直接填写图片 URL" />
|
<div class="table-header-title">
|
||||||
|
<el-icon class="header-icon"><Setting /></el-icon>
|
||||||
|
<span>默认客服接待二维码</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
<p class="section-desc">
|
||||||
<el-form-item label="复制文案模板">
|
若具体撞车商品未配置专属接待码，前台订单支付后将默认向买家展示此全局二维码。
|
||||||
<el-input v-model="form.order_copy_template" type="textarea" :rows="8" />
|
</p>
|
||||||
<div class="hint">
|
|
||||||
可用变量：{{order_no}} {{created_at}}
|
<div class="qr-upload-panel">
|
||||||
{{items}}（多商品明细） {{product_title}}
|
<div class="qr-preview-area">
|
||||||
{{quantity}} {{amount}}
|
<AuthImage
|
||||||
{{buyer_name}} {{buyer_phone}}
|
v-if="form.default_qrcode_url"
|
||||||
{{unit}}
|
:source="form.default_qrcode_url"
|
||||||
|
fit="contain"
|
||||||
|
class="qr-img-box"
|
||||||
|
/>
|
||||||
|
<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-upload>
|
||||||
|
<el-input
|
||||||
|
v-model="form.default_qrcode_url"
|
||||||
|
clearable
|
||||||
|
placeholder="或直接粘贴图片存储 URL / 对象键"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</section>
|
||||||
</el-form>
|
|
||||||
|
<!-- 模板文案配置卡片 -->
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-page {
|
.finance-page-container {
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
.page-head {
|
|
||||||
display: flex;
|
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;
|
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;
|
gap: 16px;
|
||||||
align-items: flex-start;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
.qr-actions {
|
|
||||||
flex: 1;
|
.title-group {
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 10px;
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
}
|
}
|
||||||
.hint {
|
|
||||||
margin-top: 8px;
|
.eyebrow-tag {
|
||||||
color: #8a94a6;
|
display: inline-flex;
|
||||||
font-size: 12px;
|
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;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
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 {
|
import {
|
||||||
cancelAdminMohongOrder,
|
cancelAdminMohongOrder,
|
||||||
completeAdminMohongOrder,
|
completeAdminMohongOrder,
|
||||||
@@ -26,6 +33,10 @@ const status = ref('')
|
|||||||
const detail = ref<MohongOrder | null>(null)
|
const detail = ref<MohongOrder | null>(null)
|
||||||
const refundingId = ref<number | 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)
|
onMounted(load)
|
||||||
|
|
||||||
async function 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) {
|
async function handleReceive(row: MohongOrder) {
|
||||||
try {
|
try {
|
||||||
await ElMessageBox.confirm(`确认接待订单 ${row.order_no}？标记后状态变为「接待中」。`, '提示', {
|
await ElMessageBox.confirm(`确认接待订单 ${row.order_no}？标记后状态变为「接待中」。`, '提示', {
|
||||||
@@ -138,207 +161,703 @@ function canRefund(row: MohongOrder) {
|
|||||||
async function copyText(text: string) {
|
async function copyText(text: string) {
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(text)
|
await navigator.clipboard.writeText(text)
|
||||||
ElMessage.success('已复制')
|
ElMessage.success('已复制到剪贴板')
|
||||||
} catch {
|
} catch {
|
||||||
ElMessage.error('复制失败')
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="admin-page">
|
<div class="finance-page-container">
|
||||||
<div class="page-head">
|
<!-- 头部卡片 -->
|
||||||
<div>
|
<header class="page-header-card">
|
||||||
<h2>撞车订单</h2>
|
<div class="header-main">
|
||||||
<p>查看订单、接待买家、完成履约、复制用户订单信息</p>
|
<div class="title-group">
|
||||||
|
<div class="eyebrow-tag">
|
||||||
|
<el-icon><Tickets /></el-icon>
|
||||||
|
<span>CRASH MALL ORDERS</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="page-title">撞车订单</h1>
|
||||||
|
<p class="page-subtitle">全量监控撞车商城订单流转、客服接待状态、履约进度与退款审核。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toolbar-actions">
|
||||||
|
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-button :icon="Refresh" @click="load">刷新</el-button>
|
</header>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filters">
|
<!-- 汇总指标卡片 -->
|
||||||
<el-input
|
<section class="summary-metric-grid">
|
||||||
v-model="keyword"
|
<div class="metric-card metric-card--total">
|
||||||
clearable
|
<div class="metric-icon-wrap indigo">
|
||||||
placeholder="订单号"
|
<el-icon><Tickets /></el-icon>
|
||||||
style="width: 220px"
|
|
||||||
@keyup.enter="load"
|
|
||||||
/>
|
|
||||||
<el-select v-model="status" clearable placeholder="状态" style="width: 140px">
|
|
||||||
<el-option label="待支付" value="pending_payment" />
|
|
||||||
<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>
|
|
||||||
</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">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row.buyer_nickname || '-' }}
|
|
||||||
<div class="sub">{{ row.buyer_phone || '' }}</div>
|
|
||||||
</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">
|
|
||||||
<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)">
|
|
||||||
接待
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="canComplete(row)" link type="success" @click="handleComplete(row)">
|
|
||||||
完成
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="canCancel(row)" link type="danger" @click="handleCancel(row)">
|
|
||||||
取消
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canRefund(row)"
|
|
||||||
link
|
|
||||||
type="warning"
|
|
||||||
:icon="Money"
|
|
||||||
:loading="refundingId === row.id"
|
|
||||||
@click="handleRefund(row)"
|
|
||||||
>
|
|
||||||
退款
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<AdminTablePagination
|
|
||||||
:current-page="page"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:total="total"
|
|
||||||
@update:current-page="page = $event"
|
|
||||||
@update:page-size="pageSize = $event"
|
|
||||||
@page-change="load"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<el-drawer
|
|
||||||
:model-value="Boolean(detail)"
|
|
||||||
size="420px"
|
|
||||||
title="订单详情"
|
|
||||||
destroy-on-close
|
|
||||||
@update:model-value="(v: boolean) => !v && (detail = null)"
|
|
||||||
>
|
|
||||||
<template v-if="detail">
|
|
||||||
<el-descriptions :column="1" border>
|
|
||||||
<el-descriptions-item label="订单号">{{ detail.order_no }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="状态">
|
|
||||||
{{ 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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="detail.copy_text" class="copy-box">
|
<div class="metric-info">
|
||||||
<div class="copy-head">
|
<span class="metric-label">撞车全量订单</span>
|
||||||
<strong>复制文案</strong>
|
<strong class="metric-val indigo-val">{{ total }} 笔</strong>
|
||||||
<el-button size="small" @click="copyText(detail.copy_text)">复制</el-button>
|
<span class="metric-sub-pill info">订单总数</span>
|
||||||
</div>
|
|
||||||
<pre>{{ detail.copy_text }}</pre>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="detail.qrcode_url_snapshot" class="qr-box">
|
</div>
|
||||||
<strong>二维码快照</strong>
|
|
||||||
<el-image
|
<div class="metric-card metric-card--paid">
|
||||||
:src="detail.qrcode_url_snapshot"
|
<div class="metric-icon-wrap amber">
|
||||||
fit="contain"
|
<el-icon><Clock /></el-icon>
|
||||||
style="width: 180px; height: 180px"
|
</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="搜索订单号 / 买家手机号 / 账号"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
@clear="handleQuery"
|
||||||
/>
|
/>
|
||||||
|
</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="receiving" />
|
||||||
|
<el-option label="已完成" value="completed" />
|
||||||
|
<el-option label="已取消" value="cancelled" />
|
||||||
|
</el-select>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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 }">
|
||||||
|
<span class="font-mono text-primary font-bold">{{ row.order_no }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="购买商品" min-width="180" show-overflow-tooltip>
|
||||||
|
<template #default="{ 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"
|
||||||
|
size="small"
|
||||||
|
@click="handleComplete(row)"
|
||||||
|
>
|
||||||
|
完成
|
||||||
|
</el-button>
|
||||||
|
<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"
|
||||||
|
size="small"
|
||||||
|
:loading="refundingId === row.id"
|
||||||
|
@click="handleRefund(row)"
|
||||||
|
>
|
||||||
|
退款
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AdminTablePagination
|
||||||
|
v-if="total > 0"
|
||||||
|
v-model:current-page="page"
|
||||||
|
v-model:page-size="pageSize"
|
||||||
|
:total="total"
|
||||||
|
@change="load"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 订单详情弹窗 -->
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
</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-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>
|
||||||
|
<template #footer>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<el-button @click="detail = null">关闭</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-drawer>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-page {
|
.finance-page-container {
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 16px;
|
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
justify-content: space-between;
|
||||||
.page-head h2 {
|
gap: 16px;
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.page-head p,
|
|
||||||
.sub {
|
|
||||||
margin: 0;
|
|
||||||
color: #6b7a90;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.filters {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.items-box {
|
|
||||||
margin-top: 14px;
|
.title-group {
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.item-line {
|
|
||||||
display: flex;
|
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;
|
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;
|
font-size: 13px;
|
||||||
color: #334155;
|
color: #334155;
|
||||||
}
|
}
|
||||||
.item-line em {
|
|
||||||
font-style: normal;
|
.product-info-cell {
|
||||||
color: #ff6a00;
|
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;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.copy-box,
|
|
||||||
.qr-box {
|
.action-btn-group {
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
.copy-head {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
}
|
}
|
||||||
.copy-box pre {
|
|
||||||
margin: 0;
|
.time-cell {
|
||||||
padding: 12px;
|
font-size: 12px;
|
||||||
background: #f7f9fc;
|
color: #64748b;
|
||||||
border-radius: 8px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
}
|
||||||
.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;
|
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>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -899,110 +899,115 @@ function paymentPaidAt(record: AdminPayment) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="page" v-loading="loading">
|
<div class="finance-page-container" v-loading="loading">
|
||||||
<div v-if="order" class="page-header-row">
|
<!-- 头部卡片 -->
|
||||||
<div class="page-header">
|
<header v-if="order" class="page-header-card">
|
||||||
<p class="eyebrow">{{ order.order_no }}</p>
|
<div class="header-main">
|
||||||
<h1>订单详情</h1>
|
<div class="title-group">
|
||||||
<p>
|
<div class="eyebrow-tag">
|
||||||
商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
|
<span>ORDER: {{ order.order_no }}</span>
|
||||||
{{ order.login_platform }}
|
</div>
|
||||||
</p>
|
<h1 class="page-title">订单详情</h1>
|
||||||
|
<p class="page-subtitle">
|
||||||
|
商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
|
||||||
|
{{ order.login_platform }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-actions">
|
||||||
|
<RouterLink :to="returnTarget">
|
||||||
|
<el-button>{{ returnLabel }}</el-button>
|
||||||
|
</RouterLink>
|
||||||
|
<el-button v-if="canResetHandoff" type="success" @click="openAction('reset')">
|
||||||
|
{{ resetActionLabel }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canPlatformHandoff"
|
||||||
|
class="platform-handoff-button"
|
||||||
|
type="primary"
|
||||||
|
@click="openPlatformHandoff"
|
||||||
|
>
|
||||||
|
{{ platformHandoffAction?.label || '客服代交接' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="canForceHandoff" type="warning" @click="openForceHandoff">
|
||||||
|
{{ forceHandoffAction?.label || '客服一键交接' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canPlatformCheckoutConfirm"
|
||||||
|
type="primary"
|
||||||
|
@click="openAction('platform_checkout_confirm')"
|
||||||
|
>
|
||||||
|
{{ platformCheckoutConfirmAction?.label || '客服确认结账' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canPlatformCheckoutCounter"
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
@click="openPlatformCheckoutCounter"
|
||||||
|
>
|
||||||
|
{{ platformCheckoutCounterAction?.label || '客服修改结账方案' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canPlatformCheckoutDispute"
|
||||||
|
type="warning"
|
||||||
|
@click="openAction('platform_checkout_dispute')"
|
||||||
|
>
|
||||||
|
{{ platformCheckoutDisputeAction?.label || '发起结账争议' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="canOfflineSettlement" type="success" @click="openOfflineSettlement">
|
||||||
|
{{ offlineSettlementAction?.label || '确认线下结算' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="canAdminCreateDispute" type="warning" plain @click="openAdminDispute">
|
||||||
|
发起申诉
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" :disabled="!canOperate" @click="openAction('abnormal')"
|
||||||
|
>标记异常</el-button
|
||||||
|
>
|
||||||
|
<el-tooltip :content="closeActionTip" placement="top">
|
||||||
|
<span>
|
||||||
|
<el-button type="danger" :disabled="!canOperate" @click="confirmCloseAction"
|
||||||
|
>客服关闭</el-button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip :content="sealActionTip" placement="top">
|
||||||
|
<span>
|
||||||
|
<el-button type="danger" plain :disabled="!canOperate" @click="confirmSealAction"
|
||||||
|
>封存订单</el-button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip v-if="canHoldDeposit" :content="depositHoldActionTip" placement="top">
|
||||||
|
<span>
|
||||||
|
<el-button type="warning" plain @click="confirmHoldDeposit"> 暂扣押金 </el-button>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip v-if="isDepositHeld" :content="depositReleaseActionTip" placement="top">
|
||||||
|
<span>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
:disabled="!canReleaseDeposit"
|
||||||
|
@click="confirmReleaseDeposit"
|
||||||
|
>
|
||||||
|
归还押金
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip :content="refundActionTip" placement="top">
|
||||||
|
<span>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:loading="refunding"
|
||||||
|
:disabled="refundButtonDisabled"
|
||||||
|
@click="confirmRefund"
|
||||||
|
>
|
||||||
|
{{ refundButtonDisabled ? '已退款' : '人工退款' }}
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-actions">
|
</header>
|
||||||
<RouterLink :to="returnTarget">
|
|
||||||
<el-button>{{ returnLabel }}</el-button>
|
|
||||||
</RouterLink>
|
|
||||||
<el-button v-if="canResetHandoff" type="success" @click="openAction('reset')">
|
|
||||||
{{ resetActionLabel }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canPlatformHandoff"
|
|
||||||
class="platform-handoff-button"
|
|
||||||
type="primary"
|
|
||||||
@click="openPlatformHandoff"
|
|
||||||
>
|
|
||||||
{{ platformHandoffAction?.label || '客服代交接' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="canForceHandoff" type="warning" @click="openForceHandoff">
|
|
||||||
{{ forceHandoffAction?.label || '客服一键交接' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canPlatformCheckoutConfirm"
|
|
||||||
type="primary"
|
|
||||||
@click="openAction('platform_checkout_confirm')"
|
|
||||||
>
|
|
||||||
{{ platformCheckoutConfirmAction?.label || '客服确认结账' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canPlatformCheckoutCounter"
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
@click="openPlatformCheckoutCounter"
|
|
||||||
>
|
|
||||||
{{ platformCheckoutCounterAction?.label || '客服修改结账方案' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canPlatformCheckoutDispute"
|
|
||||||
type="warning"
|
|
||||||
@click="openAction('platform_checkout_dispute')"
|
|
||||||
>
|
|
||||||
{{ platformCheckoutDisputeAction?.label || '发起结账争议' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="canOfflineSettlement" type="success" @click="openOfflineSettlement">
|
|
||||||
{{ offlineSettlementAction?.label || '确认线下结算' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="canAdminCreateDispute" type="warning" plain @click="openAdminDispute">
|
|
||||||
发起申诉
|
|
||||||
</el-button>
|
|
||||||
<el-button type="warning" :disabled="!canOperate" @click="openAction('abnormal')"
|
|
||||||
>标记异常</el-button
|
|
||||||
>
|
|
||||||
<el-tooltip :content="closeActionTip" placement="top">
|
|
||||||
<span>
|
|
||||||
<el-button type="danger" :disabled="!canOperate" @click="confirmCloseAction"
|
|
||||||
>客服关闭</el-button
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip :content="sealActionTip" placement="top">
|
|
||||||
<span>
|
|
||||||
<el-button type="danger" plain :disabled="!canOperate" @click="confirmSealAction"
|
|
||||||
>封存订单</el-button
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip v-if="canHoldDeposit" :content="depositHoldActionTip" placement="top">
|
|
||||||
<span>
|
|
||||||
<el-button type="warning" plain @click="confirmHoldDeposit"> 暂扣押金 </el-button>
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip v-if="isDepositHeld" :content="depositReleaseActionTip" placement="top">
|
|
||||||
<span>
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
:disabled="!canReleaseDeposit"
|
|
||||||
@click="confirmReleaseDeposit"
|
|
||||||
>
|
|
||||||
归还押金
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip :content="refundActionTip" placement="top">
|
|
||||||
<span>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
:loading="refunding"
|
|
||||||
:disabled="refundButtonDisabled"
|
|
||||||
@click="confirmRefund"
|
|
||||||
>
|
|
||||||
{{ refundButtonDisabled ? '已退款' : '人工退款' }}
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="order" class="metric-grid dashboard-metrics order-metrics">
|
<div v-if="order" class="metric-grid dashboard-metrics order-metrics">
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
@@ -1652,10 +1657,77 @@ function paymentPaidAt(record: AdminPayment) {
|
|||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</section>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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 {
|
.order-metrics {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -336,40 +336,45 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="page" v-loading="loading">
|
<div class="finance-page-container" v-loading="loading">
|
||||||
<div v-if="pickup" class="page-header-row">
|
<!-- 头部卡片 -->
|
||||||
<div class="page-header">
|
<header v-if="pickup" class="page-header-card">
|
||||||
<p class="eyebrow">{{ pickup.pickup_no }}</p>
|
<div class="header-main">
|
||||||
<h1>提号详情</h1>
|
<div class="title-group">
|
||||||
<p>
|
<div class="eyebrow-tag">
|
||||||
商品编号 {{ listingCode }} · {{ pickup.account_title }} · {{ pickup.server_region }} /
|
<span>PICKUP: {{ pickup.pickup_no }}</span>
|
||||||
{{ pickup.login_platform }}
|
</div>
|
||||||
</p>
|
<h1 class="page-title">提号详情</h1>
|
||||||
|
<p class="page-subtitle">
|
||||||
|
商品编号 {{ listingCode }} · {{ pickup.account_title }} · {{ pickup.server_region }} /
|
||||||
|
{{ pickup.login_platform }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-actions">
|
||||||
|
<el-button
|
||||||
|
v-if="canEditProfit"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
:icon="EditPen"
|
||||||
|
@click="openProfitDialog"
|
||||||
|
>
|
||||||
|
修改利润
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canCreateFinancialAdjustment"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
:icon="EditPen"
|
||||||
|
@click="openFinancialAdjustmentDialog"
|
||||||
|
>
|
||||||
|
财务调整
|
||||||
|
</el-button>
|
||||||
|
<RouterLink :to="adminPath('pickup')">
|
||||||
|
<el-button>返回列表</el-button>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-actions">
|
</header>
|
||||||
<el-button
|
|
||||||
v-if="canEditProfit"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
:icon="EditPen"
|
|
||||||
@click="openProfitDialog"
|
|
||||||
>
|
|
||||||
修改利润
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="canCreateFinancialAdjustment"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
:icon="EditPen"
|
|
||||||
@click="openFinancialAdjustmentDialog"
|
|
||||||
>
|
|
||||||
财务调整
|
|
||||||
</el-button>
|
|
||||||
<RouterLink :to="adminPath('pickup')">
|
|
||||||
<el-button>返回列表</el-button>
|
|
||||||
</RouterLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="pickup" class="metric-grid pickup-metrics">
|
<div v-if="pickup" class="metric-grid pickup-metrics">
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
@@ -677,10 +682,77 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
|
|||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</section>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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 {
|
.pickup-metrics {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
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 {
|
import {
|
||||||
adminApproveRefund,
|
adminApproveRefund,
|
||||||
adminRejectRefund,
|
adminRejectRefund,
|
||||||
@@ -22,6 +22,10 @@ const rejectVisible = ref(false)
|
|||||||
const rejectOrder = ref<Order | null>(null)
|
const rejectOrder = ref<Order | null>(null)
|
||||||
const orders = ref<Order[]>([])
|
const orders = ref<Order[]>([])
|
||||||
|
|
||||||
|
const totalRefundAmountCent = computed(() =>
|
||||||
|
orders.value.reduce((sum, item) => sum + Number(item.refund_amount_cent || 0), 0)
|
||||||
|
)
|
||||||
|
|
||||||
async function loadOrders() {
|
async function loadOrders() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
@@ -36,7 +40,7 @@ async function loadOrders() {
|
|||||||
async function handleApprove(row: Order) {
|
async function handleApprove(row: Order) {
|
||||||
try {
|
try {
|
||||||
await ElMessageBox.confirm(
|
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' }
|
{ confirmButtonText: '通过退款', cancelButtonText: '取消', type: 'warning' }
|
||||||
)
|
)
|
||||||
@@ -111,175 +115,473 @@ async function handleRejectClose() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openDetail(order: Order) {
|
function openDetail(order: Order) {
|
||||||
router.push(adminPath(`orders/${order.id}`))
|
void router.push(adminPath(`orders/${order.id}`))
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(loadOrders)
|
onMounted(loadOrders)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="refund-review-page">
|
<div class="finance-page-container">
|
||||||
<div class="page-toolbar">
|
<!-- 头部卡片 -->
|
||||||
<h2>退款审核</h2>
|
<header class="page-header-card">
|
||||||
<el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新</el-button>
|
<div class="header-main">
|
||||||
</div>
|
<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 class="toolbar-actions">
|
||||||
<div v-if="!loading && orders.length === 0" class="empty-state">
|
<el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新数据</el-button>
|
||||||
<el-empty description="暂无待审核退款" />
|
</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>
|
||||||
|
|
||||||
<div class="review-cards">
|
<div class="metric-card metric-card--amount">
|
||||||
<div v-for="order in orders" :key="order.id" class="review-card">
|
<div class="metric-icon-wrap rose">
|
||||||
<div class="card-header">
|
<el-icon><Money /></el-icon>
|
||||||
<div class="order-info">
|
</div>
|
||||||
<span class="order-no" @click="openDetail(order)">{{ order.order_no }}</span>
|
<div class="metric-info">
|
||||||
<el-tag size="small" type="warning">待客服审核退款</el-tag>
|
<span class="metric-label">待退款总金额</span>
|
||||||
</div>
|
<strong class="metric-val rose-val">{{
|
||||||
<div class="order-time">{{ formatDateTime(order.updated_at) }}</div>
|
formatCentWithSymbol(totalRefundAmountCent)
|
||||||
</div>
|
}}</strong>
|
||||||
|
<span class="metric-sub-pill danger">待原路退回资金</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="card-body">
|
<!-- 退款列表卡片 -->
|
||||||
<div class="info-row">
|
<section class="section-card review-list-card">
|
||||||
<span class="info-label">商品</span>
|
<div class="table-card-header">
|
||||||
<span class="info-value">{{ order.title || '-' }}</span>
|
<div class="table-header-title">
|
||||||
</div>
|
<el-icon class="header-icon"><ShoppingBag /></el-icon>
|
||||||
<div class="info-row">
|
<span>待审核退款列表</span>
|
||||||
<span class="info-label">订单状态</span>
|
</div>
|
||||||
<span class="info-value">{{ orderStatusLabel(order.status) }}</span>
|
<span class="count-badge">共 {{ orders.length }} 笔待办</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">交接状态</span>
|
|
||||||
<span class="info-value">{{ handoffStatusLabel(order.handoff_status) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">号主</span>
|
|
||||||
<span class="info-value">{{ order.owner_phone || '-' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">租客</span>
|
|
||||||
<span class="info-value">{{ order.renter_phone || '-' }}</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="info-row">
|
|
||||||
<span class="info-label">退款金额</span>
|
|
||||||
<span class="info-value refund-amount">{{
|
|
||||||
formatCentWithSymbol(order.refund_amount_cent || 0)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-actions">
|
<div v-loading="loading" class="review-items-wrap">
|
||||||
<el-button :icon="View" size="small" @click="openDetail(order)"> 查看详情 </el-button>
|
<div v-if="!loading && orders.length === 0" class="empty-box">
|
||||||
<el-button
|
<el-empty description="暂无待审核的退款申请，运营秩序良好" />
|
||||||
:icon="Check"
|
</div>
|
||||||
type="primary"
|
|
||||||
size="small"
|
<div v-else class="review-cards-grid">
|
||||||
:loading="submitting"
|
<div v-for="order in orders" :key="order.id" class="review-card">
|
||||||
@click="handleApprove(order)"
|
<div class="rc-header">
|
||||||
>
|
<div class="rc-order-info">
|
||||||
通过退款
|
<span class="order-no" @click="openDetail(order)">{{ order.order_no }}</span>
|
||||||
</el-button>
|
<el-tag size="small" type="warning" class="status-tag">待客服审核退款</el-tag>
|
||||||
<el-button
|
</div>
|
||||||
:icon="Close"
|
<span class="time-text">{{ formatDateTime(order.updated_at) }}</span>
|
||||||
type="danger"
|
</div>
|
||||||
size="small"
|
|
||||||
:loading="submitting"
|
<div class="rc-body">
|
||||||
@click="openReject(order)"
|
<div class="rc-info-row">
|
||||||
>
|
<span class="label">商品标题</span>
|
||||||
驳回
|
<span class="val title-val">{{ order.title || '-' }}</span>
|
||||||
</el-button>
|
</div>
|
||||||
|
<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="rc-info-row">
|
||||||
|
<span class="label">号主信息</span>
|
||||||
|
<span class="val font-mono">{{ order.owner_phone || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="rc-info-row">
|
||||||
|
<span class="label">订单状态</span>
|
||||||
|
<span class="val">{{ orderStatusLabel(order.status) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="rc-info-row">
|
||||||
|
<span class="label">交接状态</span>
|
||||||
|
<span class="val">{{ handoffStatusLabel(order.handoff_status) }}</span>
|
||||||
|
</div>
|
||||||
|
</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="refund-badge">
|
||||||
|
<span class="refund-label">申请退款</span>
|
||||||
|
<strong class="refund-val font-mono">{{
|
||||||
|
formatCentWithSymbol(order.refund_amount_cent || 0)
|
||||||
|
}}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
size="small"
|
||||||
|
:loading="submitting"
|
||||||
|
@click="handleApprove(order)"
|
||||||
|
>
|
||||||
|
通过退款
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<!-- 驳回弹窗 -->
|
<!-- 驳回退款弹窗 -->
|
||||||
<el-dialog v-model="rejectVisible" title="驳回退款" width="420px">
|
<el-dialog v-model="rejectVisible" title="驳回退款申请" width="480px" destroy-on-close>
|
||||||
<div v-if="rejectOrder" class="reject-dialog">
|
<div v-if="rejectOrder" class="reject-dialog-body">
|
||||||
<p class="reject-tip">请选择驳回方式：</p>
|
<div class="reject-order-badge">
|
||||||
<div class="reject-options">
|
<span>待处理订单：</span>
|
||||||
<el-button type="primary" :loading="submitting" @click="handleRejectRestore">
|
<strong class="font-mono">{{ rejectOrder.order_no }}</strong>
|
||||||
驳回退款（恢复订单）
|
</div>
|
||||||
</el-button>
|
<p class="reject-tip-text">请根据争议核实情况选择驳回模式：</p>
|
||||||
<p class="option-desc">仅驳回退款请求，订单恢复至待交接状态，交接流程可继续</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>
|
||||||
|
<p class="mode-desc">
|
||||||
|
仅驳回退款请求，订单恢复至待交接状态，号主与租客可继续完成交接履约。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-button type="danger" :loading="submitting" @click="handleRejectClose">
|
<div class="reject-mode-card" @click="handleRejectClose">
|
||||||
驳回退款并关闭订单
|
<div class="mode-header">
|
||||||
</el-button>
|
<el-button type="danger" size="small" :loading="submitting">
|
||||||
<p class="option-desc">驳回退款且关闭订单，商品下架归档，订单不可再操作</p>
|
驳回退款并关闭订单
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<p class="mode-desc">驳回退款请求并强制关闭订单，商品将下架归档，后续不可再流转。</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<el-button @click="rejectVisible = false">取消</el-button>
|
<div class="modal-footer">
|
||||||
|
<el-button @click="rejectVisible = false">取消</el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.refund-review-page {
|
.finance-page-container {
|
||||||
max-width: 900px;
|
display: flex;
|
||||||
margin: 0 auto;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-toolbar h2 {
|
.table-header-title {
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.review-cards {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: 12px;
|
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 {
|
.review-card {
|
||||||
border: 1px solid var(--el-border-color-light);
|
background: #f8fafc;
|
||||||
border-radius: 8px;
|
border-radius: 14px;
|
||||||
padding: 16px;
|
border: 1px solid #e2e8f0;
|
||||||
background: var(--el-bg-color);
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 12px;
|
|
||||||
padding-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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-no {
|
.order-no {
|
||||||
font-weight: 600;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
color: var(--el-color-primary);
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2563eb;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -287,66 +589,173 @@ onMounted(loadOrders)
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-time {
|
.status-tag {
|
||||||
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 {
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--el-color-danger);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-actions {
|
.time-text {
|
||||||
display: flex;
|
font-size: 11.5px;
|
||||||
justify-content: flex-end;
|
color: #94a3b8;
|
||||||
gap: 8px;
|
|
||||||
padding-top: 12px;
|
|
||||||
border-top: 1px solid var(--el-border-color-lighter);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reject-dialog {
|
.rc-body {
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reject-tip {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: var(--el-text-color-regular);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reject-options {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
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;
|
font-size: 12px;
|
||||||
color: var(--el-text-color-secondary);
|
color: #334155;
|
||||||
margin: 0 0 12px 0;
|
}
|
||||||
text-align: left;
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -306,7 +306,9 @@ export function useOrderActions(options: UseOrderActionsOptions) {
|
|||||||
cancelling.value = true
|
cancelling.value = true
|
||||||
try {
|
try {
|
||||||
await cancelOrder(order.value.id)
|
await cancelOrder(order.value.id)
|
||||||
options.notifySuccess(needsRefundReview ? '退款申请已提交，等待客服审核' : '订单已取消，账号已释放')
|
options.notifySuccess(
|
||||||
|
needsRefundReview ? '退款申请已提交，等待客服审核' : '订单已取消，账号已释放'
|
||||||
|
)
|
||||||
await router.push(options.ordersPath)
|
await router.push(options.ordersPath)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
options.notifyError(readError(error, '取消失败'))
|
options.notifyError(readError(error, '取消失败'))
|
||||||
|
|||||||
Reference in New Issue
Block a user