2.2 KiB
2.2 KiB
T01 首页
- 页面编码:
T01 - 页面层级:
Tab - 适用场景:
外卖 / 自提 / 堂食导流 - 页面目标:完成选店、选场景、看活动、快速进入点餐
- 主要依赖组件:
G02、G10、G11、G12、G13、G21
1. 页面结构(从上到下)
- 顶部信息区
- 门店切换条
- 场景切换条
- Banner 活动区
- 快捷入口区
- 推荐商品区
- 门店服务信息区
2. 区块说明
2.1 顶部信息区
- 左侧显示当前位置 / 当前门店简称
- 右侧显示消息入口
- 点击门店或位置进入
P01 门店选择页 - 点击消息入口进入
P16 消息中心页
2.2 门店切换条
- 使用
G10 - 显示当前门店名称、营业状态、距离
- 支持点击切换门店
2.3 场景切换条
- 使用
G11 - 固定提供
外卖、自提、堂食三项 - 切换后刷新下方活动和推荐内容
2.4 Banner 活动区
- 展示门店主推活动轮播
- Banner 点击可跳转:
P09 领券中心页P10 秒杀活动页P11 限时折扣活动页P12 会员中心页
2.5 快捷入口区
- 建议 2 行网格或 1 行宫格
- 包含以下入口:
- 新客有礼
- 领券中心
- 满减活动
- 秒杀专区
- 限时折扣
- 储值充值
- 次卡专区
- 会员中心
2.6 推荐商品区
- 按顺序展示:
- 热销推荐
- 套餐推荐
- 复购推荐
- 猜你喜欢
- 每个区块使用横滑或纵向卡片列表
- 商品卡点击进入
C01 商品详情抽屉
2.7 门店服务信息区
- 使用
G12+G13 - 展示:
- 营业时间
- 配送范围 / 起送价 / 配送费
- 自提规则
- 堂食规则
- 联系门店
- 到店导航
3. 页面主动作
- 切换门店
- 切换场景
- 进入点餐页
- 进入活动页
- 打开商品详情
4. 页面状态
默认态
- 有门店、有活动、有推荐商品
空态
- 无可用门店时展示空态,并提供重新定位
- 无活动时隐藏活动区,保留推荐区
异常态
- 定位失败时提示手动选店
- 门店休息时展示“休息中”,但可保留浏览
5. 实现备注
- 首页优先是“导流页”,不是深度浏览页
- 推荐商品只展示摘要,不在首页直接承载复杂选配