<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.expressName }}</p>
				<p>{{ user.expressPhone }}</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="/Forgetpassword">
				<img src="../assets/images/my_icon6.png" alt="">
				<span>修改密码</span>
			</router-link>
		</div>
		<div class="btn">
			<van-button color="#00c4b8" @click="loginout">退出登录</van-button>
		</div>
		<tabbar></tabbar>
	</div>
</template>

<script>
export default {
	data() {
		return {
			titlename: "我的",
			userId: "",
			user: {},
			headimgurl: '',
			active: 1,
		};
	},
	created: function () {

		this.userId = localStorage.getItem("courierUserId");
		console.log('userId:' + this.userId);
		// this.getUser();
		this.user = this.$store.state.user

		this.headimgurl = localStorage.getItem('headimgurl');
	},
	methods: {
		//退出登录
		loginout() {
			localStorage.removeItem("courierUserId");
			localStorage.removeItem("courierOpenid");
			this.$router.push('/Login')

			// 配置一下  环境
		},

		my() {
			this.$router.push('/')
		}
	}
};
</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;
		}

	}

	.btn {
		padding: 0px .37rem;

		button {
			width: 100%;
			color: white;
		}
	}
}

.van-icon {
	background-color: #00c4b8;
	border-color: #00c4b8;
}
</style>
