# 餐饮店小程序
**Repository Path**: HyacinthTechnology_admin/small-program-of-restaurant
## Basic Information
- **Project Name**: 餐饮店小程序
- **Description**: 微信丶支付宝小程序
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 5
- **Forks**: 1
- **Created**: 2021-06-19
- **Last Updated**: 2026-04-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 餐饮店小程序
**知味香** 餐饮店小程序，支持微信/支付宝多端运行
---
## 1. 项目介绍
一款基于 [uni-app](https://uniapp.dcloud.io/) 框架开发的餐饮店小程序，为餐饮店铺提供完整的点餐、订单管理、用户中心等核心功能。支持编译为微信小程序、支付宝小程序、H5 等多端应用。
### 技术栈
| 分类 | 技术 |
|:---:|:---|
| 框架 | uni-app |
| UI库 | uView |
| 状态管理 | Vuex |
| 构建工具 | HBuilderX |
### 功能模块
| 模块 | 说明 |
|:---|:---|
| 🏠 首页 | 店铺展示、广告轮播、快捷入口 |
| 📋 点餐 | 菜单浏览、加购、购物车 |
| 📝 订单 | 订单列表、订单详情、订单状态 |
| 👤 用户中心 | 会员信息、积分管理、功能入口 |
---
## 2. 已实现功能
### 🏠 首页
| 功能 | 说明 |
|:---|:---|
| 启动页广告 | App 启动时弹出全屏广告遮罩 |
| 首页轮播图 | 轮播展示店铺宣传图片 |
| 快捷点餐入口 | 一键跳转点餐页面 |
| 用户积分展示 | 显示当前积分余额和积分商城入口 |
| 会员二维码 | 展示会员码供店员扫描 |
| 邀请有礼 | 底部邀请图片展示 |
### 📋 点餐
| 功能 | 说明 |
|:---|:---|
| 分类菜单 | 多分类菜单展示（新品推荐、热销产品等） |
| 商品展示 | 商品图片、名称、热度、价格 |
| 购物车 | 底部购物车入口显示商品数量 |
| 数量调节 | 加减商品数量 |
| 购物车弹窗 | 弹出查看已选商品详情 |
| 结算功能 | 结算按钮（待对接支付） |
### 📝 订单
| 功能 | 说明 |
|:---|:---|
| 订单列表 | 展示订单卡片列表 |
| 订单状态 | 显示订单状态（待收货/待付款/待评价） |
| 商品信息 | 展示商品图片、名称、规格 |
| 订单金额 | 显示商品数量和合计金额 |
| 操作按钮 | 查看详情、确认收货按钮 |
### 👤 用户中心
| 功能 | 说明 |
|:---|:---|
| 用户头像 | 头像展示和授权提示 |
| 会员等级 | 显示铜牌/银牌/金牌等会员等级 |
| 积分管理 | 积分余额展示 |
| 优惠券 | 优惠券数量展示 |
| 功能菜单 | 6宫格功能入口 |
| 功能包括 | 会员等级、积分商城、我的订单、收货地址、兑换码、邀请有礼 |
### ⚙️ 系统功能
| 功能 | 说明 |
|:---|:---|
| 底部导航 | 5个Tab切换（首页/点餐/购物车/订单/我的） |
| 店铺状态控制 | API 控制店铺营业/打烊状态 |
| 多端支持 | 微信小程序、支付宝小程序、H5 |
---
## 4. 页面预览
| 首页 | 点餐 | 订单 | 会员中心 |
|:---:|:---:|:---:|:---:|
| 店铺Banner
快捷入口
广告展示 | 分类菜单
购物车
加减数量 | 订单列表
订单状态
详情查看 | 会员信息
积分查询
功能菜单 |
---
## 5. 项目结构
```
small-program-of-restaurant/
├── components/ # 组件目录
│ ├── index/ # 首页组件
│ │ ├── UserPoints.vue # 用户积分
│ │ ├── advertisement.vue # 广告组件
│ │ ├── label.vue # 标签组件
│ │ ├── menu.vue # 菜单组件
│ │ └── other.vue # 其他组件
│ ├── menu/ # 点餐组件
│ │ ├── banner.vue # 横幅
│ │ └── menuList.vue # 菜单列表
│ ├── order/ # 订单组件
│ │ └── orderList.vue # 订单列表
│ └── user/ # 用户组件
│ ├── function.vue # 功能列表
│ └── top.vue # 用户头部
├── pages/ # 页面目录
│ ├── index/ # 首页
│ ├── menu/ # 点餐页
│ ├── order/ # 订单页
│ ├── center/ # 用户中心
│ ├── tabbar/ # 底部导航
│ └── error/ # 错误页
├── static/ # 静态资源
│ ├── icon/ # 图标
│ └── images/ # 图片
├── store/ # Vuex 状态管理
├── App.vue # 根组件
├── main.js # 入口文件
├── manifest.json # 应用配置
└── pages.json # 页面配置
```
---
## 6. 安装教程
### 环境要求
- Node.js >= 12.0
- HBuilderX >= 3.0 (推荐)
### 开发步骤
1. **克隆项目**
```bash
git clone https://gitee.com/xxx/small-program-of-restaurant.git
```
2. **导入项目**
- 使用 HBuilderX 打开项目根目录
- 或使用命令行：`npm install` + `npm run dev:%platform%`
3. **运行项目**
| 平台 | 命令 |
|:---|:---|
| 微信小程序 | `npm run dev:mp-weixin` |
| 支付宝小程序 | `npm run dev:mp-alipay` |
| H5 | `npm run dev:h5` |
4. **发行打包**
- 微信小程序：在 HBuilderX 中选择 `发行 -> 发行微信小程序`
- 支付宝小程序：在 HBuilderX 中选择 `发行 -> 发行支付宝小程序`
- App 端：在 HBuilderX 中选择 `发行 -> 发行 App`
---
## 7. 配置说明
### 应用配置 (manifest.json)
| 配置项 | 说明 |
|:---|:---|
| name | 应用名称 |
| appid | 应用标识 |
| versionName | 版本名称 |
| versionCode | 版本号 |
### 页面配置 (pages.json)
- 页面路由定义
- 底部导航栏配置 (tabBar)
- 导航栏样式配置 (globalStyle)
---
## 8. 常见问题
Q: 如何修改店铺名称？
在 `pages.json` 中找到对应页面的 `navigationBarTitleText` 进行修改。
Q: 如何更换图标和图片？
替换 `static/` 目录下的对应图片文件，注意保持文件名一致。
Q: 如何接入后端接口？
在 `store/index.js` 或对应的页面文件中修改 API 请求地址。
---
## 9. 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
---
## 10. 开源协议
MIT License - 自由使用，商用请保留版权信息