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,
				specs: [], // 总查询数据
				speL: [],
				intSkuId: [], // 选择唯一的id
				caMsg: [], // 根据id查出来的数据
				isSelected: false,
			}
		},
		methods: {
			changeValue(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)
				}

				const seleList = this.speL.filter(item => item.selected == true)
				const items = seleList.map(item => item.label)
				// 计算选中规格项的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('speL', this.speL)
				// 确定每一个都有选择后发起请求
				this.isSelected = this.specs.every(spec => spec.values.some(value => value.selected))
				// console.log('isSelected', this.isSelected)
				if (this.isSelected) {
					// 如果所有规格都至少有一个选项被选中
					const res = await this.$request('get', `/item/sku/${this.intSkuId}`)
					this.caMsg = res.data
					// 返回选中规格项的label值
					//console.log('intSkuId', this.intSkuId)
					//console.log('items', items)
					//console.log('所有规格都已选择')
					const itemDetal = {
						id: this.intSkuId,
						item: Array.from(items).join(','),
						count: this.vModelValue
					}
					this.$emit('seChanged', itemDetal);
				} else {}
			},
			async open() {
				this.$refs.popup.open('bottom')
				// console.log("this.cardMsg")
				const spuId = this.cardMsg.spuId
				const res = await this.$request('get', `/item/sku/queryPropMapping?spuId=${spuId}`)
				this.specs = res.data.filter(item => item.values && item.values.length > 0);
				this.specs.forEach(item => {
					Object.assign(item, {
						values: item.values.map(value => ({
							...value,
							ids: item.id,
							selected: false
						}))
					})
				})
			},
			toShop() {
				if (this.isSelected == false) {
					uni.showToast({
						title: '还有规格未选择',
						icon: 'error',
						duration: 1000
					});
				} else {
					const e = uni.getStorageSync('carl')
					const userId = uni.getStorageSync('appUserId')
					const count = this.vModelValue
					const params = {
						storeId: e.id,
						storeName: e.name,
						skuId: this.caMsg.skuId,
						basePrice: this.caMsg.retailPrice,
						price: this.caMsg.retailPrice,
						quantity: count,
						extendProps: userId
					}
					// console.log('params', params)
					this.$request('post', `/front/shoppingCart`, params, true).then(response => {
						// 请求成功
						if (response.code == 200) {
							// 弹出消息
							uni.showToast({
								title: '加入购物车成功',
								icon: 'success',
								duration: 2000
							})
							this.$emit('addShop');
						} else if (response.code == 500) {
							uni.showToast({
								title: response.msg,
								icon: 'error',
								duration: 2000
							});
						}
					}).catch(error => {
						// 请求失败
						console.error('请求失败:', error);
					})
					// 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>