客户端小程序 — 首页

概述

对应主文档 §8.8（首页运营与客服入口）

首页是用户进入小程序后的第一个页面，定位为品牌展示与核心转化入口。首页需在首屏即传达品牌形象，快速告知用户门店位置与实时状态，并引导用户完成注册→录脸→购买→入场的关键转化链路。

核心设计原则：

视觉冲击力优先：首屏以品牌形象图 + 核心数据为主，强化品牌认知
门店信息一站式呈现：用户无需跳转即可获取导航、设施、环境等关键信息
转化入口高权重：会员卡办理（产品列表）始终可见，未登录时以优惠引导登录
私域引导自然融入：加店长企微的入口穿插在合适场景中，不突兀

页面路由

路由	页面	说明
`/pages/index/index`	首页	TabBar 页

页面区块设计

按从上到下的视觉顺序排列，每个区块占满屏幕宽度。

1. 品牌视觉区（首屏 Hero）

首屏 Banner 支持按用户标签进行分层运营，不同用户群体看到不同的 Banner 内容。

要素	说明
品牌 Banner	全宽大图（建议比例 16:9），展示品牌形象或促销活动
品牌叠加层	半透明渐变遮罩，底部叠加文字信息
品牌 Slogan	如「24H 无人智能健身，随时随地开练」（运营可配置）
门店切换	右上角切换当前查看的门店（弹出门店选择器）

Banner 分层运营规则：

管理后台可为 Banner 配置适用人群标签，前端根据用户标签匹配展示：

人群标签	说明	Banner 示例
新用户	`tags` 包含 `NEW_USER`	「新人首月 19.9 元，限时体验」
未购卡用户	`tags` 包含 `NO_MEMBERSHIP`	「月卡 99 元起，全城通用」
活跃用户	`tags` 包含 `ACTIVE`（近 30 天到店 ≥ 3 次）	「连续打卡 7 天，赠送额外淋浴时长」
沉默用户	`tags` 包含 `SILENT`（近 30 天未到店）	「好久不见！回来就送 3 天体验卡」
即将到期	`tags` 包含 `EXPIRING_SOON`	「续费年卡享 8 折优惠」
VIP 用户	`tags` 包含 `VIP`	「VIP 专属：私教课程免费体验 1 次」
全部用户	默认，无标签过滤	品牌形象图 / 通用活动

Banner 匹配优先级：

精确匹配用户标签的 Banner（优先展示）
「全部用户」Banner（兜底）
同优先级内按管理后台排序值排列
最多展示 1 张首屏 Banner（与下方活动轮播区分）

门店选择器（底部弹窗）：

按距离排序的门店列表（需定位权限）
每项展示：门店名称、地址摘要、距离、营业状态标签
门店公告：如该门店有公告，在门店名称下方以灰色小字展示公告摘要（最多一行，超出省略号）
- 公告为空时自动隐藏，不占空间
- 点击门店展开后可查看公告全文
选择后刷新整个首页数据
「查看全部门店 >」跳转门店列表页

2. 门店核心信息卡片

展示用户当前选中门店的关键信息，帮助用户快速决策是否到店。

要素	说明
门店名称	大字标题
营业状态	`营业中`（绿色）/ `暂停营业`（灰色）/ `装修中`（橙色）
距离信息	如「距您 1.2km」；未授权定位时显示「—」
门店面积	如「300㎡」，管理后台配置
营业时间	如「24 小时营业」或「06:00 - 23:00」

门店公告（位于门店核心信息卡片内，营业时间下方）：

要素	说明
展示条件	仅当该门店有未过期的公告时显示
公告内容	公告文本，最多展示 2 行，超出显示「查看全文 >」
展开/收起	点击可展开查看完整公告（富文本）
无公告时	整个区域自动隐藏，不占空间
多条公告	如有多条，按发布时间倒序展示，每条独立展开/收起

门店特色标签（横向滚动/换行排列，管理后台可配置）：

标签示例	说明
🅿️ 免费停车	门店是否提供免费停车位
🔋 充电宝	是否有共享充电宝设备
🥤 自助售卖机	是否有饮料/零食售卖机
🚿 淋浴间	是否提供淋浴服务
🔒 独立更衣室	是否有独立更衣空间
💧 饮水机	是否有直饮水设备
📶 免费 WiFi	是否提供 WiFi

门店特色设备展示：

展示门店的核心器械设备（如力量区、有氧区、自由力量区等）
图片缩略图 + 设备区名称，横向滚动
管理后台可配置展示顺序和图片

3. 实时门店状态

展示门店的实时运营数据和环境信息，增强用户到店意愿。

要素	说明	数据来源
在场人数	如「当前 12 人在练」	工控机 / 刷脸统计
温湿度	如「室内 24°C · 湿度 45%」	温湿度传感器（MQTT 推送）
门店实景照片	轮播展示门店环境照片（门头、器械区、休息区等）	管理后台上传
门店公告	如「周三器械维护，部分区域暂停使用」	管理后台配置

实时数据刷新策略：

在场人数：进入首页时请求一次，WebSocket 推送实时更新
温湿度：进入首页时请求一次，每次页面回到前台时刷新
如传感器离线，该区块不隐藏，显示「环境数据暂不可用」

4. 导航到店区

占据足够的视觉面积，引导用户一键导航到店。

要素	说明
静态地图	以门店 POI 为中心的地图截图/预览（管理后台配置）
地图面积	建议占屏幕宽度 100%、高度 180-240px，视觉突出
详细地址	完整地址文本
交通提示	如「地铁 X 号线 XX 站 B 出口步行 5 分钟」
导航按钮	大按钮「导航到店」→ 调起微信/系统地图导航

导航逻辑：

调用 wx.openLocation 打开微信内置地图
如无定位权限，引导授权或显示地址文本供用户自行搜索

5. 状态提醒区

针对已登录用户的个性化提醒，引导完成关键动作。未登录用户不显示此区块，替换为登录引导。

已登录用户 — 提醒优先级（同一时间最多展示 1 条）：

优先级	条件	提醒文案	操作按钮
1	未录脸	「请完成人脸录入，录入后即可入场」	「立即录入」→ 人脸录入页
2	有待支付订单	「您有一笔待支付订单即将超时」	「去支付」→ 订单详情页
3	权益即将到期（≤7天）	「您的月卡将于 X 天后到期」	「续费」→ 产品列表页
4	无有效权益	「暂无会员权益，开通后即可入场」	「立即购买」→ 产品列表页
5	全部正常	不显示提醒区	—

6. 会员卡办理（核心转化入口）

首页最重要的转化区块，始终可见，视觉权重最高。

要素	说明
标题	如「开通会员 · 随时开练」
套餐卡片列表	展示 2-4 个推荐套餐，按运营配置排序
套餐卡片内容	套餐名称、价格（原价+现价）、有效期、核心权益摘要、购买按钮
「查看全部套餐 >」	跳转产品列表页

套餐卡片信息：

字段	说明
套餐名称	如「月卡」「季卡」「年卡」「体验卡」
价格	现价（大字）+ 原价（删除线，如适用）
有效期	如「30 天」「90 天」
权益摘要	如「不限次数 · 全城通用 · 含淋浴」
标签	「最受欢迎」「限时优惠」「新人专享」等运营标签
购买按钮	「立即开通」→ 套餐详情页

未登录用户：

套餐价格隐藏，显示「登录查看优惠价格」
点击任意套餐 → 跳转登录页 → 登录成功后返回首页 → 自动展开套餐区
此设计利用价格好奇心驱动注册转化

7. 外部券码核销入口

为抖音、美团等渠道到店用户提供快速核销入口。

要素	说明
抖音团购	图标 + 「抖音团购券」→ 跳转券码核销页
美团团购	图标 + 「美团团购券」→ 跳转券码核销页
更多券码	「手动输入券码」→ 跳转券码核销页

详细 PRD：外部券码核销

8. 快捷功能入口

入口	显示条件	说明
🚿 淋浴控制	仅在门店内时显示（最近进店记录存在）	跳转淋浴控制页
📷 人脸录入	仅在未录脸时显示	跳转人脸录入页
📦 我的订单	已登录时显示	跳转订单列表页
🏋️ 动作库	始终可见	跳转动作库列表页

要素	说明
轮播	1-3 张活动 Banner，自动轮播 + 手动滑动
Banner 内容	活动封面图 + 文案，由管理后台配置
跳转	点击跳转至配置的目标页（门店/套餐/活动详情/自定义链接）
无活动时	隐藏整个区块

10. 联系客服 & 器械咨询

要素	说明
联系客服	跳转微信客服对话（`wx.openCustomerServiceChat` 或 Button open-type）
器械咨询	跳转客服对话，预填问题模板「想咨询 XX 门店的器械设备」
客服在线状态	展示「在线」或「离线」标签

11. 私域引导：加店长企微

自然融入页面的私域引导，目标是将小程序用户沉淀到企业微信。

要素	说明
展示位置	页面底部，客服区域下方
展示形式	店长头像（企微头像）+ 昵称 + 「添加店长企微，享受专属优惠」
触发方式	点击跳转企微添加页（`wx.openCustomerServiceChat` 或企微联系卡片）
每个门店独立	店长企微与门店绑定，切换门店后自动更新

引导时机（多点位触达）：

触发场景	引导方式
首页底部	固定展示店长企微卡片
支付成功后	支付结果页底部「添加店长，获取训练指导」
会员即将到期	提醒区文案中附带「联系店长享续费优惠」
首次进店后	下次进入首页时弹出「欢迎来到 XX 门店，添加店长了解更多」

未登录用户首页策略

核心目标：用优惠价格驱动登录，不做强制登录拦截。

未登录时首页差异

区块	已登录	未登录
品牌视觉区	正常展示	正常展示
门店核心信息	正常展示	正常展示
实时门店状态	正常展示（在场人数可见）	正常展示
导航到店区	正常展示	正常展示
状态提醒区	个性化提醒	不显示
会员卡办理	显示价格	价格隐藏，显示「登录查看优惠价格」
外部券码	可用	可用（核销时再引导登录）
快捷入口	全部展示	仅显示「动作库」，其他入口引导登录
活动 Banner	正常展示	正常展示
客服 & 私域	正常展示	正常展示

登录引导流程

用户点击「登录查看优惠价格」或需登录的入口
  → 跳转登录页
  → 登录成功
  → 返回首页
  → 自动展开会员卡办理区块，展示实际价格

数据刷新与缓存

数据类型	刷新策略	缓存
门店基本信息	进入首页时 + 切换门店时请求	本地缓存，30 分钟过期
在场人数	WebSocket 实时推送	不缓存
温湿度	进入首页时 + 页面回到前台时	本地缓存，5 分钟过期
套餐列表	进入首页时请求	本地缓存，10 分钟过期
活动 Banner	进入首页时请求	本地缓存，30 分钟过期
门店照片	进入首页时请求 + 管理后台配置时推送更新	本地缓存，1 小时过期
店长企微信息	进入首页时请求	本地缓存，30 分钟过期

异常处理

异常	处理
门店信息加载失败	展示骨架屏 → 错误态「门店信息加载失败」+ 重试按钮
定位权限拒绝	距离显示「—」，门店不按距离排序，提示「开启定位查看最近门店」
传感器离线（温湿度）	不隐藏区块，显示「环境数据暂不可用」
在场人数接口失败	显示缓存值（如有），无缓存时显示「—」
套餐列表为空	显示空态插画 + 「暂无可用套餐」
Banner 加载失败	不展示该 Banner，不影响其他区块
网络完全断开	首页展示本地缓存数据 + 顶部横幅「当前为离线数据，部分信息可能过期」

接口汇总

text

# 门店核心信息
GET /api/v1/stores/:id
  Response: Store {
    id, name, address, latitude, longitude,
    businessHours, status, area,
    description, facilities[],
    featuredEquipments[],
    announcements[],
    wechatContact { name, avatarUrl, qrCodeUrl },
    photos: StorePhoto[]
  }

# 门店实时状态
GET /api/v1/stores/:id/realtime
  Response: {
    currentOccupancy: number,        // 当前在场人数
    temperature: number | null,      // 温度（℃）
    humidity: number | null,         // 湿度（%）
    sensorOnline: boolean            // 传感器是否在线
  }

# WebSocket 推送 — 在场人数实时更新
WS /ws/store/:id/occupancy
  Message: { type: "occupancy_update", count: number }

# 首页推荐套餐
GET /api/v1/products/recommend
  Query: { storeId, count? }
  Response: { items: Product[] }

# 活动 Banner
GET /api/v1/activities/banners
  Query: { storeId? }
  Response: { items: ActivityBanner[] }

# 首屏 Hero Banner（分层运营）
GET /api/v1/config/hero-banner
  Auth: JWT（未登录时传匿名 token 或不传）
  Query: { storeId }
  Response: {
    image: string,          // Banner 图片 URL
    slogan: string,         // 文案
    jumpType: string,       // none / product / activity / link
    jumpTarget: string,     // 跳转目标 ID 或 URL
    tagFilter: string[]     // 后台配置的适用人群标签
  }

管理后台配置依赖

以下首页展示内容需在管理后台配置：

配置项	所在模块	说明
门店基本信息（面积、营业时间等）	门店管理 → 基本资料	门店维度
门店特色设施标签	门店管理 → 基本资料 → 设施	多选枚举
门店特色设备	门店管理 → 基本资料	图片 + 名称，排序
门店实景照片	门店管理 → 门店照片	图集，封面
门店公告	门店管理 → 门店公告	富文本
温湿度传感器	门店管理 → 设备管理	传感器绑定 + 告警阈值
推荐套餐排序	产品管理 → 产品列表	按门店配置推荐权重
活动 Banner	营销 → 活动管理	图片 + 跳转配置
首屏 Hero Banner	营销 → Banner 管理	图片 + Slogan + 跳转 + 适用人群标签
店长企微信息	门店管理 → 基本资料	企微姓名、头像、二维码

客户端小程序 — 门店浏览

上级文档：客户端小程序

概述

对应主文档 §8.2

门店浏览为用户提供全部门店的搜索与详情查看能力。首页已展示最近门店的核心信息，门店列表页提供更多选择与搜索能力，门店详情页提供完整信息与导航。

页面路由

路由	页面	说明
`/pages/store/list`	门店列表	附近门店搜索
`/pages/store/detail`	门店详情	门店完整信息 + 导航 + 套餐入口

门店列表页要素

返回按钮 + 「门店」标题
搜索栏：关键词搜索门店名称
门店卡片列表（复用首页门店卡片样式）

门店列表字段

字段	说明
门店名称	`name`（多语言）
地址摘要	省市区 + 路名（多语言）
距离	需定位权限；未授权时显示「获取位置」
营业状态	`营业中` / `暂停营业` / `装修中`
基础设施标签	更衣室 / 停车位 / 淋浴等
在场人数	如「12 人在练」（与首页实时数据接口一致）

门店排序规则

授权定位时：按距离升序
未授权定位时：按创建时间升序
暂停营业/装修中门店不隐藏，但标注状态并置底

门店详情页要素

导航地图区（大面积静态地图预览 + 「导航到店」大按钮）
门店名称 + 营业状态 + 面积
营业时间 + 详细地址 + 交通信息
门店公告（有公告时显示，无公告时隐藏；同首页规则）
门店特色标签（设施、设备）
温湿度实时数据（与首页同接口）
门店实景照片轮播
门店介绍文字
在场人数
「查看可用套餐」按钮 → 跳转产品列表页（带 storeId）
店长企微卡片（与首页同组件）

门店异常处理

异常	处理
列表加载失败	展示错误态 + 「重试」
门店暂停营业	不隐藏，显示「暂停营业」+ 不可到店提示
套餐受门店限制	门店详情页明确提示「该门店适用以下套餐」

客户端小程序 — 推广活动

上级文档：客户端小程序

概述

对应主文档 §8.10

页面路由

路由	页面	说明
`/pages/activity/list`	活动列表	全部营销活动
`/pages/activity/detail`	活动详情	活动规则 + 参与方式

活动展示位置

位置	说明
首页 Banner 轮播	1-3 张活动 Banner，可左右滑动
活动列表页	全部活动列表
活动详情页	活动规则、参与方式、跳转

字段	说明
标题	Banner 文案（多语言）
图片	Banner 背景图
跳转类型	无 / 门店页 / 套餐列表 / 套餐详情 / 自定义链接
跳转目标	对应的页面 ID 或 URL
排序	展示顺序
上线时间	活动展示时间范围

活动列表页要素

活动卡片：封面图 + 标题 + 价格 + 活动时间
「查看详情 >」跳转
已结束的活动标注「已结束」或隐藏

活动异常处理

Banner 加载失败：不展示该 Banner，不影响其他区块
活动下线/失效：列表中标注「已结束」或隐藏

客户端小程序 — 动作库

上级文档：客户端小程序

概述

对应主文档 §8.9

页面路由

路由	页面	说明
`/pages/exercise/list`	动作库列表	按部位分类浏览
`/pages/exercise/detail`	动作详情	图文/视频 + 说明

动作库列表页要素

返回按钮 + 「动作库」标题
搜索栏：关键词搜索动作名称
部位 Tab：胸部 / 背部 / 腿部 / 肩部 / 核心 / 手臂
动作卡片列表：缩略图 + 动作名称 + 部位 + 难度

动作详情页要素

返回按钮 + 动作名称
素材展示区：图片或视频
基础信息：部位、难度、器械类型
动作说明：详细步骤
注意事项：安全提示

动作库字段

字段	说明
动作名称	`name`（多语言）
部位	胸部/背部/腿部/肩部/核心/手臂
难度	初级/中级/高级
器械	杠铃/哑铃/固定器械/徒手
素材	图片或视频 URL
动作说明	详细步骤（多语言）
注意事项	安全提示（多语言）

动作库异常处理

异常	处理
列表加载失败	展示错误态 + 「重试」
素材缺失	展示默认占位图 + 说明文字
搜索无结果	展示空态 + 「清除搜索」

接口汇总（门店 / 活动 / 动作库）

text

# 门店
GET /api/v1/stores
  Query: { latitude?, longitude?, keyword?, page, pageSize }
  Response: { items: Store[], total: number }

GET /api/v1/stores/:id
  Response: Store { ...全部字段, facilities, description }

# 活动
GET /api/v1/activities
  Query: { status?, page, pageSize }
  Response: { items: Activity[], total: number }

GET /api/v1/activities/:id
  Response: Activity

# 动作库
GET /api/v1/exercises
  Query: { part?, keyword?, page, pageSize }
  Response: { items: Exercise[], total: number }

GET /api/v1/exercises/:id
  Response: Exercise

客户端小程序 — 首页 ​

概述 ​

页面路由 ​

页面区块设计 ​

1. 品牌视觉区（首屏 Hero） ​

2. 门店核心信息卡片 ​

3. 实时门店状态 ​

4. 导航到店区 ​

5. 状态提醒区 ​

6. 会员卡办理（核心转化入口） ​

7. 外部券码核销入口 ​

8. 快捷功能入口 ​

9. 活动 Banner ​

10. 联系客服 & 器械咨询 ​

11. 私域引导：加店长企微 ​

未登录用户首页策略 ​

未登录时首页差异 ​

登录引导流程 ​

数据刷新与缓存 ​

异常处理 ​

接口汇总 ​

管理后台配置依赖 ​

客户端小程序 — 门店浏览 ​

概述 ​

页面路由 ​

门店列表页要素 ​

门店列表字段 ​

门店排序规则 ​

门店详情页要素 ​

门店异常处理 ​

客户端小程序 — 推广活动 ​

概述 ​

页面路由 ​

活动展示位置 ​

活动 Banner 配置（管理后台） ​

活动列表页要素 ​

活动异常处理 ​

客户端小程序 — 动作库 ​

概述 ​

页面路由 ​

动作库列表页要素 ​

动作详情页要素 ​

动作库字段 ​

动作库异常处理 ​

接口汇总（门店 / 活动 / 动作库） ​

客户端小程序 — 首页

概述

页面路由

页面区块设计

1. 品牌视觉区（首屏 Hero）

2. 门店核心信息卡片

3. 实时门店状态

4. 导航到店区

5. 状态提醒区

6. 会员卡办理（核心转化入口）

7. 外部券码核销入口

8. 快捷功能入口

9. 活动 Banner

10. 联系客服 & 器械咨询

11. 私域引导：加店长企微

未登录用户首页策略

未登录时首页差异

登录引导流程

数据刷新与缓存

异常处理

接口汇总

管理后台配置依赖

客户端小程序 — 门店浏览

概述

页面路由

门店列表页要素

门店列表字段

门店排序规则

门店详情页要素

门店异常处理

客户端小程序 — 推广活动

概述

页面路由

活动展示位置

活动 Banner 配置（管理后台）

活动列表页要素

活动异常处理

客户端小程序 — 动作库

概述

页面路由

动作库列表页要素

动作详情页要素

动作库字段

动作库异常处理

接口汇总（门店 / 活动 / 动作库）