在点餐功能里我们实现了将菜品加入购物车的功能，加入购物车之后用户需要确认一下购物车里的菜品信息，可以修改数量，可以继续点单。本节我们实现一下购物车的管理功能。
1 创建页面
打开应用编辑器，点击创建页面的图标，新增购物车页面
2 搭建布局
选中页面组件，设置页面的背景色为灰色
先搭建我们的餐桌信息及清空购物车的图标，思路是先放置一个普通容器作为白色的背景，里边放置一个普通容器用来承载内容，内容是由文本组件和图标组件组成
给外层的普通容器设置白色的背景色，圆角设置为12
设置一定的外边距
内层容器我们设置布局为横向排列、两端对齐，设置一定的内边距
文本内容绑定为如下的表达式
`点餐单(餐桌号:${$w.app.dataset.state.table})`这里用反单引号表示是模板字符串，模板字符串允许你字符串和变量混写在一起。${}是插值表达式，表达式里的变量会解析成具体的值。我们在扫码点单的时候已经得到了餐桌的编号，这里用插值表达式去获取我们的编号
表达式绑定后是如下的效果
继续添加下划线组件和循环展示组件
循环展示绑定数据
绑定为我们的购物车信息
循环展示里添加网格布局，常用布局选择3:9
第一列添加图片组件，绑定为购物车里的图片字段
第二列我们是两行的布局，第一行显示菜品名称，第二行显示菜品的单价以及数量的操作图标
外层容器我们需要设置布局为纵向排列，两端对齐
内层容器设置布局为横向排列，两端对齐
第一个文本绑定为菜品的名称
第二个文本绑定为菜品的价格
第三个文本绑定为菜品的数量
然后设置一下边距让我们的效果更好看一点
继续添加一个单行输入组件，用来显示备注
设置标题位置为顶部
设置背景色为白色，一定的外边距和圆角
继续添加布局组件，搭建我们底部的按钮显示
设置网格布局的常用布局属性为6:6
第一列我们显示菜品的数量及总价
第一个文本内容绑定为如下的表达式
`共计${$w.app.dataset.state.cart.length}道菜`第二个文本内容绑定如下表达式
`应付 ¥ ${$w.app.dataset.state.cart.reduce((total,item)=>{return total+(item.jg*item.count)},0)}`
第二列添加两个按钮，内容修改为继续点单和支付并下单
最后设置背景色和定位
3 添加事件
布局搭建好了之后，就需要添加事件，我们目前一共有五个操作，分别是清空购物车、增加数量、减少数量、继续加单、支付并下单
3.1 清空购物车
在代码区增加清空购物车的方法
export default function({event, data}) {$w.app.dataset.state.cart = []}
清空购物车我们将变量赋值为空数组即可
3.2 增加数量
增加数量我们是先从数组中找到该菜品，然后修改数量为累计
export default function({event, data}) {const dish = data.targetconst index = $w.app.dataset.state.cart.findIndex(item=>item._id==dish._id)if(index!==-1){$w.app.dataset.state.cart[index].count+=1}else{$w.app.dataset.state.cart.push({...dish,count:1})}}
我们这里先从入参里得到菜品信息，然后从购物车里找到对应的位置，如果找到了我就修改数量增长1，如果未找到我就把当前菜品放入购物车里
添加好了之后给+号图标增加点击事件，传入我们当前的循环项
3.3 减少数量
减少和增加的逻辑类似，只是数量是递减，而且要判断如果数量为0的时候要从购物车中移除元素
export default function ({ event, data }) {const dish = data.targetconst index = $w.app.dataset.state.cart.findIndex(item => item._id == dish._id)if (index !== -1) {$w.app.dataset.state.cart[index].count -= 1if ($w.app.dataset.state.cart[index].count == 0) {$w.app.dataset.state.cart.splice(index, 1)}}}
设置好方法之后给按钮添加点击事件
3.4 继续点单
继续点单的时候我们跳转回点餐页面即可
总结
我们本篇介绍了购物车的功能，介绍了布局的搭建以及事件的定义。在做功能的时候先想好需要什么样的布局结构，使用正确的布局组件搭建好页面的框架，然后进行数据绑定和事件定义就可以完成功能的开发。
