Flutter 框架跨平台鸿蒙开发 - 上门维修预约系统
运行效果图上门维修预约系统是一款面向社区居民的家政维修服务平台。支持维修预约、服务评价、师傅管理、订单跟踪等功能,帮助居民便捷预约各类上门维修服务。应用以稳重的蓝色为主色调,象征专业与可靠。涵盖服务广场、预约服务、我的订单、个人中心四大模块。序号类型名称Emoji参考价格描述1水电维修🔧50-200元水管、电路、开关插座2家电维修📺80-300元空调、冰箱、洗衣机3管道疏通🚿100-300元
·
上门维修预约系统应用
欢迎加入开源鸿蒙跨平台社区:
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 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 预约流程
三、核心模块设计
3.1 服务广场模块
服务广场是用户浏览和选择维修服务的主要入口,提供服务分类、师傅推荐等功能。
核心功能:
- 服务分类 - 按维修类型分类展示
- 热门服务 - 展示热门维修服务
- 师傅推荐 - 推荐优质师傅
- 快速搜索 - 搜索服务类型
- 价格参考 - 显示参考价格
3.2 预约服务模块
预约服务模块允许用户选择服务、师傅、时间进行预约。
核心功能:
- 服务选择 - 选择维修服务类型
- 师傅选择 - 查看师傅信息选择
- 时间选择 - 选择预约日期和时段
- 地址填写 - 填写服务地址
- 问题描述 - 描述维修问题
- 费用预估 - 预估服务费用
3.3 我的订单模块
我的订单模块管理用户的维修订单,提供状态追踪和评价功能。
核心功能:
- 订单列表 - 查看所有订单
- 状态筛选 - 按订单状态筛选
- 订单详情 - 查看详细信息
- 取消订单 - 取消未接单订单
- 服务评价 - 对完成订单评价
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
更多推荐

所有评论(0)