Files

1.4 KiB

P05 订单详情页

  • 页面编码:P05
  • 页面层级:二级页
  • 页面目标:完整承接订单履约、售后和复购动作
  • 主要依赖组件:G01G31G34G35

1. 页面结构(从上到下)

  1. 顶部状态头图区
  2. 场景信息区
  3. 履约时间轴区
  4. 商品清单区
  5. 费用明细区
  6. 订单基础信息区
  7. 底部操作栏

2. 区块说明

2.1 顶部状态头图区

  • 展示当前状态文案与辅助说明
  • 示例:
    • 待支付
    • 商家已接单
    • 制作中
    • 配送中
    • 待自提
    • 已完成
    • 退款中

2.2 场景信息区

  • 外卖:收货地址、骑手状态、预计送达
  • 自提:取餐码、取餐时间、门店信息
  • 堂食:桌号、门店、是否可继续加菜

2.3 履约时间轴区

  • 使用 G34
  • 展示订单关键节点时间

2.4 商品清单区

  • 展示商品、规格、加料、数量

2.5 费用明细区

  • 使用 G31
  • 展示所有金额构成

2.6 订单基础信息区

  • 展示订单号、下单时间、支付方式、支付时间等

2.7 底部操作栏

  • 使用 G35
  • 动作随状态变化:
    • 继续支付
    • 取消订单
    • 催单
    • 申请退款
    • 去评价
    • 再来一单

3. 页面状态

  • 待支付态
  • 履约进行态
  • 已完成态
  • 退款中态
  • 已退款态

4. 实现备注

  • 订单详情页是强状态页面,顶部状态区必须足够明确