<template>
	<view class="userInfo">
		<headers :showBack="true">
			<view class="headerName">
				个人中心
			</view>
		</headers>
		<view class="userBox">
			<image class="userImg" src="@/static/userImg.png"></image>
			<span v-if="uid">{{userInfo.realName}}</span>
			<span v-else>{{userInfo.account}}</span>
		</view>
		<view class="userInfo-boxs">
			<view class="userInfo-box">
				<view>账号名称</view>
				<view>{{uid ? userInfo.realName : userInfo.account}}</view>
			</view>
			<view class="userInfo-box">
				<view>电子邮箱</view>
				<view>{{userInfo.personMail ? userInfo.personMail : '暂无邮箱'}}</view>
			</view>
			<view class="userInfo-box" @click="goChangePassword()">
				<view>修改密码</view>
				<view><uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2></view>
			</view>
		</view>
	</view>
</template>

<script>
	import headers from '../../../components/headers/headers.vue'
	export default {
		components: {
			headers
		},
		data() {
			return {
				userInfo:{},
				ui:"",
			}
		},
		onLoad() {
			this.uid = uni.getStorageSync('UID');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.log(this.userInfo);
		},
		methods: {
			goChangePassword() {
				console.log(11);
				uni.navigateTo({
					url: '/pages/my/changePassword/changePassword',
				})
			},
		}
	}
</script>

<style scoped>
	.userInfo{
		background-color: #F4F5FE;
		height: 100vh;
	}

	.userBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40px 20px;
		font-size: 20px;
		background-color: white;
	}
	
	.userImg {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		/* margin-right: 10px; */
	}
	
	.userInfo-boxs {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		background-color: white;
	}
	
	.userInfo-box {
		height:58px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}
	
	.userInfo-boxs>.userInfo-box:nth-child(:last-child) {
		border-bottom: 1px solid #F4F5FE;
	}
</style>
