feat: add pages

docs/design/portal/PAGE_ORDER.md

@@ -2,38 +2,93 @@
 
 > **路由**:
 > - 确认订单: `/checkout`
-> - 支付: `/payment`
-> - 详情: `/me/orders/:id`
+> - 支付收银台: `/payment/:id`
+> - 支付结果: `/payment/result`
+> - 订单详情: `/me/orders/:id`
+>
+> **布局**: `LayoutSimple` (去除复杂导航干扰，专注交易)
 
 ## 1. 确认订单页 (Checkout)
-- **步骤条**: 1.确认订单 -> 2.支付 -> 3.完成。
-- **收货地址 (如需)**:
-  - 卡片网格展示已有地址。
-  - [+ 新增地址] 虚线框按钮。
-- **商品清单**:
-  - 列表: 图片 | 标题 | 单价 | 数量 | 小计。
-- **优惠/备注**:
-  - 优惠券选择器。
-  - 买家留言输入框。
-- **底部结算栏 (Sticky Bottom)**:
-  - 只有 "合计金额"。
-  - [提交订单] 大按钮。
 
-## 2. 收银台/支付页 (Cashier)
-- **倒计时**: "请在 15:00 内完成支付，超时将取消"。
-- **订单金额**: 大字体显示。
-- **支付方式**:
-  - Radio List: 微信支付、支付宝、余额支付。
-  - 选中会有高亮边框。
-- **扫码区**: (PC端) 展示二维码，轮询支付状态。
+**核心目标**: 清晰展示“买什么、多少钱”，减少犹豫。
 
-## 3. 订单详情页 (Order Detail)
-- **状态栏**:
-  - 顶部大卡片。
-  - 当前状态 (如 "待发货") + 进度条 (下单 -> 付款 -> 发货 -> 完成)。
-  - 对应操作按钮: [申请退款] [确认收货] [去评价]。
-- **信息模块**:
-  - **收货信息**: 人名、电话、地址。
-  - **订单信息**: 订单号、创建时间、支付时间。
-  - **商品列表**: 复用清单组件。
-  - **费用明细**: 商品总价 - 优惠 + 运费 = 实付。
+### 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`。
+- **复制**: 订单号旁增加大尺寸 [复制] 按钮。