bc_wx_applet/components/specPopup.vue

<template>
	<uni-popup ref="popup" background-color="#fff" mode="bottom" @change="change">
		<view class="s-box padding-sm">
			<view class="s-img">
				<image mode="aspectFit" class="wh-full"
					:src="caMsg.img[0].url ? caMsg.img[0].url : cardMsg.imgList[0].url"></image>
			</view>
			<view class="g-info">
				<view class="s-name">{{caMsg.skuName ? caMsg.skuName : cardMsg.spuName}}</view>
				<view class="s-price">{{caMsg.retailPrice ? caMsg.retailPrice : cardMsg.minPrice}}</view>
			</view>
		</view>
		<scroll-view style="height: 270px;" scroll-y>
			<view v-for="(item, index)  in specs" :key="index">
				<uni-section :title="item.name">
					<view class="spec-box padding-lr-sm">
						<view class="spec-item padding-lr-sm" v-for="(spe, cindex) in item.values"
							:class="{'on-spec': spe.selected}" :key="cindex" @click="selectSpec1(item, spe)">
							{{ spe.label }}
						</view>
					</view>
				</uni-section>
			</view>
		</scroll-view>
		<view class="purchase-num padding-lr-sm">
			<uni-section title="购买数量"></uni-section>
			<uni-number-box v-model="vModelValue" @change="changeValue(value)" />
		</view>
		<view class="btn-box">
			<view class="btn reset" @click="toShop">加入购物车</view>
			<view class="btn confirm" @click="toBuy">立即购买</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "specPopup",
		props: {
			cardMsg: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				vModelValue: 1,
				shopMsg: {
					id: '',
					spec: '',
					num: ''
				},
				specs: [], // 总查询数据
				speL: [],
				intSkuId: [], // 选择唯一的id
				caMsg: [], // 根据id查出来的数据
			}
		},
		mounted() {
			console.log('specPopup mounted:', this.cardMsg)
		},
		methods: {
			changeValue(e) {
				console.log('vModelValue', e)
			},
			change(e) {
				if (!e.show) { // 当弹出层关闭时
					// 重置规格选择
					if (this.specs.length > 0) {
						this.specs.forEach(e => {
							e.values.forEach(s => {
								s.selected = false
							})
						})
					}
					this.speL = []
					// 重置购买数量
					this.vModelValue = 1;
				}
			},
			async selectSpec1(item, spec) {
				// 首先，取消选择所有其他选项
				item.values.forEach(value => {
					value.selected = false;
				})
				// 然后，选择当前点击的选项
				spec.selected = true;
				if (spec.selected) {
					this.speL.push(spec)
				}
				console.log('speL', this.speL)

				const seleList = this.speL.filter(item => item.selected == true)
				// 计算选中规格项的skuIds数组的交集
				if (seleList.length > 0) {
					let intersection = seleList[0].skuIds;

					// 遍历数组中的每个对象
					for (let i = 1; i < seleList.length; i++) {
						// 使用filter和includes方法找到交集
						intersection = intersection.filter(skuId => {
							return seleList[i].skuIds.includes(skuId);
						});
					}

					// 如果交集不为空，取第一个元素作为唯一字符串
					const uniqueString = intersection.length > 0 ? intersection[0] : '';

					// 更新组件中的intSkuId
					this.intSkuId = uniqueString;
				} else {
					// 如果没有选中的规格项，返回空字符串
					this.intSkuId = '';
				}
				console.log('intSkuId', this.intSkuId)
				// 确定每一个都有选择后发起请求
				const isSelected = this.specs.every(spec => spec.values.some(value => value.selected))
				if (isSelected) {
					// 如果所有规格都至少有一个选项被选中
					console.log('所有规格都已选择');
					const res = await this.$request('get', `/item/sku/${this.intSkuId}`)
					console.log('res================', res.data)
					this.caMsg = res.data
				} else {
					// 否则，打印一个错误信息
					console.log('还有规格未选择');
				}
			},
			async open() {
				this.$refs.popup.open('bottom')
				console.log('cardMsg', this.cardMsg)
				const spuId = this.cardMsg.spuId
				const res = await this.$request('get', `/item/sku/queryPropMapping?spuId=${spuId}`)
				console.log('res.data', res.data)
				this.specs = res.data.filter(item => item.values && item.values.length > 0);
				// this.specs.forEach(item => Object.assign(item, {
				// 	selected: false
				// }))
				this.specs.forEach(item => {
					Object.assign(item, {
						values: item.values.map(value => ({
							...value,
							ids: item.id,
							selected: false
						}))
					});
				});

				console.log('this.spec', this.specs)
			},
			toShop() {
				this.shopMsg.id = this.cardMsg.id
				this.shopMsg.num = this.vModelValue
				console.log('this.shopMsg', this.shopMsg)
				this.$emit('update-shopmsg', this.shopMsg);
				// 关闭弹出层
				this.$refs.popup.close();
			},
			toBuy() {
				uni.navigateTo({
					url: `/pages/order/submitOrder/submitOrder`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-box {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 80upx;

		.btn {
			width: 45%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			border-radius: 40upx;
		}

		.reset {
			border: solid 1px #EEE;
			box-sizing: border-box;
			box-sizing: border-box;
			border: solid 1px #FF0000;
			font-size: 14px;
			color: #FF0000;
		}

		.confirm {
			background-image: $base-bg-gradient-color;
			color: #FFF;
		}
	}

	.spec-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.spec-item {
			height: 60upx;
			line-height: 60upx;
			border: solid 1px #EEE;
			box-sizing: border-box;
			text-align: center;
			margin-left: 20upx;
			border-radius: 3px;
			margin-bottom: 20upx;
			font-size: 12px;
		}

		.spec-item:first-child {
			margin-left: 0;
		}

		.on-spec {
			background-image: $base-bg-gradient-color;
			color: #FFF;
		}
	}

	.s-box {
		width: 100%;
		display: flex;
		border-bottom: solid 1px #EEE;

		.s-img {
			width: 140upx;
			height: 140upx;
			background-color: #EEE;
			border-radius: 4px;
		}

		.g-info {
			padding-left: 20upx;

			.s-name {
				padding-bottom: 4px;
			}

			.s-price {
				color: #F00;
				font-size: 14px;
			}
		}
	}

	.purchase-num {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1px #EEE;
		padding-bottom: 20upx;
	}
</style>