忘记密码（通过手机验证码找回设置）自己写

Posted 2022-08-16 ll15888

<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])\d8$/
            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>