238 lines
6.4 KiB
Markdown
238 lines
6.4 KiB
Markdown
# 订单列表操作按钮设计
|
|
|
|
## 设计概述
|
|
|
|
为订单列表页面设计了根据不同订单状态显示相应操作按钮的功能，提供更精准、更直观的订单管理体验。
|
|
|
|
## 按钮设计原则
|
|
|
|
### 1. 🎯 **状态驱动**
|
|
- 根据订单的支付状态、发货状态、订单状态组合显示按钮
|
|
- 确保每个状态下的操作都符合业务逻辑
|
|
|
|
### 2. 🎨 **视觉层次**
|
|
- 主要操作使用蓝色样式 (`ele-text-primary`)
|
|
- 成功操作使用绿色样式 (`ele-text-success`)
|
|
- 警告操作使用橙色样式 (`ele-text-warning`)
|
|
- 危险操作使用红色样式 (`ele-text-danger`)
|
|
|
|
### 3. 🔒 **安全确认**
|
|
- 所有危险操作都有确认对话框
|
|
- 明确的操作说明和后果提示
|
|
|
|
## 完整的按钮矩阵
|
|
|
|
### 基础操作（所有状态）
|
|
|
|
| 按钮 | 图标 | 样式 | 说明 |
|
|
|------|------|------|------|
|
|
| 详情 | 👁️ EyeOutlined | 默认 | 查看订单详细信息 |
|
|
|
|
### 未付款状态 (payStatus=0, orderStatus=0)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 修改 | ✏️ EditOutlined | 默认 | 修改订单信息 |
|
|
| 取消 | ❌ CloseOutlined | 警告 | 取消订单 |
|
|
|
|
### 已付款未发货 (payStatus=1, deliveryStatus=10, 未取消)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 发货 | 🚚 SendOutlined | 主要 | 标记为已发货 |
|
|
| 退款 | ↩️ UndoOutlined | 默认 | 申请退款 |
|
|
|
|
### 已发货未完成 (payStatus=1, deliveryStatus=20, orderStatus=0)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 确认收货 | ✅ CheckOutlined | 主要 | 确认收货并完成订单 |
|
|
| 退款 | ↩️ UndoOutlined | 默认 | 申请退款 |
|
|
|
|
### 退款申请中 (orderStatus=4,7)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 同意退款 | ✅ CheckCircleOutlined | 成功 | 同意退款申请 |
|
|
| 拒绝退款 | ❌ CloseCircleOutlined | 危险 | 拒绝退款申请 |
|
|
|
|
### 退款被拒绝 (orderStatus=5)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 重新处理 | 🔄 RedoOutlined | 默认 | 重新提交退款申请 |
|
|
|
|
### 已完成 (orderStatus=1)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 申请退款 | ↩️ UndoOutlined | 默认 | 为已完成订单申请退款 |
|
|
|
|
### 可删除状态 (orderStatus=1,2,6)
|
|
|
|
| 按钮 | 图标 | 样式 | 操作 |
|
|
|------|------|------|------|
|
|
| 删除 | 🗑️ DeleteOutlined | 危险 | 删除订单记录 |
|
|
|
|
## 代码实现
|
|
|
|
### 模板结构
|
|
|
|
```vue
|
|
<template v-if="column.key === 'action'">
|
|
<a-space>
|
|
<!-- 查看详情 - 所有状态都可以查看 -->
|
|
<a @click.stop="openEdit(record)">
|
|
<EyeOutlined /> 详情
|
|
</a>
|
|
|
|
<!-- 未付款状态的操作 -->
|
|
<template v-if="record.payStatus === 0 && record.orderStatus === 0">
|
|
<!-- 修改和取消按钮 -->
|
|
</template>
|
|
|
|
<!-- 已付款未发货状态的操作 -->
|
|
<template v-if="record.payStatus === 1 && record.deliveryStatus === 10 && !isCancelledStatus(record.orderStatus)">
|
|
<!-- 发货和退款按钮 -->
|
|
</template>
|
|
|
|
<!-- 其他状态的操作... -->
|
|
</a-space>
|
|
</template>
|
|
```
|
|
|
|
### 辅助判断函数
|
|
|
|
```typescript
|
|
// 判断是否为取消状态
|
|
const isCancelledStatus = (orderStatus?: number) => {
|
|
return [2, 3].includes(orderStatus || 0);
|
|
};
|
|
|
|
// 判断是否为退款相关状态
|
|
const isRefundStatus = (orderStatus?: number) => {
|
|
return [4, 5, 6, 7].includes(orderStatus || 0);
|
|
};
|
|
|
|
// 判断是否可以删除订单
|
|
const canDeleteOrder = (order: ShopOrder) => {
|
|
return [1, 2, 6].includes(order.orderStatus || 0);
|
|
};
|
|
```
|
|
|
|
### 操作方法示例
|
|
|
|
```typescript
|
|
// 发货处理
|
|
const handleDelivery = (record: ShopOrder) => {
|
|
Modal.confirm({
|
|
title: '确认发货',
|
|
content: '确定要将此订单标记为已发货吗？',
|
|
onOk: async () => {
|
|
try {
|
|
const deliveryTime = toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss');
|
|
await updateShopOrder({
|
|
...record,
|
|
deliveryStatus: 20,
|
|
deliveryTime: deliveryTime
|
|
});
|
|
message.success('发货成功');
|
|
reload();
|
|
} catch (error: any) {
|
|
message.error(error.message || '发货失败');
|
|
}
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
## 状态流转图
|
|
|
|
```
|
|
未付款订单 → [修改/取消]
|
|
↓ 付款
|
|
已付款未发货 → [发货/退款]
|
|
↓ 发货
|
|
已发货未完成 → [确认收货/退款]
|
|
↓ 确认收货
|
|
已完成订单 → [申请退款/删除]
|
|
|
|
退款流程：
|
|
申请退款 → [同意/拒绝]
|
|
↓ 同意
|
|
退款成功 → [删除]
|
|
↓ 拒绝
|
|
退款被拒绝 → [重新处理/删除]
|
|
```
|
|
|
|
## 用户体验优化
|
|
|
|
### 1. 按钮排序
|
|
- 主要操作放在前面（发货、确认收货）
|
|
- 次要操作放在中间（修改、申请退款）
|
|
- 危险操作放在最后（取消、删除）
|
|
|
|
### 2. 视觉反馈
|
|
- 使用图标增强按钮识别度
|
|
- 颜色编码表示操作类型
|
|
- 分隔线清晰区分不同操作
|
|
|
|
### 3. 操作确认
|
|
- 危险操作使用 `a-popconfirm` 组件
|
|
- 明确的确认文案
|
|
- 详细的操作说明
|
|
|
|
### 4. 错误处理
|
|
- 统一的错误提示
|
|
- 操作失败后的状态恢复
|
|
- 网络异常的友好提示
|
|
|
|
## 权限控制建议
|
|
|
|
### 1. 角色权限
|
|
```typescript
|
|
// 根据用户角色显示不同按钮
|
|
const userRole = getCurrentUserRole();
|
|
|
|
// 财务人员可以处理退款
|
|
const canHandleRefund = userRole.includes('FINANCE') || userRole.includes('ADMIN');
|
|
|
|
// 仓库人员可以发货
|
|
const canDelivery = userRole.includes('WAREHOUSE') || userRole.includes('ADMIN');
|
|
```
|
|
|
|
### 2. 按钮权限控制
|
|
```vue
|
|
<a
|
|
v-if="canHandleRefund && (record.orderStatus === 4 || record.orderStatus === 7)"
|
|
@click.stop="handleApproveRefund(record)"
|
|
class="ele-text-success"
|
|
>
|
|
<CheckCircleOutlined /> 同意退款
|
|
</a>
|
|
```
|
|
|
|
## 性能优化
|
|
|
|
### 1. 条件渲染优化
|
|
- 使用 `v-if` 而不是 `v-show` 减少DOM节点
|
|
- 合理组织条件判断顺序
|
|
- 避免重复的状态计算
|
|
|
|
### 2. 事件处理优化
|
|
- 使用 `@click.stop` 防止事件冒泡
|
|
- 异步操作添加loading状态
|
|
- 防抖处理频繁点击
|
|
|
|
## 总结
|
|
|
|
新的订单列表操作按钮设计具有以下优势：
|
|
|
|
1. **功能完整**：覆盖订单全生命周期的所有操作
|
|
2. **逻辑清晰**：按钮显示严格遵循业务流程
|
|
3. **用户友好**：直观的图标和颜色编码
|
|
4. **安全可靠**：危险操作有确认机制
|
|
5. **易于维护**：模块化的代码结构
|
|
|
|
这个设计将显著提升订单管理的效率和用户体验。
|