微信小程式中商城購物車例項,追加刪除購物車中個別商品例項
阿新 • • 發佈:2019-01-30
購物車的做法都是運用快取來實現,小程式也一樣,這個方法重要的想法,當然也有其他更好的方法去實現。同樣的每行解析。
商品詳細頁
購物車頁tocar: function (event) {//event必須要加不然用不了event.currentTarget.dataset。這個函式已經被formSubmit函式取代 var goods_id = event.currentTarget.dataset.carId;//點選事件的獲取商品id //console.log(goods_id); var goods_arr = wx.getStorageSync('goods_arr'); if (goods_arr) { goods_arr[goods_id] = goods_id; wx.setStorageSync('goods_arr', goods_arr); } else { var goods_arr = {};//開空物件 goods_arr[goods_id] = goods_id;//key和value都是goodsId wx.setStorageSync('goods_arr', goods_arr);//更多的商品加入到購物車時,以多陣列形式儲存 } //wx.setStorageSync('goods_id', goods_id); wx.switchTab({//接著跳到購物車頁 url: "../car/car" }); }, formSubmit: function (event) { var goods_id = event.detail.value.goods_id; var qidingliang = event.detail.value.qidingliang; //console.log(qidingliang); if(qidingliang ==""){ wx.showToast({ title: '請輸入訂購量', icon: 'loading', duration: 2000 }) }else{ var goods_arr = wx.getStorageSync('goods_arr');//拿購物車中商品id陣列 var qingling_arr = wx.getStorageSync('qingling_arr');//拿購物車中訂購量陣列 //console.log(qingling_arr); if (goods_arr && qingling_arr) {//都有的情況下,進行對應的新增 goods_arr[goods_id] = goods_id; qingling_arr[goods_id] = qidingliang; wx.setStorageSync('goods_arr', goods_arr); wx.setStorageSync('qingling_arr', qingling_arr); } else {//沒的情況下,開空陣列,然後同上進行對應的新增 var qingling_arr = {}; var goods_arr = {}; goods_arr[goods_id] = goods_id; qingling_arr[goods_id] = qidingliang; wx.setStorageSync('goods_arr', goods_arr); wx.setStorageSync('qingling_arr', qingling_arr); } //wx.setStorageSync('goods_id', goods_id); wx.switchTab({//完成後跳到購物車頁面重 url: "../car/car" }); } }
onShow: function () { var that = this; var goods_arr = wx.getStorageSync('goods_arr');//拿新增到購物車中商品的id陣列 var qingling_arr = wx.getStorageSync('qingling_arr');//拿新增到購物車中商品的訂購量陣列 //console.log(qingling_arr); if (!goods_arr || JSON.stringify(goods_arr) == "{}") {//不存在或把購物車刪乾淨後提示後跳轉 this.orClear(1) wx.showModal({ title: '提示', content: '你還沒新增禮品呢,請先去挑選', success: function (res) { if (res.confirm) { wx.switchTab({ url: "../index/index" }) } } }) }else{ this.countTotal(that,goods_arr,qingling_arr);//交給countTotal自定義函式處理 this.user_address(); var vip_code=wx.getStorageSync('vip_code'); //console.log(vip_code); this.setData({ vipCode:vip_code }) } }, countTotal:function(that,goods_arr,qingling_arr){ var arr = [];//開空陣列 //console.log(goods_arr); for (var i in goods_arr) {//對商品id組進行遍歷 var subject = goods_arr[i]; arr.push(subject);//通過push統一轉移 } var post_id = arr.join();//將arr陣列通過join方法轉為字串 console.log(post_id); var url = "https://www.xxxxxxxxxxxxxxxx";//交給後臺做處理 //console.log(url); var money=[];//開金錢空陣列 wx.request({ url: url, data: { gallery_id: post_id//去吧一連串有商品ID組成的字串 }, method: 'POST', header: { 'content-type': 'application/json' }, success: function (res) { //console.log(res); //console.log(qingling_arr[803]); for (var i = 0; i < res.data.length; i++) {//後臺返回的結果是帶有該商品所有資訊的陣列,這裡遍歷出來 var goods_id = res.data[i].goods_id;//為下一步做準備的賦值。 res.data[i]['qinglingliang'] = qingling_arr[goods_id];//快取的訂購量陣列出場,拿由上一步中後臺結果給出的商品id帶到訂購量陣列中的key中出,直接得出使用者的訂購量 //console.log(res.data[i]['qinglingliang']); var marke=res.data[i].costPrice; money[i]= marke * res.data[i]['qinglingliang'];//開個總價空組數,把各個商品的價錢放進去 } //console.log(money); var sum=0; for (var i = 0; i < money.length; i++){ sum += parseInt(money[i]);//遍歷算總價,所有商品的總價 } //console.log(sum); that.setData({ goods_list_key: res.data, total_money:sum }); } }); }
刪除購物車中個別商品
del_goods: function (event) { wx.showModal({ title: '提示', content: '你正準備從購物車中刪除這個商品', success: function (res) { if (res.confirm) { //wx.removeStorageSync('goods_arr'); var delId = event.currentTarget.dataset.delId;//轉過來的商品id var goods_arr = wx.getStorageSync('goods_arr'); delete goods_arr[delId];//刪除物件中的元素 var qingling_arr = wx.getStorageSync('qingling_arr');//拿新增到購物車中商品的訂購量陣列 delete qingling_arr[delId];//刪除物件中的元素 wx.setStorageSync('goods_arr', goods_arr);//重新設快取 wx.setStorageSync('qingling_arr', qingling_arr);//重新設快取 wx.showToast({ title: '刪除成功', icon: 'success', duration: 1000 }); setTimeout(function () { wx.switchTab({ url: "../index/index" }) }, 2000); } } }) }
判斷購物車頁是否為空的簡易處理
orClear:function(e){
//console.log(e);為空是1,購物車有快取為2,顯示介面做簡單處理
this.setData({
carClear: e
})
}