获取手机验证码

最新推荐文章于 2023-08-01 15:17:11 发布

青果小橙子

最新推荐文章于 2023-08-01 15:17:11 发布

阅读量204

点赞数

分类专栏：工作总结 vue JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46391404/article/details/127536790

版权

vue 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

工作总结

6 篇文章 0 订阅

订阅专栏

 <el-form-item  prop="code" :rules="[
     {
        required: true,
        message: '验证码不能为空',
        trigger: 'blur',
      },
    ]" class="ver">
    <el-input v-model="ruleForm.code" style="margin-right: 10px;" :style="{width:sendAuthCode && wenzi!='重新获取验证码'?'69%':sendAuthCode&&wenzi=='重新获取验证码'?'59%':'59%'}" placeholder="请输入验证码"></el-input>
    <el-button v-show="sendAuthCode" class="getcode" type="primary" style="cursor: pointer" @click="btn">{{wenzi}}</el-button>
    <el-button v-show="!sendAuthCode" class="getcode"  type="primary">{{auth_time}}秒后重新获取</el-button>
  </el-form-item>

sendAuthCode: true,
wenzi: '获取验证码',
ruleForm:{}

  btn() {
    if (this.wenzi == '重新获取验证码') {
      this.ruleForm.code = ''
    }
    this.$nextTick(() => {
      this.$refs['ruleForm'].clearValidate(['code']);
     })
       loginForm({
          username: this.ruleForm.name,
          code: this.ruleForm.code // 短信验证码
         }, 'code')
         .then((res) => {
           if (res.status === 0) {
             this.$message.success(res.msg);
             this.sendAuthCode = false
             this.auth_time = 60
             var auth_timetimer = setInterval(() => {
               this.auth_time--
               if (this.auth_time <= 0) {
                 this.sendAuthCode = true
                 clearInterval(auth_timetimer)
                 this.wenzi = '重新获取验证码'
               }
             }, 1000)
           } else {
            this.$message.error(res.msg);
           }
         })
         .catch(() => {
           this.$message.error('获取验证码失败');
         });
  },