抖音小程序 - 健身馆
源码摘要（源码用途） 项目名称：抖音小程序 - 健身馆 【源码用途】 本源码是一套原生抖音小程序前端工程，用于健身馆的线上运营与会员服务管理。 项目为纯前端实现，不调用任何后端 API，所有数据通过 tt.setStorageSync 持久化 在本机存储，开箱即用，无需服务器。 主要用途包括： 1. 课程管理 —— 展示团操课程（有氧燃脂/力量塑形/柔韧冥想），支持分类筛选与搜索。 2. 课程预约 —— 选择日期与时段完成预约，预约记录可查看与取消。 3. 教练展示 —— 私教团队介绍，含资质、擅长领域、学员评价。 4. 自由训练 —— 内置计时训练器，含训练清单勾选，完成后自动写入训练记录。 5. 数据看板 —— 本周训练次数、消耗千卡、训练时长统计，周训练柱形图。 6. 会员中心 —— 会员卡、钱包、优惠券、主题换肤（5 套配色）。 【技术栈】 - 原生抖音小程序（TTML + TTSS + JS），douyinProjectType: native - 图标：IconPark 官方 PNG 图标包（assets/icon 46 枚 + tabbar 8 枚） - 图表：纯 CSS 柱形图 + 进度环，零三方依赖 - 数据层：utils/store.js 本地存储 + 时间戳版本号强制清理机制 【自适应】 全部使用 rpx 单位 + flex 布局，flex 项统一 flex-basis + min-width:0， 保证不同尺寸手机显示布局一致。 【缓存机制】 版本号取 Date.now() 时间戳，每次冷启动必然与本地不一致，触发 clearStorageSync 全清 + 重写最新数据，保证每次真机调试都是全新状态。 【目录结构】 健身馆/ ├── app.js / app.json / app.ttss 全局配置与设计 Token ├── project.config.json 抖音开发者工具配置 ├── components/ │ ├── icon/ 图标组件（PNG 渲染） │ └── tabbar/ 自定义底部导航 ├── utils/store.js 数据层（示例数据 + 存储 + 主题） ├── assets/ │ ├── icon/ 46 个业务图标 PNG │ └── tabbar/ 8 个导航图标 PNG └── pages/ ├── index/ 首页（总览仪表盘） ├── courses/ 课程列表（分类 + 搜索） ├── coaches/ 教练团队 ├── courseDetail/ 课程详情 ├── booking/ 课程预约 ├── workout/ 自由训练 └── my/ 我的（会员 + 主题 + 记录） 【运行方式】 1. 用「抖音开发者工具」打开「健身馆」目录。 2. 填入自己的 AppID（或测试号）。 3. 点击编译即可预览；首次进入自动写入示例数据。
商品详情介绍
商品详情介绍
抖音小程序 - 健身馆
一款面向健身场馆的会员服务小程序。从课程浏览、预约上课到训练记录，
覆盖健身馆日常运营的完整闭环，配合精致的界面与流畅交互，让运动更有动力。
一、功能介绍
1. 首页 · 训练总览
- 沉浸式渐变 Hero：健身馆信息 + 今日训练计划卡（一键开始训练）。
- 本周数据看板：训练次数、消耗千卡、训练时长三大核心指标。
- 周训练柱形图：直观展示一周训练分布，彩色渐变柱体。
- 快捷入口：全部课程、私教团队、开始训练、我的会员。
- 热门课程横滑：按预约热度排序，封面 + 评分 + 预约人数。
- 明星教练横滑：教练头像、头衔、擅长标签、评分学员数。
- 场馆设施展示：力量区、有氧区、团操教室、泳池桑拿。
2. 课程中心
- 关键词搜索：按课程名称、标签搜索。
- 分类筛选：有氧燃脂 / 力量塑形 / 柔韧冥想三大类。
- 课程卡片：封面渐变 + 强度指示点 + 课程标签 + 千卡/时长/预约数。
- 空态引导：无结果时友好提示。
3. 课程详情
- 沉浸式封面：课程名、描述、评分、预约人数。
- 核心数据：消耗千卡、时长、强度等级。
- 课程安排：上课时间、班容、适合人群。
- 授课教练：教练卡片，可跳转教练团队。
- 训练收益：标签化展示训练成果。
- 底部预约栏：收藏 + 立即预约。
4. 课程预约（重点）
- 选日期：横向 7 天滚动（今天/明天/周X）。
- 选时段：多个时段可选，显示剩余名额，满员禁用。
- 预约须知：取消规则、签到提醒。
- 预约成功动画：自动写入"我的预约"。
5. 教练团队
- 教练卡片：渐变头部 + 头像 + 资质标签 + 评分徽章。
- 数据展示：年经验、学员数、课程数。
- 操作入口：咨询、预约课程。
6. 自由训练（亮点）
- 计时圆盘：大号渐变计时器，实时显示训练时长。
- 实时数据：消耗千卡（按时间估算）、完成项目数。
- 训练控制：开始 / 暂停 / 继续 / 完成。
- 训练清单：6 项标准动作，可点击勾选，已完成项划线。
- 完成页：训练成果汇总（时长/千卡/项目），写入记录。
7. 我的 · 会员中心
- 会员主页：VIP 身份、年卡有效期、本周数据。
- 我的预约：待上课/已完成，可取消预约。
- 训练记录：时间线展示历史训练。
- 主题换肤：5 套配色（活力橙/力量黑/深海蓝/森林绿/暗夜紫），全局实时切换。
- 服务菜单：会员卡、钱包、优惠券、健身档案。
- 重置数据：一键恢复初始示例数据（带二次确认）。
二、界面与体验亮点
- 沉浸式渐变设计：每个页面顶部使用主题渐变，配合毛玻璃卡片与光斑装饰。
- 5 套主题色：活力橙、力量黑、深海蓝、森林绿、暗夜紫，全局变量驱动，图表与按钮同步变色。
- 46 枚图标体系：IconPark 官方 PNG 图标，白色滤镜适配彩色背景。
- 流畅动画：卡片逐级渐入、柱形生长动画、预约成功弹窗。
- 训练计时器：渐变圆盘 + 大号数字，沉浸式训练体验。
- 自定义导航与 TabBar：胶囊安全区适配，活跃标签圆形高亮。
三、使用场景
| 角色 | 场景 |
|---|---|
| 健身馆会员 | 浏览课程、预约上课、记录训练、查看个人数据。 |
| 潜在客户 | 了解场馆设施、教练团队、课程特色，转化为会员。 |
| 健身爱好者 | 使用自由训练功能，居家或健身房自主训练计时。 |
| 场馆运营 | 作为数字化会员服务前台，提升会员粘性与活跃度。 |
| 小程序开发者 | 学习原生抖音小程序 UI、本地存储、主题换肤方案。 |
四、交付内容
项目源码（zip 压缩包）
- 完整的抖音小程序原生工程，含 7 个页面、2 个自定义组件、数据层。
- 文件：
健身馆源码.zip
项目标题文档
- 文件：
项目标题.txt
- 文件：
源码摘要文档（源码用途）
- 含技术栈、目录结构、运行方式、缓存机制。
- 文件：
源码摘要.txt
商品详情介绍文档（本文档）
- 含功能介绍、界面亮点、使用场景、交付内容。
- 文件：
商品详情介绍.md
五、技术规格
- 平台：抖音小程序（原生，douyinProjectType: native），可迁移微信小程序。
- 网络：纯前端，无任何 API 调用，数据本地持久化。
- 图标：IconPark 官方 PNG，本地内置 54 枚。
- 自适应：全 rpx + flex 布局，flex-basis + min-width:0 保证跨机型一致。
- 主题：5 套配色，CSS 变量 + 观察者广播，实时换肤。
- 缓存：Date.now() 时间戳版本号，每次冷启动强制清理旧缓存。
六、运行方式
- 安装并打开「抖音开发者工具」。
- 导入
健身馆目录，填入自己的 AppID（或测试号）。 - 点击「编译」，在模拟器中预览；首次进入自动写入示例数据。
- 真机调试：点「预览」生成新二维码，手机扫码进入，缓存自动全清为最新。