河南工程新希望官网,广州seo顾问,wordpress 卡密,广饶网站建设目录 1 创建购物车2 增加数量3 减少数量4 切换分类时回填数据5 显示购物车信息总结 我们上一篇搭建了点餐业务的数据初始化加载#xff0c;本篇实现一下加入购物车的功能。在购物车设计的时候有两种方案#xff0c;一种是使用数据表的方案#xff0c;一种是使用变量的方案。… 目录 1 创建购物车2 增加数量3 减少数量4 切换分类时回填数据5 显示购物车信息总结 我们上一篇搭建了点餐业务的数据初始化加载本篇实现一下加入购物车的功能。在购物车设计的时候有两种方案一种是使用数据表的方案一种是使用变量的方案。 数据表方案的优点是持久化到数据源中下一次打开小程序的时候还可以继续点餐。变量的方案是比较简单不用和数据源有太多的交互。
1 创建购物车
打开我们的应用编辑器在全局变量添加一个变量cartList
2 增加数量
接着我们实现一下增加数量的事件在代码区点击号增加一个自定义方法 方法的逻辑是将当前数据的count字段加一并把记录加入到购物车中如果是首次加入直接在数组中添加元素即可如果已经存在我们就更新对应的元素代码如下
export default function({event, data}) {console.log(data.target)const record data.targetrecord.count;if($w.app.dataset.state.cartList.length 0){$w.app.dataset.state.cartList.push(record)}else{let flag false$w.app.dataset.state.cartList.forEach(item{if(item._id record._id){flag trueitem.count record.count}})if(!flag){$w.app.dataset.state.cartList.push(record)}}
}代码的逻辑是先看购物车是不是空的如果数组的长度为0表示购物车是空的那我们直接调用数组的push方法将菜品放入购物车
如果购物车不为空那么就去循环一下购物车看当前选的商品放入购物车里没条件是购物车的商品的标识等于我们选购商品的标识加入了我们就更新购物车商品的数量如果没加入我们就直接放入
在调用自定义方法时需要传入参数参数是我们当前这条记录
3 减少数量
增加的做好之后我们要开发一下减少的功能。同样的在代码区增加一个自定义方法命名为minus 减少的逻辑需要先判断一下当前的数量够不够减不能出现负数代码如下
export default function ({ event, data }) {const record data.targetif (record.count 0) {record.count--;}if ($w.app.dataset.state.cartList.length 0) {$w.app.dataset.state.cartList.push(record)} else {let flag false$w.app.dataset.state.cartList.forEach(item {if (item._id record._id) {flag trueitem.count record.count}})if (!flag) {$w.app.dataset.state.cartList.push(record)}}
}调用的时候也需要传入所在行的数据 还有一个逻辑是当数量减为0的时候我们要隐藏减号和文本组件可以设置条件展示加一个判断条件
4 切换分类时回填数据
目前代码存在的问题是如果我们选购了商品如果切换分类的时候我们已经选择的信息就消失了为了记住信息我们在加载数据的时候要把购物车的信息再回填一下修改我们的initMenuCount方法添加如下代码
export default function({event, data}) {const list event.detail.dataconsole.log(list)$w.app.dataset.state.showlist_temp list.map(item{const product $w.app.dataset.state.cartList.find(vv._iditem._id)item.count product?product.count:0return item})
}这里event.detail.data可以获取原表格的数据这个是从数据源查出来的然后我们先是循环了原表格调用了数组的map方法。在具体的每一条记录我们需要看一下购物车里的数据是否和当前表格一样一样我们就把数量修改为购物车的数量。
最后处理好的数据我们在赋值回去这样就起到了一个数据更新的作用。
5 显示购物车信息
我们还需要一个购物车显示的功能显示总价已经购买商品的数量。选中页面组件添加一个普通容器里边放入网格布局 修改一下网格布局的列我们只需要两列 第一列添加一个图标和两个文本组件 切换到样式设置布局模式为横向排列、垂直居中 第二列添加一个按钮 我们第一个文本要显示总价总价的话从购物车求和就可以绑定如下表达式
${$w.app.dataset.state.cartList.reduce((total,current){return total(current.cpjg*current.count)
},0).toFixed(2)}元这里用到了数组的求和方法reduce需要两个参数第一个是求和的方法我们这里使用的是单价*数量进行累加第二个参数是我们初始时的初值我们设置为0
第二个文本要显示购买的数量直接获取数组的长度即可绑定如下表达式
共${$w.app.dataset.state.cartList.length}件然后设置一下普通容器的定位设置成固定定位
总结
本篇我们实现了一下购物车的功能涉及到添加到购物车显示总价、购买的件数等逻辑。涉及到具体逻辑就需要对javascript有比较深入的掌握否则很难实现功能编程的基本功还是要扎实掌握的。
