carInsightSystem/src/views/Login/forgetPWD/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-19 14:45:23
 * @LastEditTime: 2021-10-29 16:20:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/Login/forgetPWD/index.vue
-->
<template>
    <div class="fpwd-outter">
        <span class="fpw-label">忘记密码</span>
        <a-form-model layout="horizontal" :model="form" :rules="rules" ref="forgetForm">
            <a-form-model-item label="手机号码" prop="sPhone">
                <a-input v-model="form.sPhone" placeholder="手机号码" autocomplete="off"/>
            </a-form-model-item>
            <a-form-model-item label="验证码" prop="iCode">
                <a-input v-model="form.iCode" placeholder="验证码" autocomplete="off">
                    <span class="fp-s1" slot="suffix" v-if="showCode" @click="getCode">发送验证码</span>
                    <span class="fp-s1" slot="suffix" v-else>{{count}}</span>
                </a-input>
            </a-form-model-item>
        </a-form-model>
        <div class="fpw-d1">
            <span class="ss1" @click="reLogin">想起来了，去登录</span>
        </div>
        <div class="fpwd-footer" @click="onNext">
            下一步
        </div>
    </div>
</template>

<script>
import {getVERCode, checkVERCode} from "@/api/login"
export default {
    name: "forgetPWD",
    data() {
        const validatePhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else {
                let reg = /^1\d{10}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            }
        };
        const validateCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码"));
            } else {
                callback();
            }
        };
        return {
            showCode: true,
            timer: null,
            count: 0,
            form: {
                sPhone: "",
                iCode: ""
            },
            rules: {
                sPhone: [{ validator: validatePhone, trigger: "change" }],
                iCode: [{ validator: validateCode, trigger: "change" }],
            },
        };
    },
    destroyed() {
        if(this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        // 获取手机的验证码
        getCode() {
           this.$refs.forgetForm.validateField('sPhone', errMsg => {
               if(!errMsg) {
                   getVERCode({sPhone: this.form.sPhone, iType: 2}).then(() => {
                       this.countdown()
                   })
               } else {
                   console.log('验证失败')
               }
           }) 
        },
        // 倒计时
        countdown() {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.showCode = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.showCode = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
        },
        // 返回登录
        reLogin() {
            this.$emit("reLogin");
        },
        // 下一步
        onNext() {
            this.$refs.forgetForm.validate((valid) => {
                if (valid) {
                    checkVERCode(this.form).then(() => {
                         this.$emit("nextStep", this.form)
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    },
};
</script>

<style lang="less" scoped>
.fpw-label {
    display: block;
    font-size: 36px;
    color: #3373cc;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
.fpwd-outter {
    width: 380px;
    margin: 0 auto;
    margin-top: 80px;
}
.fp-s1 {
    cursor: pointer;
    color: #698198;
}
.fpw-d1 {
    .ss1 {
        color: #3373cc;
        font-size: 16px;
        cursor: pointer;
    }
}
.fpwd-footer {
    position: relative;
    width: 354px;
    height: 64px;
    background-image: url("../../../assets/images/login/img_dlan_nor.png");
     background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    left: 50%;
    margin-top: 20px;
    transform: translate(-50%);
    cursor: pointer;
    color: #63aecc;
    font-size: 24px;
    text-align: center;
    line-height: 64px;
}
</style>