小程序添加购物车

Posted fengshaopu

tags:

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

首先获取本地存储必须是数组才能使用findIndex
查找出来如果是-1就是没有任然后把num还有checkobx的初始值加进去
如果有就num++

 gwc(e) {
    var k = wx.getStorageSync("k") || []
    var index = k.findIndex(v => v.goods_id === this.data.list1.goods_id)
    console.log(index);

    if (index == -1) {
      this.data.list1.num = 1,
        this.data.list1.che = true
      k.push(this.data.list1)

    } else {
      k[index].num++
      console.log(k[index].num++);
    }
    wx.setStorageSync('k', k)
      this.onLoad() //监听页面刷新的方法
wx.switchTab({
  url: '/pages/cart/cart',
})
  },
// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [], //获取到的值
    che1: true, //全选
    num: 0, //总价
    ff: {}
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var a = wx.getStorageSync('k') //用wx.getStorageSync获取值
    console.log(a);
    this.setData({
      list: a
    })
  },
  kk(e) {
    console.log(e);
    var index = e.currentTarget.dataset.index
    console.log(index);
    this.data.list[index].che = !this.data.list[index].che //先改变数据里面的che
    var arr = []
    this.data.list.forEach((a) => {
      if (a.che == true) {
        arr.push(a)
      }
    })
    var b = true
    if (arr.length === this.data.list.length) {
      b = true
    } else {
      b = false
    }
    this.setData({
      che1: b
    })

    this.onReady() //调用总价方法

  },

  qx() { //全选
    var arr = []
    this.data.che1 = !this.data.che1 //先改变data数据里面的che
    this.setData({
      che1: this.data.che1
    })

    this.data.list.forEach((a) => {
      console.log(a.che);
      a.che = this.data.che1
    })

    this.setData({
      list: this.data.list
    })
    this.onReady()


  },
  //jian
  jian(e) {

    var index = e.currentTarget.dataset.index
    this.data.list[index].num--

    this.setData({
      list: this.data.list
    })
    this.onReady()
  },
  //jia
  jia(e) {
    var index = e.currentTarget.dataset.index
    this.data.list[index].num++

    this.setData({
      list: this.data.list
    })
    this.onReady()
  },
  //总价


  //收货地址
  qq() {
    wx.chooseAddress({ //用这个方法 获取到收货地址
      success: (result) => {       //正确的时候
        var a = result                  
        a.all = a.cityName + a.countyName + a.detailInfo + a.provinceName + arguments.userName //把里面的值赋值给a
  console.log(address);
        this.setData({    
          address:address    //给data中赋值然后在页面中判断
          
        })

     

<view class="s">
  <button bindtap="qq" wx:if="{{!address.cityName}}">+添加收货地址</button>
  <view >{{address.cityName}}{{address.cityName}} {{address.countyName}}</view>
</view>
        wx.setStorageSync('tt', a) //存到本地存储中 下个页面用


      },
    })
  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var a = 0;
    var arr = []
    this.data.list.forEach((item) => {
      console.log(item.che);
      if (item.che == true) {
        a += item.num * item.goods_price
      }
      this.setData({
        num: a
      })
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

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

uniapp App端小程序 连续扫码添加购物车功能

微信小程序购物车 滑动删除效果

cnsc中服免税店小程序 如何加入购物车

微信小程序使用字体图标

小程序添加购物车

微信小程序使用字体图标