2018-11-05 412 0

微信小程序开发之商城的---购物车

下面是实现的js部分的代码

Page({
  data: {
    windowHeight: 0,
    screenHeight: 0,

    //购物车的初始化数据
    carts: [],               // 购物车列表
    hasList: false,          // 列表是否有数据
    totalPrice: 0,           // 总价,初始为0
    selectAllStatus: true,    // 全选状态,默认全选
    countNumber:0,            //统计选择的件数
  },
  onLoad: function () {
    this.setData({
      windowHeight: app.globalData.windowHeight,
      screenHeight: app.globalData.screenHeight
    })
  },


  //购物车的js逻辑部分
  onShow(){
    this.setData({
      hasList: true,
      carts: [
        { id: 1, title: '日本两日游', image: '../../images/index/gn1.png', num: 1, price: 4800, selected: true, dec: '东京塔、银座、浅草寺等10个旅游景点都', shopName: '小王旅社', shopIoc:'../../images/shopcar/ioc1.png' },
        { id: 2, title: '美国两日游', image: '../../images/index/gn1.png', num: 1, price: 6888, selected: false, dec: '美国、浅草寺等10个旅游景点都很美丽,每年都有', shopName: '小王旅社', shopIoc: '../../images/shopcar/ioc1.png'}
      ]
    }); 
    this.ifselectAll();
    this.getTotalPrice();
    this.countnumberAll();
  },

  //购物车前边的单选按钮事件
  selectList:function(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    const selected = carts[index].selected;
    carts[index].selected = !selected;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
    this.ifselectAll();
    this.countnumberAll();
  },

  //单选框的点击判断全选的按钮的事件
  ifselectAll:function(){
   let carts = this.data.carts;
   let selectAllStatus = this.data.selectAllStatus;
   let countSelect = 0;
   for(let i = 0;i < carts.length; i++){
     if (carts[i].selected){
       countSelect++;
     }
   }
    if (countSelect == carts.length){
      this.setData({
        selectAllStatus: true,
      });
    }else{
      this.setData({
        selectAllStatus: false,
      });
    }
  },

  //判断购物车一共选择的件数是多少个
  countnumberAll:function(){
    let carts = this.data.carts;
    let countNumber = this.data.countNumber;
    let countNum = 0;
    for(let i = 0;i < carts.length; i++){
      if (carts[i].selected){
        countNum++;
      }
    }
    this.setData({
      countNumber: countNum,
    });
  },

  //购物车的全选的操作
  selectAll:function(){
    let selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    let carts = this.data.carts;
    for (let i = 0; i < carts.length; i++) {
      carts[i].selected = selectAllStatus;
    }
    this.setData({
      selectAllStatus: selectAllStatus,
      carts: carts,
    });
    this.getTotalPrice();
    this.ifselectAll();
    this.countnumberAll();
  },

  //购物车的减号操作
    minusCount:function(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    if (num <= 1) {
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
    this.ifselectAll();
    this.countnumberAll();
  },

  //购物车的加号操作
  addCount:function(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    let ifCheck = carts[index].selected;
  
    if(ifCheck){                  //如果勾选的状态下才可以添加数量
      num = num + 1;
      carts[index].num = num;
      this.setData({
        carts: carts
      });
      this.getTotalPrice();
      this.ifselectAll();
      this.countnumberAll();
    }else{                        //反则弹框警告    
      wx.showToast({
        title: '请勾选商品后才可以操作呦~',
        icon: 'none',
      })
    }
  }

})

 
有需要的小伙伴可以拿去 哈哈哈~~~

本文标签: 技术教程

版权声明: 版权声明:若无特殊注明,本文皆为《 郑鹏鑫博客 》原创,转载请保留文章出处。

文章链接: 暂无链接

 发表评论
 评论列表 (已有0条评论)