134 lines
3.9 KiB
Markdown
134 lines
3.9 KiB
Markdown
|
# 预约系统项目
|
|||
|
|
|
|||
|
|
## 项目简介
|
|||
|
|
|
|||
|
|
这是一个基于 uni-app 开发的美容服务预约系统，支持多平台部署（小程序、H5、App）。用户可以通过手机号注册登录，查看可预约的时间段，并在线预约美容服务。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **框架**: uni-app (Vue 3)
|
|||
|
|
- **语言**: TypeScript
|
|||
|
|
- **UI 组件库**: TDesign UniApp
|
|||
|
|
- **构建工具**: Vite
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
yu/
|
|||
|
|
├── pages/ # 页面目录
|
|||
|
|
│ ├── index/ # 首页（轮播图 + 九宫格导航）
|
|||
|
|
│ ├── login/ # 登录页（验证码登录/一键登录）
|
|||
|
|
│ ├── register/ # 注册页
|
|||
|
|
│ ├── booking/ # 预约页（日历 + 时间槽选择）
|
|||
|
|
│ └── appointments/ # 我的预约（预约列表）
|
|||
|
|
├── utils/ # 工具目录
|
|||
|
|
│ └── api.ts # API 接口封装
|
|||
|
|
├── static/ # 静态资源
|
|||
|
|
├── uni_modules/ # uni-app 插件模块
|
|||
|
|
├── App.vue # 应用入口
|
|||
|
|
├── main.js # 主入口文件
|
|||
|
|
├── manifest.json # 应用配置
|
|||
|
|
├── pages.json # 页面路由配置
|
|||
|
|
└── vite.config.js # Vite 配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能模块
|
|||
|
|
|
|||
|
|
### 1. 用户认证
|
|||
|
|
- **注册**: 通过手机号和昵称注册账号
|
|||
|
|
- **登录**: 支持验证码登录和一键登录两种方式
|
|||
|
|
- **会话管理**: Token 存储与自动登录状态检查
|
|||
|
|
|
|||
|
|
### 2. 首页
|
|||
|
|
- **轮播图**: 展示推广信息
|
|||
|
|
- **九宫格导航**: 快速进入预约和查看我的预约
|
|||
|
|
- **退出登录**: 悬浮按钮快捷退出
|
|||
|
|
|
|||
|
|
### 3. 预约功能
|
|||
|
|
- **日历视图**: 查看每月日期及预约情况
|
|||
|
|
- **时间槽列表**: 显示可选时间段及剩余名额
|
|||
|
|
- **预约确认**: 确认日期、时间、人数并提交预约
|
|||
|
|
- **实时更新**: 预约成功后自动刷新时间槽状态
|
|||
|
|
|
|||
|
|
### 4. 我的预约
|
|||
|
|
- **预约列表**: 查看所有历史预约
|
|||
|
|
- **状态筛选**: 全部/待确认/已确认/已完成/已取消
|
|||
|
|
- **取消预约**: 待确认状态可取消预约
|
|||
|
|
- **详情查看**: 显示时间段、人数等信息
|
|||
|
|
|
|||
|
|
## API 接口
|
|||
|
|
|
|||
|
|
### 基础配置
|
|||
|
|
- **基础地址**: `https://api.makesong.cn/yu`
|
|||
|
|
- **认证方式**: Bearer Token
|
|||
|
|
|
|||
|
|
### 主要接口
|
|||
|
|
- `/api/auth/register` - 用户注册
|
|||
|
|
- `/api/auth/send-code` - 发送验证码
|
|||
|
|
- `/api/auth/verification-login` - 验证码登录
|
|||
|
|
- `/api/auth/one-click-login` - 一键登录
|
|||
|
|
- `/api/timeslots` - 获取时间槽列表
|
|||
|
|
- `/api/appointments` - 预约管理（增删查）
|
|||
|
|
|
|||
|
|
## 样式主题
|
|||
|
|
|
|||
|
|
### 主色调
|
|||
|
|
- **主色**: `#FF7A00` - 橙色渐变主题
|
|||
|
|
- **辅助色**: `#FF9500` - 橙色渐变
|
|||
|
|
- **背景色**: `#F8F9FA` - 浅灰背景
|
|||
|
|
- **文字色**: `#333333` - 深灰主色
|
|||
|
|
|
|||
|
|
### 按钮样式
|
|||
|
|
- **主按钮**: 橙色渐变背景 + 阴影效果
|
|||
|
|
- **次按钮**: 灰色背景 + 边框
|
|||
|
|
- **线框按钮**: 透明背景 + 橙色边框
|
|||
|
|
|
|||
|
|
## 页面路由
|
|||
|
|
|
|||
|
|
| 路径 | 页面 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| `/pages/index/index` | 首页 | 启动页，展示功能入口 |
|
|||
|
|
| `/pages/login/login` | 登录 | 未登录时自动跳转 |
|
|||
|
|
| `/pages/register/register` | 注册 | 新用户注册 |
|
|||
|
|
| `/pages/booking/booking` | 预约 | 选择日期和时间进行预约 |
|
|||
|
|
| `/pages/appointments/appointments` | 我的预约 | 查看和管理预约 |
|
|||
|
|
|
|||
|
|
## 支持平台
|
|||
|
|
|
|||
|
|
- 微信小程序 (appid: wx7677406cd2dfb7ac)
|
|||
|
|
- 支付宝小程序
|
|||
|
|
- 百度小程序
|
|||
|
|
- 头条小程序
|
|||
|
|
- H5 网页
|
|||
|
|
- App (Android/iOS)
|
|||
|
|
|
|||
|
|
## 开发说明
|
|||
|
|
|
|||
|
|
### 环境要求
|
|||
|
|
- Node.js
|
|||
|
|
- HBuilderX 或 Vue CLI
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 运行项目
|
|||
|
|
- 微信小程序: 工具栏 -> 运行 -> 运行到小程序模拟器 -> 微信开发者工具
|
|||
|
|
- H5: 工具栏 -> 运行 -> 运行到浏览器 -> Chrome
|
|||
|
|
|
|||
|
|
## 待完善功能
|
|||
|
|
|
|||
|
|
- [ ] 个人信息修改
|
|||
|
|
- [ ] 预约提醒通知
|
|||
|
|
- [ ] 评价功能
|
|||
|
|
- [ ] 优惠券系统
|
|||
|
|
- [ ] 分享功能
|
|||
|
|
|
|||
|
|
## 版本信息
|
|||
|
|
|
|||
|
|
- **版本号**: 1.0.0
|
|||
|
|
- **版本代码**: 100
|
|||
|
|
- **Vue 版本**: 3
|
|||
|
|
- **最后更新**: 2026-02-10
|