Home

Awesome

微信小程序——餐饮点餐商城

微信小程序——餐饮点餐商城,是针对餐饮行业推出的一套完整的餐饮解决方案,实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能,完美的使餐饮行业更高效便捷!

大家如果在使用过程有什么问题,欢迎通过lssues与我们交流!

如果本项目对您有所帮助或者启发,请给我们 Star 吧,您的鼓励是我们最大对动力~

加微信联系我

<img src="https://dcdn.it120.cc/2022/09/19/7b884d58-541a-404b-a805-457540d7f87f.jpeg" width="200px">

自提/外卖 扫码体验

<img src="https://dcdn.it120.cc/2021/01/19/b388b014-7ae0-4b3a-9d6f-30c8b3082fe6.jpg" width="200px">

扫码点餐演示

座号A1座号A2座号A3座号A4座号A5
<img src="https://dcdn.it120.cc/cuser/27/2021/09/26/cbb91217-47b1-4af1-a0e5-55df0efd3566.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/cbb30b43-15df-4564-87ef-3416f58ab0c8.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/150cd47b-e769-49fc-bca6-be8c5fe84f49.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/b5a44d1f-cea4-437f-802d-a36c728ff459.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/99c47ba3-50ba-4431-93c6-e10f527a5e28.png" width="200px">
座号A6座号A7座号A8座号A9座号A10
<img src="https://dcdn.it120.cc/cuser/27/2023/01/04/aca7a7fd-72c9-4d89-a903-d82e6b8b8f83.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/77f16752-656f-4218-99df-c82c5db1921a.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/e3be04c4-9c0f-41c8-9482-b645699d1df4.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/352c7e84-56ec-4961-9e7d-cc4e752cf154.png" width="200px"><img src="https://dcdn.it120.cc/cuser/27/2023/01/04/78adb196-231d-41b7-be8d-51febc022bac.png" width="200px">

QQ交流群

交流群3(709136251)交流群4(276780260)
<img src="https://dcdn.it120.cc/2021/09/13/751cb675-265e-4be1-8f2e-f26935f693d7.png" width="200px"><img src="https://dcdn.it120.cc/2022/12/20/5e4d6d5b-1361-476d-912f-ee740f036ec6.jpeg" width="150px">
交流群1(已满)(926321567)交流群2(已满)(671428068)
<img src="https://dcdn.it120.cc/2020/07/27/e3d09fd2-ace0-4cf4-9d71-e0454591ff54.png" width="200px"><img src="https://dcdn.it120.cc/2020/12/27/b709cceb-befc-405b-8c5a-c8f9e90a1a5b.png" width="150px">

本项目使用了下面的组件,在此鸣谢

其他优秀开源模板推荐

使用教程

注册开通小程序账号

https://mp.weixin.qq.com/ 根据自己的实际情况选择 “企业”、“个体工商户”身份,注册小程序账号,商城类小程序不支持个人用户上线,所以一定要选择企业或者个体户,获得你自己小程序的 appid 和 secret 信息,保存好,下面会用到:

注册开通后台账号

https://admin.it120.cc/ 免费注册开通新后台后登录,登录后的首页,请记下你的专属域名,后面会用到 左侧菜单 “工厂设置” --> “数据克隆” --> “将别人的数据克隆给我” 对方商户ID填写 27 点击 “立即克隆”,克隆成功后,F5 刷新一下后台

配置小程序APPID/SECRET

左侧菜单,微信设置,填写配置上一步获得的 appid 和 secret 这一步很重要!!! 如果没有正确配置,下面步骤中打开小程序将无法连接你的后台

配置微信支付

左侧菜单,系统设置 --> 在线支付配置,填写您自己的微信支付的信息

下载安装开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

运行小程序看效果

双击运行第一步安装的小程序开发工具,打开看效果:

<img src="https://dcdn.it120.cc/yuque/0/2019/png/572726/1575349127431-00ff2059-dd5e-4e4b-99a7-e1d605db02c7.png?x-oss-process=image%2Fresize%2Cw_1500 " width="200px">

导入项目这里,目录选择你 “第二步” 中下载并加压的小程序代码所在目录

APPID 务必要改成你自己的小程序的 APPID APPID 务必要改成你自己的小程序的 APPID APPID 务必要改成你自己的小程序的 APPID

然后点击导入按钮

配置对接你自己的后台

在开发工具中 config.js 中的subDomain 改成你自己专属域名, ctrl + s 保存

<img src="https://dcdn.it120.cc/yuque/0/2020/png/572726/1581236703094-ce5c7f32-c60d-4e1b-bacb-21439e1d2721.png?x-oss-process=image%2Fresize%2Cw_1500 " width="200px">

用户自提的订单如何扫码核销

用户选择自提的订单,会在底部取餐菜单界面显示订单信息以及取餐码,商家可通过 “我的” --> “扫码核销” 菜单,点击以后调起手机相机,扫用户出示的取餐码完成核销

但是默认情况下,是看不见 “我的” --> “扫码核销” 菜单的,需要在后台 “系统设置” --> “系统参数” ,添加文本类型的参数:

重新进入小程序以后,就可以看见 “扫码核销” 的菜单了

桌号管理

登录后台,左侧菜单 “桌号管理”,添加并管理你的桌号信息,添加以后在列表你将可以看到 ID 和 密钥,这两个数据用来生成桌子的二维码
<img src="https://dcdn.it120.cc/2022/12/30/e76a0320-992a-4932-9d58-dec3fd6630b8.png">

生成桌子二维码

例如上面的ID为 308,密钥为 d3PiIY,那么现在去左侧菜单微信设置 -> 小程序设置 -> 获取小程序二维码(圆形码),即可获取小程序码:
填写信息如下:

其中 shopId 为你对应的门店ID,其他参数默认就可以了

<img src="https://dcdn.it120.cc/2022/12/30/6c807326-8db9-465a-912e-58847b28658c.png">

如何修改小程序首页标题

登录后台,左侧菜单 “系统设置” --> “系统参数” ,添加一个文本类型的参数: mallName (注意大小写),小程序即可显示你后台填的名称

根据选择的不同门店,区分显示商品(只显示当前门店的商品)

登录后台,左侧菜单 “系统设置” --> “系统参数” ,添加一个开关类型的参数: shop_goods_split,开启为区分,关闭为不区分

如何设置服务范围(多少公里)

后台 “商场管理” --> “门店管理” ,编辑门店,服务距离处,填写你希望配送的距离即可

如何显示销量

商品列表接口、商品详情接口,都会返回商品的销量数据,分别是 numberOrders 和 numberSells 两个字段,你可以在界面上任何希望显示销量的地方,进行展示即可

假如说用户下了一个订单一次性购买10份这个商品,那么 numberOrders = 1 ,numberSells = 10

如何区分门店显示商品

后台左侧菜单“系统设置” -> “系统参数”,增加一个开关类型的参数: shop_goods_split

开启则只会显示当前门店的商品,关闭则显示所有门店的商品

在线订座如何配置

  1. 左侧菜单 “预约报名” --> “项目设置” ,添加一个项目,添加完以后会得到一个编号
  2. 左侧菜单 “系统设置” --> “系统参数”, 修改编号为 zxdz 的参数,将你的编号填进去即可

配置达达配送

  1. 如何对接达达配送,先按这个教程完成配置
  2. 后台 “商城管理” --> “门店管理”, 编辑,门店编号填写你达达对应的门店编号,生鲜配送输入框填写 dada

二次开发如何使用国际化实现多语言

  1. js 文件中,onload 方法中,加入: getApp().initLanguage(this) ;注意这里的路径要填正确,否则提示文件找不到;
  2. 页面中可以直接显示语言包中的内容: {{ $t.test.name }};
  3. 语言内容,直接修改 i18n 文件夹中对应的语言的文件即可;

常见问题

无法登陆 / 无法获取 openid

  1. 请检查 config.js 文件中的 subDomain 是否已经修改成你自己的专属域名了

    如何查看自己的subDomain

  2. 确保下面3个地方的 appID 你填的是一样的

获取手机号码失败,提示没权限

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

官方文档有说明,获取手机号码的前提条件是:非个人开发者,且完成了认证的小程序开放(不包含海外主体)

wx.getLocation 改为 wx.getFuzzyLocation (getLocation的接口权限太难申请了)

微信申请 getLocation 接口的审核比较严格,可能比较难申请到这个接口,可以用 wx.getFuzzyLocation 来代替: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getFuzzyLocation.html

开发工具,全局替换以下代码:

需要替换3次

scope.userLocation 替换为 scope.userFuzzyLocation

如图:

<img src="https://dcdn.it120.cc/yuque/0/2023/png/572726/1680937230066-f31f9661-7c15-4ffe-86b1-9d70ce5a6062.png">

再全局替换代码:

wx.getLocation 替换为 wx.getFuzzyLocation

再全局替换代码:

"getLocation" 替换为 "getFuzzyLocation"

小程序订单中心path 怎么填

请填写 pages/all-orders/index

微信支付MA授权(appid和mch_id不匹配)

微信支付MA授权(appid和mch_id不匹配)

使用国际化多语言,切换语言后底部菜单显示不对

/i18n/index.js 文件里面的菜单内容估计忘记修改了