<template>
<div>
<h3 class="pad-all">找回密码</h3>
<el-form :model="modeflyForm" :rules="rules" ref="modeflyForm" class="pad-all" >
<el-form-item label="手机号" prop="tel" :label-width="formLabelWidth">
<el-input v-model="modeflyForm.tel" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="用户名" prop="user" :label-width="formLabelWidth">
<el-input v-model="modeflyForm.user" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPass" :label-width="formLabelWidth">
<el-input type="password" v-model="modeflyForm.newPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="verifly" :label-width="formLabelWidth">
<el-input v-model="modeflyForm.verifly" autocomplete="off" class="verifly"></el-input>
<el-button class="getVerifly">
<span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="checkTel">获取验证码</span>
<span v-show="!sendAuthCode" class="auth_text">
<span class="auth_text_blue">{{auth_time}} </span>
秒之后重新发送验证码
</span>
</el-button>
</el-form-item>
</el-form>
<!-- 弹框footer部分 -->
<div slot="footer" class="dialog-footer" style='text-align:center;padding:50px 0;'>
<el-button type="primary" @click="submit" style='margin-right:30px;'>提 交</el-button>
<el-button @click="closeBox" style='margin-left:30px;'>取 消</el-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
formLabelWidth:'120px',
logining: false,
sendAuthCode:true, //布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’
auth_time: 0, //倒计时 计数器
verification:"", //绑定输入验证码框框
modeflyForm: {
tel: '',
user: '',
newPass: '',
verifly:''
},
rules: {
tel: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
user: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
newPass: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{validator:newPassBox,trigger:'blur'}
],
verifly: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{validator:veriflyBox,trigger:'blur'}
]
}
}
// 设置新密码的正则
let newPassBox = (rules,value,callback)=>{
let reg=/^[\w]{6,18}$/
if(!reg.test(value)){callback(new Error('密码格式不正确,请输入6-18位的数字或字母'))
}else{
callback()
}
}
// 验证码正则
let veriflyBox = (rules,value,callback)=>{
console.log("启用正则")
let reg=/[0-9]{6}/
if(!reg.test(value)){callback(new Error('验证码格式不正确,请输入6位的数字'))
}else{
callback()
}
}
},
methods: {
// 检查手机号格式
checkTel(){
let TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
let tel = this.modeflyForm.tel
if(TEL_REGEXP.test(tel)){
this.getAuthCode()
}else{
// 格式不正确
this.$message("手机号格式不正确，请输入正确手机号")
return true
}
},
//获取验证码
getAuthCode() {
// 手机号格式正确发请求
let param = {mobile: this.modeflyForm.tel, type: '1'}
this.$api.sys.getSmsCode(param).then(data=> {
console.log(data)
this.modeflyForm.verifly = data.msCode
})
//const verification =this.modeflyForm.tel;
//获取验证码请求
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)
}
}, 1000)
},
submit(){
let isNull = this.modeflyForm.tel == '' || this.modeflyForm.user == '' || this.modeflyForm.newPass == '' || this.modeflyForm.verifly == ''
if(!isNull){
//veriflyBox()
// 后台验证修改
// param: {mobile: '手机号码', type: 类型（1：找回密码）, smsCode: '验证码'}
let param = {mobile: this.modeflyForm.tel, type: '1', smsCode: this.modeflyForm.verifly}
this.$api.sys.checkSmsCode(param).then(data=> {
if(data.retCode == 0){
this.modoflyPass()
}
})
}else{
this.$message("手机号，用户名，密码，验证码不能为空！")
}
},
modoflyPass(){
// 修改请求
console.log('修改')
let param = {loginName:this.modeflyForm.user , password: this.modeflyForm.newPass, mobile: this.modeflyForm.tel}
this.$api.user.forgotPassword(param).then(data=> {
console.log(data)
if(data.retCode == 0){
this.$message("恭喜您。新密码设置成功！")
}else{
this.$message("修改失败，请重试！")
}
})
},
closeBox(){
}
}
}
</script>
