quyun-v2/docs/design/portal/PAGE_ORDER.md

页面设计: 订单流程 (Order Flow)

路由:

• 确认订单: /checkout
• 支付: /payment
• 详情: /me/orders/:id

1. 确认订单页 (Checkout)

• 步骤条: 1.确认订单 -> 2.支付 -> 3.完成。
• 收货地址 (如需):
  • 卡片网格展示已有地址。
  • [+ 新增地址] 虚线框按钮。
• 商品清单:
  • 列表: 图片 | 标题 | 单价 | 数量 | 小计。
• 优惠/备注:
  • 优惠券选择器。
  • 买家留言输入框。
• 底部结算栏 (Sticky Bottom):
  • 只有 "合计金额"。
  • [提交订单] 大按钮。

2. 收银台/支付页 (Cashier)

• 倒计时: "请在 15:00 内完成支付，超时将取消"。
• 订单金额: 大字体显示。
• 支付方式:
  • Radio List: 微信支付、支付宝、余额支付。
  • 选中会有高亮边框。
• 扫码区: (PC端) 展示二维码，轮询支付状态。

3. 订单详情页 (Order Detail)

• 状态栏:
  • 顶部大卡片。
  • 当前状态 (如 "待发货") + 进度条 (下单 -> 付款 -> 发货 -> 完成)。
  • 对应操作按钮: [申请退款] [确认收货] [去评价]。
• 信息模块:
  • 收货信息: 人名、电话、地址。
  • 订单信息: 订单号、创建时间、支付时间。
  • 商品列表: 复用清单组件。
  • 费用明细: 商品总价 - 优惠 + 运费 = 实付。