静心瑜伽 · 瑜伽课预约小程序
面向瑜伽馆的约课全栈系统:学员端微信小程序浏览门店与课程、按日期时段预约、加购辅具、会员钱包支付;管理员通过 Vue3 后台维护门店/课程、核销订单、发布公告并查看运营数据,后端为 Express + MySQL。
项目封面

项目说明
静心瑜伽 · 瑜伽课预约小程序
1. 项目介绍
「静心瑜伽」是一套瑜伽馆约课管理系统,包含微信小程序学员端与 PC 管理后台。
学员可浏览门店与课程、按日期和时段预约、加购辅具,并通过会员钱包完成支付。管理员可在后台维护门店、课程与加购项,处理约课订单(核销/取消),发布公告,并查看经营数据。
系统采用虚拟钱包支付(非真实微信支付),便于本地联调与演示。
技术组成
| 端 | 技术 |
|---|---|
| 后端 | Node.js + Express + MySQL |
| 管理后台 | Vue 3 + Element Plus + Vite + ECharts + Pinia |
| 客户端 | 微信原生小程序 |
业务对象映射
| 表/模块 | 瑜伽语义 |
|---|---|
| shop | 瑜伽门店 |
| cate | 课程(名额 capacity、时长 duration、教练 remark) |
| equ | 加购项(瑜伽垫、毛巾等) |
| orders | 约课订单 |
| wallet / paylist | 会员钱包与流水 |
| news | 馆内公告 |
| star | 收藏门店 |
课程类型 mtype:1 哈他 / 2 流瑜伽 / 3 阴瑜伽 / 4 塑形燃脂 / 5 孕妇瑜伽
关键业务规则
- 服务端校验:余额、名额、同人同时段不可重复、营业时间与过期时段
- 会员折扣由服务端计价:VIP 9.5 折 / SVIP 9 折
- 取消规则:仅已付款且开课前 ≥2 小时,费用退回钱包
- 订单号前缀:
YG
启动步骤见 运行手册.md;数据库脚本为 db_yoga.sql。默认管理员:13800000000 / 123456。
2. 各端功能介绍
2.1 小程序端(学员 · min)
| 功能 | 说明 |
|---|---|
| 首页门店 | Banner + 门店列表 |
| 门店详情约课 | 周历选日、课程类型筛选、时段余量、已约标记、立即预约 |
| 确认支付 | 加购服务 + 会员折扣 + 钱包虚拟支付 |
| 我的预约 | 列表/详情;开课前 2 小时可取消退款;后台取消原因展示 |
| 会员钱包 | 余额、充值、流水、VIP/SVIP |
| 锻炼趋势 | 近 30 日上课次数、本周/本月课时、类型偏好 |
| 公告 | 列表与详情 |
| 收藏 / 反馈 / 资料 / 登录 | 收藏门店、问题反馈、个人资料、手机号登录 |
Tab:门店 · 公告 · 我的。
2.2 管理后台(运营 · admin)
| 功能 | 说明 |
|---|---|
| 登录 / 概览 | 管理员登录、欢迎页与基础统计 |
| 数据分析 | 今日/本月约课与营收、到课率/取消率、趋势、热门课程、类型占比 |
| Banner | 首页轮播维护 |
| 门店 / 课程 / 加购 | 门店营业时段;课程名额·时长·类型·价格;辅具加购 |
| 约课订单 | 查询、核销完成、后台取消并填写原因(退回钱包) |
| 学员 | 用户列表与会员信息 |
| 公告 / 收藏 / 反馈 | 馆内公告、收藏记录、反馈回复 |
| 充值流水 | 钱包充值/消费/退款流水 |
2.3 后端 API(express)
| 模块 | 路径前缀 | 说明 |
|---|---|---|
| 小程序接口 | /api/web/* | 登录、门店、课程、约课、钱包、统计等 |
| 管理接口 | /api/admin/* | 需管理员角色;CRUD 与报表 |
| 上传 | /api/upload | 图片上传(需登录) |
| 静态资源 | /images/... | public 目录 |
3. 项目目录(详细 + 备注)
以下为源码目录全量列出(不含 node_modules、admin/dist 依赖/构建产物)。
node-yoga-yuyue-min/
├── .gitignore
├── db_yoga.sql # 建库建表 + 基础种子数据
├── 运行手册.md # 环境、配置、启动步骤
├── 项目说明.md # 本文件
├── 演示材料/
│ └── 演示视频.mp4
│
├── express/ # 后端服务(默认端口 3564)
│ ├── package.json # npm run dev / prod
│ ├── pnpm-lock.yaml
│ ├── app.js # Express 应用、JWT 白名单、静态目录
│ ├── bin/
│ │ └── www # 启动入口、端口
│ ├── config/
│ │ ├── db.js # MySQL 连接池
│ │ └── index.js # JWT secretKey、小程序 APPID/SECRET
│ ├── middleware/
│ │ └── auth.js # requireAdmin 等
│ ├── util/
│ │ ├── index.js
│ │ └── wechat.js # 微信相关工具
│ ├── routes/
│ │ ├── index.js # 路由汇总
│ │ ├── upload.js # 图片上传
│ │ ├── paylistMid.js # 钱包流水中间逻辑
│ │ ├── web/ # 小程序端 API
│ │ │ ├── index.js
│ │ │ ├── address.js
│ │ │ ├── banner.js
│ │ │ ├── cate.js
│ │ │ ├── equ.js
│ │ │ ├── news.js
│ │ │ ├── order.js # 约课下单 / 取消退款(含时段校验)
│ │ │ ├── paylist.js
│ │ │ ├── question.js
│ │ │ ├── shop.js
│ │ │ ├── star.js
│ │ │ ├── stats.js # 锻炼趋势等
│ │ │ ├── user.js
│ │ │ └── wallet.js
│ │ └── admin/ # 管理端 API
│ │ ├── index.js
│ │ ├── banner.js
│ │ ├── cate.js
│ │ ├── equ.js
│ │ ├── home.js # 概览与数据分析
│ │ ├── news.js
│ │ ├── order.js # 订单核销 / 后台取消
│ │ ├── paylist.js
│ │ ├── question.js
│ │ ├── shop.js
│ │ ├── star.js
│ │ └── user.js
│ └── public/
│ └── images/ # 上传/静态图片(按业务分类存放,文件名为上传时自动生成)
│ ├── avatar/ # 头像
│ ├── banner/ # Banner
│ ├── cate/ # 课程封面
│ ├── news/ # 公告配图
│ ├── question/ # 反馈配图
│ └── shop/ # 门店封面
│
├── admin/ # Vue3 管理后台(默认 5173)
│ ├── index.html
│ ├── jsconfig.json
│ ├── package.json # npm run dev / build
│ ├── package-lock.json
│ ├── pnpm-lock.yaml
│ ├── vite.config.js # 开发端口、路径别名
│ └── src/
│ ├── App.vue
│ ├── main.js
│ ├── api/
│ │ ├── index.js # 接口方法汇总
│ │ └── request.js # axios 封装、BASE_URL / UPLOADURL
│ ├── assets/
│ │ └── main.css
│ ├── components/
│ │ └── components/
│ │ ├── Editor.vue # 富文本编辑
│ │ └── ImageListUpload.vue # 图片列表上传
│ ├── layouts/
│ │ └── MainLayout.vue # 后台主布局
│ ├── router/
│ │ └── index.js
│ ├── stores/
│ │ └── user.js # 登录用户状态
│ ├── utils/
│ │ ├── formatTime.js
│ │ └── media.js
│ └── views/
│ ├── Analytics.vue # 数据分析
│ ├── Banner.vue
│ ├── Cate.vue # 课程管理
│ ├── Equ.vue # 加购管理
│ ├── Login.vue
│ ├── News.vue
│ ├── Order.vue # 约课订单
│ ├── Paylist.vue # 充值流水
│ ├── Question.vue # 反馈
│ ├── Shop.vue
│ ├── Star.vue # 收藏
│ ├── User.vue # 学员
│ └── Welcome.vue # 概览欢迎页
│
└── min/ # 微信小程序
├── README.md
├── app.js
├── app.json
├── app.wxss
├── project.config.json # 开发者工具项目配置
├── project.private.config.json
├── sitemap.json
├── images/
│ ├── banner.jpg
│ ├── checked.png
│ ├── right.png
│ ├── star.png
│ ├── star1.png
│ └── tabbar/
│ ├── index.png
│ ├── index_active.png
│ ├── my.png
│ ├── my_active.png
│ ├── news.png
│ └── news_active.png
├── utils/
│ ├── api.js # 接口方法
│ ├── date.js
│ ├── feedback.js
│ ├── markdown.js
│ ├── media.js
│ ├── request.js # baseUrl、Bearer Token
│ └── util.js
├── components/
│ ├── weekCalendar/ # 约课周历
│ │ ├── weekCalendar.js
│ │ ├── weekCalendar.json
│ │ ├── weekCalendar.wxml
│ │ └── weekCalendar.wxss
│ └── wxParse/ # 富文本解析(公告等)
│ ├── highLight/
│ │ ├── highLight.js
│ │ ├── highLight.json
│ │ ├── highLight.wxml
│ │ ├── highLight.wxss
│ │ └── lib/
│ │ ├── highlight.code.js
│ │ ├── index.js
│ │ ├── rainbow.wxss
│ │ ├── regex.js
│ │ └── languages/
│ │ ├── c-like.js
│ │ ├── c.js
│ │ ├── cpp.js
│ │ ├── css.js
│ │ ├── javascript.js
│ │ ├── markdown.js
│ │ ├── sql.js
│ │ ├── typescript.js
│ │ └── xml.js
│ ├── wxAudio/
│ │ ├── wxAudio.js
│ │ ├── wxAudio.json
│ │ ├── wxAudio.wxml
│ │ ├── wxAudio.wxss
│ │ └── images/
│ │ ├── pause.png
│ │ └── playing.gif
│ └── wxParse/
│ ├── wxParse.js
│ ├── wxParse.json
│ ├── wxParse.wxml
│ ├── wxParse.wxss
│ ├── utils/
│ │ ├── html2json.js
│ │ ├── htmlparser.js
│ │ ├── showdown.js
│ │ ├── util.js
│ │ └── wxDiscode.js
│ └── webviewPage/
│ ├── webviewPage.js
│ ├── webviewPage.json
│ ├── webviewPage.wxml
│ └── webviewPage.wxss
└── pages/
├── index/ # 门店首页
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
├── newsList/ # 公告列表
│ ├── newsList.js
│ ├── newsList.json
│ ├── newsList.wxml
│ └── newsList.wxss
├── newsDetail/ # 公告详情
│ ├── newsDetail.js
│ ├── newsDetail.json
│ ├── newsDetail.wxml
│ └── newsDetail.wxss
├── my/ # 我的
│ ├── my.js
│ ├── my.json
│ ├── my.wxml
│ └── my.wxss
├── auth/ # 登录
│ ├── auth.js
│ ├── auth.json
│ ├── auth.wxml
│ └── auth.wxss
├── detail/ # 门店详情约课
│ ├── detail.js
│ ├── detail.json
│ ├── detail.wxml
│ └── detail.wxss
├── comfirm/ # 确认支付(拼写沿用原 demo)
│ ├── comfirm.js
│ ├── comfirm.json
│ ├── comfirm.wxml
│ └── comfirm.wxss
├── orderList/ # 预约列表
│ ├── orderList.js
│ ├── orderList.json
│ ├── orderList.wxml
│ └── orderList.wxss
├── orderDetail/ # 预约详情
│ ├── orderDetail.js
│ ├── orderDetail.json
│ ├── orderDetail.wxml
│ └── orderDetail.wxss
├── wallet/ # 会员钱包
│ ├── wallet.js
│ ├── wallet.json
│ ├── wallet.wxml
│ └── wallet.wxss
├── walletAdd/ # 充值
│ ├── walletAdd.js
│ ├── walletAdd.json
│ ├── walletAdd.wxml
│ └── walletAdd.wxss
├── trend/ # 锻炼趋势
│ ├── trend.js
│ ├── trend.json
│ ├── trend.wxml
│ └── trend.wxss
├── star/ # 收藏
│ ├── star.js
│ ├── star.json
│ ├── star.wxml
│ └── star.wxss
├── question/ # 问题反馈
│ ├── question.js
│ ├── question.json
│ ├── question.wxml
│ └── question.wxss
└── userInfo/ # 个人资料
├── userInfo.js
├── userInfo.json
├── userInfo.wxml
└── userInfo.wxss
技术分类
包含内容
适用人群
学习参考与二次开发
关于 AI源码
AI源码 专注优质项目源码分享,提供完整源码、详细文档与技术支持,助力源码设计与课程作业。
相关推荐
查看全部 →
体育场馆预约小程序
这是一个完整的体育场馆预约服务平台,包含微信小程序端和PC管理后台。系统实现了场馆浏览、场地预约、器材租借、订单管理、钱包充值、会员管理等核心功能,采用前后端分离架构,适合作为微信小程序全栈开发学习项目或计算机设计参考。项目附带完整文章资料。

自习室预约小程序
这是一个完整的自习室预约管理平台,包含微信小程序端和PC管理后台。系统实现了自习室展示、座位预约、器材租赁、订单管理、钱包充值、会员管理等核心功能,采用前后端分离架构,适合作为微信小程序全栈开发学习项目或计算机设计参考。

宿舍洗衣房自助预约小程序
面向高校宿舍的洗衣房自助预约全栈系统:学生端微信小程序按时段预约洗衣机/烘干机、加购耗材、钱包支付;管理员通过 Vue3 后台维护洗衣房与设备、处理订单、发布公告并查看运营数据,后端为 Express + MySQL。