<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>