bc_wx_applet/components/cartPopup.vue

<template>
	<u-popup :show="show" mode="bottom" @close="close" @open="open" :round="10">
		<view class="my-popup padding">
			<view class="container-sel">
				<radio :checked="allSelected" color="#E51C23" @click="selectAll">全选
				</radio>
				<view class="dflex">
					<u-tag text="清空购物车" type="info" color="#000" borderColor="#fff" size="mini" icon="trash" plain
						@click="clearCart"></u-tag>
				</view>
			</view>
			<radio class="w-full padding-bottom-lg" color="#E51C23" v-for="(item, index) in localCarList" :key="index"
				:name="item.name" :checked="item.selected" @click="radioChange(item)">
				<my-goods :item="item" ref="my-goods">
					<view class="num-step">
						<u-number-box v-model="item.goods_num" :min="1" @change="changeValue($event, item.id)" />
					</view>
				</my-goods>
			</radio>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "cartPopup",
		props: {
			carList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				show: false,
				allSelected: false,
				localCarList: []
			};
		},
		methods: {
			open() {},
			setShow(v) {
				this.show = v;
				// 检查 localCarList 是否存在且至少有一个元素
				if (this.localCarList && this.localCarList.length > 0) {
					// 检查 localCarList 的第一个元素是否有 selected 属性
					if (!this.localCarList[0].hasOwnProperty('selected')) {
						// 如果没有 selected 属性，使用 map 方法添加 selected 属性
						this.localCarList = this.carList.map(item => ({
							...item,
							selected: true
						}));
					}
				} else {
					// 如果 localCarList 不存在或没有元素，直接使用 map 方法添加 selected 属性
					this.localCarList = this.carList.map(item => ({
						...item,
						selected: true
					}));
				}

				if (this.localCarList.length > 0) {
					this.allSelected = this.localCarList.every(car => car.selected)
				}

				console.log('this.localCarList', this.localCarList)
			},
			close() {
				this.show = false;
			},
			changeValue(value, index) {
				this.$emit('numChanged', value.value, index)
				console.log('更新后的数量=======:', value, '索引=========:', index)
			},
			selectAll() {
				this.allSelected = !this.allSelected
				this.localCarList.forEach(item => {
					item.selected = this.allSelected
				})
				this.$emit('selected-changed', this.localCarList)
				console.log('this.localCarList111111111111111', this.localCarList)
			},
			clearCart() {
				this.localCarList = []
				this.allSelected = false
				this.$emit('selected-changed', this.localCarList)
			},
			radioChange(e) {
				console.log(e)
				e.selected = !e.selected
				// 检查是否所有车辆都被选中了
				this.allSelected = this.localCarList.every(car => car.selected)
				this.$emit('selected-changed', this.localCarList);
				// 打印结果
				console.log('this.allSelected', this.allSelected);

			}
		}
	}
</script>

<style scoped lang="scss">
	.my-popup {
		width: 100%;
		max-height: 800rpx;
		overflow: auto;
		padding-bottom: 130rpx;

		.num-step {
			width: 200rpx;
			padding-top: 40rpx;
		}

		.container-sel {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;
		}

	}
</style>