上门维修预约系统应用


欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.1 应用简介

上门维修预约系统是一款面向社区居民的家政维修服务平台。支持维修预约、服务评价、师傅管理、订单跟踪等功能,帮助居民便捷预约各类上门维修服务。应用以稳重的蓝色为主色调,象征专业与可靠。涵盖服务广场、预约服务、我的订单、个人中心四大模块。

1.2 核心功能

功能模块 功能描述 实现方式
服务分类 8种维修服务类型 枚举定义
在线预约 预约上门维修服务 表单提交
师傅选择 查看师傅信息选择 列表展示
订单管理 查看和管理订单 状态流转
服务评价 对服务进行评价 星级评分
费用估算 预估维修费用 计算展示

1.3 服务类型定义

序号 类型名称 Emoji 参考价格 描述
1 水电维修 🔧 50-200元 水管、电路、开关插座
2 家电维修 📺 80-300元 空调、冰箱、洗衣机
3 管道疏通 🚿 100-300元 下水道、马桶疏通
4 门窗维修 🚪 80-200元 门锁、窗户、合页
5 开锁换锁 🔐 100-500元 开锁、换锁芯
6 墙面修补 🧱 50-150元 墙面裂缝、渗水
7 灯具安装 💡 30-100元 灯具安装、更换
8 其他服务 🛠️ 面议 其他维修服务

1.4 订单状态定义

序号 状态名称 Emoji 描述
1 待接单 等待师傅接单
2 已接单 师傅已接单
3 服务中 🔧 正在维修服务
4 待支付 💰 服务完成待支付
5 已完成 🎉 订单已完成
6 已取消 订单已取消

1.5 服务时段定义

序号 时段名称 时间范围 描述
1 上午 08:00-12:00 上午时段
2 下午 14:00-18:00 下午时段
3 晚上 18:00-21:00 晚上时段
4 全天 08:00-21:00 全天可约

1.6 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
状态管理 setState -
目标平台 鸿蒙OS / Web API 21+

1.7 项目结构

lib/
└── main_home_repair_booking.dart
    ├── HomeRepairBookingApp            # 应用入口
    ├── ServiceType                     # 服务类型枚举
    ├── OrderStatus                     # 订单状态枚举
    ├── ServiceTimeSlot                 # 服务时段枚举
    ├── RepairService                   # 维修服务模型
    ├── RepairOrder                     # 维修订单模型
    ├── Worker                          # 师傅模型
    ├── Review                          # 评价模型
    ├── HomeRepairBookingHomePage       # 主页面(底部导航)
    ├── _buildSquarePage                # 服务广场页
    ├── _buildBookingPage               # 预约服务页
    ├── _buildOrdersPage                # 我的订单页
    ├── _buildProfilePage               # 个人中心页
    └── 各类辅助组件

二、系统架构

2.1 整体架构图

Data Layer

Business Layer

Presentation Layer

主页面
HomeRepairBookingHomePage

服务广场

预约服务

我的订单

个人中心

服务分类

师傅列表

服务详情

选择服务

选择师傅

预约时间

订单列表

订单详情

服务评价

个人信息

地址管理

历史记录

预约管理器
BookingManager

订单处理器
OrderHandler

评价服务
ReviewService

RepairService
维修服务

RepairOrder
维修订单

Worker
师傅信息

Review
评价

2.2 类图设计

has

has

has

has

references

HomeRepairBookingApp

+Widget build()

«enumeration»

ServiceType

+String label

+String emoji

+int minPrice

+int maxPrice

+plumbing()

+appliance()

+drain()

+door()

+lock()

+wall()

+light()

+other()

«enumeration»

OrderStatus

+String label

+String emoji

+pending()

+accepted()

+serving()

+payment()

+completed()

+cancelled()

«enumeration»

ServiceTimeSlot

+String label

+String timeRange

+morning()

+afternoon()

+evening()

+allday()

RepairService

+String id

+String name

+ServiceType type

+String description

+int basePrice

+int estimatedTime

+List commonIssues

RepairOrder

+String id

+String serviceId

+String serviceName

+ServiceType serviceType

+OrderStatus status

+String workerId

+String workerName

+String address

+String contactName

+String contactPhone

+DateTime serviceDate

+ServiceTimeSlot timeSlot

+String description

+int estimatedCost

+int actualCost

+DateTime createTime

Worker

+String id

+String name

+String avatar

+double rating

+int orderCount

+int experience

+List services

+String introduction

Review

+String id

+String orderId

+String userId

+String workerId

+int rating

+String content

+DateTime createTime

2.3 页面导航流程

广场

预约

订单

我的

应用启动

服务广场

底部导航

浏览服务

预约服务

我的订单

个人中心

选择分类

查看师傅

服务详情

立即预约

选择服务

选择师傅

选择时间

填写地址

确认预约

订单列表

订单详情

取消订单

服务评价

个人信息

地址管理

历史记录

2.4 预约流程

师傅 订单系统 预约页面 服务广场 用户 师傅 订单系统 预约页面 服务广场 用户 浏览服务 显示服务列表 选择服务 显示可选师傅 选择师傅和时间 创建订单 推送新订单 接单确认 通知接单成功 上门服务 确认完成 请求评价 提交评价

三、核心模块设计

3.1 服务广场模块

服务广场是用户浏览和选择维修服务的主要入口,提供服务分类、师傅推荐等功能。

核心功能:

  1. 服务分类 - 按维修类型分类展示
  2. 热门服务 - 展示热门维修服务
  3. 师傅推荐 - 推荐优质师傅
  4. 快速搜索 - 搜索服务类型
  5. 价格参考 - 显示参考价格

3.2 预约服务模块

预约服务模块允许用户选择服务、师傅、时间进行预约。

核心功能:

  1. 服务选择 - 选择维修服务类型
  2. 师傅选择 - 查看师傅信息选择
  3. 时间选择 - 选择预约日期和时段
  4. 地址填写 - 填写服务地址
  5. 问题描述 - 描述维修问题
  6. 费用预估 - 预估服务费用

3.3 我的订单模块

我的订单模块管理用户的维修订单,提供状态追踪和评价功能。

核心功能:

  1. 订单列表 - 查看所有订单
  2. 状态筛选 - 按订单状态筛选
  3. 订单详情 - 查看详细信息
  4. 取消订单 - 取消未接单订单
  5. 服务评价 - 对完成订单评价

3.4 个人中心模块

个人中心模块管理用户信息、地址和历史记录。

核心功能:

  1. 个人信息 - 查看编辑个人信息
  2. 地址管理 - 管理服务地址
  3. 历史记录 - 查看历史订单
  4. 意见反馈 - 提交意见反馈

四、数据模型设计

4.1 维修服务模型

class RepairService {
  final String id;              // 服务ID
  final String name;            // 服务名称
  final ServiceType type;       // 服务类型
  final String description;     // 服务描述
  final int basePrice;          // 基础价格
  final int estimatedTime;      // 预计时长(分钟)
  final List<String> commonIssues; // 常见问题
}

4.2 维修订单模型

class RepairOrder {
  final String id;              // 订单ID
  final String serviceId;       // 服务ID
  final String serviceName;     // 服务名称
  final ServiceType serviceType;// 服务类型
  OrderStatus status;           // 订单状态
  final String workerId;        // 师傅ID
  final String workerName;      // 师傅名称
  final String address;         // 服务地址
  final String contactName;     // 联系人
  final String contactPhone;    // 联系电话
  final DateTime serviceDate;   // 服务日期
  final ServiceTimeSlot timeSlot; // 服务时段
  final String description;     // 问题描述
  final int estimatedCost;      // 预估费用
  int actualCost;               // 实际费用
  final DateTime createTime;    // 创建时间
}

4.3 师傅模型

class Worker {
  final String id;              // 师傅ID
  final String name;            // 姓名
  final String avatar;          // 头像
  final double rating;          // 评分
  final int orderCount;         // 订单数
  final int experience;         // 从业年限
  final List<ServiceType> services; // 擅长服务
  final String introduction;    // 个人简介
}

五、界面设计

5.1 配色方案

颜色类型 色值 用途
主色 #2196F3 品牌色、按钮
次色 #64B5F6 辅助色、背景
强调色 #FF9800 重要信息
背景色 #F5F5F5 页面背景
卡片色 #FFFFFF 卡片背景
文字色 #212121 主要文字
次文字 #757575 次要文字

5.2 字体规范

字体类型 字号 字重 用途
大标题 24sp Bold 页面标题
标题 18sp Medium 卡片标题
正文 14sp Regular 正文内容
辅助文字 12sp Regular 辅助信息
小字 10sp Regular 标签、时间

5.3 间距规范

间距类型 数值 用途
页面边距 16dp 页面左右边距
卡片间距 12dp 卡片之间间距
内容间距 8dp 内容元素间距
紧凑间距 4dp 紧凑元素间距

六、关键代码实现

6.1 主入口

void main() {
  runApp(const HomeRepairBookingApp());
}

class HomeRepairBookingApp extends StatelessWidget {
  const HomeRepairBookingApp({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '上门维修预约系统',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF2196F3),
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: const HomeRepairBookingHomePage(),
    );
  }
}

6.2 服务类型枚举

enum ServiceType {
  plumbing(label: '水电维修', emoji: '🔧', minPrice: 50, maxPrice: 200),
  appliance(label: '家电维修', emoji: '📺', minPrice: 80, maxPrice: 300),
  drain(label: '管道疏通', emoji: '🚿', minPrice: 100, maxPrice: 300),
  door(label: '门窗维修', emoji: '🚪', minPrice: 80, maxPrice: 200),
  lock(label: '开锁换锁', emoji: '🔐', minPrice: 100, maxPrice: 500),
  wall(label: '墙面修补', emoji: '🧱', minPrice: 50, maxPrice: 150),
  light(label: '灯具安装', emoji: '💡', minPrice: 30, maxPrice: 100),
  other(label: '其他服务', emoji: '🛠️', minPrice: 0, maxPrice: 0);

  final String label;
  final String emoji;
  final int minPrice;
  final int maxPrice;

  const ServiceType({
    required this.label,
    required this.emoji,
    required this.minPrice,
    required this.maxPrice,
  });
}

七、测试用例

7.1 功能测试

测试项 测试步骤 预期结果
浏览服务 进入服务广场 显示服务列表
选择服务 点击服务类型 显示相关师傅
预约服务 填写预约信息 预约成功
查看订单 进入我的订单 显示订单列表
取消订单 点击取消按钮 取消成功
服务评价 提交评价 评价成功

7.2 边界测试

测试项 测试条件 预期结果
空列表 无订单数据 显示空状态提示
时间选择 选择过去时间 提示不可选
取消限制 已接单订单 不可取消

八、部署说明

8.1 环境要求

  • Flutter SDK >= 3.0.0
  • Dart SDK >= 2.17.0
  • Android SDK >= 21 (鸿蒙OS兼容)

8.2 运行命令

flutter run -d web-server --web-port 8152 --web-hostname 0.0.0.0

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐