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="cardMsg.src"></image>
			</view>
			<view class="g-info">
				<view class="s-name">{{cardMsg.goods_name}}</view>
				<view class="s-price">{{cardMsg.goods_price}}</view>
			</view>
		</view>
		<uni-section title="规格">
			<view class="spec-box padding-lr-sm">
				<view class="spec-item padding-lr-sm" :class="{'on-spec': spec.selected}" :key="spec.id"
					@click="selectSpec1(spec)" v-for="spec in specs1">{{ spec.name }}</view>
			</view>
		</uni-section>
		<uni-section title="口味">
			<view class="spec-box padding-lr-sm">
				<view class="spec-item padding-lr-sm" :class="{'on-spec': spec.selected}" :key="spec.id"
					@click="selectSpec2(spec)" v-for="spec in specs2">{{ spec.name }}</view>
			</view>
		</uni-section>
		<uni-section title="购买数量">
			<view class="purchase-num padding-lr-sm">
				<view class="num">剩余562件</view>
				<uni-number-box v-model="vModelValue" @change="changeValue(value)" />
			</view>
		</uni-section>
		<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: '',
					specs: '',
					num: ''
				},
				specs1: [{
						id: 1,
						name: '规格1',
						selected: false
					},
					{
						id: 2,
						name: '规格2',
						selected: false
					},
					{
						id: 3,
						name: '规格3',
						selected: false
					},
					{
						id: 4,
						name: '规格4',
						selected: false
					},
					{
						id: 5,
						name: '规格5',
						selected: false
					}
				],
				specs2: [{
						id: 1,
						name: '大份1',
						selected: false
					},
					{
						id: 2,
						name: '大份2',
						selected: false
					},
					{
						id: 3,
						name: '大份3',
						selected: false
					},
					{
						id: 4,
						name: '大份4',
						selected: false
					},
					{
						id: 5,
						name: '大份5',
						selected: false
					}
				]
			}
		},
		methods: {
			changeValue(e) {
				console.log('vModelValue', e)

			},
			change(e) {
				if (!e.show) { // 当弹出层关闭时
					// 重置规格选择
					this.specs1.forEach(spec => {
						spec.selected = false;
					});
					this.specs2.forEach(spec => {
						spec.selected = false;
					});

					// 重置购买数量
					this.vModelValue = 1;
				}
			},
			selectSpec1(item) {
				console.log('点击了规格：', item);
				item.selected = !item.selected;
				this.shopMsg.spec = item.name
				// 在这里添加您的点击处理逻辑
			},
			selectSpec2(item) {
				console.log('点击了大份：', item);
				item.selected = !item.selected;
				this.shopMsg.specs = item.name
				// 在这里添加您的点击处理逻辑
			},
			open() {
				console.log('cardMsg', this.cardMsg)
				this.$refs.popup.open('bottom')
			},
			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: 30upx;

		.num {
			font-size: 12px;
		}
	}
</style>