Huanyuyuehui/components/treasureBox/index.vue

<template>
	<view class="content">
		<view class="bg">
			<view class="top">
				<view class="iconfont icon-guanbi2" style="position: absolute;right: 20px;top:-40px;font-size: 30px;color: white;" @click="close"></view>
			</view>
			<view class="lucky-draw">
			
				<image src="@/static/images/box.png" mode="aspectFit" style="width: 220px;height: 220px;position: relative;top: 12px;right: 16px;" v-if="!gifShow&&!popShow"></image>
				<image src="@/static/images/box.gif" mode="aspectFit" style="width: 350px;height: 350px;" v-else-if="gifShow"></image>			
				<image src="@/static/images/box2.png" mode="aspectFit" style="width: 350px;height: 350px;position: relative;top: 10px;right: 10px;" v-else-if="!gifShow&&popShow"></image>
			</view>
			<view class="btn" @click="openBox">
				立刻开启
			</view>
		</view>
		<view class="coupon_popups" v-if="popShow">
			<view class="bg2"></view>
			<view class="con" v-if="blind">
				<view class="contents">
					<image src="@/static/images/jf.png" style="width: 48px;height:48px;" mode=""></image>
					<view class="text-black">恭喜您获得</view>
					<view class="text-red">{{drawInfo.text}}积分</view>
					<view class="btn" @click="confirm" v-if="!drawInfo.wheel">开心收下</view>
					<view class="btn" @click="goBlind" v-else>继续开盲盒</view>
				</view>
				<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
			</view>
			<view class="con" v-else>
				<view class="content">
					<image src="@/static/images/notBlind.png" style="width: 80px;height: 80px;" mode=""></image>
					<view class="text-black">很遗憾,差一点就中奖了</view>
					<view class="text-red">期待您下次再来</view>
					<view class="btn" @click="confirm">我知道了</view>
				</view>
				
			</view>
		</view>
		  <blindBox v-if="blindShow"></blindBox>
	</view>
</template>

<script>
	
	import {getWhellNumber,getWhellConfig,getWhellAction,getWhellList,setSignIntegral} from '@/api/user.js';
    import blindBox from '@/components/blindBox/blindBox.vue';
	export default {
		components: {
			blindBox
		},
		data() {
			return {
				wheel:0,
				popShow:false,
				gifShow:false,
				blindShow:false,
				integral:'',
				list:[],
				blind:true,
				drawInfo:{
					img:'',
					text:'',
					wheel:0,
				}
			}
		},
		onLoad() {
		},
		methods: {
			confirm(){
				this.popShow = false;
				this.blind=false;
				this.close();
			},
			async openBox(){ 
				await setSignIntegral().then(res=>{
					this.drawInfo.text = res.data.integral;
					this.drawInfo.wheel=res.data.wheel;
					this.gifShow=true;
					setTimeout(()=>{
						this.gifShow=false;
						this.popShow=true;
					},1500)	
				}).catch(err=>{
					this.close();
				   return this.$util.Tips({title:err})
				});
				
			},
			goBlind(){
				this.blindShow=true;
			},
			close(){
				this.$emit('closeTreasureBox')
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 1000;
		padding-top: 200rpx;
		background-color: rgba(0,0,0,1);
		.coupon_popups{
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			text-align: center;
			.bg2{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.8);
			}
			
			.con{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 680rpx;
				height: 900rpx;
				background-size: 100% 700rpx;
				background-repeat: no-repeat;
				display: flex;
				justify-content: center;
				.contents{
					width: 500rpx;
					height: 520rpx;
					border-radius: 20rpx;
					margin: 0 auto;
					background-color: white;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					grid-gap: 40rpx;
					// image{
					// 	width: 860rpx;
					// 	height: 200rpx;
					// 	margin-top: 50rpx;
					// }
					.text-black{
						font-size: 32rpx;
						font-weight: bold;
					}
					.text-red{
						font-size: 28rpx;
						color: #FC3C70;
					}
					.btn{
						color: white;
						margin-bottom: 40rpx;
						width: 328rpx;
						height: 68rpx;
						line-height: 68rpx;
						padding: 4rpx 0;
						border-radius: 60rpx;
						background: linear-gradient(136deg, #D753FC 0%, #FC276C 53%, #FC3E8F 100%);
					
					}
					
				}
				.text{
					width: 600rpx;
					margin: 30rpx auto 0;
					font-size: 20rpx;
					color: #ffffff;
				}
				.icon-guanbi3{
					color: #ffffff;
					font-size: 70rpx;
					position: absolute;
					bottom: 250rpx;
					left: 310rpx;
				}
			}
		}
		.bg {
			width: 100%;
			// height: 100vh;
			
			position: relative;
			padding-bottom: 40rpx;
			.rule {
				width: 80rpx;
				height: 120rpx;
				background-image: url(@/static/images/right-btn.png);
				background-size: 100%;
				background-repeat: no-repeat;
				position: absolute;
				right: 0;
				top: 320rpx;
				// text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					width: 56rpx;
					height: 80rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #DC3424;
					line-height: 36rpx;
				}
			}
			.top{
				width: 488rpx;
				height: 140rpx;
				background-image: url('@/static/images/box-title.png');
				background-size: 100% 100%;
				margin: 0 auto;
			}
			.lucky-draw{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 670rpx;
				height: 670rpx;
				margin: 0 auto;
				// background-image: url('@/static/images/box.png');
				background-size: 100% 100%;
				.title{
					position: relative;
					bottom: 20rpx;
					width:60%;
					height: 50rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					margin: 20rpx 0;
					line-height: 54rpx;
					text-align: center;
					background: url('@/static/images/font-bg.png') no-repeat 100%;
					background-position: center;
				}
			}
			.btn{
				width: 460rpx;
				height: 100rpx;
				background: linear-gradient(180deg, #FEFD65 0%, #F3C936 100%);
				border-radius: 60rpx;
				border: 4rpx solid #FFFFFF;
				font-weight: 600;
				font-size: 36rpx;
				color: #530115;
				line-height: 100rpx;
				text-align: center;
				margin: 0 auto;
				position: relative;
				top: 160rpx;
			}
			.lucky-draw-info{
				margin: 80rpx auto;
				width: 680rpx;
				height: 440rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				border-radius: 32rpx;
				.title{
					
					text-align: center;
					font-size: 36rpx;
					color: #FC3C70;
					line-height: 72rpx;
				}
				.list{
					flex: 1;
					overflow: scroll;
					display: flex;
					flex-direction: column;
					grid-gap: 20rpx;
					.item{
						font-size: 32rpx;
						font-weight: bold;
						padding: 10rpx 20rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						
					}
				}
			}
		}
	}
</style>