caimei-applets-caimei/components/module/popupGoods/popupGoods.vue

<template name="popup">
	<!-- 规格-模态层弹窗 -->
	<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
		<!-- 遮罩层 -->
		<view class="mask"></view>
		<view class="layer" @tap.stop="discard">
			<view class="content">
				<view class="layer-smimg">
					<image src="https://img.caimei365.com/group1/M00/02/6D/Cmis21xFeHGAIyUTAAPeRga1_H464.JPEG" mode=""></image>
				</view>
				<view class="layer-nunbox">
					<view class="layer-nunbox-t">
						<view class="text">
							数量:
							<uni-number-box
								class="product-step"
								:min="minBuyNumber" 
								:max="stock"
								:value="minBuyNumber>stock?stock:minBuyNumber"
								:isMax="minBuyNumber>=stock?true:false"
								:isMin="minBuyNumber===minBuyNumber"
								@eventChange="numberChang"
							>
							</uni-number-box>
						</view>
					</view>
					<view class="layer-nunbox-b">
						<view class="text">单价:
							<text class="p sm">￥</text>
							<text class="p bg">{{goodsData.retailPrice}}</text>
							<text class="p sm">{{goodsData.smallMoney== '0'?'.00':goodsData.smallMoney}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btn"><view class="button" @tap="btnConfirm">确定</view></view>
		</view>
	</view>
</template>

<script>
	var self; 
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default{
		name:'popup',
		components:{
			uniNumberBox
		},
		props:['goodsData','minBuyNumber','stock'],
		data() {
			return{
				specClass: '',//规格弹窗css类，控制开关动画
				isType:'',
				// productData:''
			}
		},
		created() {
			// this.productData = this.$parent.productData;
			console.log(this.goodsData)
		},
		methods:{
			//数量
			numberChange(data){
				console.log(data);
			},
			//规格弹窗
			showSpec(type) {
				console.log('show');
				this.isType = type
				this.specClass = 'show';
			},
			//关闭规格弹窗
			hideSpec() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			//加入购物车关闭规格弹窗
			btnConfirm() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
				console.log(this.isType);
				if(this.isType == 'add'){
					uni.showToast({
						title: "已加入购物车",
						duration:2000,
						icon:'success',
						mask:false
					});
				}else{
					this.toConfirmation()
				}
			},
			//跳转确认订单页面
			toConfirmation(){
				uni.navigateTo({
					url:'/pages/user/order/confirmation'
				})
			},
			discard() {
				//丢弃
			}
		},
	}
</script>

<style lang="scss">
/* 加入购物模态层*/ 
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -270rpx;
		width: 702rpx;
		padding: 24rpx 24rpx 10rpx 24rpx;
		height: 236rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
		}
		.btn {
			width: 100%;
			height: 88rpx;
			.button {
				width: 100%;
				height: 88rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #000000;
				font-size: $font-size-28;
			}
		}
	}
	
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.2s linear both;
		}
		
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	.layer-smimg{
		width: 114rpx;
		height: 114rpx;
		float: left;
		border-radius: 10rpx;
		margin-right: 24rpx;
		image{
			width: 114rpx;
			height: 114rpx;	
			border-radius: 10rpx;
		}
	}
	.layer-nunbox{
		justify-content: space-between;
		align-items: center;
		width: 536rpx;
		height: 88rpx;
		padding: 13rpx 0 0 0;
		float: left;
		.layer-nunbox-t{
			width: 100%;
			height:44rpx;
			position:relative;
			.product-step{
				position: absolute;
				left: 45rpx;
				bottom: 0;
				height: 44rpx;
				background: #FFFFFF;
			}
		}
		.layer-nunbox-b{
			width: 100%;
			height:44rpx;
			margin-top: 13rpx;
		}
		.text{
			line-height: 44rpx;
			font-size: $font-size-28;
			.p{
				color: #FF2A2A;
			}
			.p:first-child{
				margin-left: 30rpx;
			}
			.p.sm{
				font-size: $font-size-24;
			}
		}
	}
}	
</style>