2.2 KiB
2.2 KiB
T02 点餐页
- 页面编码：
T02 - 页面层级：
Tab - 适用场景：
外卖 / 自提 / 堂食 - 页面目标：完成商品浏览、选配、加购和进入结算
- 主要依赖组件：
G10、G11、G20、G21、G22、G25
1. 页面结构（从上到下）
- 顶部门店条
- 场景切换条
- 搜索与活动提示条
- 菜单主区域
- 底部购物车栏
2. 区块说明
2.1 顶部门店条
- 显示当前门店名称、营业状态
- 点击进入
P01 门店选择页 - 门店切换需要提示购物车风险
2.2 场景切换条
- 显示
外卖 / 自提 / 堂食 - 切换时刷新：
- 商品可售状态
- 服务规则说明
- 价格与优惠提示
2.3 搜索与活动提示条
- 搜索框：按商品名搜索
- 活动条：显示当前命中的满减、秒杀、折扣等活动摘要
2.4 菜单主区域
- 左侧或顶部为分类导航
G20 - 右侧或主体为商品列表
- 每个商品卡
G21展示：- 图片
- 名称
- 描述摘要
- 标签
- 价格 / 划线价
- 加购按钮
- 点击商品卡进入
C01 商品详情抽屉 - 直接点击步进器可快速加购默认 SKU
2.5 底部购物车栏
- 使用
G25 - 展示：
- 已选商品件数
- 当前总金额
- 差多少起送 / 差多少免配送费
- 去结算按钮
- 点击购物车区域打开
C02 购物车抽屉
3. 场景差异规则
外卖场景
- 突出显示配送费、起送价、预计送达
自提场景
- 突出显示自提优惠、自提时段说明
堂食场景
- 突出显示桌号、当前门店、可加菜提示
4. 页面主动作
- 切换门店
- 切换场景
- 搜索商品
- 打开商品详情抽屉
- 打开购物车抽屉
- 进入结算确认页
5. 页面状态
默认态
- 有分类、有商品、有活动提示
空态
- 某分类无商品时，右侧显示空态
- 搜索无结果时，提供清空搜索入口
异常态
- 当前门店休息：商品可浏览但不能结算
- 商品售罄：显示禁用状态，不能加购
6. 实现备注
- 点餐页是整套小程序最核心页面，需要优先保证信息密度和操作效率
- 商品详情、购物车应通过抽屉承载，尽量不跳转新页面