前台 · 订单中心与售后

覆盖页面：/portal/orders（订单列表）、/portal/orders/:id（订单详情）、/portal/return-apply（申请售后） 设计目标：让用户随时掌握订单动态，售后流程透明省心

---

一、订单列表（/portal/orders）

1.1 页面定位

• 角色：订单状态跟踪中心，用户回访频率最高的页面之一
• 用户决策：我的订单到哪一步了？该付款/收货/评价哪个？
• 核心指标：待办订单处理率（付款/收货）、复访率

1.2 页面结构

┌─────────────────────────────────────┐
│ Tab：全部|待付款|待发货|待收货|已完成    │
├─────────────────────────────────────┤
│ 订单卡片 1                           │
│ ┌─────────────────────────────────┐ │
│ │ 订单号 xxx        状态：待发货     │ │
│ │ [图]商品名 规格  ¥价 ×数量        │ │
│ │ 共N件商品  实付：¥xxx             │ │
│ │         [查看物流] [确认收货]      │ │
│ └─────────────────────────────────┘ │
│ 订单卡片 2 ...                       │
│ [上拉加载更多]                        │
└─────────────────────────────────────┘

1.3 功能模块

状态 Tab（核心导航）

Tab	对应状态	角标
全部	所有订单	—
待付款	status=0	显示数量
待发货	status=1	显示数量
待收货	status=2	显示数量
已完成	status=3	—

• Tab 切换刷新列表，URL 携带状态参数（支持直达某状态列表）
• 已取消订单在"全部"中展示，灰色状态标签

订单卡片

• 头部：订单号 + 状态标签（状态色见设计系统 5.5）
• 商品区：商品图+名+规格+单价×数量（多商品纵向排列，最多展示 3 个+折叠）
• 合计行：共 N 件商品，实付 ¥xxx
• 操作区（按状态动态展示）：

订单状态	可用操作
待付款	[取消订单] [去付款]（主按钮）
待发货	[提醒发货] [申请售后]
待收货	[查看物流] [确认收货]（主按钮）
已完成	[申请售后] [再次购买]
已取消	[删除订单] [再次购买]

交互规则

• 点击卡片（非按钮区）→ 订单详情
• 移动端上拉无限加载，每页 10 条
• 待付款订单卡片展示剩余支付倒计时

1.4 关键操作逻辑

操作	逻辑
去付款	跳转支付页
取消订单	确认弹窗"确定取消该订单吗？" → 取消成功刷新列表
确认收货	确认弹窗"请确认已收到商品" → 成功后状态变已完成
再次购买	将该订单商品重新加入购物车，跳转购物车
删除订单	仅已取消/已完成可删，二次确认

1.5 状态设计

状态	表现
无订单	插画 + "暂无相关订单" + [去逛逛]
加载中	骨架屏
加载失败	"加载失败，点击重试"

1.6 验收标准

• AC-OL01：Tab 正确过滤订单状态，待办 Tab 显示数量角标
• AC-OL02：订单卡片按状态展示正确的操作按钮
• AC-OL03：取消订单/确认收货操作后列表状态实时更新
• AC-OL04：待付款订单展示支付倒计时
• AC-OL05：空状态展示引导入口

---

二、订单详情（/portal/orders/:id）

2.1 页面定位

• 角色：单笔订单的全息视图，承载状态查询、物流跟踪、售后入口
• 核心指标：确认收货率、售后发起率

2.2 页面结构

┌─────────────────────────────────────┐
│ ① 状态头部（大色块）                  │
│   待收货（大字）+ 提示文案             │
├─────────────────────────────────────┤
│ ② 物流信息卡片（已发货时展示）          │
│   最新物流节点 + 时间                  │
│   展开查看完整物流轨迹 >               │
├─────────────────────────────────────┤
│ ③ 收货地址卡片                        │
│   收货人 手机 地址                    │
├─────────────────────────────────────┤
│ ④ 商品清单                           │
│   [图] 商品 规格 ¥价 ×数  [申请售后]   │
├─────────────────────────────────────┤
│ ⑤ 金额明细                           │
│   商品金额/运费/优惠/实付              │
├─────────────────────────────────────┤
│ ⑥ 订单信息                           │
│   订单号(可复制) 下单时间 支付方式       │
│   发货时间 快递公司 快递单号            │
├─────────────────────────────────────┤
│ ⑦ 操作记录（时间线，可折叠）            │
│   提交订单 → 支付成功 → 商家发货 →...  │
├─────────────────────────────────────┤
│ 底部操作栏（按状态动态）               │
│   [确认收货] / [去付款] / [申请售后]   │
└─────────────────────────────────────┘

2.3 功能模块

① 状态头部

• 不同状态不同主题色与引导文案：
  • 待付款："等待付款，剩余 14:32" + 倒计时
  • 待发货："商家正在备货，请耐心等待"
  • 待收货："商品已发出，请注意查收"
  • 已完成："交易已完成，感谢你的购买"
  • 已取消："订单已取消"

② 物流信息

• 仅已发货/待收货/已完成状态展示
• 默认展示最新一条物流节点
• 点击展开完整物流轨迹（时间线倒序，最新在上）
• 数据来源：快递公司 + 快递单号 + 物流轨迹（后端对接或模拟）

⑦ 操作记录（订单生命周期时间线）

• 展示订单全部操作历史：创建/支付/发货/收货/取消/售后等
• 时间线形式，每条含：操作内容 + 操作人 + 时间
• 默认折叠展示最近 3 条，可展开全部

2.4 业务规则

规则	说明
归属校验	仅订单所属会员可访问，他人访问提示无权
操作按钮	与列表页操作逻辑一致，按状态动态展示
订单号复制	点击复制按钮复制订单号，轻提示"已复制"

2.5 验收标准

• AC-OD01：状态头部正确展示当前状态与引导文案
• AC-OD02：已发货订单展示物流信息，可查看完整轨迹
• AC-OD03：操作记录时间线完整展示订单生命周期
• AC-OD04：金额明细与下单时一致（商品+运费-优惠=实付）
• AC-OD05：非订单所属用户访问被拒绝

---

三、申请售后（/portal/return-apply）

3.1 页面定位

• 角色：逆向交易入口，好的售后体验是复购的信任基础
• 用户决策：退什么？为什么退？要退款还是退货退款？
• 核心指标：售后完成率、售后时长、纠纷率

3.2 页面结构

┌─────────────────────────────────────┐
│ ① 选择售后商品                        │
│   [图] 商品名 规格  ¥价  [选择]       │
├─────────────────────────────────────┤
│ ② 服务类型（单选）                    │
│   ◉ 仅退款（未收到货）                │
│   ○ 退货退款（已收到货）               │
├─────────────────────────────────────┤
│ ③ 退款原因（下拉选择）                │
│   请选择原因 >                        │
├─────────────────────────────────────┤
│ ④ 退款金额                           │
│   ¥xxx（自动计算，不可超过实付）        │
├─────────────────────────────────────┤
│ ⑤ 问题描述（选填，文本域）             │
├─────────────────────────────────────┤
│ ⑥ 上传凭证（选填，最多3张图片）         │
├─────────────────────────────────────┤
│ [提交申请]（主按钮）                  │
└─────────────────────────────────────┘

3.3 功能模块

① 选择售后商品

• 从订单中选择申请售后的商品（一单可分商品售后）
• 已申请过售后且进行中的商品不可重复申请

② 服务类型

• 仅退款：未收到货场景，无需退货
• 退货退款：已收到货，需寄回商品
• 待发货状态只能选"仅退款"

③ 退款原因

• 下拉选择后台配置的退货原因（如：不想要了/商品质量问题/发错货/与描述不符）
• 必选项

④ 退款金额

• 自动计算：商品实付金额（含分摊运费），不可编辑超过上限
• 展示计算说明

⑥ 上传凭证

• 最多 3 张图片，支持拍照/相册
• 质量问题类原因建议上传（非强制）

3.4 售后状态流转（用户视角）

提交申请 → [商家审核]
  ├─ 拒绝 → 售后关闭（用户可修改后重新申请）
  └─ 通过 →
      ├─ 仅退款 → 退款中 → 退款成功（原路退回）
      └─ 退货退款 → 用户填写退货物流 → 商家收货 → 退款成功

3.5 业务规则

规则	说明
申请时限	订单完成后 7 天内可申请售后（可配置）
重复申请	同一商品售后被拒后可再次申请，进行中不可重复申请
退款上限	不超过该商品实付金额
提交后	跳转售后进度页/订单详情，展示"待商家审核"

3.6 状态设计

状态	表现
提交中	按钮 loading
提交成功	结果页"售后申请已提交，商家将在48小时内处理"
超出申请时限	入口隐藏或提示"已超出售后申请期限"

3.7 验收标准

• AC-RA01：可选择售后商品、服务类型、退款原因
• AC-RA02：退款金额自动计算且不超过实付
• AC-RA03：凭证上传最多 3 张，格式校验
• AC-RA04：提交成功后订单展示售后状态，商家后台可见申请
• AC-RA05：进行中的售后不可重复申请同一商品

---

四、体验优化（用户视角）

订单与售后的体验核心是"透明"与"可控"。按优先级排列。

订单列表/详情

优先级	优化点	说明
P0	物流时间线可视化	物流轨迹用竖向时间线展示（节点+时间），最新节点高亮，比纯文本列表更易读
P1	订单内搜索	列表顶部搜索框，按商品名/订单号查找历史订单
P1	物流状态推送	发货/派送/签收节点变化时站内消息提醒（本期可预留）
P1	一键复制快递单号	快递单号旁复制按钮，方便用户去第三方查询
P2	订单分组	订单按"三个月内/更早"或月份分组，长列表更易导航
P2	订单回收站	删除的订单进回收站（30天可恢复），防误删

售后

优先级	优化点	说明
P0	售后进度时间线	售后详情页用时间线展示：申请→审核→退货→退款，每步状态与时间，消除"不知道到哪一步了"的焦虑
P1	协商历史	展示与商家的协商记录（拒绝原因、留言），信息透明
P1	退货物流填写	审核通过后引导填写退货快递单号，并提示退货地址
P2	退款到账提醒	退款成功后站内消息 + 原路退回说明（1-7个工作日）

设计要点：

• 物流与售后进度是用户回访的最高频诉求，时间线可视化是体验分水岭
• 售后拒绝时必须展示拒绝原因与"修改后重新申请"入口，不能让用户无路可走
• 确认收货等不可逆操作必须二次确认，且文案明确告知后果