uni小程序实现购物车功能,包括全选,反选,单选和计算总价格,快递费和总件数

1html部分

<template>
	<view class="content">
		<view class="shop-cart">
			<view class="cart-item" v-for="(item,index) in shopcartList" :key="index">
				<checkbox-group @change="selectSingle(item)" class="wrapper">
					<checkbox :value="item.price" :checked="item.checked" />
				</checkbox-group>
				<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>
			</view>
		</view>
		<!-- 下方结算 -->
		<view class="buy">
			<view class="buy-wrapper">
				<checkbox-group @tap="selectAll">
					<view class="check">
						<checkbox :checked="allChecked"/><text>全选</text>
					</view>
				</checkbox-group>
				<view class="suan">
					<view>合计:￥<text id="text">{{totalPrice + totalPostage}}</text>元,共{{totalNum}}件(含运费{{totalPostage}}元)</view>
					<view>结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

js部分

<script>
	export default {
		data() {
			return {
				isChecked: false,
				cartList: [],
				allPrice: 0,
				postPrice: 0,
				//全选默认为false
				allChecked:false,
				shopcartList: [{
						id: '0',
						src: '../../static/images/1.jpg',
						name: '中国红酒',
						postage: '11',
						price: '18',
						num: '2',
						checked: false
					},
					{
						id: '1',
						src: '../../static/images/2.jpg',
						name: '品质酱香',
						postage: '1',
						price: '19',
						num: '3',
						checked: false
					},
					{
						id: '2',
						src: '../../static/images/3.jpg',
						name: '酿酒优选',
						postage: '0',
						price: '26',
						num: '1',
						checked: false
					},
					{
						id: '3',
						src: '../../static/images/d1.jpg',
						name: '中国红',
						postage: '0',
						price: '20',
						num: '3',
						checked: false
					}
				]
			}
		},
		computed: {
			// 计算选中商品的邮寄费
			totalPostage() {
				let totalPostage = 0;
				this.shopcartList.map(item => {
					item.checked ? totalPostage += Number(item.postage) : totalPostage += 0
					// console.log(totalPostage);
					// console.log(item);
				})
				console.log(totalPostage);
				return totalPostage
			},
			// 计算选中商品数量
			totalNum() {
				let totalNum = 0;
				this.shopcartList.map(item => {
					item.checked ? totalNum += Number(item.num) : totalNum += 0
				})
				return totalNum
			},
			//计算选中商品的总价
			totalPrice() {
				let totalPrice = 0;
				this.shopcartList.map(item => {
					item.checked ? totalPrice += item.num * item.price : totalPrice += 0
				})
				return totalPrice
			}
		},
		methods: {
			// 单个商品的选择
			selectSingle(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.shopcartList.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			//全选、全不选
			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.shopcartList.map(item => {
						item.checked = true
					})
				} else {
					this.shopcartList.map(item => {
						item.checked = false
					})
				}
			}
		}
	}
</script>

css部分

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.content {
		.shop-cart {
			.cart-item {
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				margin: 25rpx;
				border-radius: 15rpx;

				checkbox-group {

					// 多选框外框样式
					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%;

			.buy-wrapper {
				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;
					}
				}
			}
		}
	}
</style>