点餐小程序实战教程14点餐功能

上一篇我们讲解了如果通过扫码实现餐桌信息显示，本篇我们介绍一下点餐的功能。

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 最终的效果

初始状态，我们的购物车不显示，只显示一个+号

点击+号，显示购物车的信息

继续点+号，总价变化数量不变

总结

我们本篇介绍了点餐功能，主要涉及到列表数据的搭建，加入购物车，移除购物车的功能。需要掌握数据列表数据加载之后重新构造数据的问题，还有就是购物车和列表的数据的逻辑关系。