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