电商前端 — 订单与售后
订单系统和售后系统是电商平台的后链路核心模块。订单列表/详情页需要清晰展示订单状态并提供操作入口，售后流程则需要处理退款、退货等复杂业务场景。本文将深入讲解订单与售后模块的前端设计。
订单状态机设计
订单从创建到完成经历多个状态，前端需要准确映射这些状态并呈现对应的 UI。
订单状态列表
电商平台典型的订单状态流转：
待付款 → 待发货 → 待收货 → 已完成
↘ 退款/售后 ↗每个状态对应不同的操作按钮：
| 状态 | 描述 | 可操作按钮 |
|---|---|---|
| 待付款 | 下单未支付 | 去付款、取消订单 |
| 待发货 | 已支付待发货 | 查看物流 |
| 待收货 | 已发货待签收 | 确认收货、查看物流 |
| 已完成 | 已签收 | 查看物流、申请售后 |
| 退款/售后 | 售后处理中 | 查看进度 |
状态标签颜色
不同状态的标签使用不同颜色区分，增强视觉识别：
- 待付款：橙色（
#f59e0b）— 提示用户操作 - 待发货：蓝色（
#6366f1）— 正常等待 - 待收货：浅橙色（
#fb923c）— 即将完成 - 已完成：绿色（
#34d399）— 正向反馈 - 退款/售后：红色（
#ef4444）— 需要关注
订单列表/详情页设计
卡片式设计
订单列表采用卡片式布局，每张卡片包含：
- 订单头部：订单编号（支持复制） + 状态标签
- 商品信息：缩略图、商品名称、规格、数量
- 底部栏：订单金额 + 操作按钮组
多维度筛选
通过 Tab 切换快速筛选订单：
- 全部：显示所有订单
- 待付款：显示未支付订单
- 待发货：显示已支付等待发货的订单
- 待收货：显示已发出等待签收的订单
- 已完成：显示已签收完成的订单
- 退款/售后：显示售后处理中的订单
每个 Tab 可以显示对应状态的订单数量角标。
操作按钮
按钮根据不同状态动态渲染：
- "去付款"使用渐变背景的 primary 按钮
- "取消订单"、"申请售后"使用 danger 风格的按钮
- "查看物流"直接打开物流弹窗
物流追踪（时间线组件）
物流追踪是提升用户体验的重要模块。前端通常使用时间线（Timeline）组件展示物流轨迹。
时间线组件实现
时间线组件包含以下要素：
- 竖直线条：表示时间流逝方向
- 节点圆点：每个物流事件的时间节点
- 事件描述：该节点的具体物流信息
- 时间戳：事件发生时间
最新物流事件（当前状态）高亮显示，使用品牌色强调。
数据结构
javascript
const logistics = [
{ time: '2026-07-20 14:32', desc: '已签收', active: true },
{ time: '2026-07-20 10:15', desc: '快递员正在派件', active: false },
// ...
];交互设计
- 点击"查看物流"弹出 Modal 弹窗
- 弹窗背景半透明遮罩 + 模糊效果
- 弹窗出现动画（向上滑入 + 淡入）
- 点击遮罩区域或关闭按钮关闭弹窗
退款/退货流程
售后流程是电商系统中用户情感最敏感的环节，前端需要提供清晰、透明的进度展示。
售后申请
用户提交售后的步骤：
- 选择要售后的订单商品
- 选择售后类型：仅退款 / 退货退款
- 选择原因：商品质量问题、与描述不符、尺寸不合适等
- 填写说明（可选）
- 提交申请
售后流程展示
采用步骤条（Step Progress）组件展示售后进度：
提交申请 → 审核中 → 退货处理 → 退款完成每个步骤包含：
- 圆形图标：已完成步骤显示绿色勾 ✓，当前步骤显示蓝色图标，未完成置灰
- 步骤标签：该步骤的名称
- 连接线：连接各个步骤
进度说明
在步骤条下方显示当前进度的详细说明，例如：
"卖家已收到退款申请，正在审核中，预计 1-3 个工作日完成"
这能有效减少用户焦虑，提升售后体验。
技术要点总结
订单与售后模块的前端实现涵盖以下技术要点：
- 状态机映射：不同订单状态到 UI 的一致性映射
- Tab 筛选 + 动态渲染：基于状态的筛选与渲染
- 时间线组件：物流轨迹的视觉化呈现
- 步骤条组件：售后流程的进度展示
- Modal 弹窗：物流详情 / 售后申请的弹窗交互
- 事件委托：使用事件代理处理动态渲染内容的点击事件
通过 Demo 你可以体验从查看订单列表、查看物流、到申请退款完成售后的完整流程。