全源码提供-便捷高效的家电清洗维修预约小程序 一个面向家电清洗维修行业的在线预约与派单平台覆盖客户 师傅 管理后台基于 Vue 3 构建。项目背景每台空调每年至少需要深度清洗 1-2 次每台油烟机使用 3 个月就开始积油热水器用久了不加热、洗衣机用久了有异味——家电清洗维修是千亿级的刚需市场。但目前这个行业的信息化程度极低客户在小区群里喊谁认识洗空调的师傅师傅在路边等活或者靠老客户转介绍服务公司靠 Excel 排单。家电清洗维修预约小程序正是为规范这个行业而设计的一站式平台目标是打通服务浏览 → 选择师傅 → 在线下单 → 师傅上门 → 服务前后拍照 → 评价的完整业务闭环。适用场景包括家电清洗公司、品牌售后网点、社区便民服务中心、物业维修部和独立师傅个人接单。技术选型层级技术栈前端框架Vue 3 Composition API路由Vue Router 4状态管理Pinia构建工具ViteUI 风格自定义 CSS 变量体系移动端优先目标平台微信小程序 / H5 / AppUniApp 可扩展功能全景客户端移动端客户端采用底部 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 多角色架构客户师傅管理开发的优质参考项目。欢迎交流讨论。