1. 程式人生 > >微信小程式中商城購物車例項,追加刪除購物車中個別商品例項

微信小程式中商城購物車例項,追加刪除購物車中個別商品例項

購物車的做法都是運用快取來實現,小程式也一樣,這個方法重要的想法,當然也有其他更好的方法去實現。同樣的每行解析。

商品詳細頁

  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
    })
  }