# 培训预约小程序

**Repository Path**: codesmallbird/edu_reservation

## Basic Information

- **Project Name**: 培训预约小程序
- **Description**: 基于uni-app框架开发的跨平台应用，使用开源的微信小程序重构，支持小程序与H5端，提供老师课程管理、预约核销、公告资讯等核心功能，采用Vue 2.x、uView UI、Vuex等技术栈，实现完整的培训预约业务流程

- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-09-13
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 培训老师预约系统

## 项目介绍

本项目为「培训老师预约系统」的重构版本，最初来源于原生微信小程序实现。重构一方面是为了学习uniapp框架，另一方面是为了学习和了解预约相关的业务流程。通过使用uni-app框架，实现了小程序与H5跨端开发，同时后端已重构为Java技术栈。

## 目录结构

```
├── .gitignore           # Git忽略文件配置
├── App.vue              # 应用入口组件
├── api/                 # API接口定义
│   ├── adminapi.js      # 管理员相关接口
│   ├── api.js           # 公共接口
│   └── workapi.js       # 业务相关接口
├── app.css              # 应用全局样式
├── cmpts/               # 自定义组件
│   ├── biz/             # 业务组件
│   └── public/          # 公共组件
├── components/          # 通用组件
├── config/              # 配置文件
│   ├── config.js        # 系统配置
│   └── request.js       # 网络请求封装
├── doc/                 # 项目文档
│   ├── components/      # 组件文档
│   ├── IMG_UPLOAD_FIX.md # 图片上传修复说明
│   └── REFACTOR_NOTES.md # 重构笔记
├── main.js              # 应用入口文件
├── manifest.json        # 应用配置文件
├── pages/               # 页面文件
├── pages.json           # 页面路由配置
├── store/               # Vuex状态管理
├── style/               # 样式文件
├── static/              # 静态资源
├── tpls/                # 模板文件
├── uni_modules/         # uni-app模块插件
│   ├── uview-ui/        # uView UI组件库
│   ├── uni-scss/        # 辅助样式库
│   ├── lime-painter/    # 海报生成组件
│   ├── shmily-drag-image/ # 图片拖拽排序组件
│   └── zp-mixins/       # 小程序转换mixins
└── utils/               # 工具函数
```

## 功能介绍

### 公告与资讯
- 公告发布与富文本编辑，封面图上传
- 置顶/首页推荐、状态启停（启用/停用）
- 列表分页、分类与关键字搜索，详情展示

### 老师与课程
- 老师列表、按分类/关键字检索与排序
- 老师详情：个人简介、标签、可预约日历、可预约时段与名额
- 收藏与取消收藏、历史浏览、分享

### 预约与核销
- 选择日期与时段完成预约，下单后查看预约详情
- 支持取消预约、查看「我的预约」列表
- 预约码生成与核销（扫码/手动），核销记录与状态查询
- 订阅消息/消息通知（可按业务接入）

### 日历与排班
- 可预约日期日历展示
- 时段模板管理、批量生成排班
- 冲突校验、人数上限控制

### 后台管理（后端分支提供）
- 老师管理、预约管理、用户管理、公告管理
- 数据统计与导出（如CSV/Excel）
- 角色/权限与登录鉴权

### 系统与通用能力
- 多端适配（小程序/H5）
- 通用列表组件、表单组件、图片上传组件等
- 缓存策略（列表缓存、返回定位）、统一异常与提示

## 技术栈与依赖

### 前端技术
- **框架**：uni-app (Vue 2.x)
- **UI组件库**：uView UI 2.0
- **样式预处理**：SCSS
- **状态管理**：Vuex
- **网络请求**：基于`uni.$u.http`的请求封装
- **构建工具**：HBuilderX/CLI

### 核心插件与模块
- **uview-ui**：全面的UI组件库，完美兼容nvue
- **uni-scss**：辅助样式库，提供便捷的样式工具
- **lime-painter**：跨平台海报生成组件
- **shmily-drag-image**：图片拖拽排序组件
- **zp-mixins**：用于小程序转uni-app的mixins

### 后端技术
- Java实现RESTful API（代码位于独立分支）

## 核心组件

项目提供了多个高度可复用的业务组件：

- **[海报生成组件](doc/components/lime_poster_cmpt.md)** (`lime_poster_cmpt`): 基于lime-painter的跨平台海报生成组件，支持H5跨域处理、自动降级策略，用于分享海报、营销推广等场景
- **[通用列表组件](doc/components/comm_list_cmpt.md)** (`comm_list_cmpt`): 功能完整的数据列表展示组件，集成分页加载、搜索筛选、下拉刷新、上拉加载等功能，适用于各种数据列表场景
- **[动态表单组件](doc/components/form_show_cmpt.md)** (`form_show_cmpt`): 配置驱动的表单生成组件，支持15+种表单控件、数据校验、缓存机制、富文本编辑，用于用户注册、信息录入、问卷调查等
- **[时间选择组件](doc/components/picker_time_cmpt.md)** (`picker_time_cmpt`): 多精度时间选择组件，支持年/月/日/时/分/秒等7种模式，具备联动选择、格式化显示等功能
- **其他组件**: 图片上传、文件处理、地区选择、数据展示等专业组件

**[📚 完整组件文档](doc/components/README.md)**: 查看所有组件的详细技术文档、使用指南和最佳实践

## 分支说明

- **当前分支**：uni-app前端代码
- **后端分支**：Java后端代码（请切换到相应分支查看与部署）

## 快速开始

### 环境准备
- **开发工具**：HBuilderX 3.1.0及以上版本
- **Node.js**：推荐12.x及以上版本
- **微信开发者工具**（如需开发小程序）

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <项目仓库地址>
   cd edu_manage_uniapp
   ```

2. **修改配置**
   - 打开`config/config.js`文件
   - 修改后端API地址配置（默认地址为示例地址）

3. **导入HBuilderX**
   - 打开HBuilderX
   - 点击「文件」->「导入」->「从本地目录导入」
   - 选择项目目录完成导入

4. **安装依赖**
   项目使用的组件主要通过uni_modules方式引入，大部分已随项目一起导入，如需额外安装依赖可使用npm：
   ```bash
   npm install
   ```

5. **运行项目**
   - 选择运行平台：点击HBuilderX顶部工具栏的「运行」按钮
   - 选择目标平台：如「运行到小程序模拟器」->「微信开发者工具」或「运行到浏览器」

### 开发流程

1. **页面开发**：在`pages`目录下创建或修改页面文件
2. **组件开发**：公共组件放在`components`目录，业务组件放在`cmpts`目录
3. **API调用**：在`api`目录下定义接口，使用封装的请求方法调用
4. **样式设计**：使用SCSS进行样式开发，可利用`uni-scss`提供的工具类
5. **状态管理**：复杂状态管理使用Vuex，简单状态可使用组件内状态

## 构建与部署

### 小程序构建
1. 在HBuilderX中，点击「发行」->「小程序-微信」
2. 填写小程序AppID（在manifest.json中已配置）
3. 选择构建模式（开发/生产）
4. 构建完成后，会生成dist目录，使用微信开发者工具导入并发布

### H5构建
1. 在HBuilderX中，点击「发行」->「网站-H5手机版」
2. 配置相关参数（如网站标题、域名等）
3. 构建完成后，将生成的h5目录部署到Web服务器

## 注意事项

- 修改后端地址后需重新运行项目以生效
- 开发环境下，可通过控制台查看API请求日志和错误信息
- 项目使用了缓存机制，部分配置会缓存30天
- 如需使用海报生成等功能，请确保相关权限已开启

## 常见问题

**Q: 如何修改应用名称和图标？**
A: 在`manifest.json`文件中修改应用名称、appid、版本信息以及各平台的配置。

**Q: 如何添加新页面？**
A: 在`pages`目录下创建页面，并在`pages.json`中配置页面路由和样式。

**Q: 图片上传功能不正常怎么办？**
A: 请参考`doc/IMG_UPLOAD_FIX.md`文件中的修复方案。

**Q: 重构过程中有哪些需要注意的问题？**
A: 请查看`doc/REFACTOR_NOTES.md`文件了解重构相关的注意事项。


## 联系我们

如有任何问题或建议，请通过以下方式联系我们：
- QQ群：
- Issues：[提交问题]