40 lines
1.4 KiB
Markdown
40 lines
1.4 KiB
Markdown
# 页面设计: 订单流程 (Order Flow)
|
|
|
|
> **路由**:
|
|
> - 确认订单: `/checkout`
|
|
> - 支付: `/payment`
|
|
> - 详情: `/me/orders/:id`
|
|
|
|
## 1. 确认订单页 (Checkout)
|
|
- **步骤条**: 1.确认订单 -> 2.支付 -> 3.完成。
|
|
- **收货地址 (如需)**:
|
|
- 卡片网格展示已有地址。
|
|
- [+ 新增地址] 虚线框按钮。
|
|
- **商品清单**:
|
|
- 列表: 图片 | 标题 | 单价 | 数量 | 小计。
|
|
- **优惠/备注**:
|
|
- 优惠券选择器。
|
|
- 买家留言输入框。
|
|
- **底部结算栏 (Sticky Bottom)**:
|
|
- 只有 "合计金额"。
|
|
- [提交订单] 大按钮。
|
|
|
|
## 2. 收银台/支付页 (Cashier)
|
|
- **倒计时**: "请在 15:00 内完成支付，超时将取消"。
|
|
- **订单金额**: 大字体显示。
|
|
- **支付方式**:
|
|
- Radio List: 微信支付、支付宝、余额支付。
|
|
- 选中会有高亮边框。
|
|
- **扫码区**: (PC端) 展示二维码，轮询支付状态。
|
|
|
|
## 3. 订单详情页 (Order Detail)
|
|
- **状态栏**:
|
|
- 顶部大卡片。
|
|
- 当前状态 (如 "待发货") + 进度条 (下单 -> 付款 -> 发货 -> 完成)。
|
|
- 对应操作按钮: [申请退款] [确认收货] [去评价]。
|
|
- **信息模块**:
|
|
- **收货信息**: 人名、电话、地址。
|
|
- **订单信息**: 订单号、创建时间、支付时间。
|
|
- **商品列表**: 复用清单组件。
|
|
- **费用明细**: 商品总价 - 优惠 + 运费 = 实付。
|