小程序实现购物车

2019-08-22 15:55:25 阅读：273 来源： 互联网

标签：isAllChecked 程序实现 cart 购物车 goodsid let key data

其实购物车都是类似的实现方法，只不过小程序是有他的数据层和业务层，在这里把之前的做法记录一下，分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据，因为我们会切换页面在页面切换的过程中需要实时重新加载购物车的数据，所以我们把获取的方法写在onShow中，而不是onLoad中：
onShow: function () {
  const cart = wx.getStorageSync("cart");
  let address = wx.getStorageSync("address") ;
  console.log(address);
  this.setData({
   address, cart
})
  this.loadCarts();
  this.countAll();
  }

点击按钮更改购物车的数量：
handleNumEdit(e) {
const { operator, goodsid } = e.target.dataset;
let { cart } = this.data;
cart[goodsid].count += (+operator);
if (cart[goodsid].count < 1) {
   cart[goodsid].count = 1;
   wx.showModal({
      title: '提示',
      content: '您确定要删除吗',
      showCancel: true,
      cancelText: '取消',
      cancelColor: '#000000',
      confirmText: '确定',
      confirmColor: '#3CC51F',
      success: (result) => {
      if (result.confirm) {
         delete cart[goodsid];
         this.loadCarts();
         this.countAll();
      } else {
      }
      }
   });
} else if (cart[goodsid].count > cart[goodsid].goods_number) {
   cart[goodsid].count = cart[goodsid].goods_number;
   wx.showToast({
      title: '没有库存了',
      icon: 'none',
      duration: 1500,
      mask: true
   });
}
this.loadCarts();
this.countAll();
  }
页面初始化时data中的数据
data: {
  cart: {},
  address: {},
  totalPrice: 0,
  categoryLength: 0,
  isAllChecked: true
  },

加载购物车数据的方法：
loadCarts() {
  let { cart } = this.data;
  let isAllChecked = true;
  for (const key in cart) {
   if (cart.hasOwnProperty(key)) {
      const element = cart[key];
      if (!element.isChecked) {
        isAllChecked = false;
        break;
      }
   }
}
  this.setData({
   cart,
   isAllChecked
});

  },

单个商品被选中时触发：
handleItemChecked(e) {
  let { goodsid } = e.target.dataset;
  let { cart } = this.data;
  let { isChecked } = cart[goodsid];
  cart[goodsid].isChecked = !isChecked;
  let checkedLength = 0;
  for (const key in cart) {
   if (cart.hasOwnProperty(key)) {
      if (cart[key].isChecked) {
        checkedLength++;
      }
   }
}
  const isAllChecked = checkedLength == Object.keys(cart).length;
  this.countAll();
  this.setData({
   isAllChecked
})
  },

全选和反选触发的事件：
handleItemAllChecked() {
  let { isAllChecked } = this.data;
  let { cart } = this.data;
  isAllChecked = !isAllChecked;
  for (const key in cart) {
   if (cart.hasOwnProperty(key)) {
      cart[key].isChecked = isAllChecked;
   }
}

  this.setData({
   isAllChecked,
   cart
})
  this.countAll();
  },

点击结算时触发：
handlePay() {
  // 1 判断没有商品
  if (!this.data.categoryLength) {
   wx.showToast({
      title: '您还没有选购商品',
      icon: 'none'
   });
} else if (!this.data.address['userName']) {
   wx.showToast({
      title: '您还没有添加收货地址',
      icon: 'none'
   });
}
  else {
   // 2 去结算页面
   wx.navigateTo({
      url: '../pay/index'
   });
}

  },

纯js代码，可能有一定小程序代码经验的会看得轻松一点。以上便可以实现在对购物车的商品进行加减和全选与反选，以及对商品进行数量合计并计算价格。更多技术资讯可关注：gzitcast

标签：isAllChecked,程序实现,cart,购物车,goodsid,let,key,data
来源： https://www.cnblogs.com/heimaguangzhou/p/11394751.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序实现购物车