代码

<template>
	<view>
		<div class="homeTop">
			<u-navbar leftIconColor="#26292c" titleStyle="color:#26292c" bgColor="#ffffff" :placeholder="true"
				title="购物车" :autoBack="true">
			</u-navbar>
		</div>
		<div class="list">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<div class="Items" v-for="(item,index) in list" :key="index">
					<u-checkbox activeColor="#fc934a" shape="circle" :name="item">
					</u-checkbox>
					<item></item>
				</div>
			</u-checkbox-group>
		</div>
		<u-gap height="120" bgColor="rgba(0,0,0,0)" marginTop="10" marginBottom="10"></u-gap>
		<div class="footer">
			<div class="footerl">
				<u-checkbox-group placement="column" @change="checkAll">
					<div>
						<u-checkbox activeColor="#fc934a" shape="circle" :checked="selectAll" label="全选">
						</u-checkbox>
					</div>
				</u-checkbox-group>
			</div>
			<div class="footerr">
				<div class="payPrice">合计：<div class="n1">¥</div>
					<div class="n2">78.6</div>
				</div>
				<div class="paybut">结算</div>
			</div>
		</div>
		<u-gap height="80" bgColor="rgba(0,0,0,0)" marginTop="10" marginBottom="10"></u-gap>
	</view>
</template>

<script>
	import item from "@/components/cart/Item.vue"
	export default {
		components: {
			item
		},
		data() {
			return {
				show: false,
				list: [1, 2, 3],
				checkboxValue1: [],
				selectAll: false
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {

		},
		onShow() {

		},
		methods: {
			checkboxChange(e) {
				this.selectAll = false
				if (this.list.length == e.length) {
					this.selectAll = true
				}
				this.$forceUpdate()
			},
			checkAll() {
				this.selectAll = !this.selectAll
				this.getselectedCheck()
			},
			getselectedCheck() {
				if (this.selectAll) {
					this.checkboxValue1 = []
					this.list.forEach((type) => {
						this.checkboxValue1.push(type)
					});
				} else {
					this.checkboxValue1 = []
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.homeTop {}

	.searchx {
		margin-top: 20rpx;
		margin-bottom: 24rpx;
	}

	.Items {
		width: 690rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.footer {
		width: 750rpx;
		height: 145rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		position: fixed;
		padding-top: 15rpx;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.footerl {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			margin-left: 30rpx;
			margin-top: 15rpx;
		}

		.footerr {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
		}

		.payPrice {
			font-family: SourceHanSansSCVF-Regular;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			font-weight: 400;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			.n1 {
				font-family: PingFangSC-Medium;
				font-size: 24rpx;
				color: #EF4034;
				text-align: center;
				font-weight: 500;
				margin-right: 5rpx;
			}

			.n2 {
				font-family: PingFangSC-Medium;
				font-size: 36rpx;
				color: #EF4034;
				font-weight: 500;
			}
		}

		.paybut {
			width: 180rpx;
			height: 65rpx;
			background-image: linear-gradient(179deg, #F87464 1%, #EF4034 100%);
			border-radius: 9rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-family: PingFangSC-Medium;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
			margin-right: 30rpx;
			margin-left: 54rpx;
		}
	}
</style>