<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>
					<scroll-view scroll-y="true" style="max-height: 80px;">
						<view style="font-size: 14px;color: #FDE005;;margin-top: 20rpx; text-align: center;" v-for="(x,i) in msgs" :key="i">
						{{x.Name}}
						<text v-if="x.Num>0">*{{x.Num}}</text>
						</view>
					</scroll-view>
					<text style="font-size: 12px;color: #FDE005;;margin-top: 20rpx;" v-if="cform!=null && cform!=''">{{cform}}</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|Array,
				default: 0
			},
			msgtype: {
				type: String,
				default: "1"
			},
			cform: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				pageinfo: {},
				showDialog: true,
				msgs:[]
			};
		},
		created() {
			if(typeof this.couponMessage == 'string'){
				this.msgs.push({Name:this.couponMessage,Num:-1})
			}else{
				this.msgs = this.couponMessage
			}
			uni.removeStorageSync('coupons')
		},
		methods: {
			goLook() {
				uni.removeStorageSync("ComeFrom");
				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() {
				uni.removeStorageSync("ComeFrom");
				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: 40rpx;
	}
</style>
