健身运动预约小程序 --- 从需求到原型的全栈实践
一个面向健身运动行业的预约与管理平台，覆盖会员端 + 教练端 + 管理后台，基于 Vue 3 构建。
项目背景
健身运动行业长期面临几个痛点：会员约课流程繁琐、教练排课管理混乱、会员卡管理复杂。健身运动预约小程序正是为了解决这些问题而设计的一站式平台，目标是打通"课程浏览 → 在线约课 → 会员卡管理 → 签到考勤 → 数据分析"的完整业务闭环。
适用场景包括：健身房、瑜伽馆、游泳馆、搏击馆、舞蹈工作室等各类健身运动机构。
技术选型
| 层级 | 技术栈 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| UI 风格 | 自定义 CSS 变量体系，移动端优先 |
| 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |
功能全景
会员端（移动端）
会员端采用底部 Tab 导航，包含 5 个主入口和多个二级页面。
1. 登录页
支持微信一键登录和手机号登录两种方式，底部提供管理员入口。
2. 首页
展示课程分类入口（有氧、瑜伽、搏击、游泳、力量）、热门团课推荐和为你推荐课程列表。
3. 团课浏览与详情
团课列表支持分类筛选，课程详情页包含价格、教练介绍、课程内容、强度等级、卡路里消耗、适合人群标签等完整信息，底部提供约课按钮。
4. 约课与支付
确认约课页支持选择课程时段、确认会员卡使用，支付完成后展示结果页，可直接查看订单或返回首页。
5. 团课课表
周网格视图展示课程安排，颜色编码按课程类型区分，点击课程格子直接约课，显示课程剩余名额。
6. 消息中心
按类型展示系统通知、约课成功、上课提醒、调课通知、会员卡到期提醒等消息，支持未读红点标记。
7. 个人中心
包含预约管理、会员卡管理、签到记录、优惠券、收藏课程、意见反馈、设置等功能入口。
8. 预约管理
预约列表支持按状态筛选，预约详情页展示课程信息、支付信息和签到状态。
9. 会员卡管理
支持查看会员卡列表、会员卡详情（余额/次数/有效期）、冻结/解冻操作、续卡入口。
10. 签到考勤
扫码签到功能，查看历史签到记录和出勤率统计。
11. 更多功能页
- 优惠券：分"可使用/已使用/已过期"三栏展示
- 收藏课程：支持取消收藏，点击跳转课程详情
- 意见反馈：选择反馈类型 + 文字描述 + 联系方式
- 设置：账号管理、通知开关、隐私政策、关于我们
教练端（移动端）
教练端提供简洁的工作管理界面，包含：
- 教练首页：今日课程、待签到学员
- 我的排课：查看排课表
- 学员列表：查看学员出勤情况
管理后台（PC 端）
管理后台采用左侧边栏导航，支持多健身房切换，包含 8 个功能模块。
1. 数据看板
展示核心运营指标：今日约课数、本月营收、会员总数、待处理退款。下方提供约课趋势图、热门课程排行、收入统计和会员卡到期提醒。
2. 课程管理
课程列表支持搜索、分类筛选、状态筛选，提供新增课程、编辑、发布/下架等操作，支持设置课程强度和适合人群。
3. 教练管理
教练列表展示基本信息、认证资质、专长等关键数据，支持添加、编辑教练信息。
4. 排课管理
实现周视图排课、冲突检测、模板排课、代课功能。
5. 会员管理
会员列表展示会员信息、会员卡状态、出勤情况等数据，支持会员卡管理和会员到期提醒。
6. 预约管理
预约列表支持按状态筛选，提供预约详情查看、签到管理等操作。
7. 退款审批
分"待审批/已通过/已拒绝"三栏管理退款申请，支持一键通过或填写拒绝原因。
8. 财务报表
按日/月/年维度展示收入、退款、净收入等财务数据，支持自定义日期范围和 Excel 导出。
9. 健身房管理
支持多健身房管理，可新增、编辑、启用/停用健身房，侧边栏顶部实时切换当前健身房。
10. 权限管理
基于 RBAC 模型的角色权限矩阵，支持自定义角色和细粒度权限配置。
项目结构
frontend/src/
├── router/index.js # 路由配置
├── stores/app.js # Pinia 全局状态
├── components/CourseCard.vue # 可复用课程卡片
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # Tab 布局容器
│ ├── HomePage.vue # 首页
│ ├── CoursesPage.vue # 课程列表
│ ├── CourseDetailPage.vue # 课程详情
│ ├── ConfirmPage.vue # 确认约课
│ ├── PayResultPage.vue # 支付结果
│ ├── SchedulePage.vue # 团课课表
│ ├── MessagesPage.vue # 消息中心
│ ├── MyPage.vue # 个人中心
│ ├── OrdersPage.vue # 预约列表
│ ├── OrderDetailPage.vue # 预约详情
│ ├── AttendancePage.vue # 签到记录
│ ├── MemberCardsPage.vue # 会员卡列表
│ ├── MemberCardDetailPage.vue # 会员卡详情
│ ├── RefundPage.vue # 退款申请
│ ├── CouponsPage.vue # 优惠券
│ ├── FavoritesPage.vue # 收藏课程
│ ├── FeedbackPage.vue # 意见反馈
│ ├── SettingsPage.vue # 设置
│ ├── pages-coach/ # 教练端
│ │ ├── index.vue # 教练首页
│ │ ├── schedule.vue # 我的排课
│ │ └── students.vue # 学员列表
│ └── admin/
│ ├── AdminLayout.vue # 管理后台布局
│ ├── DashboardPage.vue # 数据看板
│ ├── CourseMgmtPage.vue # 课程管理
│ ├── SchedulingPage.vue # 排课管理
│ ├── StudentsMgmtPage.vue # 会员管理
│ ├── RefundReviewPage.vue # 退款审批
│ ├── FinancePage.vue # 财务报表
│ ├── OrgMgmtPage # 健身房管理
│ └── RoleMgmtPage # 权限管理设计亮点
移动端体验优先：会员端全部页面按 375px 宽度设计，圆角卡片 + 渐变色彩 + 底部弹窗交互，贴合微信小程序的使用习惯。
CSS 变量体系 ：全局定义 --blue、--green、--red 等语义化颜色变量，一处修改全局生效，方便后续品牌定制。
前后端分离架构：前端使用 Pinia 管理 Mock 数据，所有页面预留 API 接口调用位置，后端就绪后可无缝切换。
完整的交互反馈：每个按钮都有明确的点击响应 --- 弹窗确认、Toast 提示、状态切换、页面跳转，没有"死按钮"。
周网格课表视图：直观展示一周课程安排，颜色编码按课程类型区分，点击课程格子直接约课，显示剩余名额。
会员卡体系：支持次卡、月卡、季卡、年卡、私教卡等多种卡类型，实现冻结/解冻、续卡功能。
课程强度和卡路里：新增强度等级（低/中/高）和卡路里消耗预估，帮助会员选择适合的课程。
在线体验
访问地址：http://fitness.hei-ai.com/
源码下载地址：https://srcs.hei-ai.com/275.html
- 会员端：打开首页即可浏览
- 教练端：登录后切换角色进入
- 管理后台：登录页底部点击"管理员入口"进入
本项目为健身运动行业数字化转型的一次实践探索，欢迎交流讨论。