mp-vue/docs/ORDER_LIST_ACTION_BUTTONS.md

订单列表操作按钮设计

设计概述

为订单列表页面设计了根据不同订单状态显示相应操作按钮的功能，提供更精准、更直观的订单管理体验。

按钮设计原则

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	危险	删除订单记录

代码实现

模板结构

<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>

辅助判断函数

// 判断是否为取消状态
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);
};

操作方法示例

// 发货处理
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. 角色权限

// 根据用户角色显示不同按钮
const userRole = getCurrentUserRole();

// 财务人员可以处理退款
const canHandleRefund = userRole.includes('FINANCE') || userRole.includes('ADMIN');

// 仓库人员可以发货
const canDelivery = userRole.includes('WAREHOUSE') || userRole.includes('ADMIN');

2. 按钮权限控制

<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. 易于维护：模块化的代码结构

这个设计将显著提升订单管理的效率和用户体验。