效果图

1、html

	<view class="content"><checkbox-group  @change="checkboxChange" class="wrapper"><view class="cart-item" v-for="(item,index) in shopcartList" :key="index"><label class="label"><checkbox :value="item.price" :checked="item.checked"/><view class="shopcart-item"><image :src="item.src" mode="aspectFill"></image><view class="cart-info"><view class="name">{{item.name}}</view><view class="norms"><view>规格:暂无;</view><view>邮递费:￥{{item.postage}};</view><view>价格:￥{{item.price}}</view></view><view class="num">X {{item.num}}</view></view></view></label></view></checkbox-group><!-- 下方结算 --><view class="buy"><label><view class="check" @tap="selectAll"><checkbox /><text>全选</text></view><view class="suan"><view>合计:￥<text id="text">{{allPrice}}</text>元(含运费{{postPrice}}元)</view><view>结算</view></view></label></view></view>

2、js部分
数据是暂时用得死数据

		return {//复选框默认的是falseisChecked:false,cartList:[],//总价格allPrice:0,//邮费postPrice:0,shopcartList:[{id:'0',src:'../../static/images/1.jpg',name:'红酒',postage:'11',price:'18',num:'2'},{id:'1',src:'../../static/images/2.jpg',name:'黄酒',postage:'1',price:'19',num:'3'},{id:'2',src:'../../static/images/3.jpg',name:'啤酒',postage:'0',price:'26',num:'1'},{id:'3',src:'../../static/images/d1.jpg',name:'位置酒',postage:'0',price:'20',num:'3'},{id:'4',src:'../../static/images/d2.jpg',name:'危险酒',postage:'0',price:'33',num:'1'},{id:'5',src:'../../static/images/d3.jpg',name:'喝酒',postage:'0',price:'16',num:'1'}]}

点击全选、取消全选的方法

			//全选、全不选selectAll(){//判断是选中还是未选中this.isChecked = !this.isCheckedfor(let i = 0; i < this.shopcartList.length; i++){//checked在数据中未定义this.shopcartList[i].checked = this.isChecked}// 价格计算,包括邮费let total = 0let postagePrice = 0for(let j = 0; j < this.shopcartList.length; j++){if(this.shopcartList[j].checked == true){//计算价格，不包括邮费total += Number(this.shopcartList[j].num) * Number(this.shopcartList[j].price)//计算邮费postagePrice += Number(this.shopcartList[j].postage)}}this.postPrice = postagePrice//console.log(this.postPrice);this.allPrice = total + this.postPriceconsole.log(this.allPrice);}

css

.content {.wrapper{margin-bottom: 150rpx;.cart-item{.label {display: flex;align-items: center;background-color: #FFFFFF;margin: 25rpx;border-radius: 15rpx;// 多选框外框样式checkbox .wx-checkbox-input {width: 35rpx;height: 35rpx;border-radius: 50%;}// 选中后外框样式checkbox .wx-checkbox-input.wx-checkbox-input-checked {border-color: #A40000;}// 内部样式checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {width: 60%;height: 60%;background: #A40000;border-radius: 100%;content: '';transform: translate(-50%, -50%) scale(1);-webkit-transform: translate(-50%, -50%) scale(1);}checkbox {margin-left: 20rpx;margin-bottom: 30rpx;}.shopcart-item {width: 100%;display: flex;padding: 15rpx 15rpx 25rpx 15rpx;image {width: 150rpx;height: 150rpx;border-radius: 10rpx;}.cart-info {margin-left: 20rpx;margin-top: 10rpx;.norms {margin: 10rpx 0;display: flex;align-items: center;view {margin-right: 20rpx;}view:first-child,view:nth-child(2) {color: #484848;font-size: 25rpx;}view:last-child {font-size: 30rpx;color: #A40000;font-weight: 600;}}.num {font-size: 25rpx;color: #808080;}}}}}}.buy {padding: 20rpx 0;position: fixed;bottom: 0;background-color: #FFFFFF;border-top: 1rpx solid #C8C7CC;z-index: 99;width: 100%;label {display: flex;align-items: center;justify-content: space-between;.check {display: flex;align-items: center;font-size: 23rpx;color: #333333;padding-left: 25rpx;// 多选框外框样式checkbox .wx-checkbox-input {width: 35rpx;height: 35rpx;border-radius: 50%;}// 选中后外框样式checkbox .wx-checkbox-input.wx-checkbox-input-checked {border-color: #A40000;}// 内部样式checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {width: 60%;height: 60%;background: #A40000;border-radius: 100%;content: '';transform: translate(-50%, -50%) scale(1);-webkit-transform: translate(-50%, -50%) scale(1);}}.suan {display: flex;align-items: center;padding-right: 25rpx;view:first-child {display: flex;align-items: center;margin-right: 20rpx;font-size: 25rpx;#text {font-size: 28rpx !important;color: #A40000;}}view:last-child {width: 120rpx;height: 65rpx;background-color: #A40000;text-align: center;line-height: 65rpx;color: #FFFFFF;border-radius: 50rpx;}}}}}