docs: split prototype specs and add execution guides
This commit is contained in:
72
docs/07-页面规格/09-结算确认页.md
Normal file
72
docs/07-页面规格/09-结算确认页.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# P03 结算确认页
|
||||
|
||||
- 页面编码:`P03`
|
||||
- 页面层级:`二级页`
|
||||
- 适用场景:`外卖 / 自提 / 堂食`
|
||||
- 页面目标:让用户确认履约信息、优惠和金额,并完成支付
|
||||
- 主要依赖组件:`G01`、`G30`、`G31`、`G32`、`G35`
|
||||
|
||||
## 1. 页面结构(从上到下)
|
||||
|
||||
1. 顶部导航栏
|
||||
2. 场景信息卡
|
||||
3. 商品清单区
|
||||
4. 优惠资产区
|
||||
5. 备注与附加信息区
|
||||
6. 费用明细区
|
||||
7. 底部支付栏
|
||||
|
||||
## 2. 区块说明
|
||||
|
||||
### 2.1 场景信息卡
|
||||
- 外卖:展示收货地址、预计送达
|
||||
- 自提:展示门店、自提时间、取餐人信息
|
||||
- 堂食:展示门店、桌号、堂食说明
|
||||
|
||||
### 2.2 商品清单区
|
||||
- 展示商品、规格、加料、数量、小计
|
||||
|
||||
### 2.3 优惠资产区
|
||||
- 使用 `G32`
|
||||
- 入口包含:
|
||||
- 优惠券选择
|
||||
- 积分抵扣
|
||||
- 储值余额支付
|
||||
- 次卡核销(适用时)
|
||||
|
||||
### 2.4 备注与附加信息区
|
||||
- 订单备注
|
||||
- 餐具选择
|
||||
- 其他补充字段(按场景可选)
|
||||
|
||||
### 2.5 费用明细区
|
||||
- 使用 `G31`
|
||||
- 必须清楚展示所有金额构成
|
||||
|
||||
### 2.6 底部支付栏
|
||||
- 使用 `G35`
|
||||
- 左侧显示实付金额
|
||||
- 右侧主按钮:提交订单并支付
|
||||
|
||||
## 3. 场景差异
|
||||
|
||||
### 外卖
|
||||
- 必须完成地址校验、起送价校验
|
||||
|
||||
### 自提
|
||||
- 必须完成自提时间选择和取餐人信息校验
|
||||
|
||||
### 堂食
|
||||
- 必须展示桌号,不展示配送相关字段
|
||||
|
||||
## 4. 页面状态
|
||||
|
||||
- 优惠不可用时展示原因
|
||||
- 地址超范围时禁止提交
|
||||
- 门店休息时禁止支付
|
||||
|
||||
## 5. 实现备注
|
||||
|
||||
- 结算页核心是“信息确认 + 金额确认”
|
||||
- 所有会影响实付金额的项目都必须可见
|
||||
|
||||
Reference in New Issue
Block a user