# 页面设计: 订单流程 (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`。
- **复制**: 订单号旁增加大尺寸 [复制] 按钮。