<template>
	<view class="home">
		<view class="bg">
			<image src="../../static/common/bg.png" style="width: 100%;height: 100%"></image>
		</view>

		<view :style="{height: paddingTop}"></view>

		<!-- <view class="mg-lr-24" v-if="tokenFlag"> -->
		<view class="mg-lr-24">
			<view class="u-f u-f-jcsb u-f-aic mg-bot-50" @click="goDetail('/pagesE/home-set/home-set')">
				<view class="u-f u-f-aic u-f-jcc">
					<image class="mg-right-10" v-if="!userInfo.avatarUrl" src="../.././static/common/un_login.png"
						style="width: 110rpx;height: 110rpx;"></image>
					<image class="mg-right-10" v-else :src="userInfo.avatarUrl" style="width: 110rpx;height: 110rpx;">
					</image>
					<view class="u-f u-f-fdc" v-if="User.token">
						<text class="fs36 fw600 mg-bot-16">{{userInfo.nickName || ''}}</text>
						<text class="fs28 deep-gray">{{userInfo.phoneNumber || ''}}</text>
					</view>
					<view class="u-f u-f-fdc" v-else>
						<text class="fs36 fw600 mg-bot-16">注册/登录</text>
					</view>
				</view>
				<view class="big-gray-right-arrow"></view>
			</view>

			<view class="u-f u-f-jcfs u-f-aic mg-bot-24">
				<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
					@click="goDetail('/pagesE/home-jifen/home-jifen')">
					<view class="u-f u-f-fdc u-f-aic light-black">
						<text class="fs28 fw600 mg-bot-10">{{userInfo.points || 0 }}</text>
						<text class="fs24">积分</text>
					</view>
				</view>
				<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
					@click="goDetail('/pagesE/home-youhuiquan/home-youhuiquan')">
					<view class="u-f u-f-fdc u-f-aic light-black">
						<text class="fs28 fw600 mg-bot-10">{{userInfo.coupon || 0 }}</text>
						<text class="fs24">优惠券</text>
					</view>
				</view>
				<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
					@click="goDetail('/pagesB/home-shoucang/home-shoucang')">
					<view class="u-f u-f-fdc u-f-aic light-black">
						<text class="fs28 fw600 mg-bot-10">{{userInfo.collect || 0 }}</text>
						<text class="fs24">收藏</text>
					</view>
				</view>
				<view class="u-f u-f-aic u-f-jcc" style="width: 25%;" @click="goDetail('/pagesB/home-zuji/home-zuji')">
					<view class="u-f u-f-fdc u-f-aic light-black">
						<text class="fs28 fw600 mg-bot-10">{{userInfo.footprint || 0}}</text>
						<text class="fs24">足迹</text>
					</view>
				</view>
			</view>

			<view class="current-stage mg-bot-20" v-if="vipInfo"
				@click="goDetail('/pagesA/gradeOfMembership/gradeOfMembership')">
				<image v-if="vipInfo.memberName =='普通会员' || vipInfo.memberName =='黄金会员'"
					style="width: 702rpx; height: 260rpx;" src="../../static/demo/huiyuandengji.png" mode=""></image>
				<image src="/static/huiyuan2.png" v-else mode="" style="width: 702rpx; height: 340rpx;"></image>
				<view class="current-stage-desc mg-bot-10"
					:style="{color : vipInfo.memberName == '铂金会员' ? '#66bef9' :'#b2744c'}">当前等级</view>
				<view class="current-stage-text mg-bot-10"
					:style="{color : vipInfo.memberName == '铂金会员' ? '#66bef9' :'#b2744c'}">{{vipInfo.memberName}}</view>
				<view class="current-state-date mg-bot-10"
					:style="{color : vipInfo.memberName == '铂金会员' ? '#66bef9' :'#b2744c'}">
					会员有效期至{{vipInfo.expirationTime}}结束</view>
				<view class="gold-btn u-f u-f-jcfs u-f-aic"
					:style="{background : vipInfo.memberName == '铂金会员' ? 'linear-gradient(263deg, #66bef9 0%, #63eef2 100%);' :'linear-gradient(263deg, #B46D43 0%, #E88045 100%);'}">
					<text class="mg-right-10">查看详情</text>
					<text class="white-right-arrow"></text>
				</view>
			</view>

			<view class="vipBox" v-else @click="goDetail('/pagesA/gradeOfMembership/gradeOfMembership')">
				<image class="vipBg" src="/static/demo/vipBg.png" mode=""></image>
				<view class="vipBoxL">
					<div class="title">
						会员中心
					</div>

					<div class="subTitle">
						登录享会员专享权益
					</div>
				</view>

				<div class="vipBoxR">
					查看详情
				</div>
			</view>

			<view class="mg-bot-20 white-bg-wrap">
				<view class="mg-bot-56 u-f u-f-jcsb u-f-aic"
					@click="goDetail(`/pagesA/order-center/order-center?activeTab=${'all'}&tabIndex=${''}`)">
					<text class="light-black fw600 fs28">订单中心</text>
					<view class="u-f u-f-jcfs u-f-aic">
						<text class="light-gray fs24 mg-right-10">全部</text>
						<image src="/static/common/sg_right_arrow.png" class="small-gray-right-arrow"></image>
					</view>
				</view>
				<view class="u-f u-f-jcsb u-f-aic">
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
						@click="goDetail(`/pagesA/order-center/order-center?activeTab=${'unPay'}&tabIndex=${'0'}`)">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 50rpx;height: 50rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/unpay.png"></image>
							</view>
							<text class="fs24">待付款</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
						@click="goDetail(`/pagesA/order-center/order-center?activeTab=${'unUse'}&tabIndex=${'2'}`)">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 50rpx;height: 50rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/unuse.png"></image>
							</view>
							<text class="fs24">待使用</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
						@click="goDetail(`/pagesA/order-center/order-center?activeTab=${'unEvaluate'}&tabIndex=${'4'}`)">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 50rpx;height: 50rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/unpingjia.png"></image>
							</view>
							<text class="fs24">待评价</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
						@click="goDetail(`/pagesA/order-center/order-center?activeTab=${'backMoney'}&tabIndex=${'5'}`)">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 50rpx;height: 50rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/unfahuo.png"></image>
							</view>
							<text class="fs24">退款/售后</text>
						</view>
					</view>
				</view>
			</view>

			<view class="mg-bot-20 white-bg-wrap" @click="goPages('/pagesA/GroupPurchaseOrder/GroupPurchaseOrder')">
				<view class="u-f u-f-jcsb u-f-aic">
					<text class="light-black fw600 fs28">团购订单</text>
					<view class="u-f u-f-jcfs u-f-aic">
						<text class="light-gray fs24 mg-right-10">全部</text>
						<image src="/static/common/sg_right_arrow.png" class="small-gray-right-arrow"></image>
					</view>
				</view>
			</view>

			<view class="mg-bot-20 white-bg-wrap">
				<view class="mg-bot-24 u-f u-f-jcsb u-f-aic">
					<text class="light-black fw600 fs28">常用功能</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic">
					<!-- <view class="u-f u-f-aic u-f-jcc" style="width: 25%;" @click="goPages('/pagesC/shop-car/shop-car')">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 90rpx;height: 90rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/shopL.png"></image>
							</view>
							<text class="fs24">购物车</text>
						</view>
					</view> -->
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
						@click="goPages('/pagesE/home-jifenshangcheng/home-jifenshangcheng')">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 90rpx;height: 90rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/jifen_shangcheng.png"></image>
							</view>
							<text class="fs24">积分商城</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;" @click="goPages('/pages/feedback/feedback1')">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 90rpx;height: 90rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/tousu_jianyi.png"></image>
							</view>
							<text class="fs24">投诉建议</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcc" style="width: 25%;"
						@click="goPages('/pages/groupOfCarFriends/groupOfCarFriends')">
						<view class="u-f u-f-fdc u-f-aic light-black">
							<view class="mg-bot-10 u-f u-f-jcc u-f-aic" style="width: 90rpx;height: 90rpx;">
								<image style="width: 100%;height: 100%" :mode="'widthFix'"
									src="../../static/common/cheyouqun.png"></image>
							</view>
							<text class="fs24">车友群</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mg-bot-20 white-bg-wrap"
				@click="goPages(`/pages/contactTheCustomerService/contactTheCustomerService`)">
				<view class="u-f u-f-jcsb u-f-aic">
					<text class="light-black fw600 fs28">联系客服</text>
					<image src="/static/common/sg_right_arrow.png" class="small-gray-right-arrow" :mode="'widthFix'">
					</image>
				</view>
			</view>
			<view class="mg-bot-20 white-bg-wrap" @click="goPages(`/pages/moreFunctions/moreFunctions`)">
				<view class="u-f u-f-jcsb u-f-aic">
					<text class="light-black fw600 fs28">更多功能</text>
					<image src="/static/common/sg_right_arrow.png" class="small-gray-right-arrow"></image>
				</view>
			</view>

			<!-- 广告栏开始 -->
			<view class="advertising" v-if="JSON.stringify(botPic) !== '{}'">
				<image mode="aspectFill" :src="botPic.advertisImage" @click="tolink" style="border-radius: 9rpx;">
				</image>
			</view>
			<!-- 广告栏结束 -->

		</view>
	</view>
</template>

<script>
	import {
		getCusNavBarInfo
	} from "../../common/customizeNavBarInfo.js"
	export default {
		data() {
			return {
				paddingTop: 0,
				userInfo: {
					avatarUrl: "",
					nickName: "",
					phoneNumber: "",
					points: 0,
					coupon: 0,
					collect: 0,
					footprint: 0
				},
				vipInfo: '',
				botPic: [],
				tokenFlag: false,
				memberInfo: true
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = (customizeNavBarHeight + 10) + 'px'
		},

		onShow() {
			if (this.User.token) {
				this.getmemberInfo()
				this.getUserInfo()
			}
			this.getBotPic()
		},

		methods: {
			//个人中心-个人信息
			getUserInfo() {
				this.$http.get('/api/client/userInfo/info').then(res => {
					this.userInfo = res.data.data
					this.User.setUserInfo(this.userInfo)
				})
			},

			//个人中心-会员权益
			getmemberInfo() {
				this.$http.get('/api/client/userInfo/memberInfo').then(res => {
					this.vipInfo = res.data.data
					// this.userInfo = res.data.data
				})
			},
			getBotPic() {
				this.$http.get('/api/client/index/carousel?type=3').then(res => {
					console.log(res);
					let resData = res.data.data || []
					this.botPic = resData[0] || {}
				})
			},
			goPages(url) {
				uni.navigateTo({
					url: url
				})
			},
			goDetail(url) {
				// uni.navigateTo({
				// 	url: url
				// })
				this.User.navigate({
					url: url
				}, "navigateTo", true)
			},
			tolink() {
				if (this.botPic.jumpType == 1) {
					//公众号
					uni.navigateTo({
						url: '/pages/link/link?url=' + this.botPic.jumpResources
					})
				} else if (this.botPic.jumpType == 2) {
					//小程序
					wx.navigateToMiniProgram({
						shortLink: this.botPic.jumpResources,
						envVersion: 'release',
						success(res) {
							// 打开成功
							console.log("跳转小程序成功！", res);
						}
					})

					// uni.navigateToMiniProgram({
					// 	appId: this.botPic.jumpResources, // 小程序appid
					// 	path: 'pages/index/index', // 打开的页面路径，可选
					// 	extraData: {
					// 		// 需要传递给小程序的数据，可选
					// 	},
					// 	success(res) {
					// 		// 打开成功的回调，可选
					// 		console.log('跳转成功');
					// 	},
					// 	fail(err) {
					// 		// 打开失败的回调，可选
					// 		console.log('跳转失败', err);
					// 	}
					// });
				} else if (this.botPic.jumpType == 4) {
					//链接
					uni.navigateTo({
						url: '/pages/link/link?url=' + encodeURIComponent(JSON.stringify(this.botPic
							.jumpResources))
					})
				}
			}
		},

	}
</script>

<style>
	page {
		background-color: #FAFAF9;
	}
</style>

<style lang="scss">
	.home {
		position: relative;

		.u-navbar__content__left {
			display: none !important;
		}

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 540rpx;
			z-index: -1;
		}
	}

	.big-gray-right-arrow {
		width: 26rpx;
		height: 26rpx;
		// background: url(../../static/maintenance/black_right-arrow.png) no-repeat center center;
		background-size: 50%;
	}

	.current-stage {
		width: 100%;
		position: relative;

		.current-stage-desc {
			font-size: 24rpx;
			position: absolute;
			left: 28rpx;
			top: 10rpx;
			color: #BF6500;
		}

		.current-stage-text {
			position: absolute;
			left: 56rpx;
			top: 74rpx;
			font-size: 36rpx;
			color: #BF6500;
			font-weight: bold;
		}

		.current-state-date {
			position: absolute;
			left: 56rpx;
			top: 124rpx;
			font-size: 24rpx;
			color: #BF6500
		}

		.gold-btn {
			padding: 6rpx 28rpx;
			position: absolute;
			left: 56rpx;
			bottom: 30rpx;
			color: #ffffff;
			background: linear-gradient(263deg, #B46D43 0%, #E88045 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.white-right-arrow {
				width: 16rpx;
				height: 16rpx;
				// background: url(../../static/common/white_right_arrow.png) no-repeat center center;
				background-size: 100%;
			}
		}
	}

	.small-gray-right-arrow {
		width: 8rpx;
		height: 16rpx;
	}

	.advertising {
		margin: 20rpx 12rpx 24rpx 12rpx;
		padding-bottom: 24rpx;
		height: 262rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.vipBox {
		height: 127rpx;
		position: relative;
		margin-bottom: 33rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx 0 46rpx;
		box-sizing: border-box;

		.vipBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 702rpx;
			height: 127rpx;
			z-index: -1;
		}

		.vipBoxL {
			.title {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 6rpx;
			}

			.subTitle {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.vipBoxR {
			width: 180rpx;
			height: 59rpx;
			background: #F9F9F9;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;
			color: #FF4502;
			text-align: center;
			line-height: 59rpx;
		}
	}
</style>