优化订单列表ui-2
This commit is contained in:
Vendored
-3
@@ -21,7 +21,6 @@ declare module 'vue' {
|
|||||||
AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
|
AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
|
||||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
|
|
||||||
ElCard: typeof import('element-plus/es')['ElCard']
|
ElCard: typeof import('element-plus/es')['ElCard']
|
||||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
ElCol: typeof import('element-plus/es')['ElCol']
|
ElCol: typeof import('element-plus/es')['ElCol']
|
||||||
@@ -44,7 +43,6 @@ declare module 'vue' {
|
|||||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||||
ElOption: typeof import('element-plus/es')['ElOption']
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
|
||||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||||
@@ -52,7 +50,6 @@ declare module 'vue' {
|
|||||||
ElRow: typeof import('element-plus/es')['ElRow']
|
ElRow: typeof import('element-plus/es')['ElRow']
|
||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||||
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
ElTable: typeof import('element-plus/es')['ElTable']
|
ElTable: typeof import('element-plus/es')['ElTable']
|
||||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||||
|
|||||||
@@ -114,8 +114,7 @@ onMounted(loadOrders)
|
|||||||
</template>
|
</template>
|
||||||
</AdminPageHeader>
|
</AdminPageHeader>
|
||||||
|
|
||||||
<!-- 筛选 -->
|
<section class="filter-panel">
|
||||||
<el-card shadow="never" class="filter-card">
|
|
||||||
<div class="filter-grid">
|
<div class="filter-grid">
|
||||||
<el-input v-model="platformOrderId" placeholder="平台订单号(模糊匹配)" clearable @keyup.enter="loadOrders(1)" />
|
<el-input v-model="platformOrderId" placeholder="平台订单号(模糊匹配)" clearable @keyup.enter="loadOrders(1)" />
|
||||||
<el-select v-model="payStatus" placeholder="支付状态" clearable>
|
<el-select v-model="payStatus" placeholder="支付状态" clearable>
|
||||||
@@ -136,7 +135,7 @@ onMounted(loadOrders)
|
|||||||
<el-button round type="primary" @click="loadOrders(1)">查询</el-button>
|
<el-button round type="primary" @click="loadOrders(1)">查询</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</section>
|
||||||
|
|
||||||
<!-- 摘要 -->
|
<!-- 摘要 -->
|
||||||
<div v-if="!loading && items.length > 0" class="summary-strip">
|
<div v-if="!loading && items.length > 0" class="summary-strip">
|
||||||
@@ -149,8 +148,7 @@ onMounted(loadOrders)
|
|||||||
|
|
||||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||||
|
|
||||||
<!-- 列表 -->
|
<section class="orders-section" v-loading="loading" element-loading-text="订单列表加载中">
|
||||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="订单列表加载中">
|
|
||||||
<template v-if="items.length === 0 && !loading">
|
<template v-if="items.length === 0 && !loading">
|
||||||
<el-empty description="当前筛选条件下暂无订单" :image-size="60" />
|
<el-empty description="当前筛选条件下暂无订单" :image-size="60" />
|
||||||
</template>
|
</template>
|
||||||
@@ -244,7 +242,7 @@ onMounted(loadOrders)
|
|||||||
@current-change="loadOrders"
|
@current-change="loadOrders"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</el-card>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -264,7 +262,10 @@ onMounted(loadOrders)
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-card { margin-top: var(--space-4); }
|
.filter-panel {
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-grid {
|
.filter-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -280,13 +281,9 @@ onMounted(loadOrders)
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-2);
|
gap: var(--space-2);
|
||||||
min-height: 46px;
|
min-height: 38px;
|
||||||
padding: 8px 12px;
|
padding: 0;
|
||||||
margin-top: var(--space-4);
|
margin-top: var(--space-4);
|
||||||
border: 1px solid var(--border-default);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background: rgba(255, 255, 255, 0.74);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -318,7 +315,10 @@ onMounted(loadOrders)
|
|||||||
.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
|
.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
|
||||||
.summary-metric[data-tone='muted'] { color: var(--text-secondary); background: #f8fafc; border-color: var(--border-default); }
|
.summary-metric[data-tone='muted'] { color: var(--text-secondary); background: #f8fafc; border-color: var(--border-default); }
|
||||||
|
|
||||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
.orders-section {
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
.orders-toolbar { margin-bottom: var(--space-3); }
|
.orders-toolbar { margin-bottom: var(--space-3); }
|
||||||
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||||
@@ -331,14 +331,15 @@ onMounted(loadOrders)
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
background: rgba(255, 255, 255, 0.84);
|
background: rgba(247, 250, 255, 0.42);
|
||||||
border: 1px solid var(--border-default);
|
border: 1px solid var(--border-default);
|
||||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-card:hover {
|
.order-card:hover {
|
||||||
border-color: var(--border-hover);
|
border-color: var(--border-hover);
|
||||||
box-shadow: var(--shadow-sm);
|
background: rgba(247, 250, 255, 0.68);
|
||||||
|
box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-card-top {
|
.order-card-top {
|
||||||
|
|||||||
Reference in New Issue
Block a user