家政服务预约小程序 --- 从需求到原型的全栈实践
一个面向家政服务行业的预约与管理平台，覆盖客户端 + 服务人员端 + 管理后台，基于 Vue 3 构建。
项目背景
家政服务行业长期面临几个痛点：客户预约流程繁琐、服务人员管理混乱、服务进度不透明。家政服务预约小程序正是为了解决这些问题而设计的一站式平台，目标是打通"服务浏览 → 在线预约 → 支付 → 服务分配 → 进度追踪 → 评价"的完整业务闭环。
适用场景包括：日常保洁、深度清洁、月嫂育儿嫂、家电清洗、管道疏通、搬家服务等各类家政服务机构。
技术选型
| 层级 | 技术栈 |
|---|---|
| 前端框架 | 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. 更多功能页
- 优惠券：分"可使用/已使用/已过期"三栏展示
- 收藏服务：支持取消收藏，点击跳转服务详情
- 意见反馈：选择反馈类型 + 文字描述 + 联系方式
- 设置：账号管理、通知开关、隐私政策、关于我们
服务人员端（移动端）
服务人员端提供简洁的工作管理界面，包含：
- 服务人员首页：今日订单、待处理订单
- 订单列表：管理订单
- 订单详情：查看订单信息、更新进度
- 进度更新：上传现场照片、更新服务状态
管理后台（PC 端）
管理后台采用左侧边栏导航，支持多公司切换，包含 8 个功能模块。
1. 数据看板
展示核心运营指标：今日订单数、本月营收、服务人次、待处理退款。下方提供订单趋势图和营收统计图。
2. 服务管理
服务项目列表支持搜索、分类筛选、状态筛选，提供新增服务、编辑、发布/下架等操作。
3. 服务人员管理
服务人员列表展示基本信息、健康证状态、服务评分等关键数据，支持添加、编辑服务人员信息。
4. 订单管理
订单列表支持按状态筛选，提供订单详情查看、服务人员分配、订单完成确认等操作。
5. 退款审批
分"待审批/已通过/已拒绝"三栏管理退款申请，支持一键通过或填写拒绝原因。
6. 财务报表
按日/月/年维度展示收入、退款、净收入等财务数据，支持自定义日期范围和 Excel 导出。
7. 公司管理
支持多公司管理，可新增、编辑、启用/停用公司，侧边栏顶部实时切换当前公司。
8. 权限管理
基于 RBAC 模型的角色权限矩阵，支持自定义角色和细粒度权限配置。
项目结构
frontend/src/
├── router/index.js # 路由配置
├── stores/app.js # Pinia 全局状态
├── components/ServiceCard.vue # 可复用服务卡片
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # Tab 布局容器
│ ├── HomePage.vue # 首页
│ ├── ServicesPage.vue # 服务列表
│ ├── ServiceDetailPage.vue # 服务详情
│ ├── ConfirmPage.vue # 确认预约
│ ├── PayResultPage.vue # 支付结果
│ ├── SchedulePage.vue # 预约日历
│ ├── MessagesPage.vue # 消息中心
│ ├── MyPage.vue # 个人中心
│ ├── OrdersPage.vue # 订单列表
│ ├── OrderDetailPage.vue # 订单详情
│ ├── AddressesPage.vue # 地址管理
│ ├── ServiceProgressPage.vue # 服务进度
│ ├── RateServicePage.vue # 服务评价
│ ├── RefundPage.vue # 退款申请
│ ├── CouponsPage.vue # 优惠券
│ ├── FavoritesPage.vue # 收藏服务
│ ├── FeedbackPage.vue # 意见反馈
│ ├── SettingsPage.vue # 设置
│ ├── pages-provider/ # 服务人员端
│ │ ├── index.vue # 服务人员首页
│ │ ├── order/list.vue # 订单列表
│ │ ├── order/detail.vue # 订单详情
│ │ └── order/progress.vue # 进度更新
│ └── admin/
│ ├── AdminLayout.vue # 管理后台布局
│ ├── DashboardPage.vue # 数据看板
│ ├── ServiceMgmtPage.vue # 服务管理
│ ├── StaffMgmtPage.vue # 服务人员管理
│ ├── SchedulingPage.vue # 排班管理
│ ├── RefundReviewPage.vue # 退款审批
│ ├── FinancePage.vue # 财务报表
│ ├── OrgMgmtPage.vue # 公司管理
│ └── RoleMgmtPage.vue # 权限管理设计亮点
移动端体验优先：客户端全部页面按 375px 宽度设计，圆角卡片 + 渐变色彩 + 底部弹窗交互，贴合微信小程序的使用习惯。
CSS 变量体系 ：全局定义 --blue、--green、--red 等语义化颜色变量，一处修改全局生效，方便后续品牌定制。
前后端分离架构：前端使用 Pinia 管理 Mock 数据，所有页面预留 API 接口调用位置，后端就绪后可无缝切换。
完整的交互反馈：每个按钮都有明确的点击响应 --- 弹窗确认、Toast 提示、状态切换、页面跳转，没有"死按钮"。
服务进度实时追踪：通过时间线展示服务进度，服务人员可上传现场照片，客户可实时查看服务状态。
地址管理系统：支持多地址管理、默认地址设置、地址标签，方便客户快速选择服务地址。
在线体验
访问地址：http://housekeeping.hei-ai.com/
源码下载地址： https://srcs.hei-ai.com/277.html
- 客户端：打开首页即可浏览
- 服务人员端：登录后切换角色进入
- 管理后台：登录页底部点击"管理员入口"进入
本项目为家政服务行业数字化转型的一次实践探索，欢迎交流讨论。