微信小程序（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.模板

<template>
  <div data-page="scart" class="page cart-page cart_page">
    <div class="navbar cart_navbar">
        <div class="navbar-inner">
            <div class="right">
                <a v-if="!isEditStatu" class="btn-editStatue" @click="bindToEdit"> 编辑</a>
                <a v-else class="btn-editStatue" @click="bindTosave">完成</a>
            </div>
        </div>        
    </div>
    <div class="page-content pull-to-refresh-content cart-main-container" data-ptr-distance="2" style="padding-top:36px;">
        <div class="list-block media-list m-t-0 cartNew-list">
          <div class="page-content-inner" style="min-height: 687px;">
            <ul class="cartItemContainer">
              <!-- <li class="productItemContent" data-type="group" data-cid="" ></li> -->
              <li v-for="(pItem,pIndex) in products" :key="pIndex" class="productItemContent" data-type="product" :data-cid="pItem.id" >
                <div class="m-l-35 p-t-5" style="display:flex;align-items:center;">
                  <span class="promo-type col-1 p-0" v-for="(mItem,mIndex) in pItem.promotions" :key="mIndex">{{mItem.pName}}</span>
                  <span v-if="pItem.hasPromotions" class="discountDescContainer" :data-id="pItem.id" style="margin-left:4px;" @click="bindDiscountinfo">优惠说明 <i class="icon arrow-down"></i></span>
                </div>
                <div class="label-checkbox item-content position-r">
                  <label>
                    <div class="item-media">
                      <i class="icon icon-form-checkbox" data-type="product" :data-id="pItem.id" :class="{checked:pItem.checked}" v-if="!isEditStatu" @click="check"></i>
                      <i class="icon icon-form-checkbox" data-type="product" :data-id="pItem.id" :class="{checked:pItem.echecked}" v-else @click="check"></i>
                    </div>
                  </label>                  
                  <div class="item-media" v-if="showImage">
                    <a :href="'/pages/productdetail/main?id='+pItem.id" hover-class="none">
                      <img :src="pItem.img"  onerror="this.src='./img/nopic.jpg'" style="62px;height:62px;">
                    </a>
                  </div>
                  <div class="item-inner  no-border">
                    <div class="item-title-row">
                      <a :href="'/pages/productdetail/main?id='+pItem.id" hover-class="none">
                        <div class="item-text">{{pItem.name}}</div>
                      </a>
                    </div>
                    <div class="item-subtitle">编码:{{pItem.code}}<span class="fr" v-if="pItem.showTotal">{{pItem.total.quantity}}瓶&nbsp;(辅计量:{{pItem.total.auxUnitQuantity}})</span></div>
                  </div>
                </div>
                <ul class="proCheckPoint">
                  <li class="productconv" :data-sid="skItem.id" :data-id="skItem.aid" v-for="(skItem,skIndex) in pItem.skus" :key="skIndex">
                    <div class="label-checkbox item-content position-r">
                      <label>
                        <div class="item-media">
                          <i class="icon icon-form-checkbox" :data-id="skItem.id" data-type="sku" :data-pid="pItem.id" :class="{checked:skItem.checked}" v-if="!isEditStatu" @click="check"></i>
                          <i class="icon icon-form-checkbox" :data-id="skItem.id" data-type="sku" :data-pid="pItem.id" :class="{checked:skItem.echecked}" v-else @click="proItemChange"></i>
                        </div>
                      </label>
                      <div class="item-inner  no-border">
                        <div class="item-title-row">
                          <div class="item-title font-50 editControl propertyContainer " :class="{'edit-status':isEditStatu}">
                            <div v-for="(sItem,sIndex) in skItem.specItems" :key="sIndex">
                              <span v-if="sItem.oSpec">{{sItem.oSpec.cName}}:</span>
                              <b>{{sItem.cSpecItemName}}</b>
                            </div>
                            <span class="sp-price">单价:</span>
                            <i class="fl">￥</i><span class="oneProductPrice">{{skItem.salePrice}}</span>/瓶<br>
                            <div class="sp-count" :class="{hide:!isEditStatu}">
                              <span>数量:</span>
                              <b>{{skItem.quantity}}{{pItem.unit.cName}}</b>
                            </div>
                          </div>
                        </div>
                        <div class="item-price" :class="{addBg:skItem.showEditNum}" v-if="!isEditStatu">
                          <div class="numberManage js-numberManage clearfix">
                            <span class="count fr">瓶</span>
                            <i class="icon icon-cart-ok fr" :class="{hide:!skItem.showEditNum}" @click="blurEditItemNum(skItem.id)"></i>
                            <div class="fr " :class="{'border-count':skItem.showEditNum}">
                              <i class="icon icon-cart-less" :class="{hide:!skItem.showEditNum}" :data-id="skItem.id" data-type="del" @click="bindEditNum"></i>
                              <input type="number" :value="skItem.quantity" class="editControl cart-sku-num-input" data-unitprecision="2" data-unitroundtype="0"  @focus="focusEditItemNum(skItem.id)">
                              <i class="icon icon-cart-add" :class="{hide:!skItem.showEditNum}" :data-id="skItem.id" data-type="add"  @click="bindEditNum"></i>
                            </div>  
                          </div>
                          <span class="price">￥{{(skItem.quantity*skItem.salePrice)}}</span>
                        </div>
                      </div>  
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
    </div>
    <div class="bottom-bar row keyboard-hide cart_bottom_bar">
      <label class="label-checkbox item-content col-20 ck-allSelect position-r">
          <div class="item-media">              
              <i class="icon icon-form-checkbox" :class="{checked:checkedAll}" v-if="!isEditStatu" @click="checkAll"></i>
              <i class="icon icon-form-checkbox" :class="{checked:echeckedAll}" v-else @click="checkAll"></i>
          </div>
          <div class="item-inner">
              <div class="item-title">全选</div>
          </div> 
      </label>
      <span v-if="isEditStatu"  class="flex_box">
        <span class="col-45 editControl cart-btn-collection" style="display:block">
            <a class="button button-fill ">移至收藏</a>
        </span>
        <a class="button button-fill col-30 editControl cart-btn-delete" style="display:block" @click="delProduct">删除</a>
      </span>
      <span v-else class="flex_box">
        <span class="col-45 sum-price editControl cart-balance-container">合计:
            <span class="sum-price-c">￥{{totalPrice}}</span><br>
            <span class="count count-footer-num-type">{{productType}}种{{productCount}}件 
                <span class="count count-footer-aux">(辅计量:0)</span>
            </span>
        </span>
        <a href="/pages/orderSubmit/main" class="button button-fill col-30 editControl cart-btn-submit">立即结算</a>
      </span>
    </div>
  </div>
</template>

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
    },