该篇是转接我的文章简单饮食推荐（一）中功能实现中的订餐模块。
目录
- 1、要实现的功能
- 2、界面的布局
- 3、设计思路
- 4、实现过程
1、要实现的功能
- 能够显示菜单
- 可以切换不同的食物种类
- 可以将菜单中的菜品或者食物添加至购物车
- 在购物车中可以对已经选择的食物进行增加或减少
- 可以对购物车中的食物进行结账
- 结完账后可以扫码支付
2、界面的布局
该模块的界面采取的是左右联动的菜单列表，该功能的实现可以直接通过scroll-view来设置。但我没有直接用这个组件。我使用的组件是view组件，只不过是在它的css属性中通过将overflow设置为scroll来实现。
3、设计思路
1、整个页面分成左右两个view，横向布局；左侧view用子菜单view一个个填充，纵向布局，右侧的也是纵向布局。
2、在左边菜单中，子菜单内容存入数组，点击子菜单view，用<view class="{{tabIndex == index ? ‘menu active’ : ‘menu’}}"来记录当前选择的菜单，其中tabIndex是回传的数组索引index。
3、右菜单中，要想实现点击左侧子菜单的样式来显示不同的右侧页面，可以在wxml的一个view中通过判断js中存着的数组的id是否等于当前的tabIndex来筛选出id等于当前 tabIndex的数据。
4、图片资源的存储问题：可以利用图床来存放，然后把每一个图片的url记录下来，然后在js中存储到对应的菜品数组中。
5、对于每个右侧的菜品，可以通过点击每个菜品旁边的“添加”按钮进行菜品添加，每次点击都会在底部显示选的菜品件数和总价钱，通过js来控制相关的钱数计算。
6、点击菜品旁边的“添加”按钮进行菜品添加时下方弹出的view中的右侧加一个转去购物车的按钮，点击这个按钮就可以转到购物车界面，在购物车界面中会显示出你所选的食物，在这里你可以单独对每一个所选食物进行数量上的添加或者减少。
7、在购物车界面可以点击“结账”按钮进行结账，点击后会调出一个确认界面，确认之后就会进入支付界面，可以扫码支付。
4、实现过程
1、设置左右联动的菜单列表，关键代码如下：
其中要对view进行属性的配置，实现滚动的效果，关键就是要对overflow进行设置，overflow 属性规定当内容溢出元素框时发生的事情，这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，都会提供一种滚动机制。所以可以设置“overflow: scroll;”。
Overflow分别设置在aside和item-content中，对两个左右联动的菜单列表的最外层view的设置如下：
2、左侧菜单可以view的for循环来实现，循环遍历js中的menus数组，当然menus数组要传到视图层。Menus数组定义如下：
点击的每一个菜单框绑定的是js中的tabMenu事件，
绑定的tabMenu函数为：
当点击某个选项时如何判断点击的是哪个菜单？
查阅资料发现可以在标签里设置data-index，绑定一个点击事件，传参index，通过event.target.dataset.index来取；可在js中访问 event.target.dataset对象，而event.target.dataset.index里面的index就是我们在view标签上添加的" data-index “属性；然后用了三元表达式class=”{{tabIndex === index ? ‘menu active’ : ‘menu’}}"来动态赋值给class，这样就实现了动态控制class。
用这个函数实现了获取当前点击的是哪一个menu，也就是在js中定义的menus数组中其中选中的那一个数组的下标。在tabMenu事件函数中添加console.log(index)来进行验证是否可以获取到当前点击菜单的事件：
从上到下依次点击按钮，可以看到在调试器中输出如下内容：
可以看出输出内容准确，上述功能以实现。3.要先实现点击左侧子菜单的样式来显示不同的右侧页面，可以在wxml的一个view中通过“wx:if="{{tabIndex==item.id}}”来判断js中菜品数组中的id是否等于当前的tabIndex的值来筛选出id等于当前 tabIndex的菜品数据。也就是在items数组（存放菜品信息）中，同一种类别的食物共用一个id，如下定义：
4.图片资源的处理
为避免小程序代码文件整体过大，应该避免在文件夹中存储大量的图片资源，所以可以将所用到的图片资源上传到图床来存储。这里我选择的是 路过图床 来存储所用到的图片资源。
上传完后如下所示：
将每个图片的url保存到js中定义items数组中：
5.对于每个右侧的菜品，可以通过点击每个菜品旁边的“添加”按钮进行菜品添加，每次点击都会在底部显示选的菜品件数和总价钱，通过js来控制相关的钱数计算。
“添加”按钮绑定的事件是addOrder，在该函数中要实现的有：
购物单列表存储数据、改变添加按钮的状态、将已经确定的菜单添加到购物单列表、判断底部提交菜单显示隐藏、总价格求和、设置显示对应的总数和全部价钱、将选中的商品存储在本地。
购物单列表存储数据实现：购物单列表存储在subOrders这个数组中，如下所示：
改变添加按钮的状态，这里通过一个三元表达式来实现就可以，如下：
将已经确定的菜单添加到购物单列表，直接用push函数来添加到subOrders数组中，如下所示：
判断底部提交菜单显示隐藏，判断subOrders数组是否为空，若subOrders为空，底部提交菜单显示标志bottomFlag为false，否则底部提交菜单显示标志bottomFlag置为true。
总价格求和,这里只需简单的加法就可以，如下所示：
设置显示对应的总数和全部价钱，只需将orderCount这个集合进行setData就可以了，代码如下：
将选中的商品存储在本地，这里用的是wx.setStorage(Object object)函数，查找开发者文档得知该函数的用法如下：
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
6. 点击菜品旁边的“添加”按钮进行菜品添加时下方弹出的view中的右侧加一个转去购物车的按钮，点击这个按钮就可以转到购物车界面，在购物车界面中会显示出你所选的食物，在这里你可以单独对每一个所选食物进行数量上的添加或者减少。
这个按钮绑定的事件函数是js中的card函数。card函数如下：
查阅开发文档，跳转函数可以用wx.redirectTo(Object object)，该函数的功能是：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。点击之后会跳转到’…/order/order’界面。
跳转到该界面后，显示选中的菜品的代码如下：
这里和前面的列表显示异曲同工，用for遍历数组即可。
实现对购物车菜品量的加减界面的view代码：
其中加减按钮绑定的事件函数的代码如下：
点击加减按钮，测试框输出如下：
这里加减的数据对象是之前设定的orderCount集合中的num和money的值。
“结账”按钮绑定的事件是pay函数，pay函数代码如下：
1. pay: function () {
2. let that = this;
3. let str = '选中' + that.data.orderCount.num + '件商品，共' + that.data.orderCount.money + '元，是否要支付？'
4. wx.showModal({
5. title: '提示',
6. content: str,
7. success: function (res) {
8. // 至少选中一个商品才能支付
9. if (that.data.orderCount.num !== 0) {
10. if (res.confirm) {
11. // 打开扫码功能
12. wx.scanCode({
13. onlyFromCamera: true,
14. success: (res) => {
15. wx.redirectTo({
16. url: '../pay/pay'
17. });
18. }
19. });
20. } else if (res.cancel) {
21. console.log('用户点击取消')
22. }
23. } else {
24. wx.showToast({
25. title: '您未选中任何商品',
26. icon: 'none',
27. duration: 2000
28. })
29. }
30. }
31. })用if (that.data.orderCount.num !== 0)来判断当前orderCount中是否有数据，也就是是否有待结账的菜品，若有，就会弹出一个确认框，点击确认之后，就会调取扫码功能，扫码功能代码如下：
在这个函数中，调用之后会转到支付界面
