1. 程式人生 > >小程式購物車之加入購物車

小程式購物車之加入購物車

購物車功能有兩個步驟,1:加入購物車   2:在購物車中增加商品數量,刪除商品等等一系列操作,今天先將加入購物車的功能完成

wxml:

<view class="cart" bindtap='addCart' data-id="{{book.id}}" data-img="{{book.goods_img}}" data-title="{{book.goods_title}}" data-price="{{book.goods_prom_price}}" data-num="1" >加入購物車</view>

js:

addCart:function(res){
    //建立動畫,
    var animation = wx.createAnimation({
      duration: 3000,
      timingFunction: 'ease-in-out'
    });
    this.animation = animation;
    animation.translateY(-336).step();
    this.setData({
      animationData: this.animation.export(),
      maskVisual: 'show'
    });

    var that = this;
    var cart = wx.getStorageSync('cart') || [];//判斷cart存不存在
    var exist = cart.find(function (ele) {  //find遍歷cart陣列
      return ele.id === res.currentTarget.dataset.id;
    })
    if (exist){
      exist.num = parseInt(exist.num) + parseInt(res.currentTarget.dataset.num);//如果加入購物車的商品存在就增加數量
    }else{
      cart.push(res.currentTarget.dataset);
    }
    wx.setStorage({
      key: 'cart',
      data: cart,
      success: function (res) {
        //新增購物車的訊息提示框
        wx.showToast({
          title: "加入購物車成功",
          icon: "success",
          durantion: 2000
        })
      }
    })
    //購物車的圖示右上方提示購物車中有多少商品
    var total = 0;
    cart.find(function (ele) {
      total += parseInt(ele.num);
    })
    this.setData({ cartNum: total });
  },

參考:https://blog.csdn.net/sinat_32034679/article/details/78748206