\抖音小程序 - 大学团购

同学拼着买 · 省钱又快乐。基于抖音小程序（字节跳动小程序）原生框架开发的校园团购电商小程序模板，开箱即用，可二次开发接入真实商品、自提点与在线支付能力。

一、产品简介

抖音小程序 - 大学团购 是一套面向校园团购、宿舍自提、学生拼团的校园电商小程序源码。覆盖「浏览商品 → 开团下单 → 拼团成团 → 宿舍自提 → 订单完成」完整业务闭环，界面精致、交互流畅、布局自适应。内置本地模拟数据与模拟接口层（商品、购物车、订单、设置完整 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建校园团购、社区拼团、宿舍电商类小程序的优质起步模板。

二、功能介绍

1. 首页（商城）

• 顶部搜索框 + 购物车入口（含数量徽标）
• Banner 轮播（鲜切水果 / 夜宵专场 / 考试季促销）
• 平台数据条：校园会员 / 好评率 / 服务校区
• 圆形分类入口：水果鲜切 / 零食饮料 / 文具用品 / 生活日用 / 速食夜宵（固定每行 5 个）
• 限时拼团横滑卡片（封面、标签、团购价、划线价）
• 排序条：综合 / 销量 / 价格
• 商品双列瀑布卡片（封面、团购标识、N人团、名称、描述、销量进度、团购价、开团按钮）

2. 商品分类（核心选品）

• 商品关键字搜索
• 左侧分类侧边栏（带图标 + 选中高亮指示条）
• 右侧商品列表（横向卡片：封面、标签、名称、描述、N人成团、销量、团购价）
• 分类切换实时刷新

3. 我的订单（CRUD）

• 状态筛选：全部 / 拼团中 / 待自提 / 已完成（含数量徽标）
• 订单卡片：封面、商品名、数量、单价、拼团进度（与谁拼团）
• 自提信息与下单时间
• 状态流转操作：拼团成功（拼团中→待自提）、确认自提（待自提→已完成）、取消订单、再次购买、删除订单

4. 商品详情

• 大封面 + 标签、名称、描述
• 价格卡（团购价、划线价、省钱金额、评分、销量、库存）
• 拼团说明（N人成团享团购价 vs 单独购买价）
• 商品参数（单位、分类、自提点、成团规则）
• 图文详情区
• 底部操作栏：加购物车 + 立即开团
• 规格弹层（数量步进器、加购 / 立即开团）

5. 购物车（CRUD）

• 商品多选 / 全选
• 数量步进器（加减）
• 单项删除（二次确认）
• 实时合计金额与选中数量
• 批量结算（一键生成多笔订单，库存联动）

6. 个人中心

• 用户资料卡（昵称、等级、校园认证标签）
• 数据统计：关注商品 / 拼团中 / 待自提 / 购物车
• 功能菜单：我的订单 / 购物车 / 优惠券 / 自提地址 / 帮助中心 / 通知设置
• 通知设置开关：拼团提醒 / 自提通知 / 夜宵推送 / 学生认证
• 平台信息卡与恢复初始数据

7. 底部导航

• 自定义 TabBar：首页 / 分类 / 订单 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API
• 界面：自定义导航栏 + 自定义 TabBar，适配状态栏与右上角原生胶囊按钮；校园活力绿主题视觉（翠绿 + 麦穗金渐变，体现校园的清新与活力）
• 数据：内置本地 Mock 数据与模拟接口层（utils/mock-api.js），基于本地存储模拟后端 CRUD，调用方式贴近真实 API
• 业务逻辑完备：商品 / 购物车 / 订单全链路增删改查、下单库存与销量自动联动、购物车多选 / 全选 / 批量结算、拼团 3 步状态流转（拼团中→待自提→已完成）、按分类与关键词筛选排序
• 自适应布局：双列卡片使用百分比宽度（calc(50% - 10rpx)）、分类入口使用 width:20%、分类页左右分栏布局，不同手机屏宽下始终保持固定列数展示
• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰，注释完善
• 图标：内置多套配色图标资源（绿 / 蓝 / 深色 / 灰 / 白 等）
• 版本管理：含 APP 版本号机制，发版时自动清空旧缓存与旧数据，保证真机调试始终为最新代码

五、交付内容

项目目录结构（解压后）

源码_大学团购/
├── app.js                  # 小程序入口（导航栏适配、版本缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式（主题变量、通用类）
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   └── empty/              # 空状态组件
├── data/
│   ├── mock-data.js        # 种子演示数据（平台/分类/商品/订单/购物车/公告/设置）
│   └── mock-data.json      # 同结构 JSON 数据
├── utils/
│   └── mock-api.js         # 模拟接口层（商品/购物车/订单/设置 CRUD + 看板）
└── pages/                  # 页面
    ├── index/              # 首页（商城）
    ├── category/           # 商品分类（侧边栏 + 列表）
    ├── orders/             # 我的订单
    ├── goods/              # 商品详情（规格弹层）
    ├── cart/               # 购物车（多选结算）
    └── my/                 # 个人中心（设置/数据管理）

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。
2. 解压 源码_大学团购.zip。
3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_大学团购 文件夹。
4. 填写自己的 AppID（或使用测试号），点击导入即可预览。
5. 真机调试时如遇旧缓存，可在「个人中心」页点击「恢复初始数据」，或调大 app.js 中 APP_VER 版本号强制刷新。
6. 如需接入真实能力，替换 utils/mock-api.js 中的商品、购物车、订单等接口实现，对接实际后端即可上线运营。

说明：源码中所有平台、公司、人员、校区、商品、电话均为演示占位数据，无任何真实信息。