微信小程序之購物車功能

1.購物車里面功能無非就是刪除商量，增加(減少)數量，單全選，商品合計

2.這段代碼var cartItems = this.data.cartItems  獲取購物車里面的商品，之后在通過下標e.currentTarget.dataset.index來獲取當前的商品

 

 

 

選擇事件(單全選)

  //單選 select:function(e){ var CheckAll = this.data.CheckAll; CheckAll = !CheckAll var cartItems = this.data.cartItems for(var i=0;i<cartItems.length;i++){ cartItems[i].selected = CheckAll } this.setData({ cartItems: cartItems, CheckAll: CheckAll }) this.getsumTotal() }, // 全選 selectedCart:function(e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index; //獲取當前點擊事件的下標索引 var selected = cartItems[index].selected; //獲取購物車里面的value值 //取反 cartItems[index].selected =! selected; this.setData({ cartItems: cartItems }) this.getsumTotal(); wx.setStorageSync("cartItems", cartItems) }

 購物車數量增加減少

add:function (e) { var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 var value = cartItems[index].value //獲取購物車里面的value值  value++ cartItems[index].value = value; this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) //存緩存  }, //減 reduce: function (e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 var value = cartItems[index].value //獲取購物車里面的value值 if(value==1){ value -- cartItems[index].value = 1 }else{ value -- cartItems[index].value = value; } this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) },

 刪除事件

 //刪除 shanchu:function(e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 cartItems.splice(index,1) this.setData({ cartItems: cartItems }); if (cartItems.length) { this.setData({ cartList: false }); } this.getsumTotal() wx.setStorageSync("cartItems", cartItems) }, //提示 go:function(e){ this.setData({ cartItems:[] }) wx.setStorageSync("cartItems", []) },

 商品價格合計

//合計 getsumTotal: function () { var sum = 0 for (var i = 0; i < this.data.cartItems.length; i++) { if (this.data.cartItems[i].selected) { sum += this.data.cartItems[i].value * this.data.cartItems[i].price } } //更新數據 this.setData({ total: sum }) },

 整合代碼

var json = require('../../data/Home_data.js') Page({ data: { cartItems:[], total:0, CheckAll:true }, onLoad:function(e){ }, onShow: function () { var cartItems = wx.getStorageSync("cartItems") this.setData({ cartList: false, cartItems: cartItems }) this.getsumTotal() }, //選擇 select:function(e){ var CheckAll = this.data.CheckAll; CheckAll = !CheckAll var cartItems = this.data.cartItems for(var i=0;i<cartItems.length;i++){ cartItems[i].selected = CheckAll } this.setData({ cartItems: cartItems, CheckAll: CheckAll }) this.getsumTotal() }, add:function (e) { var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 var value = cartItems[index].value //獲取購物車里面的value值  value++ cartItems[index].value = value; this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) //存緩存  }, //減 reduce: function (e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 var value = cartItems[index].value //獲取購物車里面的value值 if(value==1){ value -- cartItems[index].value = 1 }else{ value -- cartItems[index].value = value; } this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) }, // 選擇 selectedCart:function(e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index; //獲取當前點擊事件的下標索引 var selected = cartItems[index].selected; //獲取購物車里面的value值 //取反 cartItems[index].selected =! selected; this.setData({ cartItems: cartItems }) this.getsumTotal(); wx.setStorageSync("cartItems", cartItems) }, //刪除 shanchu:function(e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 cartItems.splice(index,1) this.setData({ cartItems: cartItems }); if (cartItems.length) { this.setData({ cartList: false }); } this.getsumTotal() wx.setStorageSync("cartItems", cartItems) }, //提示 go:function(e){ this.setData({ cartItems:[] }) wx.setStorageSync("cartItems", []) }, //合計 getsumTotal: function () { var sum = 0 for (var i = 0; i < this.data.cartItems.length; i++) { if (this.data.cartItems[i].selected) { sum += this.data.cartItems[i].value * this.data.cartItems[i].price } } //更新數據 this.setData({ total: sum }) }, })