<template>
  <view class="container">
    <view class="top-img">
      <img class="img" :src="type == 0 ? require('@/static/mine/icon_mine_phone.png') : require('@/static/mine/icon_mine_email.png')" alt="">
    </view>

    <view class="text-box">
      当前绑定{{  type == 0 ? '手机号' : '邮箱' }} {{  type == 0 ? phone.substring(0, 5) + '****' + phone.substring(10) : email.substring(0, 3) + '**' + email.substring(6)  }}
    </view>
    <view class="btn-box">
      <button class="btn" @click="handlerSkipBindPage"> {{ type == 0 ? '更换手机号' : '更换邮箱号' }} </button>
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        type:0,
        phone:'+8618226537738',
        email:'743180155@qq.com'
      }
    },
    onLoad(option){
      this.type = option.type
      switch (this.type) {
        case '0':
          uni.setNavigationBarTitle({
            title: '绑定手机号'
          });
          break;
        case '1':
          uni.setNavigationBarTitle({
            title: '绑定邮箱'
          });
          break;
      }
    },
    methods:{
      // 点击绑定手机号 / 邮箱号
      handlerSkipBindPage(){
        uni.navigateTo({
          url:`/pages/tabBar/mine/setting/bindPhoneAndEmail?type=${this.type}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .top-img{
    margin: 100rpx auto;
    text-align: center;
    .img{
      width: 400rpx;
      height: 400rpx;
    }
  }
  .text-box{
    text-align: center;
    margin: 50rpx 0;
  }
  .btn-box{
    margin-top: 100rpx;
    .btn{
      background-color: #fff;
      border: 2rpx solid #83ADCC;
      color: #83ADCC;
      border-radius: 40rpx;
      width: 80%;
      height: 80rpx;
      line-height: 80rpx;
      font-size:28rpx;
    }
  }
</style>
