<template>
	<div class="body">
		<!-- 选择类型 -->
		<div class="head">
			<template v-if="headimgurl != null && headimgurl != ''">
				<img :src="headimgurl" alt="">
			</template>
			<template v-else>
				<img src="../assets/images/foot_icon1.png" alt="">
			</template>

			<div>
				<p>姓名：{{ user.name }}</p>
				<p>{{ user.phone }}</p>
			</div>
			<!-- <img style="width: 100%;border-radius: 0px;margin-top: .4rem;" src="../assets/images/my_banner.png" alt=""> -->
		</div>
		<div class="list">
			<router-link to="/Personinfomation">
				<img src="../assets/images/my_icon1.png" alt="">
				<span>个人信息</span>
			</router-link>
			<!-- <router-link to="/Search">
				<img src="../assets/images/my_icon2.png" alt="">
				<span>我的快件</span>
			</router-link> -->
			<!-- <router-link to="/Audit">
				<img src="../assets/images/my_icon2.png" alt="">
				<span>审核</span>
			</router-link> -->
			<!-- <router-link to="/Appointmentlist">
        <img src="../assets/images/my_icon3.png" alt="">
        <span>客服</span>
      </router-link> -->
			<router-link :to="{ path: 'Myaddressbook', query: { active: 1 } }">
				<img src="../assets/images/my_icon4.png" alt="">
				<span>地址簿维护</span>
			</router-link>
			<!-- <router-link to="/SuggestList">
				<img src="../assets/images/my_icon5.png" alt="" style="">
				<span v-if="notReadNo > 0"
					style="font-size: .2rem;text-align:center;color: white;position: absolute;left: 0.3rem;top: 0.15rem;border-radius: 50%;background: red;width: 0.28rem;line-height: 0.28rem;">{{ notReadNo }}</span>
				<span>意见建议</span>
			</router-link> -->
			<router-link to="/Setting">
				<img src="../assets/images/my_icon6.png" alt="">
				<span>设置</span>
			</router-link>
		</div>
		<!-- 底部 -->
		<tabbar></tabbar>
	</div>

</template>

<script>
import { getUserByUserId } from '../api/index'
export default {
	data() {
		return {
			userId: "",
			user: {},
			headimgurl: '',
			notReadNo: '',//未查看数量（意见建议）
		};
	},
	created: function () {
		this.userId = localStorage.getItem("userId");
		this.headimgurl = localStorage.getItem('headimgurl');
		this.getUserByUserIdAPI()
	},
	methods: {
		//寄件人的信息
		async getUserByUserIdAPI() {
			const res = await getUserByUserId({ id: localStorage.getItem("userId") })
			this.user = res.userInfo
			console.log(res, 'res')
		},
		//跳转
		getSuggestList() {
			this.$http.post(this.$store.state.host + "/solic/getSuggestList.do", {
				userId: this.userId
			}, { emulateJSON: true })
				.then(res => {
					//发送成功
					if (res.body.msg == 'success') {
						this.notReadNo = res.body.notReadNo;
					}
				}, res => {
					//发送失败
				})
		}

	}
};
</script>

<style lang="less" scoped>
body {
	background: #fbfbfb;
}

.body {
	padding-bottom: 1.5rem;

	.head {
		padding: .43rem .38rem;
		font-size: .24rem;
		color: #999;
		display: flex;
		background: white;
		flex-wrap: wrap;
		position: relative;

		img {
			width: 1.48rem;
			height: 1.48rem;
			border-radius: 50%;
			margin-right: .4rem;
		}

		div {
			p:nth-of-type(1) {
				font-size: .36rem;
				font-weight: bold;
				color: #333;
				margin-bottom: .2rem;
				padding-top: .3rem;
			}
		}

		div:after {
			content: "";
			display: block;
			width: .2rem;
			height: .2rem;
			border-left: .01rem solid #333;
			border-top: .01rem solid #333;
			transform: rotate(135deg);
			position: absolute;
			right: .38rem;
			top: 1rem;
		}
	}

	.list {
		background: white;
		margin-top: .36rem;
		border-radius: .05rem;

		a {
			font-size: .3rem;
			font-weight: bold;
			display: block;
			color: #333;
			padding: .3rem .4rem;
			border-bottom: 1px solid #f4f3f3;
			position: relative;

			img {
				width: .4rem;
				height: .4rem;
			}

			span {
				position: relative;
				top: -.075rem;
				margin-left: .3rem;
			}
		}

		a:after {
			content: "";
			display: block;
			width: .2rem;
			height: .2rem;
			border-left: .01rem solid #b8b8b8;
			border-top: .01rem solid #b8b8b8;
			transform: rotate(135deg);
			position: absolute;
			right: .4rem;
			top: .4rem;
		}
	}
}
</style>
