HM21St_Page_User/src/views/forgotPwd.vue

<template>
  <div class="forgot-container">
    <h2 class="title-big">找回密码</h2>
        <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-if="stepIndex===0">
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" maxlength="20">
                    <template slot="prepend">+86</template>
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code" class="code-box">
                <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" @input="handeleInput" maxlength="20">
                </el-input>
                <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode" @input="handeleInput">
                    {{ verificationCodeShow ? time+'s' : '发送验证码' }}
                </el-button>
            </el-form-item>
            <el-form-item class="btn-box">
                <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :disabled="submitDis" :loading="loading">下一步</el-button>
                <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
            </el-form-item>
        </el-form>
        <div v-else class="result-box">
            <img src="../assets/mail-check-line.png" />
            <p>密码已通过短信发送至您的手机中，请注意查收。</p>
            <div class="btn-box">
                <el-button type="primary" @click="onCancel('loginCodeForm')" size="small">确定</el-button>
            </div>
        </div>
  </div>
</template>

<script>
import { getLogin } from "@/api/ajax";
import { setToken } from "@/utils/auth";
export default {
  name: "forgotPwd",
  props: [],
  data() {
    const validatePhone = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入手机号'));
        } else {
            let reg = /^1[3-9]\d{9}$/;
            let result = reg.test(value);
            if (result) {
                callback();
            } else {
                callback(new Error('请输入正确的手机号'));
            }
        }
    };
    return {
        loginCodeForm:{
            phone:'',
            code:''
        },
        rulesCode:{
            phone:[
                { required: true, validator: validatePhone, trigger: 'blur' }
            ],
            code:[
                { required: true, message: '请输入验证码', trigger: 'blur' }
            ]
        },
        time: 60, //获取验证码的时间
        verificationCodeShow: false, //是否已经获取了验证码
        loading: false,
        timer: null,
        submitDis: true,
        stepIndex: 0
    };
  },
  watch: {
    
  },
  methods: {
    // 密码登录提交表单
    onSubmitPassword(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/LoginControl/Login";
            let data = null
            if(this.tabsIndex===0){
                data = {
                    user_type:this.loginPwdForm.type,
                    user_name:this.loginPwdForm.userName,
                    password:this.loginPwdForm.password
                }
            }else{
                data = {
                    user_type:this.loginCodeForm.type,
                    user_name:this.loginCodeForm.phone,
                    password:this.loginCodeForm.code,
                    is_dynamic_verification_code_login:"true",
                    dynamic_verification_send_type:"SMS"
                }
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                this.stepIndex++
            })
            .catch(() => {
                this.loading = false
                this.verificationCodeShow = false;
                clearInterval(this.timer);
                this.time = 60;
            });
          } else {
            return false;
          }
        });
    },
    // 取消 恢复到修改前状态
    onCancel(formName){
        this.$emit('cancelFot')
    },
    // 发送验证码
    sendCode(time,phone,flag,obj){
        let this_ = this;
        if(this_[time] != 60){
            return
        }
        this_.timer = null;
        if (this_.loginCodeForm[phone]) {
            let reg = /^1[3-9]\d{9}$/;
            let result = reg.test(this_.loginCodeForm[phone]);
            if (!result) {
                this_.$message.warning('请输入正确的手机号');
                return
            }
            this_[flag] = true;
            this_.timer = setInterval(() => {
                this_[time]--;
                if (this_[time] == 0) {
                    this_[flag] = false;
                    clearInterval(this_.timer);
                    this_.timer = null;
                    this_[time] = 60;
                }
            }, 1000);
            let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
            let data = {
                send_type: 'SMS',
                phone_or_email: this_.loginCodeForm.phone,
            };
            getLogin(MethodName, data).then((res) => {
            }).catch(()=>{
                this_[flag] = false;
                clearInterval(this_.timer);
                this_.timer = null;
                this_[time] = 60;
            });
        } else {
            this_.$message.warning('请先输入手机号');
        }
    },
    // 去掉前后空格
    handleTrim(form,fild){
        this[form][fild] = this[form][fild].trim()
    },
    handeleInput(){
        if(this.loginCodeForm.phone&&this.loginCodeForm.code){
            this.submitDis = false
        }else{
            this.submitDis = true
        }
    }
  },
  mounted() {
    
  },
};
</script>

<style lang="scss" scoped>
.forgot-container{
    background: #FFFFFF;
    padding: 64px 72px;
    .title-big{
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
        margin: 0;
        color: #1D2129;
    }
    .title-name{
        font-size: 14px;
        line-height: 22px;
        color: #86909C;
        margin: 0 0 40px 0;
    }
    .tabs-box{
        display: flex;
        a{
            font-size: 14px;
            line-height: 22px;
            color: #4E5969;
            border-radius: 100px;
            padding: 5px 16px;
            margin-right: 16px;
            &:hover{
                background: #F2F3F5;
            }
            &.active{
                background: #F2F3F5;
                font-weight: 500;
                color: #165DFF;
            }
        }
    }
    .form{
        margin-top: 40px;
        .show-icon{
            cursor: pointer;
            color: #4E5969;
        }
        .forgotPwd{
            font-size: 14px;
            line-height: 22px;
            color: #165DFF;
        }
    }
}
.result-box{
    text-align: center;
    padding-top: 46px;
    img{
        width: 64px;
    }
    p{
        width: 260px;
        color: #000;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; 
        margin: 16px auto 62px auto;
    }
    .el-button{
        width: 100%;
    }
}
</style>
<style lang="scss">
.forgot-container{
    .form{
        .el-form-item__label{
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #4E5969;
            padding-bottom: 8px;
        }
        .userAgree-box{
            .el-form-item__content{
                display: flex;
                justify-content: space-between;
                line-height: 22px;
            }
            .el-checkbox-group{
                flex: 1;
                .el-checkbox{
                    color: rgba(0, 0, 0, 0.88);
                    font-weight: 400;
                }
            }
        }
        .btn-box{
            .el-button{
                width: 100%;
            }
            .el-button+.el-button{
                margin-left: 0;
                margin-top: 8px;
            }
        }
        .el-button--primary{
            background: #165DFF;
            border-color: #165DFF;
            border-radius: 2px;
            &:hover{
                background: #4080FF;
                border-color: #4080FF;
            }
            &:focus{
                background: #0E42D2;
                border-color: #0E42D2;
            }
        }
        .el-button--default{
            background: #F2F3F5;
            border-radius: 2px;
            border: none;
            color: #4E5969;
            &:hover{
                background: #E5E6EB;
            }
            &:focus{
                background: #C9CDD4;
            }
        }
        .code-box{
            .el-form-item__content{
                display: flex;
            }
        }
        .code-input{
            height: 32px;
            .el-input__inner{
                border-radius: 4px 0 0 4px;
            }
        }
        .sendCode{
            border-radius: 0 4px 4px 0;
            margin-top: 1px;
            width: 92px;
            flex-shrink: 0;
        }
        .el-form-item__content,.el-input__icon{
            line-height: 32px;
            color: #4E5969 !important;
        }
        .el-input__inner{
            height: 32px;
            color: #1D2129;
            background: #F2F3F5;
            border: none;
        }
        .el-textarea__inner,.el-input-group__prepend{
            color: #1D2129;
        }
        .el-checkbox__input.is-checked+.el-checkbox__label{
            color: #165DFF;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background: #165DFF;
            border-color: #165DFF;
        }
        .el-input-group__prepend{
            width: 54px;
            height: 32px;
            border: none;
            background: #F2F3F5;
            border-radius: 2px 0px 0px 2px;
            line-height: 32px;
            text-align: center;
            padding: 0;
        }
        .el-input-group--prepend{
            display: flex;
            .el-input__inner{
                margin-left: 8px;
                flex: 1;
            }
        }
    }
    .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
        background-color: #a0cfff;
        border-color: #a0cfff;
    }
}
</style>