小程序实现购物车

Posted heimaguangzhou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序实现购物车相关的知识,希望对你有一定的参考价值。

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

以上是关于小程序实现购物车的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序转载:微信小程序之购物车功能

微信小程序实现购物车功能,包含完整小程序代码和运行效果截图

微信小程序实现购物车功能,包含完整小程序代码和运行效果截图

Python实现购物车小程序

小程序实现购物车

小程序实现购物车