一个面向家电清洗维修行业的在线预约与派单平台，覆盖客户 + 师傅 + 管理后台，基于 Vue 3 构建。
项目背景
每台空调每年至少需要深度清洗 1-2 次，每台油烟机使用 3 个月就开始积油，热水器用久了不加热、洗衣机用久了有异味——家电清洗维修是千亿级的刚需市场。但目前这个行业的信息化程度极低：客户在小区群里喊"谁认识洗空调的师傅"，师傅在路边等活或者靠老客户转介绍，服务公司靠 Excel 排单。
家电清洗维修预约小程序正是为规范这个行业而设计的一站式平台，目标是打通"服务浏览 → 选择师傅 → 在线下单 → 师傅上门 → 服务前后拍照 → 评价"的完整业务闭环。
适用场景包括：家电清洗公司、品牌售后网点、社区便民服务中心、物业维修部和独立师傅个人接单。
技术选型
| 层级 | 技术栈 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| UI 风格 | 自定义 CSS 变量体系，移动端优先 |
| 目标平台 | 微信小程序 / H5 / App（UniApp 可扩展） |
功能全景
客户端（移动端）
客户端采用底部 Tab 导航，覆盖从浏览服务到下单评价的完整链路。
1. 登录页
支持微信一键登录和手机号登录。slogan"专业师傅上门，家电焕然一新"。底部提供管理员入口和师傅入口——一套代码服务三角色。
2. 首页
顶部 Banner"专业家电服务 · 清洗·维修·安装 一站式解决"。下方展示：
- 8 大服务分类：空调清洗、洗衣机清洗、油烟机清洗、冰箱清洗、热水器维修、管道疏通、家电安装、电路维修
- 热门服务：空调深度清洗 ¥158、洗衣机清洗 ¥168、油烟机清洗 ¥198、冰箱清洗除味 ¥128
- 推荐师傅：横向滚动卡片，展示师傅头像、姓名、评分、服务次数、专长标签、价格
3. 师傅列表
支持按专长筛选（全部/空调/清洗/维修/安装），按综合/评分/距离/服务次数排序。每位师傅展示：头像、姓名、评分星级、服务次数、从业年限、专长标签、价格。点击进入师傅详情。
4. 师傅详情（决策关键页）
展示师傅完整信息：大头像、姓名、综合评分（⭐4.9）、已服务次数（856 次）、从业年限（8 年）、联系电话。核心区域展示资质证书列表——制冷与空调作业证、电工证等，这是客户决定下单的关键信任要素。下方展示专长标签和顾客评价。
底部固定栏显示价格"¥158/台"和立即预约按钮。
5. 服务项目
按分类 Tab 筛选（空调清洗/洗衣机清洗/油烟机清洗等 8 个分类）。每项服务展示：图标、名称、描述（“挂机/柜机深度拆洗，含滤网+蒸发器+风轮”）、预计时长、价格。底部"立即预约"按钮。
6. 地址管理
支持添加多个服务地址（家、公司、父母家），每个地址包含：联系人、电话、省市区、详细地址、门牌号。可设默认地址，一键切换。
7. 下单确认（行业核心表单）
3 步完成下单：选择服务 → 填写信息 → 确认支付。
填写信息页面是本项目的核心表单：
- 选择服务项目（带价格展示）
- 选择师傅（可选"系统分配"）
- 选择服务地址
- 家电信息表单：家电类型（挂机/柜机/滚筒/波轮等）、品牌（格力/美的/海尔等）、型号、故障描述
- 选择日期和时段
- 急单开关（2 小时内上门，加收 50% 紧急费）
- 底部合计金额
8. 订单详情与服务进度
展示 6 步服务进度追踪：已派单 → 已接单 → 已出发 → 已到达 → 服务中 → 已完成。每步显示时间戳。已完成订单展示服务前后对比照片占位区。
包含师傅信息、服务信息、地址信息、家电信息、费用明细。"联系师傅"一键拨号按钮。
9. 我的订单
支持按状态筛选：全部/待支付/已派单/进行中/已完成。订单卡片展示：订单编号、服务名称、地址、日期、状态标签、金额。
10. 个人中心
顶部展示头像、昵称、手机号。统计区显示进行中/已完成/优惠券数量。菜单包含：我的订单、服务地址、消息中心、我的评价、优惠券、意见反馈、设置。
师傅端（移动端）
师傅拥有独立工作台，底部 3 个 Tab：工作台、订单、收入。
1. 工作台
顶部展示师傅头像、姓名、在线/离线切换开关。统计行：今日订单（3）、本月收入（¥6,580）、评分（4.9）。下方"待接单"和"进行中"两个区块，新订单 10 分钟内接单。
2. 订单管理
按全部/待接单/进行中/已完成筛选。每单展示服务类型、地址、日期、金额。详情页可上报服务进度、拍摄服务前后对比照片、导航到客户地址。
3. 收入明细
本月收入、累计收入、可提现余额三大指标。按日期分组展示收入明细，底部提现按钮。
管理后台（PC 端）
管理后台采用深色侧边栏布局，支持多机构切换。
1. 数据看板
4 个指标卡片：今日订单（35）、本月营收（¥128,600）、在线师傅（18）、待分配订单（7）。下方展示订单趋势图和订单状态分布（已完成/进行中/待接单/待分配）。最近订单表格实时更新。
2. 订单管理
全平台订单列表，支持状态筛选和日期范围搜索。表格展示：订单编号、客户、师傅、服务类型、家电品牌型号、金额、状态。待分配订单可点击分配师傅按钮弹窗选择。
3. 师傅管理
师傅列表展示：姓名、电话、专长标签、评分、服务次数、状态。支持入驻审核（通过/驳回）、编辑信息、上线/下线操作。"新增师傅"按钮可手动添加。
4. 服务管理
服务项目 CRUD，表格展示服务名称、分类、时长、价格、状态。支持内联编辑和新增服务弹窗。
5. 财务报表
4 个汇总卡片（总营收 ¥128,600 / 平台抽佣 ¥25,720 / 退款 ¥2,400 / 订单数 232）+ 营收趋势图 + 交易明细表（含平台抽佣和师傅收入列）。支持日/周/月切换和 Excel 导出。
6. 评价管理
全平台评价列表，可查看详情、隐藏不当评价。
项目结构
23-frontend-appliance/src/ ├── router/index.js # 路由配置（三端 33 条路由） ├── stores/app.js # 集中式 Mock 数据（分类/服务/师傅/地址/订单） ├── pages/ │ ├── LoginPage.vue # 登录 │ ├── MainLayout.vue # 客户 Tab 布局（5 Tab） │ ├── HomePage.vue # 首页（Banner+分类+热门+推荐） │ ├── TechListPage.vue # 师傅列表（筛选+排序） │ ├── TechDetailPage.vue # 师傅详情（资质证书+评价） │ ├── ServiceListPage.vue # 服务项目（分类筛选） │ ├── AddressListPage.vue # 地址管理 │ ├── AddressAddPage.vue # 添加地址 │ ├── OrderConfirmPage.vue # 下单确认（3步+家电表单+急单） │ ├── OrderDetailPage.vue # 订单详情（6步进度+前后对比照） │ ├── OrderSuccessPage.vue # 预约成功 │ ├── OrdersPage.vue # 我的订单 │ ├── MyPage.vue # 个人中心 │ ├── ReviewPage.vue # 评价 │ ├── PayResultPage.vue # 支付结果 │ ├── MessagesPage.vue # 消息中心 │ ├── tech/ # 师傅端 5 页 │ │ ├── TechLayout.vue │ │ ├── TechHomePage.vue │ │ ├── TechOrdersPage.vue │ │ ├── TechOrderDetailPage.vue │ │ └── TechIncomePage.vue │ └── admin/ # 管理后台 7 页 │ ├── AdminLayout.vue │ ├── DashboardPage.vue │ ├── OrderMgmtPage.vue │ ├── TechMgmtPage.vue │ ├── ServiceMgmtPage.vue │ ├── FinancePage.vue │ ├── ReviewMgmtPage.vue │ └── OrgMgmtPage.vue设计亮点
家电信息表单：下单时填写家电类型、品牌、型号、故障描述，师傅上门前就能了解情况、带对工具和配件。这是家电服务区别于其他预约系统的核心差异化能力。
6 步服务进度追踪：已派单→已接单→已出发→已到达→服务中→已完成，每步时间戳。客户不用反复打电话问"师傅到哪了"，师傅不用接催单电话。
服务前后对比照片：师傅在 App 端拍摄服务前（脏滤网、积油烟）和服务后（洁净如新）的照片，同步展示在客户订单详情中。效果可视化，提升客户满意度和复购率。
急单加价机制：客户勾选"急单"后加收 50% 费用，订单优先推送给 3 公里内在线师傅。5 分钟无人接单自动转单。既满足紧急需求，又通过价格杠杆平衡供需。
资质证书展示：师傅详情页展示制冷证、电工证、清洗服务证等资质。证书+评价双信用体系，让客户下单更放心。
LBS 就近派单：系统根据客户服务地址，优先匹配距离最近的在线师傅。客户也可指定心仪师傅。
三端分离架构：客户端、师傅端、管理后台三个独立路由入口，一套代码部署三角色。
家电行业特色功能总结：
- 家电信息表单：类型/品牌/型号/故障描述，师傅提前备料
- 6 步服务进度：从派单到完成，全程可查
- 前后对比照片：服务效果可视化，提升复购
- 急单加价：2 小时上门，50% 加价，自动转单
- 资质证书：制冷证/电工证可查，建立信任
- 地址管理：家/公司/父母家，一键切换
源代码获取
- 演示地址：
http://appliance.hei-ai.com/ - 源码购买：
https://srcs.hei-ai.com/（搜索"家电清洗维修"）
交付内容：
- 完整前端源码（Vue 3 + Vite，开箱即跑
npm install && npm run dev） - 产品需求文档（含完整数据模型、API 设计和业务逻辑）
- 部署说明文档
本项目为家电清洗维修行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 多角色架构（客户+师傅+管理）开发的优质参考项目。欢迎交流讨论。
