小程序(mpvue) 购物车（全选）
Posted _vicky
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序(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="width: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}}瓶 (辅计量:{{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 },
以上是关于小程序(mpvue) 购物车（全选）的主要内容，如果未能解决你的问题，请参考以下文章