乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > 全源码提供-高效省心的搬家拉货预约小程序

全源码提供-高效省心的搬家拉货预约小程序

当前时间： 2026-08-15 13:58:17 分类：办公文件 评论(0)
全源码提供-高效省心的搬家拉货预约小程序

全源码提供-高效省心的搬家拉货预约小程序

一个面向搬家拉货行业的在线预约与派单平台，覆盖客户 + 司机 + 管理后台三端，基于 Vue 3 构建。

项目背景

"谁能帮我搬个家？""有没有面包车拉个货？"——小区群里每天都有这样的求助。据行业统计，中国每年有超过 2000 万次搬家需求，市场规模超 500 亿。但搬家拉货行业信息化程度极低：客户不知道找谁靠谱、司机在路边等活效率低下、公司靠电话+Excel 排单。 搬家拉货预约小程序正是为解决这些痛点而设计的一站式平台，打通"车型选择 → 在线估价 → 下单支付 → 司机接单 → 8步进度追踪 → 评价"的完整业务闭环。 适用场景包括：搬家公司、同城货运、大件运输、企业搬迁、家具拆装、社区便民搬家。

技术选型

| 层级 | 技术栈 | |------|--------| | 前端框架 | Vue 3 + Composition API | | 路由 | Vue Router 4 | | 状态管理 | Pinia | | 构建工具 | Vite | | UI 风格 | 自定义 CSS 变量体系，移动端优先，橙蓝活力配色 | | 目标平台 | H5 / 微信小程序（UniApp 可扩展） |

功能全景

客户端（移动端）

客户端采用底部 Tab 导航，覆盖从选择服务到评价的完整链路。 #### 1. 登录页 支持微信一键登录和手机号登录。slogan"轻松搬家，一键下单"。底部提供管理员入口和司机入口——一套代码服务三角色。

登录页

#### 2. 首页 顶部 Banner"专业搬家 轻松无忧 - 在线预约搬家服务"，橙蓝渐变背景。下方展示：
  • 6 大服务分类：搬家拉货、同城货运、大件运输、企业搬迁、家具拆装、纸箱包装
  • 推荐司机：横向滚动卡片，展示头像、姓名、评分、服务次数、车辆信息、价格（¥238/次）
  • 热门服务列表：小型搬家(小面) ¥238、标准搬家(金杯) ¥388、大件搬家(4.2米) ¥588、企业搬迁(6.8米) ¥1,280

    • 首页

    #### 3. 司机列表 支持按专长分类筛选（全部/搬家拉货/同城货运/大件运输/企业搬迁/家具拆装），按评分/距离/服务次数排序。每位司机展示：头像、姓名、综合评分、服务次数、车辆型号、专长标签、价格。

    司机列表

    #### 4. 司机详情（核心决策页） 展示司机完整信息：
  • 基本信息：头像、姓名、评分、服务次数、从业年限（10年）、好评率
  • 资质证书：货运资格证、驾驶证等（可点击查看大图）
  • 车辆信息：车型、载重、车厢尺寸
  • 顾客评价：星级+文字评价列表
    • 底部固定栏显示价格"¥238/次"和立即预约按钮。

    司机详情

    #### 5. 下单确认（行业特色） 搬家行业特有的下单流程，包含以下关键信息：
  • 起点+终点双地址选择器：从已保存地址中选择或新增，支持地图选点
  • 车型选择：小面/金杯/4.2米厢货/6.8米厢货，不同车型不同起步价
  • 楼层信息：起点楼层、终点楼层、有无电梯——自动计算楼层费（无电梯每层+¥20）
  • 物品清单：文本区域输入大件物品（冰箱/洗衣机/沙发/床），方便师傅提前准备
  • 备注：特殊需求描述
    • 底部实时显示合计金额，支持微信/支付宝支付。

    确认下单

    #### 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`）
  • 产品需求文档（含完整数据模型、API 设计和业务逻辑）
  • 部署说明文档
    • *本项目为搬家拉货行业数字化转型的一次实践探索。既是可直接上线运营的 SaaS 产品原型，也是学习 Vue 3 多角色架构（客户+司机+管理）开发的优质参考项目。欢迎交流讨论。*