style(shop): 优化商品和订单列表界面细节

- 添加商品列表表格横向滚动支持,避免列溢出
- 设置商品图片高度,保持缩略图统一尺寸
- 修改商品状态标签文案为“出售中”
- 调整订单商品明细列,支持展开与收起全部商品
- 在订单列表操作列中新增竖线分隔符,提升按钮分隔清晰度
- 统一订单操作按钮文本,去除图标依赖
- 注释掉商品列表中排序号列
- 微调表格中部分列宽及对齐方式提高视觉体验
This commit is contained in:
2026-07-28 19:44:12 +08:00
parent a92248bff7
commit 4ab90c9d89
3 changed files with 87 additions and 42 deletions
+14 -13
View File
@@ -10,6 +10,7 @@
:columns="columns"
:datasource="datasource"
:customRow="customRow"
:scroll="{ x: 1800 }"
size="small"
v-model:selection="selection"
tool-class="ele-toolbar-form"
@@ -40,6 +41,7 @@
v-if="record.image"
:preview="false"
:width="50"
:height="50"
/>
<div class="flex flex-col justify-center leading-tight">
<span class="text-gray-700 font-bold">{{ record.name }}</span>
@@ -52,7 +54,7 @@
</a-space>
</template>
<template v-if="column.key === 'priceGroup'">
<div class="flex flex-col leading-tight gap-0.5">
<div class="flex flex-col leading-tight">
<span class="text-gray-800 font-bold">¥{{ record.price }}</span>
<span class="text-gray-400 text-xs"
>市场价:{{
@@ -91,7 +93,7 @@
</a-space>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">已上架</a-tag>
<a-tag v-if="record.status === 0" color="green">出售中</a-tag>
<a-tag v-if="record.status === 1" color="orange">待上架</a-tag>
<a-tag v-if="record.status === 2" color="purple">待审核</a-tag>
<a-tag v-if="record.status === 3" color="red">审核不通过</a-tag>
@@ -271,8 +273,7 @@
title: '置顶',
dataIndex: 'isTop',
key: 'isTop',
align: 'center',
sorter: true
align: 'center'
},
{
title: '状态',
@@ -286,14 +287,14 @@
// key: 'comments',
// align: 'center',
// },
{
title: '排序号',
dataIndex: 'sortNumber',
key: 'sortNumber',
align: 'center',
width: 120,
sorter: true
},
// {
// title: '排序号',
// dataIndex: 'sortNumber',
// key: 'sortNumber',
// align: 'center',
// width: 120,
// sorter: true
// },
{
title: '创建时间',
dataIndex: 'createTime',
@@ -307,7 +308,7 @@
{
title: '操作',
key: 'action',
width: 200,
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true