scd_project/src/views/login/Login.vue

<template>
    <div>
        <div class="pageBox">
            <div class="loginBox">
                <div class="loginTitle">
                    <p class="loginTitleP">请登录您的账号</p>
                </div>
                <el-form ref="form" :model="form">
                    <el-form-item class="loginItem">
                        <p class="loginItemP">账号</p>
                        <input class="loginInput" v-model="form.username" @change="userRule" placeholder="请输入账号">
                        <p class="blurP" v-if="userBlur">账号不能为空</p>
                    </el-form-item>
                    <el-form-item class="loginItem">
                        <p class="loginItemP">密码</p>
                        <input class="loginInput" v-model="form.password" @change="passRule" placeholder="请输入密码"
                            :type="inputType">
                        <img class="imgEyes" src="../../assets/font/fluent：eye-20-regular.png" alt="" @click="changeType">
                        <p class="blurP" v-if="passBlur">密码不能为空</p>
                    </el-form-item>
                    <el-form-item class="loginItem">
                        <el-checkbox v-model="rememberUser" @change="rememberNow">记住账号</el-checkbox><br>
                        <el-button class="loginButton" @click="loginNow">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { login } from '../../api/login/login.js'
import sm from 'sm-crypto';
export default {
    data() {
        return {
            form: {
                username: "",
                password: ""
            },//账号密码表单
            rememberUser: false,//是否记住账号
            userBlur: false,//用户名验证
            passBlur: false,//密码验证
            inputType: "password",//密码输入框性质
        }
    },
    methods: {
        // 用户验证
        userRule(e) {
            if (e.target._value) {
                this.userBlur = false
            } else {
                this.userBlur = true
            }
        },
        // 密码验证
        passRule(e) {
            if (e.target._value) {
                this.passBlur = false
            } else {
                this.passBlur = true
            }
        },
        // 登录按钮
        async loginNow() {
            if (this.form.username != '' && this.form.password != "") {
                if (!this.userBlur && !this.passBlur) {
                    const wordType = this.encryptPassword(this.form.password)
                    let res = await login({ login_account: this.form.username, pwd: wordType })
                    if (res.returncode == 200) {
                        this.$message({
                            type: "success",
                            message: "登陆成功"
                        })
                        this.$router.push("/")
                        localStorage.setItem('userInfo', JSON.stringify(res.data))
                        localStorage.setItem('userToken', JSON.stringify(res.data.sessionid))
                        this.rememberUser = false
                    } else if (res.returncode == 500) {
                        console.log(500);
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                } else {
                    this.$message({
                        message: '账号或密码错误',
                        type: 'error'
                    });
                }
            } else {
                this.$message({
                    message: '账号或密码不能为空',
                    type: 'error'
                });
            }
        },
        // 记住账号
        rememberNow(e) {
            this.rememberUser = e
            if (this.rememberUser) {
                localStorage.setItem('username', JSON.stringify(this.form.username))
            } else {
                localStorage.removeItem('username')
            }
        },
        // 拿到已经保存的用户名
        getSaveUser() {
            let user = localStorage.getItem("username")
            if (user) {
                user = JSON.parse(user)
                this.form.username = user
            }
        },
        // ，密码框小眼睛
        changeType() {
            if (this.inputType === 'password') {
                this.inputType = 'text'
            } else {
                this.inputType = 'password'
            }
        },
        // 密码加密
        encryptPassword(password) {
            let val = SmCrypto.doSm3AndSm2Encrypt(password) + '0000'
            let ascCode = 0
            for (var i = 0; i < password.length; i++) {
                ascCode = password.charCodeAt(i).toString(16);
                // console.log(ascCode,'asc');
                if (ascCode.length == 1) {
                    val += '00' + ascCode
                } else if (ascCode.length == 2) {
                    val += '0' + ascCode
                } else {
                    val += ascCode
                }
            }
            console.log(val, 'val');
            return val
        },
    },
    created() {
        // 通过本地使用户名显示
        this.getSaveUser()
    },
}
</script>

<style scoped>
p {
    margin: 0;
    padding: 0;
}

/* 整个大盒子css */
.pageBox {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/loginNewBack.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-color: #14093E; */
    position: relative;
    overflow: hidden;
}

/* 登录盒子css */
.loginBox {
    width: 640px;
    height: 650px;
    position: absolute;
    top: 140px;
    right: 0px;
}

.loginItem {
    width: 432px;
}

/* 表单内输入框css */
.loginInput {
    width: 432px;
    height: 44px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #dbdbdb;
    background-color: transparent;
    /* color: white; */
    position: relative;
}

/* 密码框小眼睛css */
.imgEyes {
    position: absolute;
    top: 50px;
    right: 0px;
}

/* 表单内标题p标签css */
.loginTitleP {
    width: 210px;
    height: 42px;
    font-size: 30px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    /* color: #FFFFFF; */
    line-height: 35px;
    margin-left: 100px;
    margin-bottom: 52px;
}

/* 表单内p标签css */
.loginItemP {
    width: 40px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    /* color: #FFFFFF; */
    line-height: 23px;
    margin-bottom: 12px;
}

/* 登录按钮css */
.loginButton {
    width: 434px;
    height: 44px;
    background: blue;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: none;
    color: white;
}

/* 表单验证p标签css */
.blurP {
    width: 84px;
    height: 20px;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #FF0000;
    line-height: 16px;
}
</style>