<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('获取验证码失败');
});
},