SlapCoffee 咖啡管理软件

SlapCoffee 是一款基于 uni-app 开发的跨平台咖啡店管理应用，提供完整的点餐、结算、会员管理等功能，支持多端部署（微信小程序、H5、App等）。

项目概述

SlapCoffee 旨在为咖啡店提供一站式数字化解决方案，帮助咖啡店提升运营效率、改善用户体验，实现线上线下一体化服务。应用采用现代化UI设计，以深棕色(#54341A)为主色调，搭配星巴克绿(#006241)作为辅助色，营造出温馨而专业的咖啡店氛围。

功能模块

1. 首页模块

• 门店展示与选择
• 活动轮播与推广
• 会员信息与积分展示
• 快捷订单入口

2. 菜单模块

• 商品分类展示
• 商品搜索功能
• 商品详情查看
• 购物车管理
• 快捷结算功能

3. 订单模块

• 订单列表展示
• 订单详情查看
• 订单状态追踪
• 历史订单查询

4. 个人中心模块

• 用户信息管理
• 会员卡与优惠券
• 收货地址管理
• 消息通知中心
• 设置与帮助

5. 购物车模块

• 商品列表管理
• 商品数量调整
• 商品属性修改
• 结算功能

技术栈

• 前端框架：Vue.js 3.x
• 跨平台框架：uni-app
• UI组件库：uView UI
• 状态管理：Vuex
• 网络请求：axios + Interceptors
• CSS预处理器：SCSS
• 图标库：自定义图标库

项目结构

SlapCoffee/
├── api/                # API接口
├── components/         # 公共组件
├── pages/              # 页面文件
│   ├── home/           # 首页
│   ├── menu/           # 菜单页
│   ├── cart/           # 购物车页
│   ├── order/          # 订单页
│   ├── profile/        # 个人中心页
│   └── store-detail/   # 门店详情页
├── static/             # 静态资源
├── styles/             # 样式文件
├── utils/              # 工具函数
├── App.vue             # 应用入口组件
├── main.js             # 应用入口JS
├── manifest.json       # 应用配置
├── pages.json          # 页面路由配置
└── uni.scss            # 全局样式变量

安装与运行

环境要求

• Node.js 14.0+
• HBuilderX 3.0+

安装步骤

1. 克隆项目到本地

git clone https://github.com/your-username/SlapCoffee.git

2. 进入项目目录

cd SlapCoffee

3. 安装依赖

npm install

4. 使用HBuilderX打开项目

   • 打开HBuilderX
   • 选择 "文件" > "导入" > "从本地目录导入"
   • 选择项目目录

5. 运行项目

   • 选择运行到浏览器或模拟器
   • 或者选择发行为小程序、App等

开发指南

开发规范

• 组件命名：使用PascalCase命名法，如ProductCard.vue
• 页面命名：使用小写字母加连字符，如product-detail.vue
• 样式命名：使用BEM命名规范
• 代码缩进：使用2个空格

分支管理

• master: 主分支，用于生产环境
• develop: 开发分支，用于开发环境
• feature/*: 功能分支，用于开发新功能
• hotfix/*: 修复分支，用于紧急修复

提交规范

提交信息格式：type(scope): subject

类型(type)：

• feat: 新功能
• fix: 修复Bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 代码重构
• perf: 性能优化
• test: 测试相关
• chore: 构建过程或辅助工具的变动

配色方案

• 主色：#54341A（深棕色）
• 主色亮色：#8B5E2F（中棕色）
• 主色暗色：#3A2412（更深棕色）
• 辅助色：#006241（星巴克绿）
• 辅助色亮色：#1E8765（浅绿色）
• 辅助色暗色：#004530（深绿色）
• 背景色：#F8F5F0（浅米色）
• 文本主色：#606666（深灰色）

版本历史

• v1.0.0 (2023-05-01): 初始版本发布
• v1.1.0 (2023-06-15): 优化UI界面，新增会员功能
• v1.2.0 (2023-08-20): 重构购物车模块，优化结算流程

联系方式

• 项目负责人：张三
• 邮箱：zhangsan@example.com
• 开发团队：SlapCoffee开发团队

许可证

本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。

项目说明

SlapCoffee是一款基于uni-app开发的跨平台咖啡店管理应用，提供完整的点餐、结算、会员管理等功能，支持多端部署（微信小程序、H5、App等）。

常见问题解决方案

Android下tabBar图标不显示问题

在Android设备上，tabBar图标可能会出现不显示的情况，这通常是由以下原因导致的：

1. SVG图标在Android平台上的兼容性问题
2. 图标路径配置错误
3. 图标大小单位设置不正确（px和rpx混用）

解决方案一：使用PNG格式图标

1. 将SVG图标转换为PNG格式
2. 在pages.json中配置tabBar时使用PNG图标路径
3. 确保iconWidth设置为px单位（例如："iconWidth": "24px"）

"tabBar": {
  "color": "#606666",
  "selectedColor": "#54341A",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "iconWidth": "24px",
  "list": [{
    "pagePath": "pages/home/home",
    "iconPath": "static/icons/tabbar/home.png",
    "selectedIconPath": "static/icons/tabbar/home-active.png",
    "text": "首页"
  },
  // 其他图标配置...
  ]
}

解决方案二：使用第三方SVG图标组件

如果您希望继续使用SVG图标，可以使用第三方组件如"zui-svg-icon"，它支持在uni-app的各个平台上正确显示SVG图标。

1. 安装组件：

   • 从插件市场安装：zui-svg-icon
   • 或从GitHub获取：zivyuan/zui-svg-icon

2. 使用组件替代原生tabBar：

   • 创建自定义tabBar组件
   • 使用zui-svg-icon加载SVG图标

其他注意事项

• 确保图标文件存在且路径正确
• 图标大小应适合移动设备显示（建议24px-32px）
• 图标颜色应与应用主题一致
• 测试时应在真机上验证，模拟器可能无法准确反映实际情况

项目进度更新

2023-11-15: 订单模块开发完成

• ✅ 订单列表页面：展示全部、待付款、进行中、已完成订单
• ✅ 订单详情页面：展示订单信息、商品列表、金额明细等
• ✅ 订单支付页面：支持多种支付方式、优惠券选择、积分抵扣等
• ✅ 订单状态跟踪：实时展示订单制作进度、取餐信息等

2023-11-25: 用户界面优化与问题修复

• ✅ 修复菜单页面价格模块被导航栏遮挡问题
• ✅ 优化订单页面UI，添加底部安全区域(120rpx)和内边距，解决内容被导航栏遮挡的问题
• ✅ 完善订单详情页面(detail.vue)的布局，确保内容完全可见
• ✅ 改进支付页面(payment.vue)和订单状态页面(status.vue)的底部间距
• ✅ 优化购物车界面(cart.vue)：
  • 增加底部内边距(180rpx)
  • 优化底部结算栏样式(添加圆角和阴影)
  • 调整结算栏位置(bottom: 100rpx)
  • 添加过渡动画效果
  • 修复页面导航问题(将redirectTo改为switchTab)
• ✅ 统一订单状态页面按钮布局，从两端对齐改为居中对齐

2023-12-01: 个人中心模块完善

• ✅ 完成会员中心页面(membership.vue)，包含会员等级、权益展示、积分明细等功能
• ✅ 开发会员权益页面(benefits.vue)，详细展示不同会员等级的专属权益
• ✅ 实现优惠券管理页面(coupons.vue)，支持查看可使用、已使用、已过期优惠券
• ✅ 完成个人信息管理页面(user-info.vue)，支持修改基本信息、联系方式等

下一步计划

1. 开发积分商城功能：积分兑换商品、积分明细查询
2. 实现订单评价功能：评分、评论、晒图
3. 优化门店选择与定位功能
4. 开发店员端基础功能：订单接收、状态更新、会员管理