<template>
  <div>
    <x-header>更换绑定</x-header>
    <div class="bind-tap">
      <p class="tips">手机号已经绑定</p>
      <p class="current-phone">当前手机号{{ phone }}</p>
      <mt-button type="primary" class="btn" @click="changePhone">更换手机号</mt-button>
    </div>
  </div>
</template>
<script>
import { PhoneBind } from "./namespace.js";
export default {
  name: PhoneBind.name,
  data() {
    return {
      phone: ""
    };
  },
  mounted() {
    const { phone } = this.$route.query;
    if (phone) this.phone = phone.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2");
  },
  methods: {
      changePhone(){
          this.$router.replace('/login')
      } 
  }
};
</script>
<style lang="scss" scoped>
.bind-tap {
  padding: 0.4rem 0.3rem;
  .tips {
    font-size: 0.4rem;
    font-weight: bold;
  }
  .current-phone{
      margin-top: .2rem;
  }
  .btn {
      width: 100%;
      margin-top: .4rem;
  }
}
</style>
