<template>
	<view class="appCotent" v-if="show">
		<view class="index-content">
			<view class="head">
				<image src="http://jdnc-oss.uzosp.com/2022/06/15/99131cbc49c2444ea09083abdd2f2750.png"></image>
				<view class="swiper">
					<image src="../static/index/banner.png"></image>
					<view>
						<u-swiper radius="16rpx" :height="130" :list="list5" circular @change="e => current = e.current"
							:autoplay="true" keyName="imageUrl" @click="goOtherLink">
							<view slot="indicator" class="indicator">
								<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
									:class="[index === current && 'indicator__dot--active']">
								</view>
							</view>
						</u-swiper>
					</view>
				</view>
				
				<view class="banner">
					<view class="banner-img">
						<image src="http://jdnc-oss.uzosp.com/2022/06/23/d868a11f485448efb960d436a2159d78.png"></image>
						<view class="left" @click="goJdShop(1)">
							<view class="banner-btn">
								<image src="../static/index/ban-btn.png"></image>
								<text>立即购买</text>
							</view>
						</view>
						<view class="right" @click="goJdShop(2)">
							<view class="banner-btn">
								<image src="../static/index/ban-btn.png"></image>
								<text>立即购买</text>
							</view>
						</view>
					</view>
					<view class="banner-other">
						<view @click="goShopH5(1)">
							<image src="../static/index/2.png"></image>	
						</view>
						<view @click="goShopH5(2)">
							<image src="../static/index/1.png"></image>
						</view>
					</view>
					<u-gap bgColor="transparent" height="20"></u-gap>
				</view>
				
			</view>
			
			
			
			
			<view class="bg-img">
				<image src="http://jdnc-oss.uzosp.com/2022/06/15/079440f5eea541bba67ea3d5f8097162.png"></image>
			</view>
			
			
			<!-- 已领取优惠券后弹框 -->
			<view class="pooup-get-coupon" v-if="pooupCoupon">
				<view class="coupon-box">
					<image src="../../../static/index/coupon3.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="coupon-btn" @click="goBuy">
						去原价购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/pages/login/util.js'
	let plugin = requirePlugin("loginPlugin");
	export default {
		data() {
			return {
				show: false,
				current: 0,
				balance: "0.00",
				list5: [],
				//免费挪车码
				freeCode: {},
				carList:[], // 爱车列表
				pooupCoupon:false,
				timerNum:3,
				timer:null,
				clickState:false, // 立即领取 防抖
			};
		},
		methods: {
			goShopH5(index){
				let url;
				if(index == 1){
					url = 'https://pro.m.jd.com/mall/active/3L2hs3R3aibYmosCRzA2Rp5z8pTR/index.html?babelChannel=ttt1'
				}else{
					url = 'https://jarvis.m.jd.com/start?source=2'
				}
				
				// uni.setStorageSync('h5url',url)
				util.redirectToH5({page:url})
			},
			// 跳转 其他小程序页面
			goJdShop(index){
				let sku;
				if(index == 1){
					sku = 100025676633 
				}else{
					sku = 100025676611
				}
				// console.log(sku,777777777)
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
					path: 'pages/item/detail/detail?sku='+sku, // 目标小程序的页面路径
					extraData: { // 需要携带的参数
						
					},
					success:(res)=> {
						// 打开成功
						
					},
					fail:()=>{
						
					}
				})
			},
			goJdLogin(){
				let returnPage= '/pages/main';
				let pageType = "reLaunch"
				uni.navigateTo({
					url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
				})
			},
			getPrice() {
				if(this.clickState == false){
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.clickState = true
					let that = this
					let token = uni.getStorageSync('userToken');
					if (!token) {
						uni.hideLoading()
						this.clickState = false
						uni.showModal({
							title: "未绑定账号",
							content: "您没有绑定京东账号,请绑定后再领取",
							success:function(res){
								if (res.confirm) {
									that.goJdLogin()
								}
							}
						});
						// uni.navigateTo({
						// 	url: '/pages/binding/index?url=/pages/main&index=0'
						// })
						return;
					}
					
					let opts = {
						url: '/app/user/info',
						method: 'get'
					}
					that.http.httpTokenRequest(opts, {}).then(res => {
						if (res.data.code == 200) {
							let freeMoveFlag = res.data.data.freeMoveFlag
							if (freeMoveFlag) {
								uni.hideLoading()
								// uni.showToast({
								// 	title: "您的免费领取次数已用完",
								// 	icon: 'none',
								// 	duration: 2000,
								// 	success:function(){
										
								// 	}
								// });
								this.pooupCoupon = true
								this.timer = setInterval(()=>{
									if(this.timerNum > 0){
										this.timerNum  --
									}else{
										this.pooupCoupon = false
										this.timerNum = 3
										this.clickState = false
										uni.navigateToMiniProgram({
											appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
											path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
											extraData: { // 需要携带的参数
												
											},
											success(res) {
												// 打开成功
											}
										})
										clearInterval(this.timer)
									}
								},1000)
							} else {
								//跳转到领取优惠卷页面
								// uni.navigateTo({
								// 	url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id
								// });
								// uni.showLoading({
								// 	title: '加载中'
								// });
								setTimeout(()=>{
									this.getCarList()
								},500)
							}
						}else{
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								icon: "error",
							});
						}
					})
				}
			},
			closeCoupon(){
				this.pooupCoupon = false
				this.timerNum = 3
				this.clickState = false
				clearInterval(this.timer)
			},
			// 已领取优惠券按钮
			goBuy(){
				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.pooupCoupon = false
					},
					fail:()=>{
						this.pooupCoupon = false
					}
				})
			},
			getMoveCode() {
				let opts = {
					url: '/app/index/free/code',
					method: 'get'
				};
				this.http.httpRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.freeCode = res.data.data
					}
				})
			},
			getRotationList() {
				let opts = {
					url: '/app/index/carouse/1',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						let data = []
						data = res.data.data
						let imgList = []
						data.forEach(e => {
							imgList.push(e)
						})
						this.list5 = imgList
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						});
					}
				})
			},
			// 轮播跳转其他页面
			goOtherLink(index) {
				let item = this.list5[index]
				let link = item.link;
				if(link) {
					if (item.remark == 'jdh5') {
						// uni.navigateTo({
						// 	url: '/pages/webview/webview?url=' + link
						// })
						util.redirectToH5({page:link})
						return
					}
					uni.navigateTo({
						url: link
					})
				}
			},
			// 获取爱车列表
			getCarList(){
				let opts = { url: '/app/vehicleAdmin/list', method: 'get' };
				this.http.httpTokenRequest(opts, {}).then(res => {
					uni.hideLoading()
					if (res.statusCode == 200) {
						this.carList = res.data
						if(res.data.length == 0){
							uni.navigateTo({
								url: '/pages/transitionPage',
								success:()=>{
									this.clickState = false
								}
							});
							uni.setStorageSync('firstCoupon',true)
							// let url = "car.m.jd.com/h5/list.html?final-action=closewebview&source=licenseprocedure"
							// util.redirectToH5({page:url})
						}else{
							// uni.navigateTo({
							// 	url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id
							// });
							uni.navigateTo({
								url: '/pagesA/pages/index/getCoupon',
								success:()=>{
									this.clickState = false
								}
							});
						}
					}else{
						this.clickState = false
					}
				})
			},
		},
		created() {
			// this.getMoveCode()
			this.getRotationList()
		},
		mounted() {
			setTimeout(() => {
				this.show = true
			}, 100);
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: '友众挪车牌'
			});
		}
	};
</script>

<style lang="scss">
	.index-content {
		.head{
			width:100%;height:1477rpx;
			padding:530rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			>image{
				position: absolute;
				top:0;left:0;
				width:100%;height:100%;
			}
			.swiper{
				box-sizing: border-box;
				padding:0 16rpx;
				position: relative;
				border-radius:16rpx;
				>image{
					position: absolute;
					top:-12px;left:-17rpx;
					width:744rpx;height:161px;
				}
			}
		}

		background-color: #f9f9f9;

		.u-swiper {
			border-radius: 0 0 0 100rpx !important;
		}

		.indicator {
			@include flex(row);
			justify-content: center;
			position: absolute;
			right:240rpx; bottom:0rpx;

			&__dot {
				height: 20rpx;
				width: 20rpx;
				border-radius: 100%;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 10rpx;
				transition: background-color 0.3s;

				&--active {
					background-color: #e1251b;
				}
			}
		}

		.indicator-num {
			padding: 4rpx 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100%;
			width: 35px;
			text-align: right;
			@include flex;
			justify-content: center;

			&__text {
				color: #ffffff;
				font-size: 24rpx;
			}
		}
		
		.banner{
			width:100%;
			margin-top:70rpx;
			position: relative;
			.banner-img,
			.banner-btn{
				margin: 0 auto;
				position: relative;
				image{
					position: absolute;
					top:0;left:0;
					width:100%;height:100%;
				}
				view,text{
					position: relative;
				}
			}
			.banner-img{
				width: 710rpx ;height:542rpx;
				box-sizing: border-box;
				padding:100rpx 80rpx 0;
				display:flex;
				justify-content: space-between;
				.left{
					width: 260rpx;height:360rpx;
				}
				.right{
					width: 260rpx;height:360rpx;
				}
				>view{
					.banner-btn{
						width:200rpx;height:66rpx;
						font-weight: bold;
						color: #674600;
						top:280rpx;left:-2rpx;
						font-size: 30rpx;
						text-align: center;
						line-height:66rpx;
					}
				}
			}
			
			.banner-other{
				position: absolute;
				right:-22rpx;top:-90rpx;
				>view{
					&:first-child{
						width: 172rpx;height:140rpx;
					}
					&:last-child{
						margin-top:20rpx;
						margin-left:34rpx;
						width: 120rpx;height:112rpx;
					}
					image{
						width:100%;height:100%;
					}
				}
			}
		}
		
		.bg-img{
			width:100%;
			image{
				width:100%;height:4420rpx;
			}
		}
		
		// 弹框
		.pooup-get-coupon{
			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;
			.coupon-box{
				width:500rpx;height:620rpx;
				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;
				}
				.title{
					width:100%;
					position: absolute;
					bottom:180rpx;left:0;
					font-size: 32rpx;
				}
				.coupon-btn{
					width:360rpx;height:80rpx;
					line-height:80rpx;
					position: absolute;
					bottom:64rpx;left:50%;
					margin-left:-170rpx;
					border-radius:50rpx;
					font-size: 36rpx;
					font-weight: bold;
					background: linear-gradient(0deg, #F72B43, #F15C43);
					color:#fff;
				}
			}
		}
	}
</style>
