健身运动预约小程序 — 从需求到原型的全栈实践一个面向健身运动行业的预约与管理平台覆盖会员端 教练端 管理后台基于 Vue 3 构建。项目背景健身运动行业长期面临几个痛点会员约课流程繁琐、教练排课管理混乱、会员卡管理复杂。健身运动预约小程序正是为了解决这些问题而设计的一站式平台目标是打通课程浏览 → 在线约课 → 会员卡管理 → 签到考勤 → 数据分析的完整业务闭环。适用场景包括健身房、瑜伽馆、游泳馆、搏击馆、舞蹈工作室等各类健身运动机构。技术选型层级技术栈前端框架Vue 3 Composition API路由Vue Router 4状态管理Pinia构建工具ViteUI 风格自定义 CSS 变量体系移动端优先目标平台微信小程序 / H5 / AppUniApp 可扩展功能全景会员端移动端会员端采用底部 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会员端打开首页即可浏览教练端登录后切换角色进入管理后台登录页底部点击管理员入口进入本项目为健身运动行业数字化转型的一次实践探索欢迎交流讨论。