Files
C-end.MiniProgram.Prototype/docs/07-页面规格/01-Tab-首页.md

2.2 KiB

T01 首页

  • 页面编码:T01
  • 页面层级:Tab
  • 适用场景:外卖 / 自提 / 堂食导流
  • 页面目标:完成选店、选场景、看活动、快速进入点餐
  • 主要依赖组件:G02G10G11G12G13G21

1. 页面结构(从上到下)

  1. 顶部信息区
  2. 门店切换条
  3. 场景切换条
  4. Banner 活动区
  5. 快捷入口区
  6. 推荐商品区
  7. 门店服务信息区

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. 实现备注

  • 首页优先是“导流页”,不是深度浏览页
  • 推荐商品只展示摘要,不在首页直接承载复杂选配