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

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

路由:

• 确认订单: /checkout
• 支付收银台: /payment/:id
• 支付结果: /payment/result
• 订单详情: /me/orders/:id

布局: LayoutSimple (去除复杂导航干扰，专注交易)

1. 确认订单页 (Checkout)

核心目标: 清晰展示“买什么、多少钱”，减少犹豫。

1.1 页面结构

• 步骤条 (Steps): 顶部显示 1. 确认订单 (激活) -> 2. 扫码支付 -> 3. 交易完成。
• 虚拟/实体区分:
  • 虚拟内容: 隐藏收货地址模块，显示 "购买后自动发货至账户"。
  • 实体商品: 展示地址选择卡片 + [新增地址] 大按钮。

1.2 商品清单 (Item List)

• 样式: bg-white rounded-lg p-6 mb-4 shadow-sm。
• 列表项:
  • 图片: w-24 h-16 object-cover rounded (16:9)。
  • 信息: 标题 (H3) + 类型标签 (如 "专栏", "视频")。
  • 价格: 单价 ¥ 99.00 x 数量。
• 优惠模块:
  • 优惠券: 点击弹出侧边抽屉选择，不跳转页面。
  • 积分抵扣: Switch 开关 + "使用 100 积分抵扣 ¥ 1.00"。

1.3 底部结算栏 (Sticky Bottom Bar)

• 位置: 吸底 bottom-0，z-50，白底阴影。
• 内容:
  • 左侧:
    • 实付金额: ¥ 98.00 (text-3xl text-red-600 font-bold)。
    • 明细展开: "共优惠 ¥ 1.00" (点击可展开气泡查看明细)。
  • 右侧: [提交订单] (Primary Button, h-14, w-48)。
• 交互: 点击提交 -> 全局 Loading -> 跳转收银台。

---

2. 收银台 (Cashier)

核心目标: 营造安全感，引导快速支付。

2.1 头部信息

• 倒计时: 顶部黄色 Banner "请在 15:00 内完成支付，超时订单将自动取消"。
• 金额区: 居中显示 "¥ 98.00"，下方灰字显示 "订单号: 20251225..."。

2.2 支付方式 (Payment Methods)

• 布局: 左侧选择方式，右侧展示二维码 (PC端)。
• 选项:
  • 微信支付: 绿色图标，推荐。
  • 支付宝: 蓝色图标。
  • 余额支付: 显示当前余额，若不足则置灰并提示。
• 二维码区域:
  • 尺寸: 200x200px (加大，方便扫码)。
  • 状态:
    • 正常: 显示二维码。
    • 过期/失效: 遮罩 + [刷新二维码]。
    • 成功: 显示绿色对勾 "支付成功，正在跳转..."。

---

3. 支付结果页 (Payment Result)

• 成功态:
  • 绿色大图标 + "支付成功"。
  • [查看订单] (Secondary) + [立即阅读/使用] (Primary)。
• 失败态:
  • 红色大图标 + "支付遇到问题"。
  • [重新支付] + [联系客服]。

---

4. 订单详情页 (Order Detail)

4.1 状态看板 (Status Board)

• 虚拟商品状态流:
  • 待支付: 显示倒计时 + [去支付] [取消订单]。
  • 已完成: 显示 "已发货" + [立即阅读] [下载发票]。
  • 已取消/已退款: 灰色状态。
• 实体商品状态流: 增加 待发货 -> 已发货 (含物流查询) 环节。

4.2 信息模块

• 售后/退款:
  • 入口: 在订单底部显示 "申请售后" 链接 (灰色小字，不强调)。
  • 虚拟限制: 点击弹出提示 "虚拟商品一经售出不支持无理由退款，如有质量问题请联系客服"。
• 费用明细:
  • 表格式对齐展示：商品总额、运费、优惠券、积分抵扣、实付金额。

4.3 适老化细节

• 字号: 关键金额字号 30px+。
• 按钮: 高度统一 h-12 (48px)，间距 gap-4。
• 复制: 订单号旁增加大尺寸 [复制] 按钮。