# T02 点餐页

- 页面编码：`T02`
- 页面层级：`Tab`
- 适用场景：`外卖 / 自提 / 堂食`
- 页面目标：完成商品浏览、选配、加购和进入结算
- 主要依赖组件：`G10`、`G11`、`G20`、`G21`、`G22`、`G25`

## 1. 页面结构（从上到下）

1. 顶部门店条
2. 场景切换条
3. 搜索与活动提示条
4. 菜单主区域
5. 底部购物车栏

## 2. 区块说明

### 2.1 顶部门店条
- 显示当前门店名称、营业状态
- 点击进入 `P01 门店选择页`
- 门店切换需要提示购物车风险

### 2.2 场景切换条
- 显示 `外卖 / 自提 / 堂食`
- 切换时刷新：
  - 商品可售状态
  - 服务规则说明
  - 价格与优惠提示

### 2.3 搜索与活动提示条
- 搜索框：按商品名搜索
- 活动条：显示当前命中的满减、秒杀、折扣等活动摘要

### 2.4 菜单主区域
- 左侧或顶部为分类导航 `G20`
- 右侧或主体为商品列表
- 每个商品卡 `G21` 展示：
  - 图片
  - 名称
  - 描述摘要
  - 标签
  - 价格 / 划线价
  - 加购按钮
- 点击商品卡进入 `C01 商品详情抽屉`
- 直接点击步进器可快速加购默认 SKU

### 2.5 底部购物车栏
- 使用 `G25`
- 展示：
  - 已选商品件数
  - 当前总金额
  - 差多少起送 / 差多少免配送费
  - 去结算按钮
- 点击购物车区域打开 `C02 购物车抽屉`

## 3. 场景差异规则

### 外卖场景
- 突出显示配送费、起送价、预计送达

### 自提场景
- 突出显示自提优惠、自提时段说明

### 堂食场景
- 突出显示桌号、当前门店、可加菜提示

## 4. 页面主动作

- 切换门店
- 切换场景
- 搜索商品
- 打开商品详情抽屉
- 打开购物车抽屉
- 进入结算确认页

## 5. 页面状态

### 默认态
- 有分类、有商品、有活动提示

### 空态
- 某分类无商品时，右侧显示空态
- 搜索无结果时，提供清空搜索入口

### 异常态
- 当前门店休息：商品可浏览但不能结算
- 商品售罄：显示禁用状态，不能加购

## 6. 实现备注

- 点餐页是整套小程序最核心页面，需要优先保证信息密度和操作效率
- 商品详情、购物车应通过抽屉承载，尽量不跳转新页面