proginn-frontend/pages/setting/check/old_mobile.vue

<template>
  <div class="check">
    <h1>验证旧手机号</h1>
    <div class="line"></div>
    <div class="contents">
      <div class="old-mobile">{{mobile}}</div>
      <ver-code @click="sendVer" @change="changeAuthCode"></ver-code>
    </div>
    <div class="sub-container">
      <el-button class="next-btn" type="primary" @click="clickNext">下一步</el-button>
      <section>
        <h2>说明</h2>
        <p>1.修改手机号需要先验证旧手机号</p>
        <p>
          2.若旧手机号已注销，请通过
          <a href="#" @click="doCheckReal">实名认证验证</a>
        </p>
      </section>
    </div>
  </div>
</template>

<script>
import VerCode from '@/components/ver_code'

export default {
  components: {
    VerCode,
  },
  computed: {
    mobile() {
      let userMobile = this.userinfo.mobile
      if (!userMobile) return
      return `${userMobile.slice(0, 3)}****${userMobile.slice(7, 11)}`
    }
  },
  data() {
    return {
      authCode: '',
    }
  },
  mounted() {
    if (!this.userinfo.nickname) {
      location.href = '/?loginbox=show&next=' + encodeURIComponent(location.href)
    }
  },
  methods: {
    async sendVer() {
      let res = await this.$axios.$post('/api/user/sendMobileAuthCode', {
        mobile: this.userinfo.mobile
      })
      if (Number(res.status) === 1) {
        this.$message({
          message: '发送成功，请查收',
          type: 'success'
        })
      }
    },
    changeAuthCode(val) {
      this.authCode = val
    },
    async clickNext() {
      if (!this.authCode) {
        this.$message('请输入验证码')
        return
      }
      let res = await this.$axios.$post('/api/user/checkChangePhoneAuthCode', {
        mobile: this.userinfo.mobile,
        auth_code: this.authCode,
      })
      if (Number(res.status) === 1) {
        // 成功则保存history
        this.$message.success('校验成功！')
        localStorage.setItem('proginn-history', this.$route.path)
        localStorage.setItem('changeToken', res.data.token || '')
        this.$router.push('/setting/check/change_mobile')
      }
    },
    async doCheckReal() {
      let res = await this.$axios.$post(`/api/user/check_realname`)
      if (res.data.realname_verify_status) {
        // 成功则保存history
        localStorage.setItem('proginn-history', this.$route.path)
        this.$router.push('/setting/check/real_info')
      } else {
        this.$alert('请先实名认证', {
          confirmButtonText: '确定',
          callback: action => {
            location.href = '/setting/user'
          }
        })
      }
    },
  }
}
</script>

<style scoped>
.check {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1000px;
  height: 588px;
  background: white;
  margin-top: 20px;
}
h1 {
  margin: 27px 0 25px;
}
.line {
  width: 960px;
  height: 2px;
  background: rgba(0, 0, 0, 0.06);
}
.old-mobile {
  margin: 102px 0 5px;
}
.sub-container {
  width: 311px;
}
.next-btn {
  width: 125px;
  margin: 20px 0 41px;
}
p {
  line-height: 28px;
  color: #919aa7;
  font-size: 13px;
}
p a {
  color: var(--mainColor);
}
</style>