全源码提供（可用于毕设）-高端大气的美容美发预约小程序

源码下载地址：

# 全源码提供（可用于毕设）-高端大气的美容美发预约小程序

> 一个面向美容美发机构的服务预约与管理平台，覆盖用户端 + 管理后台，基于 Vue 3 构建。

—

## 项目背景

美容美发机构长期面临几个痛点：顾客预约流程繁琐、服务项目管理复杂、会员管理效率低下。**美容美发预约小程序**正是为了解决这些问题而设计的一站式平台，目标是打通”服务浏览 → 在线预约 → 支付 → 签到 → 服务 → 评价”的完整业务闭环。

适用场景包括：美发 salon、美容 spa、美甲美睫店等各类美容美发机构。

—

## 技术选型

| 层级 | 技术栈 |
| ——– | ————————————– |
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| UI 风格 | 自定义 CSS 变量体系，移动端优先 |
| 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |

—

## 功能全景

### 用户端（移动端）

用户端采用底部 Tab 导航，包含 5 个主入口和多个二级页面。

#### 1. 登录页

支持微信一键登录和手机号登录两种方式，底部提供管理员入口。


#### 2. 首页

展示服务分类入口、热门推荐和最新服务列表。
#### 3. 服务浏览与详情

服务列表支持分类筛选，服务详情页包含价格、技师介绍、服务流程、注意事项、用户评价等完整信息，底部提供收藏、咨询、预约三个操作按钮。


#### 4. 技师详情

展示技师个人信息、服务项目、用户评价、工作时间等详细信息，支持直接预约该技师的服务。


#### 5. 预约与支付

确认预约页支持选择服务、技师、时间，查看优惠券、确认支付金额。支付完成后展示结果页，可直接查看预约或返回首页。


#### 6. 我的预约

日历视图展示每月预约安排，点击日期切换当天预约列表，有预约的日期标注蓝色圆点。


#### 7. 消息中心

按类型展示预约提醒、预约成功、优惠活动、系统通知等消息，支持未读红点标记。

#### 8. 个人中心

包含订单管理、会员管理、签到记录、优惠券、收藏服务、意见反馈、设置等功能入口。



#### 9. 订单管理

订单列表支持按状态筛选（全部/待支付/已完成/已退款），订单详情页展示服务信息、支付信息和服务状态。


#### 10. 会员管理

支持查看会员等级、余额、积分，以及会员专享优惠等信息。


#### 11. 签到记录

展示历史签到记录，包括服务项目、技师、服务时间等信息。


#### 12. 更多功能页

– **优惠券**：分”可使用/已使用/已过期”三栏展示

– **意见反馈**：选择反馈类型 + 文字描述 + 联系方式


– **设置**：账号管理、通知开关、隐私政策、关于我们


—

### 管理后台（PC 端）

管理后台采用左侧边栏导航，支持多门店切换，包含 8 个功能模块。

#### 1. 数据看板

展示核心运营指标：今日预约数、本月营收、服务人次、会员增长率。下方提供预约趋势图和营收统计图。


#### 2. 服务管理

服务项目列表支持搜索、分类筛选、状态筛选，提供新增项目、编辑、发布/下架等操作。


#### 3. 排班管理

周视图展示技师 × 时间的排班网格，支持按技师和服务类型筛选，可新增排班并自动检测冲突。


#### 4. 会员管理

会员列表展示消费次数、积分、会员等级等关键数据，支持搜索和导出名单。


#### 5. 退款审批

分”待审批/已通过/已拒绝”三栏管理退款申请，支持一键通过或填写拒绝原因。


#### 6. 财务报表

按日/月/年维度展示收入、退款、净收入等财务数据，支持自定义日期范围和 Excel 导出。


#### 7. 门店管理

支持多门店/多服务类型管理，可新增、编辑、启用/停用门店，侧边栏顶部实时切换当前门店。

#### 8. 权限管理

基于 RBAC 模型的角色权限矩阵，支持自定义角色和细粒度权限配置。

—

## 项目结构

“`
02-frontend-beauty-prd02/src/
├── router/index.js # 路由配置
├── stores/app.js # Pinia 全局状态
├── components/
│ └── CourseCard.vue # 可复用服务卡片
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # Tab 布局容器
│ ├── HomePage.vue # 首页
│ ├── CoursesPage.vue # 服务列表
│ ├── CourseDetailPage.vue # 服务详情
│ ├── TechnicianPage.vue # 技师详情
│ ├── ConfirmPage.vue # 确认预约
│ ├── PayResultPage.vue # 预约成功
│ ├── SchedulePage.vue # 我的预约
│ ├── MessagesPage.vue # 消息中心
│ ├── MyPage.vue # 个人中心
│ ├── OrdersPage.vue # 订单管理
│ ├── OrderDetailPage.vue # 订单详情
│ ├── StudentsPage.vue # 会员管理
│ ├── AttendancePage.vue # 签到记录
│ ├── RefundPage.vue # 退款申请
│ ├── EvaluationPage.vue # 评价页面
│ ├── CouponsPage.vue # 优惠券
│ ├── FavoritesPage.vue # 收藏服务
│ ├── FeedbackPage.vue # 意见反馈
│ ├── SettingsPage.vue # 设置
│ ├── MembershipPage.vue # 会员页面
│ └── admin/
│ ├── AdminLayout.vue # 管理后台布局
│ ├── DashboardPage.vue # 数据看板
│ ├── CourseMgmtPage.vue # 服务管理
│ ├── SchedulingPage.vue # 排班管理
│ ├── StudentsMgmtPage.vue # 会员管理
│ ├── RefundReviewPage.vue # 退款审批
│ ├── FinancePage.vue # 财务报表
│ ├── OrgMgmtPage.vue # 门店管理
│ └── RoleMgmtPage.vue # 权限管理
“`

—

## 设计亮点

**移动端体验优先**：用户端全部页面按 375px 宽度设计，圆角卡片 + 渐变色彩 + 底部弹窗交互，贴合微信小程序的使用习惯。

**CSS 变量体系**：全局定义 `–blue`、`–green`、`–red` 等语义化颜色变量，一处修改全局生效，方便后续品牌定制。

**前后端分离架构**：前端使用 Pinia 管理 Mock 数据，所有页面预留 API 接口调用位置，后端就绪后可无缝切换。

**完整的交互反馈**：每个按钮都有明确的点击响应 — 弹窗确认、Toast 提示、状态切换、页面跳转，没有”死按钮”。

**美容美发场景特色功能**：
– 服务项目支持详细的技师分配和服务时长设置
– 会员系统支持等级、余额、积分管理
– 排班管理支持技师工作时间和服务类型分配
– 优惠券系统支持不同服务类型的折扣设置

—

## 其他
演示地址：http://jh.hei-ai.com/
源码下载:https://srcs.hei-ai.com/266.html

*本项目为美容美发行业数字化转型的一次实践探索，欢迎交流讨论。*