夜雨聆风全源码提供-高效省心的搬家拉货预约小程序
一个面向搬家拉货行业的在线预约与派单平台，覆盖客户 + 司机 + 管理后台三端，基于 Vue 3 构建。
项目背景
"谁能帮我搬个家？""有没有面包车拉个货？"——小区群里每天都有这样的求助。据行业统计，中国每年有超过 2000 万次搬家需求，市场规模超 500 亿。但搬家拉货行业信息化程度极低：客户不知道找谁靠谱、司机在路边等活效率低下、公司靠电话+Excel 排单。 搬家拉货预约小程序正是为解决这些痛点而设计的一站式平台，打通"车型选择 → 在线估价 → 下单支付 → 司机接单 → 8步进度追踪 → 评价"的完整业务闭环。 适用场景包括：搬家公司、同城货运、大件运输、企业搬迁、家具拆装、社区便民搬家。技术选型
| 层级 | 技术栈 | |------|--------| | 前端框架 | Vue 3 + Composition API | | 路由 | Vue Router 4 | | 状态管理 | Pinia | | 构建工具 | Vite | | UI 风格 | 自定义 CSS 变量体系，移动端优先，橙蓝活力配色 | | 目标平台 | H5 / 微信小程序（UniApp 可扩展） |功能全景
客户端（移动端）
客户端采用底部 Tab 导航，覆盖从选择服务到评价的完整链路。 #### 1. 登录页 支持微信一键登录和手机号登录。slogan"轻松搬家，一键下单"。底部提供管理员入口和司机入口——一套代码服务三角色。
登录页
#### 2. 首页 顶部 Banner"专业搬家 轻松无忧 - 在线预约搬家服务"，橙蓝渐变背景。下方展示：
首页
#### 3. 司机列表 支持按专长分类筛选（全部/搬家拉货/同城货运/大件运输/企业搬迁/家具拆装），按评分/距离/服务次数排序。每位司机展示：头像、姓名、综合评分、服务次数、车辆型号、专长标签、价格。
司机列表
#### 4. 司机详情（核心决策页） 展示司机完整信息：
司机详情
#### 5. 下单确认（行业特色） 搬家行业特有的下单流程，包含以下关键信息：
确认下单
#### 6. 8步进度追踪（行业独有） 搬家服务特有的 8 步实时进度追踪，客户在手机上实时掌握搬家进度： 已派单 → 已接单 → 已出发 → 已到达 → 装车中 → 运输中 → 卸车中 → 已完成 每个已完成步骤显示时间戳，当前步骤高亮显示。比通用的"已接单→已完成"两步状态精确 4 倍，客户无需反复打电话问"到哪了"。
订单详情
#### 7. 订单详情 展示完整订单信息：状态横幅（待接单/进行中/已完成）、司机信息（头像+电话+车型）、服务信息（类型/车型/楼层）、起点终点地址、费用明细（基础运费+楼层费+超距费）。进行中订单显示 8 步进度追踪。 #### 8. 地址管理 支持添加多个地址（家/公司/父母家等），每个地址独立保存：联系人、电话、省市区、详细地址、标签。下单时一键切换，免去重复填写。 #### 9. 个人中心 顶部展示用户头像、手机号。统计区显示进行中/已完成/优惠券数量。菜单包含：我的订单、地址管理、消息中心、我的评价、优惠券、收藏的司机、意见反馈、设置。
个人中心
司机端（移动端）
司机拥有独立的工作台，底部 3 个 Tab：工作台、订单、收入。 #### 1. 工作台 顶部展示司机头像、姓名、在线/离线切换开关。统计行展示今日订单数、本月收入、评分。下方分"待接单"和"进行中"两个区块展示订单列表，每个订单显示服务类型、金额、起点终点、距离。
司机工作台
#### 2. 订单管理 支持按全部/待接单/进行中/已完成筛选。新订单有 10 分钟接单窗口。订单详情页可查看客户信息、地址详情、物品清单，并上报服务进度（已出发→已到达→装车中→运输中→卸车中→已完成）。
司机订单管理
#### 3. 收入明细 本月收入、累计收入、可提现余额，按日期分组展示收入明细（订单编号、服务类型、时间、金额）。底部提供提现按钮，支持微信零钱/银行卡提现。
司机收入明细
管理后台（PC 端）
管理后台采用深色侧边栏布局，6 组菜单，支持多机构切换。 #### 1. 数据看板 4 个指标卡片：今日订单（32）、本月营收（¥56,800）、在线司机（8）、待分配订单（3）。下方提供订单趋势图和订单状态分布。
数据看板
#### 2. 订单管理 全平台订单列表，支持按状态筛选和日期范围搜索。待分配订单可点击分配司机，弹窗展示可选司机列表一键分配。
订单管理
#### 3. 司机管理 司机列表展示姓名、手机号、车型、评分、服务次数、注册日期、审核状态。支持入驻审核（查看资质证书→通过/驳回）、编辑、下线/上线。
司机管理
#### 4. 服务管理 管理服务类目和定价：小型搬家、同城货运、大件运输等，支持增删改。
服务管理
#### 5. 财务报表 4 个汇总卡片（总营收、平台抽佣、退款、订单数）+ 营收趋势图 + 交易明细表。支持日/周/月切换和 Excel 导出。
财务报表
#### 6. 评价管理 + 机构管理 全平台评价列表，可查看评价详情、隐藏不当评价。多机构卡片网格展示运营数据。
评价管理
项目结构
``
25-frontend-moving/src/
├── router/index.js # 路由配置（三端共 35+ 条路由）
├── stores/app.js # Pinia 状态（司机/服务/地址/订单）
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # 客户 Tab 布局
│ ├── HomePage.vue # 首页（Banner+分类+推荐司机+服务）
│ ├── DriverListPage.vue # 司机列表（筛选+排序）
│ ├── DriverDetailPage.vue # 司机详情（资质+评价）
│ ├── ServiceListPage.vue # 服务项目列表
│ ├── AddressListPage.vue # 地址管理
│ ├── AddressAddPage.vue # 添加地址
│ ├── OrderConfirmPage.vue # 下单确认（车型+楼层+物品清单）
│ ├── OrderSuccessPage.vue # 预约成功
│ ├── OrderDetailPage.vue # 订单详情
│ ├── ReviewPage.vue # 服务评价
│ ├── OrdersPage.vue # 我的订单
│ ├── MyPage.vue # 个人中心
│ ├── MessagesPage.vue # 消息中心
│ ├── CouponsPage.vue # 优惠券
│ ├── FavoritesPage.vue # 收藏列表
│ ├── FeedbackPage.vue # 意见反馈
│ ├── SettingsPage.vue # 设置
│ │
│ ├── driver/ # 司机端
│ │ ├── DriverLayout.vue # 司机 Tab 布局
│ │ ├── DriverHomePage.vue # 工作台
│ │ ├── DriverOrdersPage.vue # 订单管理
│ │ ├── DriverOrderDetailPage.vue # 订单详情+进度上报
│ │ └── DriverIncomePage.vue # 收入明细
│ │
│ └── admin/ # 管理后台
│ ├── AdminLayout.vue # 深色侧边栏布局
│ ├── DashboardPage.vue # 数据看板
│ ├── OrderMgmtPage.vue # 订单管理+分配
│ ├── DriverMgmtPage.vue # 司机管理+审核
│ ├── ServiceMgmtPage.vue # 服务管理
│ ├── FinancePage.vue # 财务报表
│ ├── ReviewMgmtPage.vue # 评价管理
│ └── OrgMgmtPage.vue # 机构管理
`
设计亮点
8 步服务进度追踪：已派单→已接单→已出发→已到达→装车中→运输中→卸车中→已完成。搬家行业特有的中间状态（装车中/运输中/卸车中），比通用系统精确 4 倍，客户无需反复打电话问进度。
双地址 + 楼层计费：起点终点独立选择，有无电梯 + 楼层数自动计算楼层费（无电梯每层+¥20）。不同车型不同起步价，符合搬家行业定价逻辑。
车型选择器：小面/金杯/4.2米厢货/6.8米厢货，不同车型标注载重、车厢尺寸、适用场景。客户根据搬家规模选择合适车型，避免小车装不下或大车浪费。
物品清单：客户在下单时列出大件物品（冰箱/洗衣机/沙发/床/衣柜），司机提前了解搬运量，准备搬运工具和人手，避免到现场发现搬不了的尴尬。
司机信誉体系：资质证书上传+平台审核+服务评价三重信用机制。客户可查看司机的货运资格证、驾驶证等资质，以及历史客户的真实评价。
三端分离架构：客户端、司机端、管理后台三个独立路由入口，一套代码部署三角色。司机端支持在线/离线切换，管理后台支持多机构运营。
搬家行业特色功能总结：
8 步进度追踪：装车中/运输中/卸车中，每步可查
双地址+楼层计费：起点终点+楼层自动算价
车型匹配：按搬家规模选车型
物品清单：提前告知大件物品
一键拨号：联系司机
源代码获取
演示地址：http://moving.hei-ai.com/
源码购买：https://srcs.hei-ai.com/（搜索"搬家拉货"）
交付内容：
完整前端源码（Vue 3 + Vite，开箱即跑 npm install && npm run dev`）
*本项目为搬家拉货行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 多角色架构（客户+司机+管理）开发的优质参考项目。欢迎交流讨论。*
