<template>
	<view class="appCotent">
		<!-- 我的订单 -->
		<view class="get-coupon">
			<view class="box">
				<image src="http://jdnc-oss.uzosp.com/2022/05/31/5c01ded6473a44c7b5f1370b6010ae87.png"></image>

				<view class="title">
					<view style="margin-bottom:20rpx;">
						领取优惠券
					</view>
					<view>
						免费购买京东汽车挪车牌
					</view>
				</view>

				<view class="btn" @click="getCoupon">
					点击领取优惠券
				</view>
			</view>

			<!-- 领取成功后弹框 -->
			<view class="pooup-success" v-if="pooupSuccess">
				<view class="success-box">
					<image src="http://jdnc-oss.uzosp.com/2022/05/31/7f0a17d1075d47ffb784b4095e79d36a.png"></image>
					<view class="close" @click="closeCoupon">
						X
					</view>
					<view class="title">
						<view style="margin-bottom:10rpx;font-weight: bold;">
							优惠券领取成功
						</view>
						<view class="">
							正在跳转中......({{timerNum}}秒)
						</view>
					</view>
					<view class="success-btn" @click="goUseCoupon">
						去使用
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let plugin = requirePlugin("loginPlugin");
	export default {
		data() {
			return {
				pooupSuccess: false,
				timerNum: 3,
				timer:null,
				clickState:false, //节流
			}
		},
		methods: {
			getCoupon() {
				if(!this.clickState){
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.clickState = true
					let opts = {
						url: '/app/user/send/coupon',
						method: 'post'
					};
					setTimeout(()=>{
						this.http.httpTokenRequest(opts, {}).then(res => {
							uni.hideLoading()
							if (res.data.code == 200) {
								uni.showToast({
									title: "领取成功！",
									icon: 'success',
								});
								this.pooupSuccess = true
								this.timer = setInterval(() => {
									if (this.timerNum > 0) {
										this.timerNum--
									} else {
										this.pooupSuccess = false
										this.timerNum = 3
										uni.navigateToMiniProgram({
											appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
											path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
											extraData: { // 需要携带的参数
											},
											success:(res)=> {// 打开成功
												this.clickState = false
											},
											fail:()=>{
												this.clickState = false
											}
										})
										clearInterval(this.timer)
									}
								}, 1000)
							}else if(res.data.code == 1000000001){
								uni.showToast({
									title: "您已领取优惠券！",
									icon: 'error',
									duration:1500,
									success:()=> {
										uni.navigateToMiniProgram({
											appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
											path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
											extraData: { // 需要携带的参数
											},
											success:()=> {// 打开成功
												this.clickState = false
											},
											fail:()=>{
												this.clickState = false
											}
										})
									}
								});
							}else{
								this.clickState = false
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								});
							}
						})
					},500)
					
				}
				// uni.showToast({
				// 	title: "领取成功！",
				// 	icon: 'none',
				// });
				// this.pooupSuccess = true
				// let timer = setInterval(()=>{
				// 	if(this.timerNum > 0){
				// 		this.timerNum  --
				// 	}else{
				// 		this.pooupSuccess = false
				// 		this.timerNum = 3
				// 		uni.navigateToMiniProgram({
				// 			appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
				// 			path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
				// 			extraData: { // 需要携带的参数

				// 			},
				// 			success(res) {
				// 				// 打开成功
				// 			}
				// 		})
				// 		clearInterval(timer)
				// 	}
				// },1000)
			},
			goUseCoupon() {
				this.timerNum = 3;
				this.clickState = false
				clearInterval(this.timer);
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
					path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
					extraData: { // 需要携带的参数

					},
					success:(res)=> {
						// 打开成功
						this.pooupSuccess = false;
					},
					fail:()=> {
						this.pooupSuccess = false;
						
					}
				})
			},
			closeCoupon(){
				this.pooupSuccess = false
				this.timerNum = 3
				this.clickState = false
				clearInterval(this.timer)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.get-coupon {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.box {
			width: 584rpx;
			height: 664rpx;
			position: relative;
			top: -120rpx;
			text-align: center;

			.title {
				width: 100%;
				font-size: 40rpx;
				font-weight: bold;
				position: absolute;
				top: 80rpx;
				left: 0;
				z-index: 10;
				color: #9A4315;
			}

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.btn {
				width: 400rpx;
				line-height: 80rpx;
				position: absolute;
				bottom: 80rpx;
				left: 50%;
				margin-left: -190rpx;
				z-index: 10;
				text-align: center;
				color: #853116;
				font-weight: bold;
				font-size: 32rpx;
				border-radius: 50rpx;
				background: linear-gradient(180deg, #FFE0B2, #FFCB78);
				box-shadow: 0 6rpx 13rpx 1 rgba(175, 10, 17, 0.17), -3rpx -4rpx 7rpx 0 rgba(173, 28, 14, 0.35);
			}
		}

		.pooup-success {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 100;

			.success-box {
				width: 580rpx;
				height: 700rpx;
				border-radius: 20rpx;
				text-align: center;
				position: relative;
				top: -120rpx;

				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: -11;
				}
				
				.close{
					padding:20rpx 30rpx;
					font-size:32rpx;
					position: absolute;
					top:0;right:0;
					color: #fff;
				}

				.title {
					width: 100%;
					color: #fff;
					position: absolute;
					bottom: 220rpx;
					left: 0;
					font-size: 32rpx;
				}

				.success-btn {
					width: 360rpx;
					height: 80rpx;
					line-height: 80rpx;
					position: absolute;
					bottom: 64rpx;
					left: 50%;
					margin-left: -170rpx;
					border-radius: 50rpx;
					font-size: 36rpx;
					background: linear-gradient(0deg, #F3AA37, #F37A37);
					color: #fff;
				}
			}
		}
	}
</style>
