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

<!--
 * @Author: your name
 * @Date: 2021-10-19 14:14:52
 * @LastEditTime: 2021-12-10 14:04:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/Login/loginForm/index.vue
-->
<template>
    <div class="lgf-outter">
        <a-form-model layout="horizontal" :model="form" :rules="rules" ref="loginForm">
            <a-form-model-item label="用户名" prop="sUserName">
                <a-input v-model="form.sUserName" placeholder="请输入账号" autocomplete="off" :maxLength="30" />
            </a-form-model-item>
            <a-form-model-item label="密码" prop="sPwd">
                <a-input v-model="form.sPwd" :type="pwdType" placeholder="请输入密码" autocomplete="off">
                    <span slot="suffix" class="iconfont icon-zhengyan-21 login-eye" v-if="pwdType === 'password'"
                        @click="changePwdType"></span>
                    <span slot="suffix" class="iconfont icon-in_biyan login-eye" v-else @click="changePwdType"></span>
                </a-input>
            </a-form-model-item>
            <a-form-model-item label="验证码" prop="sVerifycode">
                <a-input v-model="form.sVerifycode" placeholder="请输入验证码" autocomplete="off">
                    <a-button slot="addonAfter" style="width: 100px" @click="getCode" v-if="!codeImg"
                        :loading="btnLoading">获取验证码</a-button>
                    <img style="width: 6rem; height: 2rem;cursor: pointer;" slot="addonAfter" :src="codeImg"
                        @click="getCode" v-else>
                </a-input>
            </a-form-model-item>
        </a-form-model>
        <div class="login-d1">
            <a-checkbox v-model="remCheck">
                <span style="color: #3373CC">记住密码</span>
            </a-checkbox>
            <span class="stn" style="color: #3373CC" @click="forgetPassword">忘记密码</span>
        </div>
        <div class="login-footer" @click="onSubmit">
            登录
        </div>
    </div>
</template>

<script>
import { loginSubmit, getVerifycode } from "@/api/login"
export default {
    name: "loginForm",
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                let reg =
                    /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
                if (!reg.test(value)) {
                    callback(new Error("密码由大小写字母、数字和特殊字符组成"));
                } else if (value.length < 8 || value.length > 16) {
                    callback(new Error("密码8~16位"));
                } else {
                    callback();
                }
            }
        };
        const validateAccount = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账户"));
            } else {
                callback();
            }
        };
        const validateCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码"));
            } else {
                callback();
            }
        };
        return {
            pwdType: "password",
            remCheck: false,
            codeImg: "",
            btnLoading: false,
            form: {
                sUserName: "",
                sPwd: "",
                sVerifycode: "",
                sVerifycodeSN: ""
            },
            rules: {
                sUserName: [{ validator: validateAccount, trigger: "change" }],
                sPwd: [{ validator: validatePass, trigger: "change" }],
                sVerifycode: [{ validator: validateCode, trigger: "change" }],
            },
        };
    },
    created() {
        if (JSON.stringify(this.getAccount) != "{}") {
            this.remCheck = this.getAccount.remCheck;
            this.form.sUserName = this.getAccount.sUserName;
            this.form.sPwd = this.getAccount.sPwd;
        }

    },
    methods: {
        // 改变是否可以看密码
        changePwdType() {
            this.pwdType = this.pwdType === "password" ? "" : "password";
        },
        // 获取验证码
        getCode() {
            this.btnLoading = true;
            getVerifycode().then(res => {
                this.codeImg = `data:image/jpeg;base64,${res.data}`;
                this.form.sVerifycodeSN = res.data1;
                this.btnLoading = false;
            })
        },

        //忘记密码
        forgetPassword() {
            this.$emit("forgetPassword");
        },
        // 提交
        onSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    loginSubmit(this.form).then(res => {
                        let data = res.data;
                        this.setToken(data.toKen);
                        this.setUser(data);
                        this.setLevelBtn(data.levelBtn);
                        //手动添加
                        let obj = {
                            link: '/saleRank',
                            text: '销量排行'
                        };
                        let obj2 = {
                            link: '/specialAnalize',
                            text: '专项分析'
                        };
                        data.meun.push(obj);
                        data.meun.push(obj2);
                        ////
                        this.setMenu(data.meun);
                        if (this.remCheck) {
                            this.setAccount({ sUserName: this.form.sUserName, sPwd: this.form.sPwd, remCheck: this.remCheck })
                        } else {
                            this.setAccount({});
                        }
                        this.$router.push({ path: '/' })
                    }).catch(() => {
                        console.log("登录失败")
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>
<style lang="less" scoped>
.lgf-outter {
    width: 380px;
    margin: 0 auto;
    margin-top: 80px;
}

.login-eye {
    font-size: 16px;
    color: #3373cc;
    cursor: pointer;
}

.login-d1 {
    width: 380px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .stn {
        cursor: pointer;
    }
}

.login-footer {
    position: absolute;
    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%;
    transform: translate(-50%);
    cursor: pointer;
    color: #63aecc;
    font-size: 24px;
    text-align: center;
    line-height: 64px;
}
</style>