<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="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/couponsbg.png" mode="widthFix" />
				<view class="coupons-box">
					<text style="font-size: 18px;color: #FFFFFF;">恭喜获得{{msgtype==1?'优惠券':'积分'}}</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: {
				type: String,
				default: 0
			},
			msgtype: {
				type: String,
				default: 1
			}
		},
		data() {
			return {
				pageinfo: {},
				showDialog: true
			};
		},
		created() {
		},
		methods: {
			goLook() {
				this.showDialog = false;
				if (this.msgtype == 1) {
					uni.navigateTo({
						url: "/pages/coupon/index/index",
					});
				} else if (this.msgtype == 2) {
					uni.navigateTo({
						url: "/pages/user-center/integral-detail/integral-detail",
					});
				}
				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>
