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

优化订单列表ui-3

Browse Source
This commit is contained in:
yml2213
2026-05-14 22:17:13 +08:00
parent 3b75eac87f
commit 8b399ae851
4 changed files with 57 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminOrdersView.vue
+31 -9
View File
@@ -116,14 +116,26 @@ onMounted(loadOrders)
<section class="filter-panel">
<div class="filter-grid">
<el-input v-model="platformOrderId" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
<el-select v-model="payStatus" placeholder="支付状态" clearable>
<el-input
v-model="platformOrderId"
class="filter-control filter-control--order"
placeholder="平台订单号（模糊匹配）"
clearable
@keyup.enter="loadOrders(1)"
/>
<el-select v-model="payStatus" class="filter-control filter-control--status" placeholder="支付状态" clearable>
<el-option v-for="opt in adminPayStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
</el-select>
<el-input v-model="skuCode" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
<el-input
v-model="skuCode"
class="filter-control filter-control--sku"
placeholder="SKU，如 dnf-cdk-a"
clearable
@keyup.enter="loadOrders(1)"
/>
<el-date-picker
v-model="dateRange"
class="date-range-filter"
class="filter-control date-range-filter"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
@@ -269,13 +281,22 @@ onMounted(loadOrders)
.filter-grid {
display: grid;
grid-template-columns: minmax(220px, 1.1fr) minmax(170px, 0.8fr) minmax(220px, 1fr) minmax(280px, 1.2fr) auto;
grid-template-columns: minmax(220px, 1.25fr) minmax(136px, 0.6fr) minmax(220px, 1fr) minmax(390px, 1.55fr) auto;
gap: var(--space-3);
align-items: center;
}
.date-range-filter { width: 100%; }
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.filter-control { width: 100%; min-width: 0; }
.date-range-filter {
width: 100%;
min-width: 0;
}
.filter-buttons {
display: flex;
gap: 10px;
min-width: 156px;
justify-content: flex-end;
}
.summary-strip {
display: flex;
@@ -462,8 +483,9 @@ onMounted(loadOrders)
.follow-up-chip[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
@media (max-width: 1200px) {
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.date-range-filter { grid-column: span 2; }
.filter-grid {
grid-template-columns: minmax(200px, 1fr) minmax(132px, 0.56fr) minmax(200px, 0.9fr) minmax(340px, 1.25fr) auto;
}
.filter-buttons { justify-content: flex-end; }
.order-row-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}