夜雨聆风全源码提供-专业靠谱的家电清洗维修预约小程序
一个面向家电清洗维修行业的在线预约与派单平台，覆盖客户 + 师傅 + 管理后台，基于 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"专业家电服务 · 清洗·维修·安装 一站式解决"。下方展示：
首页
#### 3. 师傅列表 支持按专长筛选（全部/空调/清洗/维修/安装），按综合/评分/距离/服务次数排序。每位师傅展示：头像、姓名、评分星级、服务次数、从业年限、专长标签、价格。点击进入师傅详情。
师傅列表
#### 4. 师傅详情（决策关键页） 展示师傅完整信息：大头像、姓名、综合评分（⭐4.9）、已服务次数（856 次）、从业年限（8 年）、联系电话。核心区域展示资质证书列表——制冷与空调作业证、电工证等，这是客户决定下单的关键信任要素。下方展示专长标签和顾客评价。 底部固定栏显示价格"¥158/台"和立即预约按钮。
师傅详情
#### 5. 服务项目 按分类 Tab 筛选（空调清洗/洗衣机清洗/油烟机清洗等 8 个分类）。每项服务展示：图标、名称、描述（"挂机/柜机深度拆洗，含滤网+蒸发器+风轮"）、预计时长、价格。底部"立即预约"按钮。
服务项目
#### 6. 地址管理 支持添加多个服务地址（家、公司、父母家），每个地址包含：联系人、电话、省市区、详细地址、门牌号。可设默认地址，一键切换。
地址管理
#### 7. 下单确认（行业核心表单） 3 步完成下单：选择服务 → 填写信息 → 确认支付。 填写信息页面是本项目的核心表单：
下单确认
#### 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`）
*本项目为家电清洗维修行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 多角色架构（客户+师傅+管理）开发的优质参考项目。欢迎交流讨论。*
