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" :min="1" @change="changeValue()" />
		</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,
				isData: null,
				preSele: [],
				itemsL: [],
				toList: [],
				total: 0
			}
		},
		methods: {
			changeValue(value) {},
			change(e) {
				if (!e.show) { // 当弹出层关闭时
					// 重置规格选择
					if (this.specs.length > 0 && this.preSele.length < 0) {
						this.specs.forEach(e => {
							e.values.forEach(s => {
								s.selected = false
							})
						})
						//this.vModelValue = 1
					}
					this.speL = []
					this.seleBack()
				}
			},
			async selectSpec1(item, spec) {
				// 首先，取消选择所有其他选项
				item.values.forEach(value => {
					value.selected = false
				})

				spec.selected = !spec.selected
				const newIds = spec.ids
				if (this.preSele.length > 0) {
					this.speL = this.preSele
				}
				const filSpeL = this.speL.filter(value => value.ids !== newIds);

				filSpeL.push(spec)

				this.speL = filSpeL

				const seleList = this.speL.filter(item => item.selected == true)
				this.itemsL = 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 = '';
				}

				this.isSelected = this.specs.every(spec => spec.values.some(value => value.selected))

				if (this.isSelected) {
					// 如果所有规格都至少有一个选项被选中
					const res = await this.$request('get', `/item/sku/queryItem/${this.intSkuId}`)
					if (res) {
						this.caMsg = res.data
						this.vModelValue = 1
						console.log('this.caMsg', this.caMsg)
					}

					//console.log('所有规格都已选择')
					if (this.isData == true) {
						this.preSele = seleList
					}

				} else {}
			},
			// 返回选中的数据
			seleBack() {
				const itemDetal = {
					id: this.intSkuId,
					item: Array.from(this.itemsL).join(','),
					count: this.vModelValue
				}
				this.$emit('seChanged', itemDetal);
			},
			async open(e) {
				if (e || e != null) {
					this.isData = e
				}
				this.$refs.popup.open('bottom')

				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
						}))
					})
					if (this.preSele.length <= 0) {
						Object.assign(item, {
							values: item.values.map(value => ({
								...value,
								selected: false
							}))
						})
					} else {
						Object.assign(item, {
							values: item.values.map(value => ({
								...value,
								selected: this.preSele.some(prevSpe =>
									prevSpe.label === value.label && prevSpe.ids ===
									value.ids)
							}))
						})
					}
				})
			},
			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
					}
					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.$refs.popup.close()
				}
			},
			totalPrice() {
				const e = uni.getStorageSync('carl')
				const userId = uni.getStorageSync('appUserId')
				const toList = {
					storeId: e.id,
					storeName: e.name,
					skuId: this.caMsg.skuId,
					basePrice: this.caMsg.retailPrice,
					price: this.caMsg.retailPrice,
					quantity: this.vModelValue,
					extendProps: userId,
					imgUrl: this.caMsg.img,
					spuId: this.caMsg.spuId,
					skuName: this.caMsg.skuName,
					skuProperties: this.caMsg.skuProperties,
					skuTitle: this.caMsg.title,
				}
				let total = 0;
				// 如果 selected 属性不存在，直接计算所有商品
				let priceInCents = Math.round(toList.price * 100);
				let quant = toList.quantity;
				total += priceInCents * quant;
				
				this.toList.push(toList)
				// 将总价格转换回浮点数（以元为单位）
				this.total = (total / 100).toFixed(2);
			},
			toBuy() {
				this.totalPrice()
				const carlist = {
					carlist: this.toList,
					total: this.total
				}
				uni.navigateTo({
					url: `/pages/order/submitOrder/submitOrder?data=${encodeURIComponent(JSON.stringify(carlist))}`
				})
				this.toList = []
				console.log('carlist', carlist)
				this.$refs.popup.close()
				// if (carlist.carlist.length <= 0) {
				// 	// this.$refs.uNotify.show({'请选择'})
				// 	uni.showToast({
				// 		title: '请选择',
				// 		icon: 'error',
				// 		duration: 2000
				// 	});
				// } else {
				// 	uni.navigateTo({
				// 		url: `/pages/order/submitOrder/submitOrder?data=${encodeURIComponent(JSON.stringify(carlist))}`
				// 	})
				// 	this.$refs.popup.close()
				// }
				// 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>