desktop_task_schedule/code/web/task_schedule/src/views/Login.vue

<!--
 * @Author: Kane
 * @Date: 2023-02-28 00:57:21
 * @LastEditors: Kane
 * @FilePath: /deskop_task_schedule/code/web/task_schedule/src/views/Login.vue
 * @Description: 
 * 登录页面，路由默认指向这个页面
 * 1、判断url中的参数，取得用户信息，根据用户的部门改变路由
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="page-wrapper">
        <div class="login-wrapper">
            <h1>登录</h1>
            <el-form ref="loginForm">
                <el-form-item>
                    <label class="form-label">用户名</label>
                    <el-input type="text" v-model.trim.lazy="ui.account" placeholder="请输入P13账号或P09工号"></el-input>
                </el-form-item>
                <el-form-item>
                    <label class="form-label">密码</label>
                    <el-input type="text" v-model.trim.lazy="ui.savedP13uid" placeholder="请输入P13密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-button-block" @click="savedP13uid">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <span>{{ ui.savedP13uid }}</span>
        </div>
    </div>
</template>

<script lang="ts">
import { reactive } from "vue";
import { service as instance } from "@/utils/api/request";
import { getParamsFromURL } from "@/utils/api/url";
import { loadStaffInfo, saveStuffInfo } from "@/utils/api/localStorage";


const URL = "http://222.76.244.118:11001/admin-system/account/p13_account_check";

export default {
    name: "LoginPage",
    setup()
    {
        const ui = reactive({
            account: "",
            savedP13uid: "",
            showNeedAccountTip: false,
            showAccountErrorTip: false,
        });

        const savedP13uid = () =>
        {
            window.localStorage.setItem("stuff_account", ui.account);

            ui.savedP13uid = window.localStorage.getItem("stuff_account") || "";

            alert(ui.savedP13uid);
        };

        ui.savedP13uid = window.localStorage.getItem("stuff_account") || "";

        // setInterval(() =>
        // {
        //     window.location.reload();
        // }, 5000);

        return { ui, savedP13uid, };
    },
};
</script>

<style scoped lang="scss">
.page-wrapper {
    box-sizing: border-box;
    height: calc(100vh - 10mm);
    width: calc(100vw - 10mm);
    margin: 5mm;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: calc(100vh * 0.1);

    span {
        font-size: 30px;
        color: red;
    }
}

.login-wrapper {
    width: 320px;
    // margin-top: 5cm auto auto auto;
    padding: 5mm;
    background-color: #cac2c27f;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    // backdrop-filter: ;
}

.form-label {
    display: block;
    /* color: #fff; */
    color: #344a5fef;
    font-size: 14px;
    // border: 1px solid red;
}

.el-input {
    color: #344a5fef;
}

.el-button-block {
    width: 100%;
    margin-top: 20px;
}
</style>