<template>
	<view class="appCotent">
		<!-- 我的订单 -->
		<view class="get-coupon">
			<view class="box">
				<image src="../../../static/index/coupon1.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="../../../static/index/coupon2.png"></image>
					<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
			}
		},
		methods: {
			getCoupon() {
				let opts = {
					url: '/app/user/send/coupon',
					method: 'post'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					console.log(res.data, 1111111)
					if (res.data.code == 200) {
						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)
					}else if(res.data.code == 1000000001){
						uni.showToast({
							title: "您已领取优惠券！",
							icon: 'none',
							duration:1500,
							success() {
								uni.navigateToMiniProgram({
									appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
									path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
									extraData: { // 需要携带的参数
									},
									success(res) {// 打开成功
									}
								})
							}
						});
					}
				})
				// 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;
				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;
						
					}
				})
			}
		}
	}
</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;
				}

				.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>
