【实例简介】
【实例截图】
【核心代码】
// pages/shopcart/shopcart.js
Page({
/**
* 页面的初始数据
*/
data: {
'goodList': [
{
'name': '孤独是生命的礼物',
'author': '余光中，林清玄，白先勇 等 著',
'isbn': '9787535482051',
'cover': '/images/cover_1.jpg',
'desc': '缅怀乡愁诗人余光中。余光中、林清玄、白先勇联手巨献，重温经典，送别先生。总有一天，你会明白，孤独才是生命的常态。一部直击现代人孤独的精神献礼。中国散文协会推荐！',
'press': '长江文艺出版社',
'price': 25.9,
'count': 1,
'checked': false
},
{
'name': '偷影子的人',
'author': '[法] 马克·李维 著；段韵灵 译',
'isbn': '9787540455958',
'cover': '/images/cover_2.jpg',
'desc': '数百万中文读者口口相传外国文学畅销经典',
'press': ' 湖南文艺出版社',
'price': 20.5,
'count': 1,
'checked': false
},
{
'name': '无声告白',
'author': '[美] 伍绮诗 著；孙璐 译',
'isbn': '9787539982830',
'cover': '/images/cover_3.jpg',
'desc': '我们终此一生，就是要摆脱他人的期待，找到真正的自己。',
'press': ' 江苏凤凰文艺出版社',
'price': 24.1,
'count': 1,
'checked': false
},
{
'name': '摆渡人',
'author': '[英] 克莱儿·麦克福尔 著；付强 译',
'isbn': '9787550013247',
'cover': '/images/cover_4.jpg',
'desc': '或许，命运就是一条孤独的河流，我们都会遇见灵魂的摆渡人。',
'press': ' 百花洲文艺出版社',
'price': 17.2,
'count': 1,
'checked': false
},
{
'name': '追风筝的人',
'author': '[美] 卡勒德·胡赛尼 著；李继宏 译',
'isbn': '9787208061644',
'cover': '/images/cover_5.jpg',
'desc': '快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物。为你，千千万万遍！',
'press': '上海人民出版社',
'price': 17.7,
'count': 1,
'checked': false
}
],
'checkAll': false,
'totalCount': 0,
'totalPrice': 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.calculateTotal();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 计算商品总数
*/
calculateTotal: function () {
var goodList = this.data.goodList;
var totalCount = 0;
var totalPrice = 0;
for (var i = 0; i < goodList.length; i ) {
var good = goodList[i];
if (good.checked) {
totalCount = good.count;
totalPrice = good.count * good.price;
}
}
totalPrice = totalPrice.toFixed(2);
this.setData({
'totalCount': totalCount,
'totalPrice': totalPrice
})
},
/**
* 用户点击商品减1
*/
subtracttap: function (e) {
var index = e.target.dataset.index;
var goodList = this.data.goodList;
var count = goodList[index].count;
if (count <= 1) {
return;
} else {
goodList[index].count--;
this.setData({
'goodList': goodList
});
this.calculateTotal();
}
},
/**
* 用户点击商品加1
*/
addtap: function (e) {
var index = e.target.dataset.index;
var goodList = this.data.goodList;
var count = goodList[index].count;
goodList[index].count ;
this.setData({
'goodList': goodList
});
this.calculateTotal();
},
/**
* 用户选择购物车商品
*/
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value);
var checkboxItems = this.data.goodList;
var values = e.detail.value;
for (var i = 0; i < checkboxItems.length; i) {
checkboxItems[i].checked = false;
for (var j = 0; j < values.length; j) {
if (checkboxItems[i].isbn == values[j]) {
checkboxItems[i].checked = true;
break;
}
}
}
var checkAll = false;
if (checkboxItems.length == values.length) {
checkAll = true;
}
this.setData({
'goodList': checkboxItems,
'checkAll': checkAll
});
this.calculateTotal();
},
/**
* 用户点击全选
*/
selectalltap: function (e) {
console.log('用户点击全选，携带value值为：', e.detail.value);
var value = e.detail.value;
var checkAll = false;
if (value && value[0]) {
checkAll = true;
}
var goodList = this.data.goodList;
for (var i = 0; i < goodList.length; i ) {
var good = goodList[i];
good['checked'] = checkAll;
}
this.setData({
'checkAll': checkAll,
'goodList': goodList
});
this.calculateTotal();
}
})
如果觉得《java模拟购物车窗体小程序 微信小程序实现购物车效果 示例源码》对你有帮助，请点赞、收藏，并留下你的观点哦！
