微信小程序（mpvue框架） 购物车

效果图：

 

说明：全选/全不选，

1.数据：

products：[{checked:true,code:"4",echecked:false,hasPromotions:true,id:43281,img:"/photo/products/1369/20160220/c92ad25e-24c5-439f-89fc-75d0263cbaff.png!PS",name:"洋河蓝色经典天之蓝 52度 480ml",promotions:[{pName:"折"},{pName:"一口价"}],showTotal:true,
　　　　　　　　skus:[{aid:9751423,checked:true,echecked:false,hasSpecItems:true,id:57614,quantity:10,renderSalePrice:308,renderTotal:3080,salePrice:308,showEditNum:false,specItems:[{cSpecItemName:"42度",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:929,id:5364,isFilter:true,oSpec:{bHaveImg:false,cMemo:"白酒类",cName:"度数",iCorpId:1369,iDeleted:0,iOrder:0,id:929}},{cSpecItemName:"480ml",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:930,id:5365,isFilter:true,oSpec:{bHaveImg:false,cName:"净含量",iCorpId:1369,iDeleted:0,iOrder:0,id:930}}]},
　　　　　　　　　　　　　{aid:9751419,checked:true,echecked:false,hasSpecItems:true,id:57615,quantity:10,renderSalePrice:308,renderTotal:3080,salePrice:308,showEditNum:false,specItems:[{cSpecItemName:"52度",iCorpId:1369,iDeleted:0,iOrder:3,iSpecId:929,id:5352,isFilter:true,oSpec:{bHaveImg:false,cMemo:"白酒类",cName:"度数",iCorpId:1369,iDeleted:0,iOrder:0,id:929}},{cSpecItemName:"480ml",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:930,id:5365,isFilter:true,oSpec:{bHaveImg:false,cName:"净含量",iCorpId:1369,iDeleted:0,iOrder:0,id:930}}],}],
　　　　　　　　status:1,total:{auxUnitQuantity:0,quantity:20},unit:{cCode:"1",cName:"瓶",id:1536,unitPrecision:2,unitRoundType:0}},
　　　　　　{checked:true,code:"6",echecked:false,hasPromotions:true,id:43285,img:"/photo/products/1369/20160220/c92ad25e-24c5-439f-89fc-75d0263cbaff.png!PS",name:"洋河蓝色经典 高之蓝 42度 500ml",promotions:[{pName:"赠"}],showTotal:false,
　　　　　　　　skus:[{aid:9751410,checked:true,echecked:false,hasSpecItems:true,id:57621,quantity:10,renderSalePrice:368,renderTotal:3680,salePrice:368,showEditNum:false,specItems:[{cSpecItemName:"42度",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:929,id:5364,isFilter:true,oSpec:{bHaveImg:false,cMemo:"白酒类",cName:"度数",iCorpId:1369,iDeleted:0,iOrder:0,id:929}},{cSpecItemName:"500ml",iCorpId:1369,iDeleted:0,iOrder:1,iSpecId:930,id:5360,isFilter:true,oSpec:{bHaveImg:false,cName:"净含量",iCorpId:1369,iDeleted:0,iOrder:0,id:930}}]}],
　　　　　　　　status:1,unit:{cCode:"1",cName:"瓶",id:1536,unitPrecision:2,unitRoundType:0}}]

2.模板

JS:

全选（全不选）：

checkAll: function (e) {     
      var key=this.isEditStatu?'echecked':'checked';
      var checkAll = this.isEditStatu?this.echeckedAll=!this.echeckedAll:this.checkedAll=!this.checkedAll;
      this.products.forEach(function(item) {
          item[key] = checkAll,
          item.skus.forEach(function(itemm) {
            itemm[key] = checkAll
          })
      })
      this.getTotal()
    },

单选：

proItemChange:function(e){
      var self=this;
      var id=e.mp.currentTarget.dataset.id;
      var pid=e.mp.currentTarget.dataset.pid;
      var type=e.mp.currentTarget.dataset.type;
      var list = this.products;
      var checklist=[]; 
      var key=this.isEditStatu?'echecked':'checked';
      var checked=this.isEditStatu?this.echecked=!this.echecked:this.checked=!this.checked;
      if(type==='product'){
        for (var i = 0; i < list.length; i++) {
          if(id===list[i].id){     
            list[i][key] = !list[i][key];
            for (var j = 0; j < list[i].skus.length; ++j) {
              list[i].skus[j][key]=list[i][key]
            }
            this.isCheckedAll()
            break;
          }
        }
      }else if(type==='sku'){
        for (var i = 0; i < list.length; i++){
          if (list[i].id === pid) {
            var pc = !1;
            list[i].skus.forEach(function(item) {
              item.id === id && (item[key] = !item[key]), item[key] && (pc = !0)
            }), list[i][key] = pc;
            this.isCheckedAll()
            break
          }
        }
      }
      this.getTotal()
    },

判断是否全选（通过判断购物车全部商品的总价格与选中商品的价格是否相等）：

isCheckedAll:function(){
      var slef=this, Allprice = 0,i=0,totalMoney=0,list = this.products;
      var key=this.isEditStatu?'echecked':'checked';
      var checked=this.isEditStatu?this.echecked=!this.echecked:this.checked=!this.checked;
      for (var i = 0; i < list.length; i++) {
        if(list[i][key]){          
          list[i].skus.forEach(function(item) {
            if(item[key]){
              Allprice = Allprice + item.quantity*item.salePrice;
            }
          })
        }
        list[i].skus.forEach(function(item) {
            totalMoney += item.quantity*item.salePrice            
        })
      }
      if(totalMoney==Allprice){
        this.isEditStatu?this.echeckedAll=true:this.checkedAll=true
      }else{
        this.isEditStatu?this.echeckedAll=false:this.checkedAll=false
      }
      this.getTotal()
    },

选中商品总价：

getTotal:function(e){
      var Allprice=0,type=0,count=0;
      this.products.forEach(item => {
        if(item.checked){
          type+=1
          item.skus.forEach(iItem=>{
            if(iItem.checked){
              Allprice = Allprice + iItem.quantity*iItem.salePrice;
              count+=iItem.quantity
            }
          })
        }        
      });
      this.totalPrice=Allprice
      this.productCount=count
      this.productType=type
    },

 

转载于:https://www.cnblogs.com/vicky123/p/9379359.html