3.9 KiB
3.9 KiB
预约系统项目
项目简介
这是一个基于 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
安装依赖
npm install
运行项目
- 微信小程序: 工具栏 -> 运行 -> 运行到小程序模拟器 -> 微信开发者工具
- H5: 工具栏 -> 运行 -> 运行到浏览器 -> Chrome
待完善功能
- 个人信息修改
- 预约提醒通知
- 评价功能
- 优惠券系统
- 分享功能
版本信息
- 版本号: 1.0.0
- 版本代码: 100
- Vue 版本: 3
- 最后更新: 2026-02-10