全源码提供-高效省钱的社区团购小程序
面向社区团购行业的在线平台，覆盖团员 + 团长 + 管理后台三端，基于 Vue 3 构建。
项目背景
“今天有什么好货？””团购的苹果到货了吗？””取货码是多少？”——社区团购是私域流量变现最高效的模式之一。团长在小区群里发商品链接，邻居们拼团下单，平台集中配送，团长自提点分发，每单团长抽佣。
但大多数团长还在用微信群+接龙+手动记账：商品信息靠截图、订单靠翻聊天记录、取货核销靠脑子记、佣金靠Excel算。社区团购小程序正是为规范化这个流程而设计的一站式平台，打通”商品浏览 → 拼团下单 → 支付 → 配送 → 团长核销 → 佣金分账”的完整业务闭环。
适用场景：社区团长、便利店、物业公司、生鲜配送、宝妈团购。
技术选型
| 层级 | 技术栈 |
|——|——–|
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| UI 风格 | 移动端优先，活力橙色系 |
| 目标平台 | H5 / 微信小程序（UniApp 可扩展） |
功能全景
客户端（移动端）
客户端采用底部 Tab 导航：🏠首页、📦分类、🛒购物车、📋订单、👤我的。
1. 登录页
品牌”社区团购”，slogan”优选好物，团长直送”，🛒图标。底部提供管理员入口和团长入口。
2. 首页——两列商品瀑布流
顶部 Banner”社区团购 新鲜直达”。核心区域：
- 限时秒杀区：带倒计时进度条，营造紧迫感
- 6 大分类（2×3 网格）：🍎生鲜果蔬、🥬日用百货、🥩肉禽蛋奶、🧂粮油调味、🥤酒水饮料、🧹家居用品
- 商品瀑布流：两列网格展示商品。每张卡片包含：商品图片、名称、团购价（大字突出）+原价（划线）、已售数量、”去拼团”按钮
- 成团进度条：绿色进度条展示”已拼X人/共需Y人”，刺激跟单
- 附近团长推荐：横向滚动展示团长头像、姓名、地址、距离
3. 商品列表与分类
按分类 Tab 筛选全部商品。两列网格布局，每张商品卡片展示：图片、名称、团购价/原价、已售数量、去拼团入口。
4. 团购点（团长）选择
团长是社区团购的核心节点。附近团长展示：头像、姓名、自提地址、距离、取货时间、在团团购数量。点击进入团长详情查看完整信息。
团长详情页展示：大头像、姓名、评分、自提地址、取货时段。活跃团购列表横向滚动。底部”加入该团购点”按钮。
5. 商品详情（购物车模式）
购物车弹窗支持加减数量、实时计算总价。展示所选团长信息、取货时间、团长佣金说明。确认支付按钮。
6. 订单详情与核销码（核心功能）
4 步进度追踪：已下单 → 配送中 → 已到货 → 已取货。每步时间戳。
核心功能——4 位数字核销码：大字体居中显示（如”8364″），红色醒目。客户到团长处出示核销码，团长输入验证，确认取货。简单高效，无需扫码设备。
订单详情还展示：团长信息卡片、商品清单（含单价×数量）、费用明细（商品总额+团长佣金标注）、实付金额。
7. 我的订单
按状态筛选：全部/待配送/已到货/已取货。每张订单卡片展示：商品缩略图、团长名称、状态标签、核销码。
8. 个人中心
用户头像、手机号。统计区：待取货/已完成/优惠券。菜单：我的订单、我的团长、佣金明细、收货地址、意见反馈、设置。
团长端（移动端）
团长拥有独立工作台，底部 3 个 Tab：工作台、订单、佣金。
1. 工作台
顶部展示团长头像、”张团长”、自提点地址”阳光小区3号楼101″。
统计行：今日订单（28单）、今日佣金（¥186）、本月佣金（¥5,680）。
“待核销”区块：客户已到货但未取货的订单列表，每条展示商品、客户姓名、核销码大字、”确认核销”按钮。
“配送中”区块：正在配送的订单，团长可查看配送进度。
2. 订单管理
按全部/待配送/已到货/已核销筛选。每单展示：客户姓名+电话、商品摘要、金额、核销码。
3. 佣金明细
今日佣金 ¥186、本月佣金 ¥5,680、累计佣金 ¥28,500。按日期分组展示佣金明细（订单编号、商品、金额、佣金）。底部提现按钮。
管理后台（PC 端）
管理后台采用深色侧边栏布局，支持多机构/多团长管理。
1. 数据看板
4 个指标卡片：今日订单（286单）、本月GMV（¥168,500）、活跃团长（58人）、待核销（42单）。
品类GMV分布图（生鲜/乳品/零食/粮油）。最近订单表格实时更新。
2. 订单管理
全平台订单列表，支持按状态筛选（待配送/配送中/已到货/已核销）和团长筛选。表格展示：订单编号、客户、团长、商品、金额、核销码（等宽字体）、状态。
3. 团长管理
团长表格：姓名、手机号、地址、团购点名称、订单量、佣金比例、评分、审核状态。支持设置佣金比例（内联编辑）、审核/编辑/下线操作。
4. 商品管理
商品表格：图片、名称、分类、团购价/原价、库存（低于20标红）、已售数量、状态。支持内联编辑和新增商品弹窗。
5. 财务报表
4 个汇总卡片（GMV ¥168,500 / 平台抽佣 ¥33,700 / 团长佣金 ¥50,550 / 退款 ¥2,400）。GMV 趋势图。团长佣金结算表（支持批量结算）。
项目结构
29-frontend-groupbuy/src/
├── router/index.js # 路由配置（三端共 35+ 条路由）
├── stores/app.js # Pinia 状态（团长/商品/订单/佣金）
├── pages/
│ ├── LoginPage.vue # 登录
│ ├── MainLayout.vue # 客户 Tab 布局（5 Tab）
│ ├── HomePage.vue # 首页（秒杀+商品瀑布流+团长推荐）
│ ├── LeaderListPage.vue # 附近团长列表
│ ├── LeaderDetailPage.vue # 团长详情（自提点信息）
│ ├── ServiceListPage.vue # 商品列表（两列网格）
│ ├── OrderConfirmPage.vue # 下单确认（团长选择+购物车）
│ ├── OrderDetailPage.vue # 订单详情（核销码+4步进度）
│ ├── OrdersPage.vue # 我的订单
│ ├── MyPage.vue # 个人中心
│ ├── leader/ # 团长端
│ │ ├── LeaderLayout.vue
│ │ ├── LeaderHomePage.vue # 工作台（待核销+配送中）
│ │ ├── LeaderOrdersPage.vue # 订单管理
│ │ ├── LeaderOrderDetailPage.vue # 订单详情+核销确认
│ │ └── LeaderIncomePage.vue # 佣金明细+提现
│ └── admin/ # 管理后台
│ ├── AdminLayout.vue
│ ├── DashboardPage.vue # 数据看板（GMV+品类分布）
│ ├── OrderMgmtPage.vue # 订单管理
│ ├── LeaderMgmtPage.vue # 团长管理（佣金比例设置）
│ ├── ServiceMgmtPage.vue # 商品管理（库存监控）
│ ├── FinancePage.vue # 财务报表（团长佣金结算）
│ └── ReviewMgmtPage.vue # 评价管理
设计亮点
团长分佣体系：每单自动计算团长佣金，佣金比例支持灵活配置（5%-15%）。团长端实时查看佣金明细，支持批量结算和提现。团长动力来自佣金——这是社区团购模式的核心引擎。
4 位核销码：大字体展示，团长输入验证，无需扫码设备。简单高效，覆盖从高端小区到老旧社区的所有场景。
成团进度条：商品卡片展示”已拼 X 件/共需 Y 件”进度条。未成团的商品刺激跟单——”还剩2件就成团”是最高效的转化文案。
两列商品瀑布流：图片+团购价（大号字体）+原价（划线）+已售+进度条。信息密度极高，一屏展示 4-6 个商品。
库存实时扣减：下单即减库存，售罄自动标记灰色并显示”已售罄”。团长后台库存低于20标红预警。
商品秒杀倒计时：限时特价带倒计时进度条，营造紧迫感和稀缺性。
三端分离架构：客户端、团长端、管理后台三个独立路由入口，一套代码部署三角色。
社区团购特色功能总结：
- 核销码取货：4 位数字码，团长输入验证
- 团长佣金分账：比例可配，批量结算
- 成团进度条：刺激跟单转化
- 库存实时扣减：低库存标红预警
- 两列瀑布流：高信息密度商品展示
源代码获取
- 演示地址：
http://groupbuy.hei-ai.com/ - 源码购买：
https://srcs.hei-ai.com/（搜索”社区团购”）
交付内容：
- 完整前端源码（Vue 3 + Vite，开箱即跑）
- 产品需求文档（含完整数据模型和 API 设计）
- 部署说明文档
*社区团购是私域流量最高效的变现模式——团长赚佣金，平台赚差价，邻居买实惠，三方共赢。本项目既是可直接上线的 SaaS 产品，也是学习 Vue 3 核销系统和佣金分账开发的优质参考。欢迎交流讨论。*
