Flutter + 开源鸿蒙实战｜城市智慧停车管理系统 Day4 停车订单生成+多状态管理+在线缴费+我的订单+会员中心+个人中心完善

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

html 复制代码

<!-- Schema.org 结构化数据 -->
<script type="application/ld+json">
{
  "@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种真实停车业务状态，统一管理订单流转，可读性强，后期扩展状态只需修改枚举，全局自动生效。

dart 复制代码

enum OrderStatus {
  parking,    // 停车中
  unpaid,     // 待缴费
  completed,   // 已完成
  overtime    // 超时未缴费
}

三、版块2：停车订单实体模型完善

文字讲解

订单模型包含订单号、车场名称、车位号、停车时长、应付费用、会员折扣、停车起止时间、订单状态，完整记录一笔停车全流程数据。

dart 复制代码

class ParkOrderModel {
  final String orderNo;
  final String parkName;
  final int slotId;
  final int parkHour;
  final double fee;
  final bool isVip;
  final OrderStatus status;
  final DateTime startTime;

  ParkOrderModel({
    required this.orderNo,
    required this.parkName,
    required this.slotId,
    required this.parkHour,
    required this.fee,
    required this.isVip,
    required this.status,
    required this.startTime,
  });
}

四、版块3：控制器新增订单响应式列表

文字讲解

在ParkController中用RxList统一管理所有停车订单，数据自动驱动UI，无需手动刷新，GetX标准企业级写法。

dart 复制代码

final RxList<ParkOrderModel> orderList = <ParkOrderModel>[].obs;
final RxList<ParkOrderModel> filterOrderList = <ParkOrderModel>[].obs;

五、版块4：自动生成唯一订单编号

文字讲解

使用时间戳+随机数生成唯一订单号，避免重复，格式规范，适合真实项目使用。

dart 复制代码

String createOrderNo() {
  return DateFormat('yyyyMMddHHmmss').format(DateTime.now())
      + Random().nextInt(99).toString();
}

六、版块5：停车结束生成订单逻辑

文字讲解

用户点击结束停车，停止计时，计算最终费用，生成订单，默认状态为待缴费，同时保存到全局订单列表。

dart 复制代码

void stopParking(ParkModel park, int slotId, int hour, double fee) {
  timer?.cancel();
  String no = createOrderNo();
  bool vip = authCtrl.isVip.value;
  var order = ParkOrderModel(
    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：在线缴费弹窗实现

文字讲解

模拟真实停车缴费流程：弹出缴费面板，显示订单号、车场、时长、金额、会员折扣，点击确认缴费后订单状态改为已完成。

dart 复制代码

void showPayDialog(ParkOrderModel order) {
  Get.dialog(AlertDialog(
    title: const Text("停车缴费"),
    content: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text("订单号：${order.orderNo}"),
        Text("应付金额：${order.fee.toStringAsFixed(2)} 元"),
        Text(order.isVip ? "已享会员8折优惠" : "普通用户"),
      ],
    ),
    actions: [
      TextButton(onPressed: ()=>Get.back(), child: const Text("取消")),
      TextButton(onPressed: ()=>payOrder(order), child: const Text("确认缴费")),
    ],
  ));
}

文字讲解

缴费成功后更新订单状态，UI实时刷新，同时Toast提示缴费完成。

dart 复制代码

void payOrder(ParkOrderModel order) {
  int index = orderList.indexWhere((e)=>e.orderNo == order.orderNo);
  orderList[index] = order.copyWith(status: OrderStatus.completed);
  Get.back();
  ToastUtil.show("缴费成功，感谢使用！");
}

八、版块7：我的订单页面+多标签筛选

文字讲解

顶部标签栏：全部、停车中、待缴费、已完成、超时；点击自动筛选对应订单，Obx监听实时刷新。

dart 复制代码

Widget buildOrderTab() {
  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        buildTabItem("全部", null),
        buildTabItem("停车中", OrderStatus.parking),
        buildTabItem("待缴费", OrderStatus.unpaid),
        buildTabItem("已完成", OrderStatus.completed),
      ],
    ),
  );
}

dart 复制代码

void filterOrder(OrderStatus? status) {
  if(status == null) filterOrderList.assignAll(orderList);
  else filterOrderList.assignAll(orderList.where((e)=>e.status == status));
}

九、版块8：封装全局订单卡片组件

文字讲解

不同订单状态用不同颜色标签区分：蓝色停车中、橙色待缴费、绿色已完成、红色超时，全局统一UI。

dart 复制代码

Widget orderCard(ParkOrderModel order) {
  Color statusColor = switch(order.status){
    OrderStatus.parking=>Colors.blue,
    OrderStatus.unpaid=>Colors.orange,
    OrderStatus.completed=>Colors.green,
    _=>Colors.red
  };
  return Card(
    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：下拉刷新订单列表

文字讲解

集成下拉刷新，模拟重新请求最新订单数据，适配鸿蒙多端滑动交互，提升体验。

dart 复制代码

body: RefreshIndicator(
  onRefresh: ()async=>controller.refreshOrder(),
  child: Obx(()=>ListView.builder(
    itemCount: controller.filterOrderList.length,
    itemBuilder: (c,i)=>orderCard(controller.filterOrderList[i])
  ))
)

十一、版块10：会员中心页面开发

文字讲解

展示会员等级、到期时间、停车8折权益、开通会员按钮，卡片式布局，商务简约风格。

dart 复制代码

class VipPage extends StatelessWidget {
  const VipPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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：个人中心完善+退出登录

文字讲解

重构个人中心页面，整合头像、昵称、会员状态、我的订单、会员中心、常用车场、系统设置；实现退出登录清空缓存+全局状态。

dart 复制代码

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(),
)

dart 复制代码

Future<void> logout() async {
  final sp = await SharedPreferences.getInstance();
  await sp.clear();
  authCtrl.logout();
  Get.offAllNamed(RoutePath.home);
}

十三、版块12：Day4 新手高频问题详解

问题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统一美化、启动隐私协议弹窗、鸿蒙打包签名配置。