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

优化了部分界面ui

Browse Source
This commit is contained in:
yml2213
2026-04-23 14:46:06 +08:00
parent f0b31121d7
commit 17ab393280
6 changed files with 1926 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminOrdersView.vue
+502 -140
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
@@ -22,6 +22,12 @@ const pagination = ref<AdminPagination>({
total: 0,
})
const summary = computed(() => ({
paidCount: items.value.filter((item) => item.payStatus === 'paid').length,
refundedCount: items.value.filter((item) => item.payStatus === 'refunded').length,
bindingReadyCount: items.value.filter((item) => item.completedBindingTaskCount > 0).length,
}))
async function loadOrders(page = pagination.value.page) {
loading.value = true
errorMessage.value = ''
@@ -45,7 +51,14 @@ async function loadOrders(page = pagination.value.page) {
}
}
onMounted(loadOrders)
function resetFilters() {
platformOrderId.value = ''
payStatus.value = ''
skuCode.value = ''
dateFrom.value = ''
dateTo.value = ''
void loadOrders(1)
}
function resolveBuyerLabel(item: AdminOrderListItem) {
return item.buyerName || item.buyerId || '未识别'
@@ -62,103 +75,168 @@ function resolveShopLabel(item: AdminOrderListItem) {
function resolveItemSummary(item: AdminOrderListItem) {
return item.itemSummary || '未识别商品'
}
function resolveBindingTone(completedCount: number, totalCount: number) {
if (completedCount <= 0) {
return 'warning'
}
return completedCount === totalCount ? 'success' : 'primary'
}
function resolveBindingSummary(item: AdminOrderListItem) {
return `共 ${item.totalBindingCount} 条 · 预占 ${item.reservedBindingCount} · 已消耗 ${item.consumedBindingCount} · 已释放 ${item.releasedBindingCount}`
}
onMounted(loadOrders)
</script>
<template>
<section class="admin-panel">
<header class="panel-header">
<div>
<div class="panel-header-copy">
<h1>订单列表</h1>
<p>查看平台订单、支付状态和对应任务数量。</p>
<p>查看平台订单、支付状态、商品摘要和对应任务推进情况。</p>
</div>
<div class="panel-header-badge">共 {{ pagination.total }} 条订单</div>
</header>
<section class="filter-bar">
<input v-model="platformOrderId" class="text-input" placeholder="筛选订单号" />
<select v-model="payStatus" class="text-input select-input">
<option v-for="option in adminPayStatusOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
<input v-model="skuCode" class="text-input" placeholder="SKU，如 dnf-cdk-a" />
<section class="filters-card">
<div class="filters-grid">
<label class="filter-field">
<span>平台订单号</span>
<input v-model="platformOrderId" class="text-input" placeholder="支持模糊匹配" />
</label>
<label class="filter-field">
<span>支付状态</span>
<select v-model="payStatus" class="text-input select-input">
<option v-for="option in adminPayStatusOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</label>
<label class="filter-field">
<span>SKU</span>
<input v-model="skuCode" class="text-input" placeholder="如 dnf-cdk-a" />
</label>
<label class="filter-field">
<span>开始日期</span>
<input v-model="dateFrom" class="text-input" type="date" />
</label>
<label class="filter-field">
<span>结束日期</span>
<input v-model="dateTo" class="text-input" type="date" />
</label>
</div>
<div class="filters-actions">
<span class="filters-hint">订单信息、支付状态、绑定完成度和金额时间已拆成独立信息块，更方便排查。</span>
<div class="filters-button-row">
<el-button round @click="resetFilters">重置</el-button>
<el-button round type="primary" @click="() => loadOrders(1)">查询</el-button>
</div>
</div>
</section>
<section class="filter-bar">
<input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
<input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
<el-button round type="primary" @click="() => loadOrders()">查询</el-button>
<section v-if="!loading && items.length > 0" class="summary-grid">
<article class="summary-card summary-card-success">
<span class="summary-label">当前页已支付</span>
<strong class="summary-value">{{ summary.paidCount }}</strong>
<span class="summary-meta">已完成付款，可继续跟进交付</span>
</article>
<article class="summary-card summary-card-danger">
<span class="summary-label">当前页已退款</span>
<strong class="summary-value">{{ summary.refundedCount }}</strong>
<span class="summary-meta">需要重点确认订单状态和任务收口</span>
</article>
<article class="summary-card summary-card-primary">
<span class="summary-label">当前页有完整绑定</span>
<strong class="summary-value">{{ summary.bindingReadyCount }}</strong>
<span class="summary-meta">至少有 1 个任务已完成完整绑定</span>
</article>
</section>
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
<div v-if="loading" class="empty-block">订单列表加载中</div>
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无订单</div>
<div v-else class="table-card">
<table class="data-table">
<thead>
<tr>
<th>订单信息</th>
<th>平台 / 店铺</th>
<th>商品摘要</th>
<th>订单进度</th>
<th>金额 / 时间</th>
<th>任务进度</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.orderId">
<td>
<div class="cell-stack">
<RouterLink :to="`/admin/orders/${item.orderId}`" class="primary-link">{{ item.platformOrderId }}</RouterLink>
<span class="cell-main">{{ resolveBuyerLabel(item) }}</span>
<span class="cell-sub">联系方式：{{ resolveContactLabel(item) }}</span>
<div v-else class="orders-shell">
<div class="orders-toolbar">
<div>
<strong>订单明细</strong>
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
</div>
</div>
<div class="order-list">
<article v-for="item in items" :key="item.orderId" class="order-card">
<div class="order-card-top">
<div class="order-identity">
<RouterLink :to="`/admin/orders/${item.orderId}`" class="cell-link order-no" :title="item.platformOrderId">
{{ item.platformOrderId }}
</RouterLink>
<div class="order-meta-row">
<span class="compact-chip">{{ item.platform || '-' }}</span>
<span class="compact-chip">{{ resolveShopLabel(item) }}</span>
<span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
</div>
</td>
<td>
<div class="cell-stack">
<span class="cell-main">{{ item.platform }}</span>
<span class="cell-sub">{{ resolveShopLabel(item) }}</span>
</div>
<AdminStatusTag :status="item.payStatus" />
</div>
<div class="order-grid">
<section class="order-section">
<span class="section-label">订单信息</span>
<div class="info-cell">
<span class="info-title">{{ resolveBuyerLabel(item) }}</span>
<span class="info-subline">联系方式 {{ resolveContactLabel(item) }}</span>
<span class="info-subline">店铺 {{ resolveShopLabel(item) }}</span>
<span class="info-subline">更新时间 {{ formatAdminDateTime(item.updatedAt) }}</span>
</div>
</td>
<td>
<div class="cell-stack">
<span class="cell-main">{{ resolveItemSummary(item) }}</span>
<span class="cell-sub">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
</section>
<section class="order-section">
<span class="section-label">商品摘要</span>
<div class="info-cell">
<span class="info-title" :title="resolveItemSummary(item)">{{ resolveItemSummary(item) }}</span>
<span class="info-subline">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
<span class="info-subline" :title="resolveBindingSummary(item)">{{ resolveBindingSummary(item) }}</span>
</div>
</td>
<td>
</section>
<section class="order-section">
<span class="section-label">订单进度</span>
<div class="status-stack">
<AdminStatusTag :status="item.payStatus" />
<AdminStatusTag :status="item.orderStatus" />
<AdminStatusTag :status="item.systemBindingStatus" />
<AdminStatusTag :status="item.userBindingStatus" />
</div>
</td>
<td>
<div class="cell-stack">
<span class="cell-main amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
<span class="cell-sub">支付：{{ formatAdminDateTime(item.paidAt) }}</span>
<span class="cell-sub">创建：{{ formatAdminDateTime(item.createdAt) }}</span>
</section>
<section class="order-section">
<span class="section-label">金额 / 时间</span>
<div class="info-cell">
<span class="info-title amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
<span class="info-subline">支付 {{ formatAdminDateTime(item.paidAt) }}</span>
<span class="info-subline">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
</div>
</td>
<td>
<div class="progress-stack">
<span
class="progress-chip"
:data-tone="item.completedBindingTaskCount > 0 ? (item.completedBindingTaskCount === item.taskCount ? 'success' : 'primary') : 'warning'"
>
</section>
<section class="order-section">
<span class="section-label">任务进度</span>
<div class="task-progress-inline">
<span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
</span>
<span
class="progress-chip"
:data-tone="item.systemBoundTaskCount > 0 ? (item.systemBoundTaskCount === item.taskCount ? 'success' : 'primary') : 'warning'"
>
<span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
</span>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</article>
</div>
<AdminPaginationBar
:page="pagination.page"
:page-size="pagination.pageSize"
@@ -171,40 +249,340 @@ function resolveItemSummary(item: AdminOrderListItem) {
</template>
<style scoped>
.status-stack {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.cell-stack {
.admin-panel {
display: grid;
gap: 4px;
gap: 14px;
min-width: 0;
}
.primary-link,
.cell-main {
font-weight: 600;
.panel-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.panel-header-copy {
min-width: 0;
}
.panel-header h1 {
margin: 0;
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.04em;
color: #1d3555;
}
.cell-sub {
.panel-header p {
margin: 6px 0 0;
font-size: 14px;
color: #64748b;
}
.panel-header-badge {
flex: 0 0 auto;
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(86, 108, 138, 0.12);
color: #38506e;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
}
.filters-card,
.summary-card,
.orders-shell,
.empty-block,
.error-copy {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(86, 108, 138, 0.1);
box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
}
.filters-card {
display: grid;
gap: 14px;
}
.filters-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.filter-field {
display: grid;
gap: 6px;
min-width: 0;
}
.filter-field span {
color: #5d6f87;
font-size: 12px;
font-weight: 600;
}
.filters-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.filters-hint {
color: #64748b;
font-size: 12px;
}
.filters-button-row {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.text-input {
width: 100%;
min-height: 38px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid rgba(86, 108, 138, 0.18);
background: rgba(255, 255, 255, 0.94);
color: #24364e;
font-size: 13px;
}
.select-input {
appearance: none;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.summary-card {
display: grid;
gap: 6px;
position: relative;
overflow: hidden;
}
.summary-card::after {
content: '';
position: absolute;
inset: auto -26px -26px auto;
width: 96px;
height: 96px;
border-radius: 999px;
opacity: 0.14;
}
.summary-card-success::after {
background: #12b76a;
}
.summary-card-danger::after {
background: #f04438;
}
.summary-card-primary::after {
background: #2563eb;
}
.summary-label {
color: #51647d;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.summary-value {
font-size: 34px;
line-height: 1;
color: #1d3555;
}
.summary-meta {
color: #70829a;
font-size: 12px;
}
.error-copy {
margin: 0;
color: #b42318;
}
.empty-block {
color: #64748b;
}
.orders-shell {
display: grid;
gap: 14px;
min-width: 0;
}
.orders-toolbar strong {
display: block;
color: #1f324a;
font-size: 14px;
}
.orders-toolbar span {
display: block;
margin-top: 4px;
color: #64748b;
font-size: 12px;
}
.order-list {
display: grid;
gap: 12px;
}
.order-card {
display: grid;
gap: 14px;
padding: 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
border: 1px solid rgba(86, 108, 138, 0.12);
}
.order-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.order-identity {
min-width: 0;
display: grid;
gap: 8px;
}
.cell-link {
color: inherit;
text-decoration: none;
}
.cell-link:hover {
color: #175cd3;
}
.order-no {
display: inline-block;
max-width: 100%;
font-size: 20px;
line-height: 1.1;
font-weight: 800;
color: #132238;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.compact-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
max-width: 100%;
padding: 0 10px;
border-radius: 999px;
background: #f4f7fb;
border: 1px solid rgba(86, 108, 138, 0.1);
color: #44556c;
font-size: 12px;
font-weight: 600;
}
.compact-chip--muted {
color: #6b7c93;
}
.order-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
gap: 12px;
min-width: 0;
}
.order-section {
display: grid;
gap: 8px;
min-width: 0;
padding: 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(86, 108, 138, 0.08);
}
.section-label {
color: #71839b;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.info-cell {
display: grid;
gap: 5px;
min-width: 0;
}
.info-title {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #101828;
font-weight: 700;
}
.info-subline {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #475467;
font-size: 12px;
}
.amount-text {
white-space: nowrap;
}
.progress-stack {
.status-stack {
display: flex;
flex-wrap: wrap;
gap: 6px;
gap: 8px;
align-items: center;
}
.task-progress-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.progress-chip {
display: inline-flex;
align-items: center;
@@ -235,75 +613,59 @@ function resolveItemSummary(item: AdminOrderListItem) {
border-color: #fedf89;
}
.data-table td {
vertical-align: top;
@media (max-width: 1400px) {
.filters-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
</style>
<style scoped>
.admin-panel {
display: grid;
gap: 16px;
@media (max-width: 1180px) {
.summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.panel-header h1 {
margin: 0;
color: #1d3555;
}
@media (max-width: 980px) {
.panel-header {
flex-direction: column;
align-items: flex-start;
}
.panel-header p {
margin: 8px 0 0;
color: #64748b;
}
.filters-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.filter-bar {
display: flex;
gap: 12px;
align-items: center;
.filters-actions {
flex-direction: column;
align-items: flex-start;
}
}
.text-input {
width: min(360px, 100%);
min-height: 42px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(86, 108, 138, 0.18);
background: rgba(255, 255, 255, 0.94);
}
@media (max-width: 720px) {
.panel-header h1 {
font-size: 28px;
}
.select-input {
appearance: none;
}
.filters-grid,
.summary-grid {
grid-template-columns: 1fr;
}
.table-card,
.empty-block,
.error-copy {
padding: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(86, 108, 138, 0.1);
}
.filters-button-row {
width: 100%;
}
.error-copy {
color: #b42318;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.filters-button-row :deep(.el-button) {
flex: 1 1 auto;
}
.data-table th,
.data-table td {
padding: 12px 10px;
text-align: left;
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
color: #334155;
vertical-align: top;
}
.order-card-top {
flex-direction: column;
align-items: flex-start;
}
.data-table th {
color: #64748b;
font-size: 13px;
.order-no {
font-size: 18px;
}
}
</style>