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

优化订单列表状态标签布局

Browse Source
This commit is contained in:
yml2213
2026-05-26 13:20:29 +08:00
parent 677d7fab46
commit 4cd9e6d5b6
2 changed files with 134 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/components/admin/AdminStatusTag.vue
+2
View File
@@ -65,6 +65,7 @@ function resolveType(status: string): ElTagType {
'expired',
'operator',
'pending_binding',
'pending_config',
'binding_exception',
'not_started',
'consumed',
@@ -124,6 +125,7 @@ function resolveLabel(status: string) {
processing: '处理中',
system_bound: '系统已绑定',
pending_binding: '待系统绑定',
pending_config: '待配置',
pending_binding_prepare: '待准备绑定',
not_started: '未开始',
waiting_binding: '待客户绑定',
apps/frontend/src/views/admin/orders/AdminOrdersView.vue
+132 -24
View File
@@ -107,7 +107,7 @@ function resolveFollowUpText(item: AdminOrderListItem) {
item.systemBindingStatus === "binding_exception"
)
return "绑定异常";
if (item.completedBindingTaskCount <= 0) return "等待完整绑定";
if (item.completedBindingTaskCount <= 0) return "待完整绑定";
if (item.systemBoundTaskCount < item.taskCount) return "系统绑定未完成";
return "链路正常";
}
@@ -254,12 +254,14 @@ onMounted(() => {
>
{{ row.platformOrderId }}
</RouterLink>
<div class="cell-meta-row">
<span class="compact-chip">{{ row.platform || "-" }}</span>
<span class="compact-chip">{{ resolveShopLabel(row) }}</span>
<span class="compact-chip compact-chip--muted"
>买家 {{ resolveBuyerLabel(row) }}</span
>
<div class="order-meta-block">
<span class="source-badge">{{ row.platform || "-" }}</span>
<span class="order-meta-text" :title="resolveShopLabel(row)">
店铺 {{ resolveShopLabel(row) }}
</span>
<span class="order-meta-text" :title="resolveBuyerLabel(row)">
买家 {{ resolveBuyerLabel(row) }}
</span>
</div>
</div>
</template>
@@ -283,9 +285,13 @@ onMounted(() => {
</el-table-column>
<el-table-column label="支付/状态" min-width="140">
<template #default="{ row }">
<div class="cell-stack">
<AdminStatusTag :status="row.payStatus" :show-raw="false" />
<div class="status-stack">
<div class="status-line-stack">
<div class="status-line">
<span class="status-label">支付</span>
<AdminStatusTag :status="row.payStatus" :show-raw="false" />
</div>
<div class="status-line">
<span class="status-label">订单</span>
<AdminStatusTag :status="row.orderStatus" :show-raw="false" />
</div>
</div>
@@ -293,16 +299,22 @@ onMounted(() => {
</el-table-column>
<el-table-column label="交付状态" min-width="230">
<template #default="{ row }">
<div class="cell-stack">
<div class="status-stack">
<AdminStatusTag
:status="row.systemBindingStatus"
:show-raw="false"
/>
<AdminStatusTag
:status="row.userBindingStatus"
:show-raw="false"
/>
<div class="delivery-status-panel">
<div class="delivery-status-grid">
<div class="status-line">
<span class="status-label">系统</span>
<AdminStatusTag
:status="row.systemBindingStatus"
:show-raw="false"
/>
</div>
<div class="status-line">
<span class="status-label">完整</span>
<AdminStatusTag
:status="row.userBindingStatus"
:show-raw="false"
/>
</div>
</div>
<span
class="follow-up-chip"
@@ -319,7 +331,7 @@ onMounted(() => {
)
"
>
完整 {{ row.completedBindingTaskCount }}/{{ row.taskCount }}
完整 <strong>{{ row.completedBindingTaskCount }}/{{ row.taskCount }}</strong>
</span>
<span
class="progress-chip"
@@ -330,7 +342,7 @@ onMounted(() => {
)
"
>
系统 {{ row.systemBoundTaskCount }}/{{ row.taskCount }}
系统 <strong>{{ row.systemBoundTaskCount }}/{{ row.taskCount }}</strong>
</span>
</div>
</div>
@@ -389,9 +401,91 @@ onMounted(() => {
white-space: nowrap;
}
.order-meta-block {
display: grid;
grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
gap: var(--space-2);
align-items: center;
}
.source-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 10px;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background: var(--bg-subtle);
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 700;
}
.order-meta-text {
min-width: 0;
overflow: hidden;
color: var(--text-secondary);
font-size: var(--text-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.status-line-stack,
.delivery-status-panel {
display: grid;
gap: var(--space-2);
align-content: start;
}
.delivery-status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(112px, 1fr));
gap: var(--space-2);
}
.status-line {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: var(--space-2);
align-items: center;
min-width: 0;
}
.status-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background: #f7f9fc;
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
}
.status-line :deep(.el-tag),
.status-line :deep(.el-tag__content) {
width: 100%;
min-width: 0;
}
.status-line :deep(.el-tag) {
justify-content: center;
}
.status-line :deep(.el-tag__content) {
display: block;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.progress-row-stack {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(2, minmax(112px, 1fr));
gap: var(--space-2);
margin-top: 2px;
}
@@ -400,6 +494,7 @@ onMounted(() => {
.follow-up-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 9px;
border-radius: var(--radius-full);
@@ -408,6 +503,19 @@ onMounted(() => {
border: 1px solid transparent;
white-space: nowrap;
}
.progress-chip {
gap: 4px;
}
.follow-up-chip {
width: 100%;
}
.progress-chip strong {
color: inherit;
font-weight: 800;
}
.progress-chip[data-tone="success"] {
color: #0f766e;
background: var(--color-success-light);