noob-components/packages/manage/common/login2.vue

<template>
    <div class="login">
        <el-form label-position="right" class="login-form" :model="param" ref="loginForm" :rules="rules">
            <div class="logo-item" v-if="logo">
                <el-image class="logo" :src="logo" fit="fit" />
            </div>
            <div class="lte-title"> {{ t('title') }} </div>
            <el-form-item vlass prop="userId">
                <span class="login-label">{{ t('pwd.userId') }}:</span>
                <NoobInput class="login-input " v-model="param.userId" :full="true" placeholder=" " />
            </el-form-item>
            <el-form-item prop="password">
                <span class="login-label">{{ t('pwd.pwd') }}:</span>
                <NoobInput class="login-input" v-model="param.password" type="password" :full="true" placeholder=" " />
            </el-form-item>
            <el-form-item>
                <NoobButton class="login-btn" @click="login">{{ t('pwd.login') }}</NoobButton>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onBeforeMount, onMounted, ref, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { FormInstance } from "element-plus";
import { Api, NoobInput, NoobButton, Element } from "noob-mengyxu";
import md5 from "js-md5";
import { useI18n } from "vue3-i18n";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const { SimpleRequired } = Element;

const emit = defineEmits(["login"]);
const param = ref<any>({});
const loginForm = ref<FormInstance>();

const rules = {
    userId: [new SimpleRequired('pwd.userId')],
    password: [new SimpleRequired('pwd.pwd')]
}

const props = defineProps({
    logo: {
        type: String,
        default: null,
    },
});

const router = useRouter();

onBeforeMount(() => {
    state.size.headHeight = '0px';
    state.size.asideWidth = '0px';
    commit("initSize");
});

const loginConfirm = user => {
    const param = JSON.parse(JSON.stringify(user));
    param.password = md5(param.password);
    Api.pub.login(param).then(rsp => {
        if (rsp) {
            state.size.headHeight = state.size.head + 'px';
            state.size.asideWidth = state.size.aside + 'px';
            commit("initSize");
            dispatch("getMenus");
            router.back();
            document.removeEventListener('keyup', enter_up);
        }
    })
};

const login = () => {
    if (!loginForm.value) return;
    loginForm.value?.validate((valid, fields) => {
        if (valid) {
            loginConfirm(param.value);
            loginForm.value?.clearValidate();
        }
    });
}

const enter_up = (e) => {
    console.log(e);
    
    if (e.keyCode == 13 || e.keyCode == 100) {
        login();
    }
}

onMounted(() => {
    document.addEventListener('keyup', enter_up);
});

onBeforeUnmount(() => {
    document.removeEventListener('keyup', enter_up);
});

</script>
<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form {
    width: 600px;
    height: 600px;
    align-self: center;
}

.logo-item {
    text-align: center;
    align-items: center;
}

.logo {
    width: 50px;
    height: 50px;

    img {
        display: inline !important;
    }
}

.lte-title {
    font-size: 2.5em;
    height: 100px;
    line-height: 100px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: #424242;
}

.login-input {

    ::v-deep .el-input__inner {
        font-size: 2rem;
        line-height: 3.5rem;
        height: 3.5rem;
        padding: 1rem;
    }
}

.el-button {
    width: 100%;
}

.login-btn {
    margin-top: 1.2rem;
    font-size: 1.5rem;
    line-height: 2rem;
    height: 3rem;
}
</style>