Flutter 开源鸿蒙实战城市智慧停车管理系统 Day4 停车订单生成多状态管理在线缴费我的订单会员中心个人中心完善欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net!-- Schema.org 结构化数据 --scripttypeapplication/ldjson{context:https://schema.org,type:BlogPosting,headline:Flutter开源鸿蒙实战 城市智慧停车管理系统Day4 订单生成状态管理在线缴费我的订单会员中心,author:{type:Person,name:鸿蒙跨端开发者},publisher:{type:Organization,name:开源鸿蒙技术社区},datePublished:2026-05-09,description:商业级非校园实战项目Day4实现停车订单自动生成、订单状态枚举、在线缴费弹窗、我的订单多标签筛选、下拉刷新、会员中心权益面板、个人中心完整功能、退出登录缓存清理深度结合高德停车业务适配鸿蒙多端毕设商业级闭环落地,keywords:Flutter,开源鸿蒙,OpenHarmony,智慧停车,停车订单,在线缴费,订单状态,会员中心,GetX,商业毕设项目}/script一、前言哈喽小伙伴们我们继续深耕城市智慧停车管理系统全程聚焦城市商圈、小区、市政停车场真实业务无校园场景、无同质化烂大街功能整套项目架构规范、业务逻辑完整、技术点密集毕设和作品集竞争力拉满。快速复盘前3天完整开发进度Day1项目初始化、企业级分层架构、全套第三方库高德地图、定位、权限、缓存、网络集成、GetX全局状态、底部导航与页面骨架Day2高德地图全屏展示、实时定位、车场点位标注、搜索筛选、车场卡片、全局路由配置完成地图查询底座Day3车场详情页、车位预约、阶梯式停车计费算法、高德路线导航、常用车场缓存、停车实时计时实现停车预约–计时–计费–导航核心业务闭环。来到Day4我们正式进入订单与支付业务层这是智慧停车系统商业化的关键用户停车结束 → 生成停车订单 → 在线缴费 → 查看历史订单 → 会员权益使用。今天一次性完成订单全生命周期管理、在线缴费模拟、我的订单页面、会员中心、个人中心功能完善让项目从“能用”升级为“完整商用系统”。本篇严格沿用固定写作规范口语化叙事、代码精简5–6行、步骤清晰、鸿蒙全端适配、文末配套4张实景配图格式风格和前序完全统一。今日Day4 核心开发任务逐项落地定义停车订单状态枚举停车中/待缴费/已完成/超时未缴完善订单实体模型关联车场、车位、时长、费用、会员折扣停车结束自动生成唯一订单号创建停车订单实现在线缴费弹窗模拟支付流程缴费后更新订单状态搭建我的订单页面实现多标签分类筛选下拉刷新封装全局订单卡片组件区分不同状态UI样式开发会员中心页面展示会员等级、到期时间、停车折扣权益完善个人中心整合登录、我的订单、会员中心、常用车场、设置实现退出登录、清空本地缓存、重置全局用户状态整理Day4高频开发问题与新手避坑方案。二、版块1订单状态枚举定义文字讲解先定义4种真实停车业务状态统一管理订单流转可读性强后期扩展状态只需修改枚举全局自动生效。enumOrderStatus{parking,// 停车中unpaid,// 待缴费completed,// 已完成overtime// 超时未缴费}三、版块2停车订单实体模型完善文字讲解订单模型包含订单号、车场名称、车位号、停车时长、应付费用、会员折扣、停车起止时间、订单状态完整记录一笔停车全流程数据。classParkOrderModel{finalStringorderNo;finalStringparkName;finalint slotId;finalint parkHour;finaldouble fee;finalbool isVip;finalOrderStatusstatus;finalDateTimestartTime;ParkOrderModel({requiredthis.orderNo,requiredthis.parkName,requiredthis.slotId,requiredthis.parkHour,requiredthis.fee,requiredthis.isVip,requiredthis.status,requiredthis.startTime,});}四、版块3控制器新增订单响应式列表文字讲解在ParkController中用RxList统一管理所有停车订单数据自动驱动UI无需手动刷新GetX标准企业级写法。finalRxListParkOrderModelorderListParkOrderModel[].obs;finalRxListParkOrderModelfilterOrderListParkOrderModel[].obs;五、版块4自动生成唯一订单编号文字讲解使用时间戳随机数生成唯一订单号避免重复格式规范适合真实项目使用。StringcreateOrderNo(){returnDateFormat(yyyyMMddHHmmss).format(DateTime.now())Random().nextInt(99).toString();}六、版块5停车结束生成订单逻辑文字讲解用户点击结束停车停止计时计算最终费用生成订单默认状态为待缴费同时保存到全局订单列表。voidstopParking(ParkModelpark,int slotId,int hour,double fee){timer?.cancel();StringnocreateOrderNo();bool vipauthCtrl.isVip.value;varorderParkOrderModel(orderNo:no,parkName:park.name,slotId:slotId,parkHour:hour,fee:fee,isVip:vip,status:OrderStatus.unpaid,startTime:DateTime.now(),);orderList.add(order);filterOrderList.assignAll(orderList);}七、版块6在线缴费弹窗实现文字讲解模拟真实停车缴费流程弹出缴费面板显示订单号、车场、时长、金额、会员折扣点击确认缴费后订单状态改为已完成。voidshowPayDialog(ParkOrderModelorder){Get.dialog(AlertDialog(title:constText(停车缴费),content:Column(mainAxisSize:MainAxisSize.min,children:[Text(订单号${order.orderNo}),Text(应付金额${order.fee.toStringAsFixed(2)}元),Text(order.isVip?已享会员8折优惠:普通用户),],),actions:[TextButton(onPressed:()Get.back(),child:constText(取消)),TextButton(onPressed:()payOrder(order),child:constText(确认缴费)),],));}文字讲解缴费成功后更新订单状态UI实时刷新同时Toast提示缴费完成。voidpayOrder(ParkOrderModelorder){int indexorderList.indexWhere((e)e.orderNoorder.orderNo);orderList[index]order.copyWith(status:OrderStatus.completed);Get.back();ToastUtil.show(缴费成功感谢使用);}八、版块7我的订单页面多标签筛选文字讲解顶部标签栏全部、停车中、待缴费、已完成、超时点击自动筛选对应订单Obx监听实时刷新。WidgetbuildOrderTab(){returnSingleChildScrollView(scrollDirection:Axis.horizontal,child:Row(children:[buildTabItem(全部,null),buildTabItem(停车中,OrderStatus.parking),buildTabItem(待缴费,OrderStatus.unpaid),buildTabItem(已完成,OrderStatus.completed),],),);}voidfilterOrder(OrderStatus?status){if(statusnull)filterOrderList.assignAll(orderList);elsefilterOrderList.assignAll(orderList.where((e)e.statusstatus));}九、版块8封装全局订单卡片组件文字讲解不同订单状态用不同颜色标签区分蓝色停车中、橙色待缴费、绿色已完成、红色超时全局统一UI。WidgetorderCard(ParkOrderModelorder){ColorstatusColorswitch(order.status){OrderStatus.parkingColors.blue,OrderStatus.unpaidColors.orange,OrderStatus.completedColors.green,_Colors.red};returnCard(elevation:AppStyle.shadowElevation,borderRadius:BorderRadius.circular(AppStyle.radius),child:Padding(padding:EdgeInsets.all(AppStyle.padding),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[Text(order.parkName,style:TextStyle(fontSize:16.sp,fontWeight:FontWeight.bold)),Container(padding:EdgeInsets.all(4.w),decoration:BoxDecoration(color:statusColor,borderRadius:BorderRadius.circular(4.r)),child:Text(order.status.name,style:TextStyle(color:Colors.white,fontSize:12.sp)))]),Text(车位${order.slotId}号 | 时长${order.parkHour}小时),Text(应付费用${order.fee.toStringAsFixed(2)}元),],),),);}十、版块9下拉刷新订单列表文字讲解集成下拉刷新模拟重新请求最新订单数据适配鸿蒙多端滑动交互提升体验。body:RefreshIndicator(onRefresh:()asynccontroller.refreshOrder(),child:Obx(()ListView.builder(itemCount:controller.filterOrderList.length,itemBuilder:(c,i)orderCard(controller.filterOrderList[i]))))十一、版块10会员中心页面开发文字讲解展示会员等级、到期时间、停车8折权益、开通会员按钮卡片式布局商务简约风格。classVipPageextendsStatelessWidget{constVipPage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:buildAppBar(会员中心),body:Padding(padding:EdgeInsets.all(AppStyle.padding),child:Column(children:[Container(padding:EdgeInsets.all(20.w),decoration:BoxDecoration(color:Colors.amber[50],borderRadius:BorderRadius.circular(12.r)),child:Column(children:[Text(VIP高级会员,style:TextStyle(fontSize:20.sp,fontWeight:FontWeight.bold)),SizedBox(height:10.h),Text(停车享8折优惠 · 优先预约车位)]),)],),),);}}十二、版块11个人中心完善退出登录文字讲解重构个人中心页面整合头像、昵称、会员状态、我的订单、会员中心、常用车场、系统设置实现退出登录清空缓存全局状态。ListTile(leading:Icon(Icons.receipt_long),title:Text(我的停车订单),onTap:()Get.toNamed(RoutePath.order),)ListTile(leading:Icon(Icons.star),title:Text(会员中心),onTap:()Get.toNamed(RoutePath.vip),)ListTile(leading:Icon(Icons.logout,color:Colors.red),title:Text(退出登录),onTap:()controller.logout(),)Futurevoidlogout()async{finalspawaitSharedPreferences.getInstance();awaitsp.clear();authCtrl.logout();Get.offAllNamed(RoutePath.home);}十三、版块12Day4 新手高频问题详解问题1订单缴费后状态不更新解答必须使用RxList修改后调用assignAll或直接更新元素UI用Obx包裹状态枚举匹配正确。问题2下拉刷新无响应解答onRefresh必须加async/await刷新方法内重新赋值订单列表避免滑动冲突。问题3会员折扣不生效解答会员状态从全局AuthController实时获取计算费用时判断isVip计费算法顺序正确。问题4个人中心退出登录闪退解答先清空缓存再退出状态路由使用Get.offAllNamed清空栈异步方法等待完成。问题5订单标签筛选错乱解答筛选时严格匹配枚举类型不要混用字符串/数字filterOrderList及时赋值。十四、Day4 开发总结今天Day4我们完成停车订单全生命周期会员体系个人中心完整闭环项目正式具备商业化能力定义4种订单状态枚举规范停车业务流转完善订单模型记录完整停车信息实现停车结束自动生成订单、唯一订单号开发在线缴费弹窗模拟真实支付流程缴费更新状态我的订单页面支持多标签筛选、下拉刷新交互流畅封装全局订单卡片状态颜色区分清晰完成会员中心UI展示停车折扣权益完善个人中心全功能实现退出登录缓存清理适配鸿蒙手机平板布局无错乱、无溢出。项目现已形成定位→查车场→预约车位→计时停车→生成订单→在线缴费→查看订单→会员权益的完整城市停车业务闭环完全对标商用APP毕设、面试项目硬核加分。十五、下期Day5预告Day5将开发停车超时提醒弹窗、深浅色全局主题切换、登录页面记住登录、全局UI统一美化、启动隐私协议弹窗、鸿蒙打包签名配置。