鲜花礼品配送预约

---

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

一、项目概述

运行效果图

1.1 应用简介

鲜花礼品配送预约是一款面向鲜花礼品行业的在线预订与配送服务应用。用户可以浏览精选鲜花花束、礼品套装，选择配送时间和地址，在线下单预约配送。支持节日特惠、生日祝福、商务送礼等多种场景，让用户轻松传递心意，表达情感。

应用以浪漫的玫红色为主色调，象征鲜花与爱情的美好。涵盖商品浏览、购物车、订单管理、个人中心四大模块。用户可以浏览商品、加入购物车、下单支付、查看订单，快速完成鲜花礼品预约。

1.2 核心功能

功能模块	功能描述	实现方式
商品浏览	浏览鲜花礼品商品	卡片列表
分类筛选	按类型筛选商品	标签筛选
购物车	管理选购商品	状态管理
订单预约	下单预约配送	表单提交
订单管理	查看订单状态	列表展示
配送追踪	查看配送进度	状态流转

1.3 商品分类定义

序号	分类名称	Emoji	描述
1	鲜花花束	💐	精选鲜花花束
2	节日特惠	🎉	节日限定优惠
3	礼品套装	🎁	精美礼品组合
4	蛋糕甜点	🎂	生日蛋糕甜点
5	绿植盆栽	🪴	室内绿植盆栽

1.4 订单状态定义

序号	状态名称	Emoji	描述
1	待支付	💳	等待用户支付
2	已支付	✅	支付成功
3	配送中	🚚	正在配送
4	已完成	🎊	配送完成
5	已取消	❌	订单取消

1.5 配送时段定义

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

1.6 场景标签定义

序号	场景名称	Emoji	描述
1	生日祝福	🎂	生日礼物
2	爱情表白	💕	情人节礼物
3	商务送礼	💼	商务礼品
4	节日庆祝	🎉	节日礼物
5	探病慰问	🌻	探望慰问
6	开业祝贺	🎊	开业花篮

1.7 技术栈

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

1.8 项目结构

lib/
└── main_flower_delivery.dart
    ├── FlowerDeliveryApp          # 应用入口
    ├── ProductCategory            # 商品分类枚举
    ├── OrderStatus                # 订单状态枚举
    ├── DeliveryTime               # 配送时段枚举
    ├── Product                    # 商品模型
    ├── CartItem                   # 购物车模型
    ├── Order                      # 订单模型
    ├── MainScreen                 # 主页面（底部导航）
    ├── HomePage                   # 首页
    ├── ProductListPage            # 商品列表
    ├── CartPage                   # 购物车
    ├── OrderPage                  # 订单管理
    ├── ProfilePage                # 个人中心
    ├── ProductDetailSheet         # 商品详情弹窗
    └── CheckoutSheet              # 结算弹窗

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 下单流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 商品分类枚举 (ProductCategory)

enum ProductCategory {
  bouquet('鲜花花束', '💐', Color(0xFFE91E63)),
  festival('节日特惠', '🎉', Color(0xFFFF9800)),
  gift('礼品套装', '🎁', Color(0xFF9C27B0)),
  cake('蛋糕甜点', '🎂', Color(0xFFFFEB3B)),
  plant('绿植盆栽', '🪴', Color(0xFF4CAF50));

  final String label;
  final String emoji;
  final Color color;
}

3.1.2 订单状态枚举 (OrderStatus)

enum OrderStatus {
  pending('待支付', '💳', Colors.orange),
  paid('已支付', '✅', Colors.blue),
  delivering('配送中', '🚚', Colors.teal),
  completed('已完成', '🎊', Colors.green),
  cancelled('已取消', '❌', Colors.grey);

  final String label;
  final String emoji;
  final Color color;
}

3.1.3 商品模型 (Product)

class Product {
  final String id;              // 商品ID
  final String name;            // 商品名称
  final String description;     // 商品描述
  final double price;           // 现价
  final double originalPrice;   // 原价
  final ProductCategory category; // 分类
  final String image;           // 图片
  final int sales;              // 销量
  final double rating;          // 评分
  final List<String> tags;      // 场景标签
}

3.1.4 购物车模型 (CartItem)

class CartItem {
  final Product product;        // 商品
  int quantity;                 // 数量
  String cardMessage;           // 祝福卡片
  DateTime? deliveryDate;       // 配送日期
  String deliveryTime;          // 配送时段
  String deliveryAddress;       // 配送地址
}

3.1.5 商品分类分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 首页结构

3.2.3 商品卡片结构

3.2.4 购物车结构

3.3 购物流程逻辑

3.4 价格计算逻辑

---

四、UI设计规范

4.1 配色方案

应用以浪漫的玫红色为主色调，象征鲜花与爱情的美好：

颜色类型	色值	用途
主色	#E91E63 (Pink)	导航、主题元素
辅助色	#F48FB1	次要按钮
第三色	#CE93D8	礼品套装
强调色	#FF9800	节日特惠
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	商品卡片

4.2 分类颜色

分类	色值	视觉效果
鲜花花束	#E91E63	浪漫粉色
节日特惠	#FF9800	活力橙色
礼品套装	#9C27B0	优雅紫色
蛋糕甜点	#FFEB3B	温馨黄色
绿植盆栽	#4CAF50	清新绿色

4.3 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	主色
商品名称	16px	Medium	#000000
价格	18px	Bold	#E91E63
原价	12px	Regular	#999999
销量	12px	Regular	#666666

4.4 组件规范

4.4.1 分类入口

┌─────────────────────────────────────┐
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│
│  │  💐  │ │  🎉  │ │  🎁  │ │  🎂  ││
│  │鲜花  │ │节日  │ │礼品  │ │蛋糕  ││
│  │花束  │ │特惠  │ │套装  │ │甜点  ││
│  └──────┘ └──────┘ └──────┘ └──────┘│
└─────────────────────────────────────┘

4.4.2 商品卡片

┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │         商品图片             │   │
│  │                    🔥 热销   │   │
│  └─────────────────────────────┘   │
│  浪漫玫瑰鲜花花束                    │
│  💕爱情表白  ⭐ 4.9  📦 已售128     │
│  ¥199  ¥299                        │
│  [加入购物车]                       │
└─────────────────────────────────────┘

4.4.3 购物车商品

┌─────────────────────────────────────┐
│  ┌────┐  浪漫玫瑰鲜花花束            │
│  │ 🌹 │  ¥199                        │
│  └────┘  [-] 1 [+]    🗑️            │
└─────────────────────────────────────┘

4.4.4 配送信息表单

┌─────────────────────────────────────┐
│  配送信息                            │
│                                     │
│  收件人姓名                          │
│  [请输入收件人姓名          ]       │
│                                     │
│  联系电话                            │
│  [请输入联系电话            ]       │
│                                     │
│  配送地址                            │
│  [请输入详细配送地址        ]       │
│                                     │
│  配送日期                            │
│  [选择日期          ▼]              │
│                                     │
│  配送时段                            │
│  [上午 09:00-12:00   ▼]            │
│                                     │
│  祝福卡片                            │
│  [写下您的祝福语...          ]      │
└─────────────────────────────────────┘

4.4.5 订单卡片

┌─────────────────────────────────────┐
│  订单号: 202401150001               │
│  ────────────────────────────────   │
│  🌹 浪漫玫瑰鲜花花束 x1              │
│  🎁 精美礼品套装 x1                  │
│  ────────────────────────────────   │
│  配送时间: 2024-01-15 上午          │
│  收件人: 张先生 138****1234         │
│  ────────────────────────────────   │
│  合计: ¥399            [🚚 配送中]  │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 商品列表筛选实现

class ProductListPage extends StatefulWidget {
  const ProductListPage({super.key});

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  ProductCategory? _selectedCategory;
  String _sortBy = 'sales';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          _buildFilterBar(context),
          Expanded(child: _buildProductGrid(context)),
        ],
      ),
    );
  }
}

5.2 购物车管理实现

class CartPage extends StatefulWidget {
  const CartPage({super.key});

  @override
  State<CartPage> createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  final List<CartItem> _cartItems = [];

  void _updateQuantity(int index, int delta) {
    setState(() {
      _cartItems[index].quantity += delta;
      if (_cartItems[index].quantity <= 0) {
        _cartItems.removeAt(index);
      }
    });
  }

  double get _totalPrice {
    return _cartItems.fold(
      0, (sum, item) => sum + item.product.price * item.quantity
    );
  }
}

5.3 订单创建实现

void _createOrder() {
  final order = Order(
    id: 'ORD${DateTime.now().millisecondsSinceEpoch}',
    items: List.from(_cartItems),
    totalPrice: _totalPrice,
    status: OrderStatus.paid,
    createTime: DateTime.now(),
    deliveryTime: _selectedDate,
    address: _addressController.text,
    recipientName: _nameController.text,
    recipientPhone: _phoneController.text,
  );

  setState(() {
    _orders.insert(0, order);
    _cartItems.clear();
  });

  Navigator.pop(context);
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('订单创建成功！')),
  );
}

5.4 价格计算实现

double calculateTotal(List<CartItem> items) {
  double subtotal = items.fold(
    0, (sum, item) => sum + item.product.price * item.quantity
  );
  
  double deliveryFee = subtotal >= 99 ? 0 : 10;
  
  return subtotal + deliveryFee;
}

5.5 商品详情弹窗实现

class ProductDetailSheet extends StatelessWidget {
  final Product product;

  const ProductDetailSheet({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          _buildProductImage(),
          _buildProductInfo(),
          _buildTags(),
          _buildPrice(),
          _buildAddToCartButton(),
        ],
      ),
    );
  }
}

---

六、交互设计

6.1 浏览下单流程

6.2 购物车操作流程

6.3 订单状态流转

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 在线支付功能

支付功能：

• 微信支付集成
• 支付宝支付
• 银行卡支付
• 余额支付

7.2.2 配送追踪功能

追踪功能：

• 实时位置追踪
• 配送员信息
• 预计到达时间
• 配送状态通知

7.2.3 会员积分系统

会员功能：

• 积分获取规则
• 积分兑换商品
• 会员等级特权
• 生日专属优惠

---

八、注意事项

8.1 开发注意事项

1. 库存管理：下单时需检查商品库存

2. 价格精度：金额计算需注意精度问题

3. 配送时间：需验证配送时间有效性

4. 地址验证：配送地址需格式验证

5. 支付安全：支付信息需加密处理

8.2 常见问题

问题	原因	解决方案
商品下架	库存不足	提示用户
价格变动	促销结束	刷新价格
配送超时	高峰期	提前预约
地址错误	输入有误	地址校验
支付失败	网络问题	重试支付

8.3 使用技巧

💐 鲜花礼品选购技巧 💐

选购鲜花技巧

• 根据场合选择合适花材
• 注意鲜花保鲜期
• 提前预约确保配送
• 选择合适配送时段

礼品搭配建议

• 鲜花+蛋糕=生日祝福
• 鲜花+礼品=节日庆祝
• 绿植+花盆=开业祝贺
• 花束+卡片=表达心意

配送注意事项

• 提前1-2天预约
• 填写准确收件信息
• 选择合适配送时段
• 添加祝福卡片

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Web浏览器	Chrome 90+

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_flower_delivery.dart --web-port 8160

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_flower_delivery.dart

# 代码分析
flutter analyze lib/main_flower_delivery.dart

---

十、总结

鲜花礼品配送预约通过首页、商品列表、购物车、订单管理、个人中心五大模块，为用户提供了一个便捷的鲜花礼品预订平台。应用支持5种商品分类、5种订单状态、4种配送时段，让用户轻松选购心仪商品，传递美好心意。

核心功能涵盖商品浏览、购物车管理、订单预约、配送追踪四大模块。商品分类包括鲜花花束、节日特惠、礼品套装、蛋糕甜点、绿植盆栽；订单状态从待支付到已完成，完整覆盖订单生命周期；配送时段支持上午、下午、傍晚、全天灵活选择；购物车支持数量调整、祝福卡片、配送信息填写。

应用采用 Material Design 3 设计规范，以浪漫的玫红色为主色调，象征鲜花与爱情的美好。通过本应用，希望能够帮助用户轻松选购鲜花礼品，传递心意，表达情感。

鲜花礼品配送预约——传递美好心意

---