1.4 KiB
1.4 KiB
T03 订单页
- 页面编码:
T03 - 页面层级:
Tab - 适用场景:
全场景 - 页面目标:让用户快速找到订单,并查看履约、售后和复购入口
- 主要依赖组件:
G05、G33
1. 页面结构(从上到下)
- 顶部状态筛选区
- 场景筛选区(可选)
- 订单列表区
2. 区块说明
2.1 顶部状态筛选区
- 建议分段控件或横向标签
- 至少包含:
- 全部
- 待支付
- 进行中
- 已完成
- 退款售后
2.2 场景筛选区
- 可按
外卖 / 自提 / 堂食进行二次筛选 - 也可与状态整合为一个过滤区
2.3 订单列表区
- 每张订单卡使用
G33 - 订单卡必须展示:
- 门店名称
- 订单状态
- 场景标签
- 商品摘要
- 订单金额
- 下单时间
- 主要操作按钮
- 订单卡点击进入
P05 订单详情页
3. 订单卡动作规则
待支付:继续支付、取消订单进行中:查看详情、催单、查看取餐码已完成:评价、再来一单退款售后:查看退款详情
4. 页面状态
默认态
- 有订单列表
空态
- 某筛选条件下无订单时,展示空态和“去点餐” CTA
异常态
- 加载失败时展示重试
5. 实现备注
- 订单页重点是列表可扫读性
- 一屏内要能快速看懂状态、门店、金额和下一步动作