<template>
	<div class="coupons-page">
		<u-popup v-model="showDialog" mode="center" :mask-close-able="false" custom-style="padding:0;background:none;">
			<view class="Xbox">
				<img src="../../static/images/couponsbg.png" mode="widthFix" />
				<view class="coupons-box">
					<text style="font-size: 18px;color: #FFFFFF;">恭喜获得优惠券</text>
					<text style="font-size: 14px;color: #FFFFFF;margin-top: 20rpx;">{{couponMessage}}</text>
					<view class="btn" @click="goLook">
						<text>立即查看</text>
					</view>
				</view>
				<u-icon name="close" style='position: absolute;right: 0;top: 0;' color="#FFFFFF" size="60" @click='closeBtn'></u-icon>
			</view>
		</u-popup>
	</div>
</template>

<script>
export default {
	props: ['couponMessage'],
	data() {
		return {
			pageinfo: {},
			showDialog: true
		};
	},
	created() {
		
	
		
	},
	methods: {
		goLook(){
			this.showDialog = false;
			this.$emit('goLook');
			
		},
		closeBtn(){
			this.showDialog = false;
			this.$emit('closeBtn');
		}
	
	}
};
</script>

<style>
.coupons-page img {
	width: 540rpx;
	height: 680rpx;
}
.coupons-page .Xbox{
	width: 540rpx;
	height: 680rpx;
	position: relative
}
.coupons-page .hotsopt {
	position: absolute;
	background: transparent;
	border: none;
	outline: none;
}
.coupons-page .hotsopt::after {
	border: none;
}
.coupons-page .coupons-box{
	width: 480rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	left: 30rpx;
	top: 320rpx;
}
.coupons-page .btn{
	width: 330rpx;
	height: 66rpx;
	border-radius: 33rpx;
	background: #FDE005;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	color: #1A1A1A;
	margin-top: 70rpx;
}
</style>
