courier_mobile_front/src/pages/my.vue

<template>
	<div class="body">
    <!-- 选择类型 -->
    <back :title="titlename"></back>
    <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="/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>
	</div>

</template>

<script>
export default {
    data() {
      return {
        titlename:"我的",
        userId:"",
        user:[],
        headimgurl:''
      };
    },
    created:function(){
		this.isLogin();
		this.userId = localStorage.getItem("userId");
    console.log('userId:'+ this.userId);
		this.getUser();
		this.headimgurl = localStorage.getItem('headimgurl');
    },
    methods:{
      //退出登录
			loginout(){
				localStorage.removeItem("userId");
				localStorage.removeItem("openid");
				window.location.href ='http://47.101.145.23/wuliu/ljy/';
			}
    }
  };
</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;
    	}
    }
  }
</style>