奶茶点餐小程序

项目简介

这是一个仿奶茶品牌的微信小程序，采用 UniApp 框架开发，使用本地Mock数据模拟后端接口。项目完整实现了奶茶点餐、取餐、会员系统、积分商城、订单管理、地址管理等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	UniApp (Vue2)
运行平台	微信小程序
开发语言	JavaScript (ES6+) / Vue
样式语言	SCSS
状态管理	Vuex
数据存储	本地Mock数据
数据模拟	Mock Data (本地模拟数据)
开发工具	HBuilderX

项目特点

• 跨平台开发：基于UniApp框架，一套代码可编译到多个平台
• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 完整点餐流程：涵盖商品浏览、规格选择、购物车、支付、取餐等完整流程
• 会员体系完善：包含会员等级、积分、卡券、储值等功能
• UI设计精美：界面风格清新时尚，绿色主题配色，符合茶饮类应用调性
• 组件化开发：使用Vue组件化开发，代码结构清晰，易于维护

功能模块

1. 首页模块 (pages/index)

• 自定义导航栏
• 轮播图展示活动信息
• 门店选择入口
• 快捷功能入口（积分商城、签到、会员码等）
• 热门商品推荐

2. 点餐模块 (pages/menu)

• 左侧商品分类导航
• 右侧商品列表展示
• 商品图片、名称、价格、销量
• 支持自取/外卖两种方式
• 商品规格选择（温度、糖度、配料等）
• 加入购物车功能
• 购物车浮层展示
• 实时计算订单金额

3. 取餐模块 (pages/take-foods)

• 待取餐订单展示
• 取餐码显示
• 订单状态跟踪
• 门店信息展示

4. 我的模块 (pages/mine)

• 用户头像、昵称展示
• 会员等级和积分显示
• 会员码入口
• 我的卡券入口
• 历史订单入口
• 收货地址管理
• 会员储值入口
• 更多服务入口

5. 支付模块 (pages/pay)

• 订单商品信息展示
• 收货地址选择（外卖模式）
• 门店信息展示（自取模式）
• 优惠券选择
• 支付方式选择
• 订单备注
• 确认支付功能

6. 订单备注模块 (pages/remark)

• 口味偏好选择
• 餐具需求选择
• 自定义备注输入

7. 积分商城模块 (pages/integrals)

• 积分商品列表展示
• 商品兑换功能
• 积分明细查看
• 兑换详情页面

8. 签到模块 (pages/attendance)

• 日历签到展示
• 连续签到奖励
• 签到积分获取

9. 订单管理模块 (pages/orders)

• 历史订单列表
• 订单状态筛选
• 订单详情查看
• 下拉刷新、上拉加载

10. 订单详情模块 (pages/orders/detail)

• 订单完整信息展示
• 订单状态跟踪
• 商品明细
• 支付信息
• 门店信息

11. 地址管理模块 (pages/address)

• 收货地址列表
• 默认地址设置
• 新增/编辑地址
• 删除地址（滑动删除）

12. 新增地址模块 (pages/address/add)

• 收货人姓名输入
• 手机号码输入
• 省市区选择
• 详细地址输入
• 门牌号输入
• 设为默认地址

13. 会员储值模块 (pages/balance)

• 储值金额选择
• 储值优惠展示
• 余额查询

14. 卡券模块 (pages/coupons)

• 我的卡券列表
• 卡券状态（可用/已用/过期）
• 卡券详情

15. 券包商品模块 (pages/packages)

• 券包列表展示
• 券包详情
• 购买券包功能

16. 会员码模块 (pages/mine/member-code)

• 会员二维码展示
• 会员信息显示

17. 用户信息模块 (pages/mine/userinfo)

• 修改头像
• 修改昵称
• 修改性别
• 修改生日

18. 订单评价模块 (pages/review)

• 商品评分
• 评价内容输入
• 提交评价

19. 更多服务模块 (pages/services)

• 帮助中心
• 联系客服
• 意见反馈

20. 开发票模块 (pages/invoice)

• 发票申请
• 发票信息填写

21. 礼品卡模块 (pages/giftcard)

• 礼品卡列表
• 礼品卡详情
• 礼品卡绑定

22. 邀请活动模块 (pages/activities/invite)

• 邀请好友活动
• 邀请奖励展示

项目结构

min/
├── App.vue                   # 应用入口组件
├── main.js                   # 应用入口文件
├── manifest.json             # 应用配置文件
├── pages.json                # 页面路由配置
├── uni.scss                  # 全局样式变量
├── project.config.json       # 微信小程序项目配置
├── api/                      # API数据目录
│   ├── index.js              # 首页数据
│   ├── goods.js              # 商品数据
│   ├── orders.js             # 订单数据
│   ├── member.js             # 会员数据
│   ├── addresses.js          # 地址数据
│   ├── store.js              # 门店数据
│   ├── attendance.js         # 签到数据
│   ├── attendance-list.js    # 签到列表数据
│   ├── today-attendance.js   # 今日签到数据
│   ├── customer-coupons.js   # 用户卡券数据
│   ├── custom-points.js      # 用户积分数据
│   ├── points-flow.js        # 积分流水数据
│   ├── points-mall.js        # 积分商城数据
│   ├── packages.js           # 券包数据
│   ├── rechargeCards.js      # 充值卡数据
│   ├── gift-cards.js         # 礼品卡数据
│   └── level-benefits.js     # 等级权益数据
├── components/               # 自定义组件目录
│   ├── loading.vue           # 加载组件
│   ├── navbar-back-button.vue # 导航返回按钮组件
│   ├── list-cell/            # 列表单元格组件
│   ├── modal/                # 弹窗组件
│   ├── popup-layer/          # 弹出层组件
│   ├── jyf-parser/           # 富文本解析组件
│   ├── uni-icons/            # 图标组件
│   ├── uni-steps/            # 步骤条组件
│   ├── uni-swipe-action/     # 滑动操作组件
│   └── uni-swipe-action-item/ # 滑动操作项组件
├── common/                   # 公共模块目录
├── store/                    # Vuex状态管理
│   └── index.js              # 状态管理入口
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   ├── menu/                 # 点餐页
│   ├── take-foods/           # 取餐页
│   ├── mine/                 # 我的页面
│   │   ├── mine.vue          # 我的主页
│   │   ├── member-code.vue   # 会员码页
│   │   └── userinfo.vue      # 用户信息页
│   ├── pay/                  # 支付页
│   ├── remark/               # 备注页
│   ├── orders/               # 订单页
│   │   ├── orders.vue        # 订单列表
│   │   └── detail.vue        # 订单详情
│   ├── address/              # 地址页
│   │   ├── address.vue       # 地址列表
│   │   └── add.vue           # 新增地址
│   ├── integrals/            # 积分页
│   │   ├── integrals.vue     # 积分商城
│   │   ├── flow.vue          # 积分明细
│   │   └── detail.vue        # 兑换详情
│   ├── attendance/           # 签到页
│   ├── balance/              # 储值页
│   ├── coupons/              # 卡券页
│   ├── packages/             # 券包页
│   │   ├── index.vue         # 券包列表
│   │   └── detail.vue        # 券包详情
│   ├── review/               # 评价页
│   ├── services/             # 服务页
│   │   ├── services.vue      # 更多服务
│   │   └── help-center.vue   # 帮助中心
│   ├── invoice/              # 发票页
│   ├── giftcard/             # 礼品卡页
│   ├── activities/           # 活动页
│   │   └── invite.vue        # 邀请活动
│   └── login/                # 登录页
├── static/                   # 静态资源目录
│   ├── images/               # 图片资源
│   │   ├── tabBar/           # TabBar图标
│   │   ├── index/            # 首页图片
│   │   ├── menu/             # 点餐页图片
│   │   ├── mine/             # 我的页图片
│   │   ├── order/            # 订单页图片
│   │   ├── pay/              # 支付页图片
│   │   ├── integrals/        # 积分页图片
│   │   ├── attendance/       # 签到页图片
│   │   ├── services/         # 服务页图片
│   │   └── customer-level/   # 会员等级图片
│   ├── style/                # 样式文件
│   │   └── app.scss          # 全局样式
│   └── iconfont/             # 图标字体
│       └── iconfont.scss     # 图标样式
└── unpackage/                # 编译输出目录

数据模型

商品分类数据 (goods)

{
  id: 6208,                   // 分类ID
  sort: 2,                    // 排序
  name: '新品推荐',           // 分类名称
  icon: 'https://...',        // 分类图标
  goods_list: [...]           // 商品列表
}

商品数据 (goods_list)

{
  id: 68339,                  // 商品ID
  name: '霸气杨梅',           // 商品名称
  price: 30,                  // 商品价格
  sales: 44429,               // 销量
  content: '商品描述...',     // 商品描述
  images: 'https://...',      // 商品图片
  stock: '9999817.00',        // 库存
  goods_type: 2,              // 商品类型
  property: [{                // 商品属性（规格）
    id: 190,
    name: '温度',
    values: [
      { id: 582, value: '标准冰', is_default: 1 },
      { id: 583, value: '去冰', is_default: 0 }
    ]
  }],
  entity: [{                  // 商品实体
    id: '72cf1279c0a422ce',
    price: 30,
    stock: '9999817.00',
    image: '...'
  }]
}

订单数据 (orders)

{
  id: 1,                      // 订单ID
  order_no: 'ABCDEFGHIJKLMN0001', // 订单号
  status: 5,                  // 订单状态
  status_text: '已完成',      // 状态文本
  total_amount: '50.00',      // 订单总额
  amount: '50.00',            // 实付金额
  coupon_amount: 0,           // 优惠金额
  goods_num: 2,               // 商品数量
  pay_mode: '微信支付',       // 支付方式
  postscript: '打包',         // 订单备注
  typeCate: 1,                // 订单类型：1自取 2外卖
  store: {                    // 门店信息
    name: '福永同泰时代城店',
    address: '广东省深圳市...',
    mobile: '075523224859'
  },
  goods: [{                   // 商品列表
    name: '霸气葡萄',
    number: 1,
    price: '28.00',
    property: '去冰,标准糖',
    image: 'https://...'
  }],
  created_at: 1588936782,     // 创建时间
  payed_at: 1588936805,       // 支付时间
  completed_at: 1588937139    // 完成时间
}

会员数据 (member)

{
  customerId: '343400246943295100', // 会员ID
  nickname: 'tinypuppet',     // 昵称
  avatar: '/static/images/mine/default.png', // 头像
  mobilePhone: '18666600000', // 手机号
  memberLevel: 2,             // 会员等级
  memberLevelName: 'VIP2',    // 等级名称
  cardNo: '39390020696322222', // 会员卡号
  pointNum: 413,              // 积分数量
  couponNum: 6,               // 卡券数量
  balance: 0,                 // 余额
  giftBalance: 0,             // 赠送余额
  currentValue: 410,          // 当前成长值
  needValue: 90,              // 升级所需成长值
  cardUrl: 'https://...'      // 会员卡背景图
}

地址数据 (addresses)

{
  id: 1,                      // 地址ID
  accept_name: '隔壁老王',    // 收货人
  mobile: '18666600000',      // 手机号
  sex: 0,                     // 性别：0男 1女
  province_name: '广东省',    // 省份
  city_name: '深圳市',        // 城市
  area_name: '南山区',        // 区县
  street: '有一间公寓八栋',   // 街道地址
  door_number: 'AB1234',      // 门牌号
  is_default: 0               // 是否默认：0否 1是
}

卡券数据 (customer-coupons)

{
  id: 1,                      // 卡券ID
  name: '茶饮满二赠一券',     // 卡券名称
  type: 'discount',           // 卡券类型
  amount: 28,                 // 优惠金额
  condition: '满2杯可用',     // 使用条件
  start_time: '2025-01-01',   // 开始时间
  end_time: '2025-12-31',     // 结束时间
  status: 1                   // 状态：1可用 2已用 3过期
}

核心业务逻辑

1. 商品规格选择

// 选择商品属性（温度、糖度等）
selectProperty(propertyIndex, valueIndex) {
  const property = this.currentGoods.property[propertyIndex];
  property.values.forEach((v, i) => {
    v.is_default = i === valueIndex ? 1 : 0;
  });
}

2. 购物车管理

// 添加商品到购物车
addToCart(goods) {
  const cartItem = {
    id: goods.id,
    name: goods.name,
    price: goods.price,
    image: goods.images,
    property: this.getSelectedProperty(goods),
    num: 1
  };
  this.$store.commit('addCartItem', cartItem);
}

3. 订单金额计算

// 计算订单总金额
computed: {
  totalAmount() {
    return this.cartList.reduce((sum, item) => {
      return sum + item.price * item.num;
    }, 0);
  }
}

页面路由配置

{
  "pages": [
    { "path": "pages/index/index", "style": { "navigationStyle": "custom" } },
    {
      "path": "pages/menu/menu",
      "style": { "navigationBarTitleText": "奶茶" }
    },
    {
      "path": "pages/take-foods/take-foods",
      "style": { "navigationBarTitleText": "奶茶" }
    },
    {
      "path": "pages/mine/mine",
      "style": { "navigationBarTitleText": "乐园" }
    },
    { "path": "pages/pay/pay", "style": { "navigationBarTitleText": "奶茶" } },
    {
      "path": "pages/orders/orders",
      "style": { "navigationBarTitleText": "历史订单" }
    },
    {
      "path": "pages/orders/detail",
      "style": { "navigationBarTitleText": "订单详情" }
    },
    {
      "path": "pages/address/address",
      "style": { "navigationBarTitleText": "我的地址" }
    },
    {
      "path": "pages/integrals/integrals",
      "style": { "navigationStyle": "custom" }
    },
    {
      "path": "pages/attendance/attendance",
      "style": { "navigationStyle": "custom" }
    },
    {
      "path": "pages/balance/balance",
      "style": { "navigationBarTitleText": "会员储值" }
    },
    {
      "path": "pages/coupons/coupons",
      "style": { "navigationBarTitleText": "我的卡券" }
    }
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#919293",
    "selectedColor": "#97AF13",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/images/tabBar/index.png",
        "selectedIconPath": "static/images/tabBar/index_selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/menu/menu",
        "iconPath": "static/images/tabBar/drink.png",
        "selectedIconPath": "static/images/tabBar/drink_selected.png",
        "text": "点餐"
      },
      {
        "pagePath": "pages/take-foods/take-foods",
        "iconPath": "static/images/tabBar/take.png",
        "selectedIconPath": "static/images/tabBar/take_selected.png",
        "text": "取餐"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "static/images/tabBar/mine.png",
        "selectedIconPath": "static/images/tabBar/mine_selected.png",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• HBuilderX：建议使用最新稳定版
• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开 HBuilderX
2. 选择"文件" -> "导入" -> "从本地目录导入"
3. 选择项目目录 min
4. 点击"导入"

3. 运行项目

1. 在 HBuilderX 中打开项目
2. 点击"运行" -> "运行到小程序模拟器" -> "微信开发者工具"
3. 首次运行需要配置微信开发者工具路径
4. 在微信开发者工具中填入AppID

4. 真机调试

在微信开发者工具中点击"预览"按钮，扫码在手机上体验

预置测试数据

商品分类

分类名称
奶茶早餐
新品推荐
招牌热卖
软欧包
霸气鲜果茶
芝士茗茶
满杯水果茶

热门商品

商品名称	价格	销量
霸气杨梅	¥30	44429
霸气橙子	¥25	199583
霸气芝士草莓	¥29	125010
霸气榴莲王	¥28	70462
草莓魔法棒	¥20	115495

会员信息

项目	值
昵称	tinypuppet
会员等级	VIP2
积分	413
卡券数量	6

界面预览

项目包含封面截图文件夹 封面/，可查看各页面效果展示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 在线支付：接入微信支付，实现真实支付流程
4. 门店定位：接入地图API，实现附近门店查询
5. 外卖配送：接入配送系统，实现外卖订单跟踪
6. 消息推送：订单状态变更推送通知
7. 分享功能：支持分享商品到好友和朋友圈
8. 拼单功能：多人一起点单
9. 预约点餐：提前预约取餐时间
10. 智能推荐：根据用户喜好推荐商品

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 支付功能为模拟实现，不涉及真实交易
3. 商品图片来源于网络，仅供学习使用
4. 如需发布上线，请替换为自己的AppID并完善相关资质
5. 项目基于UniApp开发，可编译到多个平台

许可证

本项目仅供学习交流使用，请勿用于商业用途。