抖音小程序 - 旅游拼团

一起出发 · 越走越远。基于抖音小程序（字节跳动小程序）原生框架开发的旅游拼团结伴出行小程序模板，开箱即用，可二次开发接入真实路线、社交与在线支付能力。

一、产品简介

抖音小程序 - 旅游拼团 是一套面向旅游结伴、拼团出行、跟团游线路的社交化旅游服务小程序源码。覆盖「浏览精选路线 → 加入拼团 → 招募团员 → 成团出行 → 行程完成」完整业务闭环，界面精致、交互流畅、布局自适应。内置本地模拟数据与模拟接口层（路线、拼团、行程、设置完整 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建旅游拼团、结伴出行、跟团游类小程序的优质起步模板。

二、功能介绍

1. 首页（发现）

• 平台品牌信息与口号展示（含已服务人次、好评率徽章）
• 顶部搜索框（搜索海岛 / 名山 / 古城等目的地）
• 概览统计：精选路线 / 进行中拼团 / 招募中 / 活跃旅友（上浮卡片）
• 圆形分类入口：海岛度假 / 名山徒步 / 古城文化 / 亲子乐园 / 户外露营（固定每行 5 个）
• 发起拼团快捷入口（自定义路线 + 邀请好友）
• 本周热门横滑卡片（封面、天数、评分、销量、价格）
• 分类筛选 chips + 精选路线双列卡片（含进度条、标签、拼团人数、截止时间）
• 旅友日记列表（头像、路线、内容、点赞）

2. 精选路线（路线大厅）

• 目的地 / 主题关键字搜索
• 分类筛选：全部 / 海岛 / 名山 / 古城 / 亲子 / 露营
• 排序：人气 / 价格 / 天数
• 路线横向大卡（封面、天数、热门标识、标题、目的地、评分、标签、拼团进度、截止时间、价格、已售）
• 悬浮「发起拼团」快捷按钮

3. 我的拼团（CRUD）

• 状态筛选：全部 / 招募中 / 待确认 / 已结束（含数量徽标）
• 拼团卡片：封面、团长/团员身份标识、标题、目的地、拼团进度、截止时间
• 团员头像列展示
• 状态流转操作：确认成团（招募中→待确认）、完成行程（待确认→已结束）、退出拼团、再次拼团

4. 路线详情

• 大封面 + 天数 / 热门标识、标题、目的地
• 价格卡（团购价、划线价、已售、评分、商品标签）
• 拼团进度（已拼人数、还差几人成团、截止时间）
• 行程安排时间轴（按天展开：上午/中午/下午/傍晚行程）
• 旅友评价（头像、评分、内容）
• 底部操作栏：客服咨询 + 立即加入拼团（加入后状态联动）

5. 发起拼团（自定义路线）

• 实时封面预览（随主题色变化）
• 表单：路线名称、目的地、人均费用
• 行程天数选择（1~5 天+）
• 拼团人数选择（4/6/8/10/12 人）
• 封面主题色选择（6 种渐变主题）
• 一键发起拼团

6. 个人中心

• 用户资料卡（昵称、等级、身份标签）
• 数据统计：收藏路线 / 进行中 / 已完成 / 优惠券
• 功能菜单：我的路线 / 我的拼团 / 旅行日记 / 优惠券 / 帮助中心 / 出行设置
• 出行设置开关：自动匹配团友 / 出行提醒 / 共享位置 / VIP 优先
• 平台信息卡与恢复初始数据

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/              # 首页（发现）
    ├── routes/             # 精选路线
    ├── groups/             # 我的拼团
    ├── detail/             # 路线详情（行程时间轴）
    ├── publish/            # 发起拼团（自定义路线）
    └── my/                 # 个人中心（设置/数据管理）

六、运行方式

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

说明：源码中所有平台、公司、人员、目的地、路线、电话均为演示占位数据，无任何真实信息。