源码系统概览
文章正文
这套资源是一个奶茶饮品点餐的纯前端工程，项目目录名为 heytea，采用 uniapp 搭配 Vue 2 编写。
同一份代码可以编译输出微信小程序和 H5 网页两个端，开发与预览均在 HBuilderX 中完成。
压缩包内除了项目本体，还附带了编辑器安装目录、一段调试演示视频和两份说明文档。
源码简介
项目是一套模仿连锁茶饮点单小程序的界面与交互实现，pages.json 中注册了二十余个路由，底部 tabBar 划分为首页、点单、百货、订单、我的五个主入口。
业务数据全部由 api 目录下的本地 js 模块提供，api/index.js 把 categories、productList、orders 等十四个数据模块汇总成映射表，再延时五百毫秒返回，模拟真实接口的加载过程。
全局状态用 Vuex 管理，store 中保存登录态、下单方式、收货地址与备注，购物车则维护在点单页内部，属于不含服务端、可直接跑起来看效果的演示工程。
适用场景
适合作为 uniapp 多端点餐类项目的界面参考，也适合练习小程序端复杂交互的写法。
需要快速搭建奶茶店、咖啡店、轻食店点单页面时，可以复用其页面结构与组件，再对接自己的后端接口。
它同样适合作为课程设计、毕业设计的前端素材，或电商商城类小程序的原型演示。
功能亮点
点单页采用左侧分类锚点加右侧商品滚动联动的结构，切换分类时按记录的位置值定位，滚动时又会反向高亮当前分类。
商品弹层支持规格选择，糖度、冰量等分组选项可单独勾选，结果拼接成规格文本参与购物车去重：单品按商品编号合并，多规格商品按编号加规格文本共同匹配，减到零份自动移除。
主线之外还实现了外卖与自提切换、地址管理、订单结算与备注、订单列表与详情、积分商城与积分明细、会员开通与权益、礼品卡、任务中心以及基于 uqrcode 的会员付款码。
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：uniapp、Vue 2、Vuex、SCSS，共 66 个 vue 页面与组件文件 后端：无服务端代码，仅本地 |
依具体方案选型，需自行搭建与维护 |
| 部署方式 | 用 HBuilderX 导入 heytea 子目录即可，不要直接导入压缩包根目录。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 点单页采用左侧分类锚点加右侧商品滚动联动的结构，切换分类时按记录的位置值定位，滚动时又会反向高亮当前分类。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：uniapp、Vue 2、Vuex、SCSS，共 66 个 vue 页面与组件文件
后端：无服务端代码，仅本地 mock 数据模块
数据库：无，未包含任何数据表结构
运行环境：HBuilderX 4.23、微信开发者工具，H5 编译需要 Node 环境
其他依赖：uni-popup、uni-nav-bar、uni-icons、J-skeleton 骨架屏、jyf-parser 富文本解析、uqrcode 二维码
技术架构与部署指南
安装与部署提示
用 HBuilderX 导入 heytea 子目录即可，不要直接导入压缩包根目录。
运行到微信小程序前，需要把 manifest.json 中 mp-weixin 节点预置的 appid 换成自己的小程序标识，该值是作者遗留的硬编码配置。
同一处的 urlCheck 被设置为关闭，本地调试可用，提审前应恢复校验并配置合法域名。
发布 H5 时选择网站发行即可，unpackage 目录下已有一份开发态编译产物，建议删除后重新编译。
截图与演示说明
首页 pages/home/home.vue 为自定义导航样式，顶部是外卖与门店入口以及活动轮播位。
点单页 pages/index/index.vue 是核心界面，左侧分类菜单，右侧商品卡片列表，底部悬浮购物袋结算条，点击商品弹出规格选择层。
购物袋弹层展示已选商品与自提外送方式，结算跳转到 pages/pay/pay.vue 结算页；订单页与详情页展示订单列表和商品总价、合计等费用明细；我的页面下挂钱包、会员码、积分商城等子页。
需注意商品图与广告图多为外链，源码里有三百余处指向第三方图片服务的地址，一旦被限制访问，实际效果会与截图存在差异。
常见问题
问：这套源码带后台管理和数据库吗？
答：不带，api 目录全部是本地 js 数据文件，没有后端接口和数据表，服务端需自行开发。
问：可以直接上线运营吗？
答：不建议，界面与素材高度模仿某连锁茶饮品牌，包内也附有作者留下的风险提示文件，商用前必须替换全部素材与文案。
问：为什么运行后图片显示不出来？
答：商品图走第三方外链，小程序端还需配置下载合法域名，建议把图片保存到本地 static 目录再引用。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
补充说明：业务代码中未发现执行类函数、编码解码或后门特征，但随包附带的编辑器安装目录含大量可执行文件与动态链接库，建议单独查杀或删除；manifest.json 中的硬编码小程序标识也应及时替换。
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
项目附带 Apache 2.0 许可证文件，但界面素材与品牌元素不在开源授权范围内，请勿直接用于商业运营。
下载后请先在本地完整测试，确认功能与需求匹配再投入实际项目，因使用不当造成的损失需自行承担。