docs: split prototype specs and add execution guides
This commit is contained in:
44
docs/07-页面规格/19-积分商城页.md
Normal file
44
docs/07-页面规格/19-积分商城页.md
Normal file
@@ -0,0 +1,44 @@
|
||||
# P13 积分商城页
|
||||
|
||||
- 页面编码:`P13`
|
||||
- 页面层级:`二级页`
|
||||
- 页面目标:展示积分余额、可兑换商品和兑换记录
|
||||
- 主要依赖组件:`G01`
|
||||
|
||||
## 1. 页面结构(从上到下)
|
||||
|
||||
1. 顶部导航栏
|
||||
2. 积分余额头部区
|
||||
3. Tab 切换区
|
||||
4. 兑换商品列表区 / 兑换记录区
|
||||
|
||||
## 2. 区块说明
|
||||
|
||||
### 2.1 积分余额头部区
|
||||
- 展示当前积分余额
|
||||
- 展示积分获取说明入口(可选)
|
||||
|
||||
### 2.2 Tab 切换区
|
||||
- 兑换商品
|
||||
- 兑换记录
|
||||
|
||||
### 2.3 兑换商品列表区
|
||||
- 商品卡展示:
|
||||
- 商品图片
|
||||
- 商品名称
|
||||
- 所需积分
|
||||
- 库存 / 数量说明
|
||||
- 立即兑换
|
||||
|
||||
### 2.4 兑换记录区
|
||||
- 展示兑换时间、兑换内容、状态
|
||||
|
||||
## 3. 页面状态
|
||||
|
||||
- 默认态:有商品可兑
|
||||
- 空态:暂无可兑换商品
|
||||
|
||||
## 4. 实现备注
|
||||
|
||||
- 积分商城强调“积分能干什么”,不要只展示数值
|
||||
|
||||
Reference in New Issue
Block a user