微信小程序实现购物车效果 示例源码

【实例截图】

【核心代码】

// 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();
  }


})