uni-app实现购物车多选计算功能_uniapp购物车结算-CSDN博客

本文链接：https://blog.csdn.net/m0_46833693/article/details/125953002

本文详细描述了如何使用 Vue.js 实现购物车卡片功能，包括多选商品、价格累加、全选状态管理和取消选择的逻辑。通过实例展示了如何使用 v-for 循环和 checkbox 组件来构建动态选择组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见类似购物车卡片的功能要求：

1：点击多选时，显示总价格，取消多选时，价格为0

2：单项选择时，实现价格的累加，当全部选中时，显示全选状态

3：全选状态时，取消其中一项，全选状态失效

直接上代码

v-for实现购物车

	<view class="bill-card">
				<view class="bill-con" v-for="(item,index) in bill" :key="index" @click="select ? '' : billinfo(item)">
					<view class="b-time">
						<view class="time">5月20日 11:50</view>
						<view class="status">{{item.status}}</view>
					</view>
					<view class="b-info">
						<image src="../../static/recovery_icon.png" mode=""></image>
						<view class="data-one">
							<view class="o-one">拉运费</view>
							<view class="o-two">新A-0000</view>
						</view>
						<view class="data-two">
							<view class="t-one">{{item.cost}}</view>
							<view class="t-two">
								<view class="one">采收面积</view>
								<view class="two">xxx亩</view>
							</view>
						</view>
					</view>
					<view class="b-place">采收地点信息</view>
					<view class="test" v-if="select">
						<checkbox-group @change="checkitem(item)">
							<label>
								<checkbox :value="item.cost" :checked="item.checked" color="#FFCC33" style="transform:scale(0.7)" />
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
			<!-- 账单记录 -->
			<view class="record" @click="tobill" v-if="!select">
				<image src="../../static/record_icon .png" mode=""></image>
				<view class="">记一笔</view>
			</view>
			<view class="total" v-if="select">
				<checkbox-group name="" @change="selectall" class="check">
					<label>
						<checkbox :value="1111" :checked="check" style="transform:scale(0.7)" color="#FFCC33" /><text>全选</text>
					</label>
				</checkbox-group>
				<view class="money">
					<view class="m-count">合计金额</view>
					<view class="m-title">￥<text class="amount">{{totalPrice}}</text></view>
				</view>
			</view>

模拟的购物车数据

后端返回的数据中，将所有项的状态默认为未选中

checked:false

data() {
			return {
				time: '',
				bill: [{
						time: '5月13日',
						cost: 520,
						status: '采收中',
						checked: false
					},
					{
						time: '6月24日',
						cost: 1111,
						status: '拉运中',
						checked: false
					},
					{
						time: '7月6日',
						cost: 5555,
						status: '采收中',
						checked: false
					},
					{
						time: '7月6日',
						cost: 5555,
						status: '采收中',
						checked: false
					},
					{
						time: '7月6日',
						cost: 5555,
						status: '采收中',
						checked: false
					}
				],
				allChecked: false, //是否全选
				check:false //全选状态的控制
			}

实现多选，逐个选择，反选

computed: {
			totalPrice() {
				let totalPrice = 0
				this.bill.map(item => {
					item.checked ? totalPrice += item.cost : totalPrice += 0
				})
				return totalPrice
			}
		},
methods: {
			// 多选计算价格
			checkitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
					this.check = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.bill.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
						this.check = true
					} else {
						this.allChecked = false
						this.check = false
					}
				}
			},
			// 全选
			selectall(e) {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.bill.map(item => {
						item.checked = true
					})
				} else {
					this.bill.map(item => {
						item.checked = false
					})
				}
			},
		},
	}