<template>
	<view>
		<view class="status"></view>
		<!-- 顶部菜单 -->
		<view class="height80 backcorltop">
			<view class="category-list">
				<view class="category" style="width: 25%;" v-for="(row, index) in categoryList" :key="index"
					@tap="toCategory(row)">
					<view class="img">
						<image :src="imageUrl+row.imgData"></image>
					</view>
					<view class="text fcorfff">{{ row.title }}</view>
				</view>
			</view>
		</view>
		<!-- 顶部活动图片 -->
		<image class="width100" mode="widthFix" :src="imagewxUrl+imgadres"></image>

		<!-- 顶部菜单 -->
		<view class="category-list backcorfff" style="margin-top: -5px;">
			<view class="category" style="width: 20%;" v-for="(row, index) in categoryList" :key="index"
				@tap="toCategory(row)">
				<view class="img">
					<image :src="imageUrl+row.imgData"></image>
				</view>
				<view class="text fcor333">{{ row.title }}</view>
			</view>
		</view>
		<!-- 消息 -->
		<view class="height120 backcorfff">
			<view class="height20 width100"></view>
			<view class="width92 message alijus">
				<swiper circular="true" autoplay="true" display-multiple-items="2" :vertical="true">
					<swiper-item class="alijus" v-for="(swiper,index) in swiperList" :key="swiper.id"
						@click="test(index)">
						<view class="width80p paddleft10 alijusstart">
							<view class="stus"></view>
							<view class="paddleft10 font14 fcor666 text1 width70">
								放松放松方放松放松方放松放松方</view>
							<view class="width25 font13 fcor999">40分钟前</view>
						</view>
						<view class="width20 alijus">
							<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="swiper mart20">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 加油专区 -->
		<view class="width90 mart20 alijusstart" @click="goGoodsList(2)">
			<view class="width70 font18 fcor333">
				加油专区
			</view>
			<view class="width30 font14 fotrt fcor666">更多</view>
		</view>
		<view class="width94 alijus mart20">
			<view class="backcorfff spcarea">
				<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
				<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
				<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
				<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
			</view>
			<view class="backcorfff spcarea">
				<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
				<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
				<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
				<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
			</view>
			<view class="backcorfff spcarea">
				<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
				<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
				<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
				<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
			</view>
		</view>
		<!-- 惠享生活 -->
		<view class="width90 mart20 alijusstart">
			<view class="width70 font18 fcor333">
				惠享生活
			</view>
		</view>
		<image class="width90 mart10" mode="widthFix" :src="imagewxUrl+imgadres1"></image>
		<view class="width90 alijusstart mart10">
			<image src="../../../static/img/home/home6.png" mode="widthFix" class="width31"></image>
			<image src="../../../static/img/home/home7.png" mode="widthFix" class="width31"></image>
			<image src="../../../static/img/home/home5.png" mode="widthFix" class="width31"></image>
		</view>
		<!-- 天天好券 -->
		<view class="width90 mart20 alijusstart">
			<view class="width70 font18 fcor333">
				天天好券
			</view>
			<view class="width30 font14 fotrt fcor666">更多</view>
		</view>
		<view class="width94 alijus mart20">
			<view class="backcorfff spcarea">
				<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
				<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
				<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
				<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
			</view>
			<view class="backcorfff spcarea">
				<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
				<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
				<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
				<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
			</view>
			<view class="backcorfff spcarea">
				<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
				<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
				<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
				<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
			<image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image>
		</wybPopup>
		<view class="height40"></view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		HandleCode,
		WXlogin,
		getCouponList,
		getTPigKFCToken,
		getTPigCinemaToken,
		getCacheParam,
		delCacheParam,
		getCmsContent,
		findByLatAndLng
	} from "../../../Utils/Api.js"; //您的api路径
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
	let app = getApp();
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				showHeader: true,
				isShowAuth: false,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				city: '',
				currentSwiper: 0,
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: '/home/home1.png',
				imgadres1: '/home/home2.png',
				imgadres2: 'jt.png',
				imgadres5: 'unionarea.png',
				imgadres3: '',
				imgadres4: 'cusservice.png',
				webUrl: '',
				// 轮播图片
				swiperList: [{
						id: 1,
						src: 'url1',
						img: 'banner2.png'
					},
					{
						id: 2,
						src: 'url2',
						img: 'banner3.png'
					}
				],
				//猜你喜欢列表
				productList: [],
				productListleg: '',
				goldproductList: [],
				goldproductListleg: '',
				loadingText: '正在加载...',
				pageNum: 1,
				pageSize: 6,
				// 分类菜单
				categoryList: [{
						'title': '在线加油',
						'imgData': 'onRefueling1.png'
					},
					{
						'title': '话费充值',
						'imgData': 'phonePay1.png'
					}, {
						'title': '积分专区',
						'imgData': 'petCoder.png'
					},
				],
				homeCateList: [{
						'title': '在线加油',
						'imgData': 'onRefueling2.png'
					},
					{
						'title': '话费充值',
						'imgData': 'phonePay2.png'
					},
				],
				//切换状态
				cpStuats: 1,
				jumpType: ''
			};
		},
		onShow() {
			let that = this;
			uni.getStorage({
				key: "user",
				success(e) {
					app.globalData.userInfo = e.data; //这就是你想要取的token
					uni.getStorage({
						key: 'token',
						success(e) {
							app.globalData.token = e.data;
						}
					})
					that.getCacheParam();
				}
			})
		},
		onLoad() {
			this.hqaddress();
		},
		methods: {
			//获取卡券ID
			getCacheParam() {
				let that = this;
				let params = {
					key: app.globalData.userInfo.phone
				}
				getCacheParam(params).then(res => {
					if (res.return_code == '000000' && res.return_data) {
						let datas = res.return_data;
						uni.showModal({
							title: '优惠券领取',
							content: '前往领取优惠券',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '../../goods/externalCoupon/externalCoupon?id=' +
											datas
									})
									that.delCacheParam();
								} else if (res.cancel) {
									console.log('用户点击取消');
									that.delCacheParam();
								}
							}
						});
					}
				})
			},
			// 删除存的卡券
			delCacheParam() {
				let params = {
					key: app.globalData.userInfo.phone
				}
				delCacheParam(params).then(res => {

				})
			},
			test(item) {
				uni.navigateTo({
					url:'../../user/news/news'
				})
			},
			//定位信息
			hqaddress() {
				let that = this;
				upsdk.pluginReady(function() {
					upsdk.getLocationCity({
						success: function(cityCd) {
							app.globalData.cityId = cityCd;
							that.getCmsAactibity();
							that.getCouponListArea();
							that.getCmsContent();
							that.getCmsContentcmshome();
							that.getCmsContentcmsContent();
						},
						fail: function(err) {}
					});
					upsdk.getLocationGps({
						success: function(res) {
							switch (uni.getSystemInfoSync().platform) {
								case 'android':
									let zuob = JSON.parse(res);
									app.globalData.latitude = zuob.latitude;
									app.globalData.longitude = zuob.longitude;
									that.findByLatAndLng(zuob.longitude,zuob.latitude);
									break;
								case 'ios':
									app.globalData.latitude = res.latitude;
									app.globalData.longitude = res.longitude;
									that.findByLatAndLng(res.longitude,res.latitude);
									break;
							}

						},
						fail: function() {}
					});
				});
			},
			//经纬度转换
			findByLatAndLng(item, item1) {
				let datas = {
					lng: item,
					lat: item1
				}
				findByLatAndLng(datas).then(res => {
					if (res.return_code == '000000') {
						// res.return_data.provinceName
						app.globalData.cityName = res.return_data.provinceName;
						app.globalData.qianzhuCityName = res.return_data.cityName;
						app.globalData.cityId = res.return_data.regionId;
						// app.globalData.cityId = '520000';
						app.globalData.companyId = res.return_data.companyId;
					}
				});
			},
			//获取首页功能
			getCmsContentcmsContent() {
				let params = {
					regionId: app.globalData.cityId,
					categoryCode: 'CMS_UNIONPAY_IMG'
				}
				getCmsContent(params).then(res => {
					if (res.return_code == '000000') {
						this.homeCateList = res.return_data;
					}
				});
			},
			//获取首页菜单
			getCmsContentcmshome() {
				let params = {
					regionId: app.globalData.cityId,
					categoryCode: 'CMS_UNIONPAY_FAST'
				}
				getCmsContent(params).then(res => {
					if (res.return_code == '000000') {
						this.categoryList = res.return_data;
					}
				});
			},

			//获取弹出或者弹窗
			getCmsContent() {
				let params = {
					regionId: app.globalData.cityId,
					categoryCode: 'CMS_UNIONPAY_BANNER'
				}
				getCmsContent(params).then(res => {
					if (res.return_code == '000000') {
						this.swiperList = res.return_data;
					}
				});
			},
			getCmsAactibity() {
				uni.showToast({
					title: '加载中...'
				})
				let params = {
					regionId: app.globalData.cityId,
					categoryCode: 'CMS_UNIONPAY_ALERT'
				}
				getCmsContent(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data != '') {
						//弹窗首页广告
						this.showPopup();
						this.imgadres3 = res.return_data[0].imgData;
						this.webUrl = res.return_data[0].ext1;
						this.jumpType = res.return_data[0].jumpType;
					}
				});
			},
			//显示弹出
			showPopup() {
				this.$refs.popup.show();
			},
			close() {
				this.isShowAuth = false;
			},
			//关闭弹窗
			closePopup() {
				this.$refs.popup.hide();
			},

			/**
			 * 跳转外链
			 */
			jumpWeb() {
				if (this.jumpType == 1) {
					if (this.webUrl) {
						uni.navigateTo({
							url: '../order/webUrl/webUrl?url=' + this.webUrl
						})
					}
				} else {
					uni.navigateTo({
						url: this.webUrl
					})
				}

				this.closePopup();
			},
			//搜索跳转
			toSearch() {
				uni.navigateTo({
					url: '../../goods/HM-search/HM-search'
				})
			},
			//跳转位置
			goPostion() {
				uni.navigateTo({
					url: '/pages/user/positioning/positioning'
				})
			},
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '../../goods/goods?id=' + e
				});
			},
			//银联赠券卡券列表
			getCouponListArea() {
				let params = {
					regionId: app.globalData.cityId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					displayArea: 3
				}
				getCouponList(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list) {
						this.productList = res.return_data.list;
						if (res.return_data.total > 4) {
							this.productListleg = 4;
							return;
						}
						this.productListleg = res.return_data.total;
					}
				})
			},
			//积分卡券列表
			getCouponListgold() {
				let params = {
					regionId: app.globalData.cityId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					displayArea: 2
				}
				getCouponList(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list) {
						this.goldproductList = res.return_data.list;
						this.goldproductListleg = res.return_data.total;
						if (res.return_data.total > 4) {
							this.goldproductListleg = 4;
							return;
						}
						this.goldproductListleg = res.return_data.total;
					}
				})
			},
			//拨打客服电话
			playPhone() {
				uni.showModal({
					title: '客服',
					content: '4006780738',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '4006780738', //电话号码
								success: function(e) {
									console.log(e);
								},
								fail: function(e) {
									console.log(e);

								}
							})
						}
					}
				})
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			eheckStu(item) {
				this.cpStuats = item;
			},
			//轮播跳转活动
			jumplottery(item) {
				if (item.ext1) {
					uni.navigateTo({
						url: item.ext1
					})
				}
			},
			//单独跳转话费充值
			jumphuafei(item) {
				uni.navigateTo({
					url: item.ext1
				})
			},
			//调整商品列表
			goGoodsList(item) {
				uni.navigateTo({
					url: '/pages/goods/goods-list/goods-list?id=' + item
				})
			},
		},

	};
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.status {
		width: 100%;
		height: 44px;
		background-color: #6fbdee;
	}
	
	.popImg {
		width: 100%;
		height: 430px;
	}
	
	.h5xfimg {
		width: 80rpx;
		bottom: 140rpx;
		position: fixed;
		right: 40rpx;
	}
	
	.xfimg {
		width: 80rpx;
		bottom: 60rpx;
		position: fixed;
		right: 40rpx;
	}
	
	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64, ') format('woff2');
	}
	
	button::after {
		border: none
	}
	
	.pullDown-effects {
		position: fixed;
		//top: calc(100upx - 36vw);
		top: 0;
		z-index: 9;
		width: 100%;
		height: 36vw;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);
	
		/*  #endif  */
		image {
			width: 100%;
			height: 36vw;
		}
	}
	
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	
	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		background-color: #3da7e7;
		top: 0;
		z-index: 10;
	
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
	
		.addr {
			width: 120upx;
			height: 45rpx;
			flex-shrink: 0;
			display: flex;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			align-items: center;
			font-size: 28upx;
			color: #FFFFFF;
	
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
	
		.input-box {
			width: 100%;
			height: 70rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			align-items: center;
	
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
	
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
				width: 100%;
			}
		}
	
		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			margin-left: 5px;
			display: flex;
	
			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 42upx;
				background-color: transparent;
			}
		}
	}
	
	//弹窗
	button::after {
		border: none
	}
	
	.category-list {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	
		.category {
			margin-top: 40upx;
			display: flex;
			flex-wrap: wrap;
	
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
	
				image {
					width: 9vw;
					height: 9vw;
				}
			}
	
			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
			}
		}
	}
	
	
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
	
		.swiper-box {
			width: 92%;
			height: 100px;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
	
			swiper {
				width: 100%;
				height: 100px;
	
				swiper-item {
					image {
						width: 100%;
						height: 100px;
					}
				}
			}
		}
	}
	
	.spcarea {
		width: 31%;
		margin-right: auto;
		margin-left: auto;
		border-radius: 10px 10px 0px 0px;
		padding-bottom: 10px;
	}
	
	.message {
		border: 1px solid #f1f1f1;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		z-index: 1;
		padding-top: 5px;
		padding-bottom: 5px;
	
		swiper {
			width: 100%;
			height: 60px;
	
			swiper-item {
				view {
					height: 20px;
				}
			}
		}
	
		.stus {
			width: 5px;
			height: 5px;
			background-color: red;
			border-radius: 50%;
		}
	}
</style>
