购物车
在各种购物平台,购物车都是十分常见的,比如淘宝,美团等等各种应用软件。一般的软件购物车都包含商品图片,名称,价格。购物车其实就是一个物品或商品的简介,直观的反映了商品的特性,提醒了用户在购物车内的是一个什么样的商品,一定程度上避免了二次及多次浏览。此外,购物车最重要的功能就是方便用户购买商品,上述特性也都是为了突出这一功能。那么今天我们就来单纯的实现一下购物车功能。这里我们需要使用到上次介绍的多选框。如下图,就是我们今天要介绍的购物车功能。
图1.1 效果图
购物车的实现
首先需要了解购物车实现的功能需求。那么我们就来依次介绍着三种功能并介绍一下实现办法。
大概功能如下:
(1)单个商品购买数量的增加和减少。
(2)删除商品。当购物车为空时,页面会变为空购物车的布局。
(3)单选、全选和取消,而且会随着选中的商品计算出总价。
下面我们就重点介绍几个简单的功能。在index.js文件里,我们采用遍历的方式对玩偶的图片,名称等进行显示。
data: [ { name: "玩偶公仔", index: 0, state: 0, checkeedAll: false, data: [ { url: "../../images/1.jpg", classtitle: "小羊", index: 0, state: 0, checked: false, price: 9.9 }, { url: "../../images/2.jpg", classtitle: "吉他1", index: 1, state: 0, checked: false, price: 9.9 }, { url: "../../images/3.jpg", classtitle: "吉他1", index: 2, state: 0, checked: false, price: 4.9 } ] }, ], checkedAll: false, count: 0, priceAll: 0.0 }, |
只有所有单选的单选都选中了,当前单选的这块的的父级就会全部选中 ,将选中的父级添加在一个数组当中。如果它本身的数据的length=它被选中的length,就会让三级的全选选中。
var data = this.data.data; var datarr = []; for (var a = 0; a < data.length; a++) { if (data[a].checkeedAll == true) { datarr.push(data[a]); } } if (data.length === datarr.length) { this.setData({ checkedAll: true }); } else { this.setData({ checkedAll: false }); } |
//点击全选 AllTap: function (e) { var checkedAll = this.data.checkedAll; var list1 = this.data.data; for (var i = 0; i < list1.length; i++) { list1[i].checkeedAll = !checkedAll; var list2 = this.data.data[i].data; for (var a = 0; a < list2.length; a++) { list2[a].checked = !checkedAll; } } |
点击删除按钮则从购物车列表中删除当前元素,删除之后如果购物车为空,改变购物车为空标识。
//点击 单个删除 课程 shanchuTap: function (e) { var that = this; var groupIndex = e.target.dataset.groupindex; //点击 单个删除玩偶 shanchuTap: function (e) { var that = this; var groupIndex = e.target.dataset.groupindex; //获取当前index var index = e.target.dataset.index; //获取玩偶当前index
wx.showModal({ title: '', content: '确定要删除吗?', cancelColor: "#ababab", confirmColor: "#027ee7", success(res) { if (res.confirm) { var list2 = that.data.data[groupIndex].data; list2.splice(index, 1); var dataStatus = 'data[' + groupIndex + '].data'; that.setData({ [dataStatus]: list2 }); wx.showToast({ title: '删除成功', icon: "none", }) } else if (res.cancel) { console.log('用户点击取消') } } }); },
var index = e.target.dataset.index; // 拿到当前玩偶 的index wx.showModal({ title: '', content: '确定要删除吗?', cancelColor: "#ababab", confirmColor: "#027ee7", success(res) { if (res.confirm) { var list2 = that.data.data[groupIndex].data; list2.splice(index, 1); var dataStatus = 'data[' + groupIndex + '].data'; that.setData({ [dataStatus]: list2 }); wx.showToast({ title: '删除成功', icon: "none", }) } else if (res.cancel) { console.log('用户点击取消') } } }); }, |
这里其实对于购物车功能实现的并不完全。但是index.js的代码有点过多,就不再这里展示了。如果有感兴趣的同学,可以去百度网盘提取,尝试一下。网址如下https://pan.baidu.com/s/1SxGulv1D5hY-sgme7oU-eg。提取码:1tim。