上一篇我们讲解了如果通过扫码实现餐桌信息显示，本篇我们介绍一下点餐的功能。
1 功能分析
点餐的话一般我们是在菜品点击+号或者-号来加入购物车，加入购物车之后还可以修改数量，看到点餐的数量和总价格。
使用微搭实现点餐功能要稍微复杂一点，有几个步骤需要考虑
如何给菜品添加一个默认的数量
如何在菜品显示之后回填用户选择的数量
在点击+号或者-号的时候如何更新购物车的信息
2 初始化菜品的数量
我们在显示菜品的时候，是通过读取数据源的数据进行显示。但是有一个问题是，我们的数据源中并没有数量这个字段，那如何增加这个字段呢？
我们可以考虑在数据列表加载成功时候重新修改一下列表的数据
在查询成功的时候我们调用一个自定义方法，来重新加载数据。点击代码区点击+号，创建一个javascript方法
可以修改方法的名称为showList
在查询成功的时候我们调用这个方法
首先我们需要得到列表的数据，可以从事件对象event里获取，我们在自定义方法中添加一个打印方法，打印一下我们的event
console.log(event)点击实时预览，打开开发者工具，可以看到我们的输出结果
列表的数据我们可以从event.detail.data里拿到，他的类型是数组，数组的元素是对象，对象里就包含我们在数据源里定义的结构
拿到数据之后就需要增加一个属性，数量。我们先需要添加一个变量，用来标识购物车，变量类型选择数组
我会去看当前列表里的数据是否在购物车中存在，如果存在我就把购物车中的数量赋值给当前元素，不存在就初始化成0，再增加一个变量，表示构造好的数据，类型选择数组
在自定义方法中我们初始化一下数据
export default function({event, data}) {console.log(event)const currentList = event.detail.data$w.page.dataset.state.tempList = currentList.map(dish =>{const item = $w.page.dataset.state.cart.find(cartItem=>cartItem._id===dish._id)dish.count = item?item.count:0return dish})}
这样执行完毕后，我们的列表数据里就多了一个数量的属性
数据处理好了之后，我们需要将我们返回的数据绑定到循环展示上
3 加入购物车
加入购物车的时候，我们先需要搭建一下布局，布局是由两个图标和一个文本组成
文本组件我们绑定数量属性
添加一个自定义方法，叫addCart，加入如下代码
export default function ({ event, data }) {const dish = data.target$w.page.dataset.state.tempList = $w.page.dataset.state.tempList.map(item => {if (item._id === dish._id) {item.count++}$w.page.dataset.state.cartreturn item})const cart = $w.page.dataset.state.cart || [];const cartItem = cart.find(item => item._id === dish._id);if (cartItem) {cartItem.count++;} else {cart.push({ ...dish, count: 1 });}$w.page.dataset.state.cart = cart;}
对应的我们再加一个removeCart的方法，用来从购物车里移除信息
export default function ({ event, data }) {const dishId = data.target._id;const decreaseAmount = 1;let cart = $w.page.dataset.state.cart || [];let tempList = [...$w.page.dataset.state.tempList]; // 使用浅拷贝以避免直接修改原始状态const tempListItemIndex = tempList.findIndex(item => item._id === dishId);if (tempListItemIndex !== -1) {const tempListItem = tempList[tempListItemIndex];if (tempListItem.count >= decreaseAmount) {tempListItem.count -= decreaseAmount;// 更新购物车const cartItemIndex = cart.findIndex(item => item._id === dishId);if (cartItemIndex !== -1) {if (tempListItem.count === 0) {// 如果tempList中的数量减至0，则从购物车中删除该项cart.splice(cartItemIndex, 1);} else {// 否则，更新购物车中的数量cart[cartItemIndex].count = tempListItem.count;}}// 更新应用状态$w.page.dataset.state.tempList = tempList;$w.page.dataset.state.cart = cart;if (tempListItem.count === 0) {// 数量减至0时显示提示，并且此时购物车中的对应项应该已经被删除$w.utils.showToast({title: "已从购物车中移除",icon: "success", // 或者其他适合的图标duration: 2000});}} else {// 数量已经不足以减少，显示提示$w.utils.showToast({title: "数量已经是最小值了",icon: "error",duration: 2000});}} else {// 未找到对应菜品项，显示错误提示$w.utils.showToast({title: "未找到对应的菜品项",icon: "error",duration: 2000});}}
在给图片绑定事件的时候，记得要把当前所在行的数据传入自定义方法中
点餐的时候，如果没加入购物车，应该只显示+号的图标，我们可以给-号和文本绑定条件展示
4 显示购物车
当菜品被添加到购物车后，我们需要显示一下购物车的信息。选中页面组件，添加一个普通容器
里边添加一个普通容器和一个按钮
修改外层的普通容器的样式，布局设置为横向排列，两端对齐
在内层的普通容器里继续添加两个普通容器，用来显示购物车的图标和价格
设置布局为横向排列，左对齐
第一个普通容器添加一个图片组件和一个文本组件，设置图片的宽和高各为46
文本内容绑定为购物车的长度
在添加一个文本用来显示总价，绑定为购物车的总价
"¥ " + $w.page.dataset.state.cart.reduce((accumulator, item) => {return accumulator + (item.jg*item.count || 0);}, 0)
5 最终的效果
初始状态，我们的购物车不显示，只显示一个+号
点击+号，显示购物车的信息
继续点+号，总价变化数量不变
总结
我们本篇介绍了点餐功能，主要涉及到列表数据的搭建，加入购物车，移除购物车的功能。需要掌握数据列表数据加载之后重新构造数据的问题，还有就是购物车和列表的数据的逻辑关系。
