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

<template>
  <div class="real-info">
    <h1>实名信息验证</h1>
    <div class="line"></div>
    <el-form ref="ruleForm" class="contents" :model="ruleForm" :rules="rules">
      <el-form-item prop="mobile">
        <div class="mobile">旧手机号</div>
        <el-input placeholder="请输入手机号" v-model="ruleForm.mobile"></el-input>
      </el-form-item>
      <el-form-item prop="idCardNo">
        <div class="code">身份证号</div>
        <el-input placeholder="请输入身份证号" v-model="ruleForm.idCardNo"></el-input>
      </el-form-item>
    </el-form>
    <div class="sub-container">
      <el-button class="next-btn" type="primary" @click="clickNext">下一步</el-button>
    </div>
  </div>
</template>

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

export default {
  components: {
    VerCode,
  },
  data() {
    return {
      ruleForm: {
        mobile: '',
        idCardNo: '',
      },
      rules: {
        mobile: [
          { required: true, message: '手机号错误', trigger: 'blur' }
        ],
        idCardNo: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    clickNext() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if(valid) {
          let res = await this.$axios.$post('/api/user/checkUserIdentify', {
            mobile: this.ruleForm.mobile,
            id_card_no: this.ruleForm.idCardNo,
          })
          if(res) {
            this.$message({
              message: res.info,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push('/setting/check/change_mobile')
            }, 1000)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      });
    }
  }
}
</script>

<style scoped>
.real-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: 0 0 5px;
}
.sub-container {
  width: 311px;
}
.next-btn {
  width: 125px;
  margin: 20px 0 41px;
}
.el-form-item {
  margin: 0;
}
</style>