本项目是一个基于 UniApp 的多端跨平台应用,主要面向体育场馆、健身中心等场所,提供课程排期、预约管理、会员服务及数据统计等核心功能。
技术栈与架构:
- 前端框架:采用 Vue 3 + TypeScript 构建,配合 Composition API 编写高内聚、可复用的组件逻辑。
- 构建工具:使用 Vite 5 实现快速的开发热更新与生产构建,提升开发效率。
- 样式方案:集成 UnoCSS 原子化 CSS 引擎,通过预设规则实现按需生成样式,极大减少 CSS 体积。
- 状态管理:基于 Pinia 进行全局状态管理,并配合 pinia-plugin-persistedstate 实现数据持久化,保障用户状态在端上的稳定性。
- 网络请求:使用 Alova 轻量级请求库,封装了统一的请求拦截、错误处理、token 刷新等逻辑,支持多域名动态切换。
- 跨端能力:依托 UniApp 框架,一套代码可同时编译为微信小程序、H5 及 App(Android/iOS),大幅降低多端维护成本。
- 工程化:配置了 ESLint + Commitlint + Husky 的代码规范与提交校验流程,确保团队协作代码质量。
核心功能模块:
1. 课程表展示:支持日视图与周视图切换,直观展示场馆课程排期,包含课程名称、时间、教练、教室、预约人数/容量、进度条等详细信息。
2. 预约管理:用户可查看课程详情并进行预约,管理员可对课程进行增删改查及状态管理。
3. 会员管理:包含会员卡信息查看、用户列表、权限控制等。
4. 数据统计:提供场馆、教练、课程等多维度数据统计与图表展示,辅助运营决策。
5. 多端适配:通过统一的页面配置(pages.config.ts)与 manifest 配置(manifest.config.ts)灵活调整各端特性,如微信小程序的 appid、H5 的路由 base 等。