社区团购接龙工具应用

---

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

一、项目概述

运行效果图

1.1 应用简介

社区团购接龙工具是一款面向社区居民的团购组织工具。支持发起团购、参与接龙、订单管理、配送跟踪等功能，帮助社区居民便捷组织团购活动，享受优惠价格。应用以温暖的橙色为主色调，象征社区的温度与活力。涵盖团购广场、发起团购、我的订单、我的团购四大模块。

1.2 核心功能

功能模块	功能描述	实现方式
团购分类	8种商品类型分类	枚举定义
发起团购	发布团购信息组织接龙	表单提交
参与接龙	一键参与团购接龙	状态管理
订单管理	查看和管理订单	列表展示
配送跟踪	实时查看配送状态	状态流转
统计分析	团购数据统计分析	图表展示

1.3 商品类型定义

序号	类型名称	Emoji	描述
1	生鲜果蔬	🥬	新鲜蔬菜水果
2	肉禽蛋奶	🥩	肉类禽蛋奶制品
3	粮油调味	🍚	米面粮油调味品
4	休闲零食	🍪	零食饮料
5	日用百货	🧴	日常生活用品
6	母婴用品	🍼	婴幼儿用品
7	美妆护肤	💄	化妆护肤品
8	其他商品	📦	其他类型商品

1.4 团购状态定义

序号	状态名称	Emoji	描述
1	接龙中	🟢	正在接龙，可参与
2	已成团	🎉	达到成团人数
3	配送中	🚚	商品配送中
4	已完成	✅	团购已完成
5	已取消	❌	团购已取消
6	未成团	⚠️	未达到成团人数

1.5 订单状态定义

序号	状态名称	Emoji	描述
1	待确认	⏳	等待确认订单
2	已确认	✅	订单已确认
3	待取货	📍	等待取货
4	已完成	🎊	订单已完成
5	已取消	🚫	订单已取消

1.6 技术栈

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

1.7 项目结构

lib/
└── main_community_group_buy.dart
    ├── CommunityGroupBuyApp           # 应用入口
    ├── ProductCategory                # 商品类型枚举
    ├── GroupBuyStatus                 # 团购状态枚举
    ├── OrderStatus                    # 订单状态枚举
    ├── GroupBuy                       # 团购信息模型
    ├── OrderItem                      # 订单项模型
    ├── Participant                    # 参与者模型
    ├── CommunityGroupBuyHomePage      # 主页面（底部导航）
    ├── _buildSquarePage               # 团购广场页
    ├── _buildCreatePage               # 发起团购页
    ├── _buildMyOrdersPage             # 我的订单页
    ├── _buildMyGroupBuysPage          # 我的团购页
    └── 各类辅助组件

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 团购流程

---

三、核心模块设计

3.1 团购广场模块

团购广场是用户浏览和参与团购的主要入口，提供分类筛选、搜索、排序等功能。

核心功能：

1. 分类筛选 - 按商品类型筛选团购
2. 关键词搜索 - 搜索团购标题、描述
3. 排序方式 - 按时间、价格、热度排序
4. 团购卡片 - 展示关键信息预览
5. 进度展示 - 显示接龙进度条

3.2 发起团购模块

发起团购模块允许用户创建团购活动，设置商品信息、成团规则等。

核心功能：

1. 商品信息 - 标题、描述、图片
2. 价格设置 - 团购价、原价对比
3. 成团规则 - 最少人数、截止时间
4. 取货设置 - 取货地点、取货时间
5. 预览发布 - 信息预览确认

3.3 我的订单模块

我的订单模块管理用户参与的团购订单，提供状态追踪和取货功能。

核心功能：

1. 订单列表 - 查看所有订单
2. 状态筛选 - 按订单状态筛选
3. 订单详情 - 查看详细信息
4. 取货码 - 生成取货二维码
5. 取消订单 - 取消未完成订单

3.4 我的团购模块

我的团购模块管理用户发起的团购活动，提供统计和管理功能。

核心功能：

1. 我发起的 - 查看发起的团购
2. 参与者管理 - 查看参与者列表
3. 统计分析 - 销售数据统计
4. 状态管理 - 更新团购状态
5. 通知推送 - 发送通知给参与者

---

四、数据模型设计

4.1 团购信息模型

class GroupBuy {
  final String id;              // 团购ID
  final String title;           // 团购标题
  final String description;     // 商品描述
  final ProductCategory category; // 商品类型
  GroupBuyStatus status;        // 团购状态
  final double price;           // 团购价格
  final double originalPrice;   // 原价
  final int minParticipants;    // 最少成团人数
  int currentParticipants;      // 当前参与人数
  final int maxParticipants;    // 最大人数限制
  final DateTime deadline;      // 截止时间
  final DateTime createTime;    // 创建时间
  final String organizerId;     // 发起人ID
  final String organizerName;   // 发起人名称
  final String pickupLocation;  // 取货地点
  final String imageUrl;        // 商品图片
  final List<Participant> participants; // 参与者列表
}

4.2 订单项模型

class OrderItem {
  final String id;              // 订单ID
  final String groupBuyId;      // 团购ID
  final String userId;          // 用户ID
  final String userName;        // 用户名称
  final int quantity;           // 购买数量
  final double totalPrice;      // 总价
  OrderStatus status;           // 订单状态
  final DateTime orderTime;     // 下单时间
  final String pickupCode;      // 取货码
}

4.3 参与者模型

class Participant {
  final String id;              // 参与ID
  final String userId;          // 用户ID
  final String userName;        // 用户名称
  final int quantity;           // 购买数量
  final DateTime joinTime;      // 参与时间
  final String remark;          // 备注
}

---

五、界面设计

5.1 配色方案

颜色类型	色值	用途
主色	#FF9800	品牌色、按钮
次色	#FFB74D	辅助色、背景
强调色	#4CAF50	成功状态
背景色	#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 CommunityGroupBuyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '社区团购接龙工具',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFFFF9800),
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: const CommunityGroupBuyHomePage(),
    );
  }
}

6.2 商品类型枚举

enum ProductCategory {
  fresh(label: '生鲜果蔬', emoji: '🥬'),
  meat(label: '肉禽蛋奶', emoji: '🥩'),
  grain(label: '粮油调味', emoji: '🍚'),
  snacks(label: '休闲零食', emoji: '🍪'),
  daily(label: '日用百货', emoji: '🧴'),
  baby(label: '母婴用品', emoji: '🍼'),
  beauty(label: '美妆护肤', emoji: '💄'),
  other(label: '其他商品', emoji: '📦');

  final String label;
  final String emoji;

  const ProductCategory({required this.label, required this.emoji});
}

---

七、测试用例

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 8151 --web-hostname 0.0.0.0

---