忘記密碼（通過手機驗證碼找回設置）自己寫

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