Double_X_Attendance_Web/src/pages/Login/components/PasswordLogin.vue

<template>
    <div class="content">
        <h1>用户登录</h1>
        <div class="input">
            <el-input v-model="form.username" size="large" placeholder="输入用户名或邮箱" :prefix-icon="User" />
            <el-input v-model="form.password" size="large" placeholder="输入密码" type="password" :prefix-icon="Lock" />
            <div class="captcha">
                <el-input v-model="form.text" placeholder="输入验证码" size="large" class="captcha-input"
                    :prefix-icon="Finished" />
                <img alt="验证码" :src="ImageCaptcha" @click="getCaptcha">
            </div>
        </div>
        <button @click="Login()">登录</button>
        <div class="littleButton">
            <span @click="update('register')">注册账号</span> |
            <span @click="update('forget')">忘记密码</span>
        </div>
    </div>
</template>

<script setup>
import { ServerAPI } from '../../../app/lib/ServerAPI';
import { User, Lock, Finished } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { App } from '../../../app/app';

let route = useRoute();
let router = useRouter();

let ImageCaptcha = ref('');
let form = reactive({
    username: '',
    password: '',
    text: '',
    id: ''
});

const emit = defineEmits(['update']);

let update = (mode) => {
    emit('update', mode);
}

let getCaptcha = () => {
    ServerAPI.ImageCaptcha((r) => {
        if (!r || r.code != 0)
            ElMessage.error(`获取图片验证码失败！${r.msg}`);

        ImageCaptcha.value = r.data.img;
        form.id = r.data.id;
    })
}

onMounted(() => {
    getCaptcha()
})

let Login = () => {
    if (form.username === '' || form.password === '' || form.text === '')
        return ElMessage.error('请确保每项不能为空');

    const loading = ElLoading.service({
        lock: true,
        text: '正在登录中，请稍候'
    })

    let password = btoa(form.password);

    try {
        ServerAPI.Login(form.username, password, form.text, form.id, (res) => {
            if (!res || res.code !== 0) {
                loading.close();
                ElMessage.error(`登录失败！${res.msg || ''}`);
                getCaptcha();
                form.text = '';
                return;
            } else {
                loading.close();
                ElMessage.success('登录成功');
                App.refershUser(res.data);

                if (route.query.backPage !== undefined) {
                    ElMessage.success("即将跳转...");
                    setTimeout(() => {
                        router.replace({
                            name: route.query.backPage
                        });
                    }, 1000);
                    return;
                }

                if (window.history.state && window.history.state.key) {
                    router.back();
                } else {
                    router.replace({
                        name: "Main",
                    })
                }
            }

        })
    } catch (error) {
        ElMessage.error("登录失败！请稍后再试" + error);
        router.replace({
            name: "Login",
        })
    }
}
</script>

<style scoped>
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 400px;
    width: 650px;
    box-sizing: border-box;
    border-radius: 10px;
}

.content .input {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.content h1 {
    color: #337ecc;
    font-size: 2em;
    margin: 0;
    margin-bottom: 20px;
}

.el-input {
    border-radius: 15px;
    height: 50px;
}

.content .captcha {
    display: flex;
    height: 50px;
}

.content button {
    width: 180px;
    height: 40px;
    margin-top: 20px;
    font-size: 1em;
    border: none;
    border-radius: 10px;
    background-color: #337ecc;
    color: #fff;
}

.content .littleButton {
    color: #444;
    margin-top: 20px;
    font-size: 0.9em;
}

@media only screen and (max-width: 768px) {
    .content {
        width: 80%;
        height: 45%;
        padding: 25px;
    }

    .el-input {
        height: 40px;
    }

    .content .captcha {
        height: 40px;
    }

    .content h1 {
        font-size: 1.5em;
    }

    .content button {
        height: 35px;
        width: 150px;
        font-size: 0.9em;
    }

    .content .littleButton {
        font-size: 0.8em;
    }
}
</style>