<template>
  <div class="user-center">
    <div class="center-top">
      <img src="../assets/center_bg.png" alt class="center-bg" />
      <div class="user-info">
        <img src="../assets/user_avator.png" alt class="user-avator" />
        <p class="user-mobile"><span @click="login">{{mobile}}</span></p>
      </div>
    </div>
    <div class="user-about">
      <van-cell title="服务内容" @click="viewProtocol" >
        <template #right-icon>
                <van-icon name="arrow"  color="#C9C9C9"/>   </template>
      </van-cell>
      <van-cell title="切换账号"  @click="switchUser">
        <template #right-icon>
                <van-icon name="arrow"  color="#C9C9C9"/>   </template>
      </van-cell>
     
    </div>
    <navbar :activeIndex="2"></navbar>
  </div>
</template>

<script>
import Copyright from "@/components/Copyright";
import Navbar from "@/components/Navbar";
export default {
  name: "bx",
  data() {
    return {
      isInsurance: true,
      mobile:''
    };
  },
  components: {
    Copyright,
    Navbar
  },
  watch: {},
  created(){
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    init:function(){
      let userInfo=JSON.parse(localStorage.getItem('userInfo'));
      if(userInfo==null){
        this.mobile="立即登陆";
      }else{
     // this.mobile=userInfo.customerTel;
      this.mobile=userInfo.customerTel.substr(0,3)+'****'+userInfo.customerTel.substr(-4,4);
  
      }
       },
    switchUser:function(){
      this.$router.push('/qyb');
    },
    login:function(){
      if(this.mobile=='立即登陆'){
       this.$router.push('/qyb');
      }
  
    },
    viewProtocol:function(){
      this.$router.push('/protocol');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user-center {
  background: #f8f8f8;
  height: 100vh;
}
.center-bg {
  width: 100%;
  min-height: 3rem;
  height: 4.46rem;
  object-fit: cover;
}
.center-top {
  position: relative;
  height: 4.46rem;
}
.user-info {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  height: 1.68rem;
  width: 3.2rem;
  transform: translateX(-1.6rem);
  text-align: center;
}
.user-info img {
  width: 1.2rem;
  height: 1.2rem;
}
.user-mobile {
  color: #fff;
  font-weight: bold;
  font-size: 0.32rem;
  height: 0.42rem;
  margin: 0.1rem 0 0;
}
.user-about {
  background: #fff;
  padding: 0.04rem 0.3rem;
}
</style>
