uview 全选购物车

结果展示

 

主体代码 

<u-checkbox-group placement="column" v-model="checkboxVal" inactiveColor="#c0c4cc" shape="circle"
				v-if="dataList.length" @change="checkboxChange">
				<view class="container" v-for="(item,index) in dataList" :key="index">
					<view class="space-between">
						<view class="itemsRight space-between-left" style="padding-bottom: 20rpx;">
							<view>
								<u-checkbox :customStyle="{marginTop: '5rpx'}" size="35rpx" :name="item.waybillNo"
									:key="index"></u-checkbox>
							</view>
							<view style="color:#000000;font-weight: bold;">{{item.waybillNo}}</view>
						</view>
						<view class="space-between">
							<view class="mDate" @tap="delItem(item)">
								<i class="iconfont icon-shanchu" style="color:#999"></i>
							</view>
						</view>
					</view>
					<view class="items">
						<view class="itemsLeft column">
							<view class="itemsTitle">{{item.endAddress}}</view>
							<view class="itemsSubTitle space-between-left">
								{{item.deliveryTime && item.deliveryTime.substring(0,16)}} 到
								{{item.arrivalTime && item.arrivalTime.substring(0,16)}}
							</view>
							<view class="itemsSubTitle space-between-left">
								<text>{{item.deCompany}}</text>
							</view>
							<view class="subtitle">
								<text class="subtitleBg">{{item.numberOfPCS}}件</text>
								<text class="subtitleBg">{{item.numberOfPlates}}板</text>
								<text class="subtitleBg">{{item.weight}}KG</text>
								<text class="subtitleBg">{{item.volume}}㎡</text>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>

 底部全选计算

<view class="footers" v-if="dataList.length">
			<view class="space-between footersTop">
				<view class="column">
					<view style="color:#426EF2;font-size: 32rpx;font-weight: bold;">{{totalType(1)}}</view>
					<view style="color: #8e95a2;">总重量(KG)</view>
				</view>
				<view class="column">
					<view style="color:#426EF2;font-size: 32rpx;font-weight: bold;">{{totalType(2)}}</view>
					<view style="color: #8e95a2;">总件数</view>
				</view>
				<view class="column">
					<view style="color:#426EF2;font-size: 32rpx;font-weight: bold;">{{totalType(3)}}</view>
					<view style="color: #8e95a2;">总板数</view>
				</view>
				<view class="column">
					<view style="color:#426EF2;font-size: 32rpx;font-weight: bold;">{{totalType(4)}}</view>
					<view style="color: #8e95a2;">总体积</view>
				</view>
			</view>
			<view class="space-between-left footersCon">
				<view style="flex: 1;justify-content: center;align-items: center;padding: 15rpx 0rpx 0rpx 20rpx;">
					<u-checkbox-group @change="allChoose">
						<u-checkbox shape="circle" :customStyle="{marginBottom: '8px'}" size="40rpx"
							:checked="selectAll" label="全选"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view style="flex: 0.5;justify-content: flex-start;display: flex;text-align: left;color:#426EF2">
					({{cartTotal}}个)
				</view>
				<view style="flex: 2;">
					<u-button type="primary"
						:color="cartTotal==0?'linear-gradient(225deg, #e3e3e3 0%, #e3e3e3 100%)':'linear-gradient(225deg, #67B6FF 0%, #426EF2 100%)'"
						:customStyle="{'height':'80rpx','color':'#fff','border-radius': '15rpx','font-size':'28rpx','width':'94%'}"
						:disabled="cartTotal==0?true:false">
						{{cartTotal==0?'勾选需求单':'去调度'}}
					</u-button>
				</view>
			</view>
		</view>

<script>
	export default {
		data() {
			return {
				dataList:[
                {
			"id": 26,
			"guidNo": "fb294f4b606648fbaa2b921b5b55a65d",
			"waybillNo": "SZ1045308151371",
			"originalPlace": "广东省-深圳市-龙岗区",
			"startAddress": "广东省深圳市龙岗区守珍街国容公寓对面",
			"reCoordinate": "22.698528437063143,114.13680939323402",
			"reContact": "论文还",
			"reMobile": "15899852236",
			"reCompany": "星旗.红馆保健会所",
			"deliveryTime": "2023-10-12 17:54:00",
			"arrivalTime": "2023-10-12 17:54:00",
			"requirenment": "",
			"cancelStatus": false,
			"cancelReason": null,
			"transportType": "Overseas",
			"destination": "广东省-深圳市-龙岗区",
			"endAddress": "广东省深圳市龙岗区平湖镇山厦村新厦大道120号",
			"deCoordinate": "22.708706,114.116699",
			"deContact": "李四",
			"deMobile": "13434752294",
			"deCompany": "领益智造",
			"groupNo": "daae1ddfbdea42b3869551699baa7419",
			"groupName": "开发测试群",
			"shareRemark": "",
			"transferRemark": null,
			"numberOfPCS": 100,
			"numberOfPlates": 20,
			"weight": 2550,
			"volume": 30
		},
		{
			"id": 14,
			"guidNo": "31c15212f6184305949be890615dafad",
			"waybillNo": "SZ8530201016499",
			"originalPlace": "广东省-东莞市-长安镇",
			"startAddress": "美食一条街222",
			"reCoordinate": "",
			"reContact": "李四",
			"reMobile": "13522228888",
			"reCompany": "测试公司222",
			"deliveryTime": "2023-09-01 12:30:00",
			"arrivalTime": "2023-09-03 10:00:00",
			"requirenment": "快点来",
			"cancelStatus": false,
			"cancelReason": null,
			"transportType": "Domestic",
			"destination": "广东省-深圳市-龙岗区",
			"endAddress": "新厦大道",
			"deCoordinate": "",
			"deContact": "张三",
			"deMobile": "13122229999",
			"deCompany": "测试公司",
			"groupNo": "daae1ddfbdea42b3869551699baa7419",
			"groupName": "开发测试群",
			"shareRemark": null,
			"transferRemark": null,
			"numberOfPCS": 20,
			"numberOfPlates": 2,
			"weight": 0,
			"volume": 0
		}
                     ],
				checkboxVal: [],
				selectAll: false
			}
		},
		computed: {
			totalType() { //1:重量,2:件数,3:板数,4:体积
				return function(type) {
					let sumTotal = 0;
					const list = this.dataList;
					if (list.length) {
						list.forEach((ite) => {
							let some = this.checkboxVal.some((items) => items == ite.waybillNo)
							if(some){
								if (type == 1) {
									sumTotal += ite.weight
								}
								if (type == 2) {
									sumTotal += ite.numberOfPCS
								}
								if (type == 3) {
									sumTotal += ite.numberOfPlates
								}
								if (type == 4) {
									sumTotal += ite.volume
								}
							}
						})
					}
					return sumTotal
				}
			},
			cartTotal() {
				let sum = 0;
				let list = this.dataList;
				if (list.length) {
					list.forEach((ite) => {
						let some = this.checkboxVal.some((items) => items == ite.waybillNo)
						if (some) {
							sum++
						}
					})
				}
				return sum
			}
		},
		created() {},
		methods: {
			//选择赋值
			getselectedCheck() {
				if (this.selectAll) {
					this.checkboxVal = []
					this.dataList.forEach((item) => {
						this.checkboxVal.push(item.waybillNo)
					});
				} else {
					this.checkboxVal = []
				}
			},
			//全选
			allChoose() {
				this.selectAll = !this.selectAll
				this.getselectedCheck()
			},
			//单个选择
			checkboxChange(e) {
				this.selectAll = false
				if (this.dataList.length == e.length) {
					this.selectAll = true
				}
				this.$forceUpdate()
			},
			//删除运单
			delItem(ite) {
				let list = this.dataList;
				if (list.length) {
					list.forEach(function(item, index) {
						if (ite.waybillNo == item.waybillNo) {
							list.splice(index, 1)
						}
					})
				}
			},
		
		
		}
	}
</script>