<template>
	<view>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
		<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">个人中心</view>
		<view class="personalInfoC relative flex" :style="'margin-top:'+infoTop+'px;'" @click="clickPersonalInfo()">
			<image class="avatar" src="" mode="aspectFill"></image>
			<view class="flex1">
				<view class="nickname">星河滚烫的理想</view>
				<view class="mobile">手机号：13654800065</view>
			</view>
			<image class="arrow" src="/static/icon/mine/infoArrow.png" mode="widthFix"></image>
		</view>
		<view class="numList relative flex">
			<view class="item flex1 flexColumnCenter" @click="clickNumItem(0)">
				<view class="num">1</view>
				<view class="title">评论回复</view>
			</view>
			<view class="item flex1 flexColumnCenter" @click="clickNumItem(1)">
				<view class="num">1</view>
				<view class="title">关注收藏</view>
			</view>
			<view class="item flex1 flexColumnCenter" @click="clickNumItem(2)"> 
				<view class="num">1</view>
				<view class="title">我的点赞</view> 
			</view>
		</view>
		<view class="vipC relative" @click="clickVip()"> 
			<image class="icon" src="/static/image/mine/vipBg.png" mode="widthFix"></image>
		</view> 
		<view class="menuList relative"> 
			<view class="list"> 
				<view class="item relative flex" v-for="(item,index) in menuList" :key="index" @click="clickMenuItem(item.url)" >
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<view class="title flex1">{{item.title}}</view>
					<image class="arrow" src="/static/icon/mine/menuArrow.png" mode="widthFix"></image>
					<button class="absolute" v-if="index==menuList.length-1" open-type="contact"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	
	export default {
		data() {
			return {
				menuTop:inject('menuTop'),
				menuH: inject('menuHeight'),
				infoTop:'',
				menuList:[{
					icon:'/static/icon/mine/aboutUs.png',
					title:'关于我们',
				},
				{
					icon:'/static/icon/mine/serviceTerm.png',
					title:'服务条款',
				},
				{
					icon:'/static/icon/mine/privacyProtocol.png',
					title:'隐私协议',
				},
				{
					icon:'/static/icon/mine/feedback.png',
					title:'意见反馈',
					url:'/pages/mine/feedback/feedback'
				},
				{
					icon:'/static/icon/mine/accountSetting.png',
					title:'账户设置',
				},
				{
					icon:'/static/icon/mine/customerService.png',
					title:'联系客服',
				}]
			}
		},
		onLoad() {
			this.infoTop = inject('navHeight')+32/750*inject('windowWidth')
		},
		methods: {
			/**
			 * 点击查看个人信息
			 */
			clickPersonalInfo()
			{
				uni.navigateTo({
					url:'/pages/mine/basicInfo/basicInfo'
				})
			},
			/**
			 * 点击vip
			 */
			clickVip()
			{
				uni.navigateTo({
					url:'/pages/mine/vip/vip'
				})
			},
			/**
			 * 查看评论收藏点赞
			 * @param {Object} index
			 */
			clickNumItem(index)
			{
				if(index==0)
				{
					//评论回复
					uni.navigateTo({
						url:'/pages/mine/commentReply/commentReply'
					})
				}else if(index==1)
				{
					
				}
			},
			clickMenuItem(url)
			{
				if(url)
				{
					uni.navigateTo({
						url
					})
				}
			}
			
		}
	}
</script>

<style lang="less">
.topBg 
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.navTitle 
{
	left: 0;
	margin: 0 23rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: white;
}
.personalInfoC
{
	padding: 0 25rpx 0 30rpx;
	.avatar 
	{
		margin-right: 11rpx;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		border: solid 3rpx white;
	}
	.nickname
	{
		font-size: 32rpx;
		font-weight: bold;
		color: white;
	}
	.mobile 
	{
		margin-top: 6rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFECD3;
	}
	.arrow 
	{
		width: 15rpx;
		height: auto;
	}
}
.numList 
{
	.item 
	{
		padding: 25rpx 0;
		.num
		{
			font-size: 48rpx;
			font-weight: 800;
			color: white;
		}
		.title 
		{
			font-size: 24rpx;
			font-weight: 500;
			color: #FFECD3;
		}
	}
}
.vipC 
{
	padding: 0 25rpx;
	.icon 
	{
		display: block;
		width: 100%;
		height: auto;
	}
}
.menuList
{
	background-color: white;
	padding: 0 25rpx;
	border-radius: 20rpx 20rpx 0 0;
	.item 
	{
		height: 100rpx;
		padding: 0 18rpx 0 20rpx;
		border-bottom: solid 1rpx #F7F7F7;
		font-size: 28rpx;
		color: #222;
		.icon 
		{
			margin-right: 16rpx;
			width: 44rpx;
			height: 44rpx;
		}
		.arrow 
		{
			width: 11rpx;
			height: auto;
		}
		button 
		{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
