<template>
  <div>
    <van-nav-bar title="绑定手机" left-text="返回" @click-left="$route_back" left-arrow>

    </van-nav-bar>

    <div class="body_com has_header">
      <scroller>


        <div class="icon-box">
          <icon name="phone" class="phone-icon"></icon>
          <van-icon class="pass-icon" name="passed" />
          <p>您的手机号：{{account_info.tel | mobile}}</p>
        </div>


        <div class="submit_btn_box">
          <van-button type="primary" size="large" to="/change_phone">更换手机</van-button>
        </div>

      </scroller>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'user_mobile',
    data(){
      return {
        userInfo: this.$store.getters.user_info,
        account_info: this.$store.getters.account_info,
      }
    },
    filters:{
      mobile(tel){
        if(tel){
          return tel==''?tel:tel.replace(tel.substring(3, 7), '****')
        }
        return ''
      }
    },
    created(){

    }
  }
</script>

<style scoped>
  .submit_btn_box{padding:0.32rem;}
  .body_com{height: calc(100% - 1rem); position: relative;}
  .phone-icon{width:3rem; margin:0 auto;}
  .icon-box{
    text-align: center; padding:1rem; padding-bottom:0.3rem;}
  .pass-icon{position: absolute; top:2rem; font-size:0.5rem; color:#07c160; margin-left:-0.25rem; left:50%;}
</style>
