JiaZhiQianYan/pages/mine/mine.vue

<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 v-if="userInfo" class="personalInfoC relative flex" :style="'margin-top:'+infoTop+'px;'" @click="clickPersonalInfo()">
			<image class="avatar" :src="userInfo.basic_info.avatar_url" mode="aspectFill"></image>
			<view class="flex1">
				<view class="nickname">{{userInfo.basic_info.username}}</view>
				<view class="mobile">手机号：{{userInfo.basic_info.phone}}</view>
			</view>
			<image class="arrow" src="/static/icon/mine/infoArrow.png" mode="widthFix"></image>
		</view>
		<view v-if="userInfo" class="numList relative flex">
			<view class="item flex1 flexColumnCenter" @click="clickNumItem(0)">
				<view class="num">{{userInfo.statistics.total_comments}}</view>
				<view class="title">评论回复</view>
			</view>
			<view class="item flex1 flexColumnCenter" @click="clickNumItem(1)">
				<view class="num">{{userInfo.statistics.follows_count}}</view>
				<view class="title">关注收藏</view>
			</view>
			<view class="item flex1 flexColumnCenter" @click="clickNumItem(2)"> 
				<view class="num">{{userInfo.statistics.likes_count}}</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,index)" >
					<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-2" open-type="contact"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { userInfo } from '@/request/api';
	
	export default {
		data() {
			return {
				menuTop:inject('menuTop'),
				menuH: inject('menuHeight'),
				infoTop:'',
				userInfo:null,
				menuList:[{
					icon:'/static/icon/mine/aboutUs.png',
					title:'关于我们',
					url:'/pages/mine/web/web?type=1'
				},
				{
					icon:'/static/icon/mine/serviceTerm.png',
					title:'服务条款',
					url:'/pages/mine/web/web?type=2'
				},
				{
					icon:'/static/icon/mine/privacyProtocol.png',
					title:'隐私协议',
					url:'/pages/mine/web/web?type=3'
				},
				{
					icon:'/static/icon/mine/feedback.png',
					title:'意见反馈',
					url:'/pages/mine/feedback/feedback'
				},
				{
					icon:'/static/icon/mine/customerService.png',
					title:'联系客服',
				},
				{
					icon:'/static/icon/mine/logout.png',
					title:'退出登录',
				}]
			}
		},
		onLoad() {
			this.infoTop = inject('navHeight')+32/750*inject('windowWidth')
		},
		onShow() {
			this.getUserInfoData()
		},
		methods: {
			/**
			 * 点击查看个人信息
			 */
			clickPersonalInfo()
			{
				uni.navigateTo({
					url:'/pages/mine/basicInfo/basicInfo'
				})
			},
			/**
			 * 点击vip
			 */
			clickVip()
			{
				uni.navigateTo({
					url:'/pagesMine/vip/vip'
				})
			},
			/**
			 * 查看评论收藏点赞
			 * @param {Object} index
			 */
			clickNumItem(index)
			{
				if(index==0)
				{
					//评论回复
					uni.navigateTo({
						url:'/pages/mine/commentReply/commentReply'
					})
				}else if(index==1)
				{
					//关注收藏
					uni.navigateTo({
						url:'/pages/mine/followCollect/followCollect'
					})
				}else 
					//我的点赞
					uni.navigateTo({
						url:'/pages/mine/myLike/myLike'
					})
			},
			clickMenuItem(url,index)
			{
				if(url)
				{
					uni.navigateTo({
						url
					})
				}else if(index==this.menuList.length-1)
				{
					uni.showModal({
						title:'您确定要退出登录么',
						success(res) {
							if(res.confirm)
							{
								uni.removeStorageSync('token')
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						}
					})
				}
			},
			/**
			 * 获取用户信息数据
			 */
			getUserInfoData()
			{
				userInfo().then(res=>{
					if(res.code==200)
					{
						this.userInfo = res.data
					}else 
						wx.showToast({
							title:res.message,
						})
				}).catch(error=>{
					
				})
			}	
		}
	}
</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>