xc-app/pages/index/components/openBox copy.vue

<template>
	<view class="card-com" v-show="visible">
		<view class="main">
			<view class="box-main">
				<BoxCom v-show="isBox"></BoxCom>
			</view>
			
			<image src="@/static/result/title.png" mode="aspectFit" class="title-icon" v-show="isCard"></image>
			<view class="card" v-show="isCard" :style="{'backgroundImage':`url(/static/result/${row.grade}.png)`}">
				<image v-show="row.productCoverResource" :src="row.productCoverResource.url" mode="aspectFit" class="shop-img"></image>
				<view class="shop">
					<view class="name">{{row.productAbbreviation}}</view>
					<view class="price">价值：¥ {{row.salePrice}}</view>
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;">
				<!-- <image src="@/static/result/again.png" mode="aspectFit" class="again-icon" @click="again" v-show="isCard"></image> -->
				<view class="again-icon" v-show="isCard && listLength" @click="boxRecrd">
					换成积分
					<!-- <view class="no-like"></view> -->
				</view>
				<view  class="again-icon" @click="again" v-show="isCard">
					<template v-if="isActivity == 'activity' && listLength">查看惊喜</template>
					<template v-else-if="isActivity != 'activity' &&  listLength">再来一次</template>
					<template v-else>再来一次</template>
					
				</view>
			</view>
			<image src="@/static/result/close.png" class="close-icon" mode="aspectFit" @click="close" v-show="isCard"></image>
			
			
			<view class="lihua" v-if="isLiHua">
				<LiHuaCom></LiHuaCom>
			</view>
			<view class="gx" v-show="isGx">
				<GXCom></GXCom>
			</view>
		</view>
	</view>
</template>

<script>
	import BoxCom from './box.vue'
	import LiHuaCom from './lihua.vue'
	import GXCom from './bgGuang.vue'
	export default{
		data(){
			return{
				isBox:true,
				isCard:false,
				isLiHua:false,
				isGx:false
			}
		},
		props:{
			visible:{
				type:Boolean,
				default:false
			},
			row:{
				type:Object,
				default:() => {}
			},
			listLength:{
				type:Boolean,
				default:false
			},//是否开完
			isActivity:{
				type:String,
				default:''
			},//是否是活动盲盒进入
		},
		components:{BoxCom,LiHuaCom,GXCom},
		mounted() {
			setTimeout(() => {
				this.isBox = false
				this.isCard = true
				setTimeout(() => {
					this.isLiHua = true
				},100)
				setTimeout(() => {
					this.isGx = true
				},800)
			},3200)
			setTimeout(() => {
				this.isLiHua = false
			},4000)
		},
		methods:{
			close(){
				console.log("aaaasss")
				this.$emit('close')
			},
			again(){
				this.$emit('click')
			},
			boxRecrd(){
				uni.$emit('updateTabData', {newData:'newData'});
				uni.switchTab({
					url:`/pages/mine/boxRecrd`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-com{
		.main{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.7);
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.box-main{
				z-index: 20;
			}
		}
		.title-icon{
			width: 430rpx;
			height: 104rpx;
			display: block;
			margin: 0 auto;
		}
		.card{
			margin-top: -40rpx;
			width: 590rpx;
			height: 760rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			transform-style: preserve-3d;
			animation: flip 0.8s linear;
			z-index: 20;
			position: relative;
			.shop-img{
				width: 192rpx;
				height: 248rpx;
				position: absolute;
				top: 160rpx;
				left: 200rpx;
			}
			.shop{
				position: absolute;
				top: 548rpx;
				left: 100rpx;
				width: 390rpx;
				.name{
					width: 390rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
					color: #99754D;
				}
				.price{
					width: 390rpx;
					text-align: center;
					margin-top: 12rpx;
					font-size: 40rpx;
					color: #99754D;
				}
			}
		}
		@keyframes flip {
		  0% {
		    transform: rotateY(0deg) scale(0);
		  }
		  100% {
		    transform: rotateY(360deg) scale(1);
		  }
		}
		.again-icon{
			width: 228rpx;
			height: 96rpx;
			font-size: 44rpx;
			// display: block;
			// margin-top: -40rpx;
			z-index: 21;
			color: rgba(255,255,255,0.9);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: YouSheBiaoTiHei; 
			margin: 0 20rpx;
			background-image: url('@/static/new/tip/btn.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: relative;
			.no-like{
				position: absolute;
				color: #fff;
				font-size: 20rpx;
				font-family: serif;
				bottom: 0;
			}
			// margin: 8rpx auto 8rpx auto;
		}
		.close-icon{
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 20rpx auto;
			z-index: 22;
		}
		.lihua{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.gx{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
	
</style>