效果预览:
点击后:
代码实现:
<!-- 短信验证码 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
width="400px"
center
@close="close"
>
<el-form ref="formData_passcode" :model="formData_passcode" :rules="rules1">
<div style="margin-bottom:10px">
接收的手机号: {{ formData.entPhone.slice(0,3) + '****' + formData.entPhone.slice(-4) }}
</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item prop="code">
<el-input v-model="formData_passcode.code" maxlength="6" placeholder="请输入验证码" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button size="mini" type="primary" :disabled="clockShow ? true : false" @click="getMessage">
{{ clockShow ? clock + 's后重试' : '点击获取验证码' }}
</el-button>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<!-- <span v-if="clockShow">{{ clock }} s内</span> -->
</el-form-item>
</el-col>
</el-row>
<div v-if="clockShow">{{ clockShow ? '验证码已发送,2分钟内有效' : '验证码已过期,请点击重新发送!' }}</div>
<div style="text-align:right">
<el-button size="mini" type="primary" @click="passcodeConfirm">确定</el-button>
</div>
</el-form>
</el-dialog>
// 获取短信验证码
getMessage() {
this.clockShow = true
sendMessage(this.formData.entPhone).then(res => {
// console.log(res)
if (res.code === 0) {
console.log('发送成功')
} else {
this.$message({
type: 'error',
message: res.msg
})
}
})
this.setTime() // 开始倒计时
},
// 倒计时函数封装
setTime() {
if (this.clock === 0) {
this.clock = 120
this.clockShow = false
return
} else {
this.clock--
}
setTimeout(() => { this.setTime() }, 1000)
},
// 验证通过
passcodeConfirm() {
if (this.formData_passcode.code) {
this.formData_passcode.entPhone = this.formData.entPhone
// 校验验证码输入是否正确
getCompareCode(this.formData_passcode).then(res => {
if (res.data) {
this.$message({
type: 'success',
message: res.msg
})
this.submit() // 如果验证码输入正确,那么接下来要做什么操作?
this.dialogFormVisible = false
} else {
this.$message({
type: 'error',
message: res.msg
})
}
})
} else {
this.$message({
type: 'error',
message: '请输入验证码!'
})
}
},
// 事件操作
submit() {
}