# 预约系统项目

## 项目简介

这是一个基于 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