uniapp产品规格弹窗组件

1.效果
2.创建一个Mypopup组件

3.全局组件使用（打开main.js添加以下代码）

import Mypopup from '@/components/Mypopup/Mypopup.vue'
Vue.component('Mypopup',Mypopup)

4.子组件

<template>

	<!-- 规格-模态层弹窗 -->
	<view v-if="newSpecClass=='show'">
	<view class="popup spec" :class="newSpecClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
		<!-- 遮罩层 -->
		<view class="mask"></view>
		<view class="layer attr-content" @click.stop="stopPrevent">
			<!-- 关闭图标 -->
			<view class="closeIcon">
				<u-icon name="close" color="#666" size="20" @click="close"></u-icon>
			</view>
			<view class="a-t">
				<image src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg">
				</image>
				<view class="right">
					<text class="price">¥328.00</text>
					<text class="stock">库存：188件</text>
					<view class="selected">
						已选：
						<text class="selected-text" v-for="(sItem, sIndex) in newSpecSelected" :key="sIndex">
							{{sItem.name}}
						</text>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in specList" :key="index" class="attr-list">
				<text>{{item.name}}</text>
				<view class="item-list">
					<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id"
						:key="childIndex" class="tit" :class="{selected: childItem.selected}"
						@click="selectSpec(childIndex, childItem.pid)">
						{{childItem.name}}
					</text>
				</view>
			</view>
			<!-- 数量 -->
			<view class="count">
				数量
				<view>
					<u-number-box v-model="newCartNum" @change="valChange" :min="1">
					</u-number-box>
				</view>
			</view>
			<button class="btn" v-if="btnTip==1"  @click="toggleSpec">加入购物车</button>
			<button class="btn" v-else-if="btnTip==2" @click="topay">立即购买</button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props: {
			//购买数量
			cartNum:{
				type:Number,
				default: 1
			},
			specSelected: {
				type: Array,
				default: []
			},
			// 规格
			specList: {
				type: Array,
				default: []
			},
			specChildList: {
				type: Array,
				default: []
			},
			// 控制弹框显示和隐藏
			specClass: {
				type: String,
				default: 'hide'
			},
			// btn文字提示
			btnTip:{
				type: Number,
				default: 1,//1加入购物车  2立即支付
			}
		},
		data() {
			return {
				newCartNum:this.cartNum,
				newSpecSelected:this.specSelected,
				// specClass: 'none',
				newSpecClass:this.specClass
			}
		},
		watch: {
			//数量
			cartNum:{
				handler(newValue, oldValue) {
					this.newCartNum = newValue;
					console.log("监听cartNum：", "newValue=", newValue, "oldValue=",oldValue,);
				}
			},
			// 当前选中的规格
			specSelected:{
				immediate: true,
				handler(newValue, oldValue) {
					this.newSpecSelected = newValue;
					console.log("监听newSpecSelected：", "newValue=" + newValue, "oldValue=" + oldValue,);
				}
			},
			// 弹框显示还是隐藏
			specClass: {
				immediate: true,
				handler(newValue, oldValue) {
					this.newSpecClass = newValue;
					console.log("监听specClass：", "newValue=" + newValue, "oldValue=" + oldValue,);
				}
			},
			// 控制按钮
			btnTip: {
				immediate: true,
				handler(newValue, oldValue) {
					// console.log("监听btnTip：", "newValue=" + newValue, "oldValue=" + oldValue);
				}
			},
			// 规格内容
			specChildList:{
				immediate: true,
				handler(newValue, oldValue) {
					console.log("监听specChildList：",newValue,  oldValue);
				}
			}
		},
		created() {
			
		},
		onShow() {
			console.log('ONSHOWL1')
		},
		
		methods: {
			// 购买数量
			valChange(e) {
				this.$emit('cartNumChange',e.value)
			},
			//选择规格
			selectSpec(index, pid) {
				console.log('进来没11111111',this.specChildList)
				let list = this.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						// this.$set(item, 'selected', false);
						item.selected = false;
					}
				})
			
				// this.$set(list[index], 'selected', true);
				list[index].selected = true;
				this.$forceUpdate()
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.newSpecSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.newSpecSelected.push(item);
					}
				})
			   this.$emit('gaveSpecSelected',this.specChildList)
			
			},
			//关闭图标
			close() {
				this.$emit('closePopup', 'hide')
			},
			stopPrevent() {},
			//规格弹窗开关
			toggleSpec() {
				if (this.newSpecClass === 'show') {
					this.newSpecClass = 'hide';
					setTimeout(() => {
						this.newSpecClass = 'none';
					}, 250);
				} else if (this.newSpecClass === 'none') {
					this.newSpecClass = 'show';
				}
				// 回传当前选中数据
				let obj = {
					specSelected:this.newSpecSelected,
					specClass:this.newSpecClass
				}
				this.$emit('haveSpecSelected',obj)
			},
			//去购买
			topay(){
				//关闭弹窗
				this.newSpecClass = 'hide';
				//去订单页
				
			},
		}
	}
</script>

<style lang="scss">
	// 关闭图标
	.closeIcon {
		display: flex;
		justify-content: flex-end;
	}

	/* 规格选择弹窗 */
	.attr-content {
		box-sizing: border-box;
		padding: 30rpx 30rpx 100rpx 30rpx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				// margin-top: -40upx;
				border-radius: 8upx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: 24upx + 2upx;
				color: #606266;
				line-height: 42upx;

				.price {
					font-size: 32upx;
					color: #fa436a;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: 28upx + 2upx;
			color: #606266;
			padding-top: 30upx;
			// padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: 28upx;
				color: #303133;
			}

			
		}
	}
	.selected {
		background: #fbebee !important;
		color: #fa436a !important;
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 999;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: #fa436a;
				font-size: 28upx + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
				width: 80%;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}
	// 数量
	.count {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 26rpx 0 26rpx 21rpx;
		border-bottom: 1rpx solid #F6F6F6;
	}
</style>

5.父组件

<template>
<view>
选中的规格展示
					<view>
						<text  v-for="(sItem, sIndex) in specSelected" :key="sIndex">
							{{sItem.name}}
						</text>
					</view>
使用组件(传的数据写的太多了，太杂，可以整理以下传一个对象过去，这里我就懒得改了)
<button class="btn" v-if="btnTip==1"  @click="buttonClick">选规格</button>
<!-- 规格弹窗 -->
		<Mypopup
		:cartNum="cartNum"
		@haveSpecSelected = "haveSpecSelected"
		:btnTip="btnTip"
		@closePopup="closePopup"
		 :specClass="specClass" 
		:specSelected="specSelected" 
		:specList="specList"
		@cartNumChange="cartNumChange"
		@gaveSpecSelected='gaveSpecSelected'
		 :specChildList="specChildList"></Mypopup>
</view>
</template>
<script>
	export default {
		data() {
			return {
			cartNum:1,
			specList:[{
						id: 1,
						name: '尺寸',
					},
					{
						id: 2,
						name: '颜色',
					}
				],
				specChildList:[
					{
							id: 1,
							pid: 1,
							name: 'XS',
						},
						{
							id: 2,
							pid: 1,
							name: 'S',
						},
						{
							id: 3,
							pid: 1,
							name: 'M',
						},
						{
							id: 4,
							pid: 1,
							name: 'L',
						},
						{
							id: 5,
							pid: 2,
							name: '白色',
						},
						{
							id: 6,
							pid: 2,
							name: '红色',
						}
				],
				btnTip:1,//控制弹窗按钮   1购物车  2立即购买
				specClass: 'show',//控制弹窗显示、隐藏 show显示  hide隐藏
				specSelected: [],//选中的规格数据
			}
			},
			methods:{
			//购物车数量获取
			cartNumChange(val){
				console.log('当前值为: ',val);
				this.cartNum = val;
			},
			// 选中的数据
			haveSpecSelected(val){
				this.specSelected = val.specSelected;
				this.specClass = val.specClass;
			},
			gaveSpecSelected(val){
				this.specChildList = val;
			},
			//关闭弹窗
			closePopup(val){
				console.log('关闭了弹窗',val)
				this.specClass = val;
				//及控制弹窗按钮
				this.btnTip = 1;//1购物车  2立即购买
			},
			buttonClick(){
			// 规格弹窗控制器
				 	this.specClass = 'show';
				 	this.btnTip = 1;//加入购物车
			},
			}
			}
	</script>