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

<template>
  <div class="change-info">
    <h1>修改手机号</h1>
    <div class="line"></div>
    <div class="contents">
      <div class="mobile">新手机号</div>
      <el-input placeholder="请输入手机号" v-model="mobile"></el-input>
      <div class="code">验证码</div>
      <ver-code @click="sendVer" @change="changeAuthCode"></ver-code>
    </div>
    <div class="sub-container">
      <el-button @click="clickComplete" class="next-btn" type="primary">完成</el-button>
    </div>
  </div>
</template>

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

export default {
  components: {
    VerCode,
  },
  data() {
    return {
      mobile: '',
      authCode: '',
      canChangeMobile: false
    }
  },
  mounted() {
    this.canChange()
  },
  methods: {
    canChange() {
      this.$axios.$post('/api/user/canChangePhone', {
        token: localStorage.getItem('changeToken'),
      }).then(res=>{
        if (Number(res.status) === 1) {
          this.canChangeMobile = true
          setTimeout(()=>{
            this.canChangeMobile = false
            localStorage.removeItem('changeToken')
          }, 60 * 5 * 1000)
        }
      })
    },

    async sendVer(run) {
      let mobile = this.mobile
      if(!mobile.match(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'error'
        })
        return
      }
      let res = await this.$axios.$post('/api/passport/check_registered', {
        mobile,
      })
      // console.log(res)
      if(res) {
        if(res.data.registered) {
          this.$message({
            message: '该手机号已注册',
            type: 'error'
          })
        } else {
          let res = await this.$axios.$post('/api/user/sendMobileAuthCode', {
            mobile,
          })
          if(res) {
            run()
            this.$message({
              message: '发送成功，请查收',
              type: 'success'
            })
          }
        }
      }
    },
    changeAuthCode(val) {
      this.authCode = val
    },
    async clickComplete() {
      if (!this.canChangeMobile) {
        this.$message.error('校验码过期,请重新验证！')
        history.back()
        return
      }
      if(!this.mobile.length) {
        this.$message('请输入手机号')
        return
      } else if(!this.authCode.length) {
        this.$message('请输入验证码')
        return
      }
      let res = await this.$axios.$post('/api/user/update_info', {
        login_mobile: this.mobile,
        auth_code: this.authCode,
        token: localStorage.getItem('changeToken')
      })
      if(Number(res.status) === 1) {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
        localStorage.removeItem('changeToken')
        setTimeout(() => {
          location.href = '/setting/user'
        }, 1000)
      }
    }
  }
}
</script>

<style scoped>
.change-info {
  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);
}
.el-input {
  width: 311px;
  height: 44px;
}
.mobile {
  margin: 102px 0 5px;
}
.code {
  margin: 20px 0 5px;
}
.sub-container {
  width: 311px;
}
.next-btn {
  width: 125px;
  margin: 20px 0 41px;
}
</style>