Zlpt_Portal/src/views/Login.vue

<script setup lang="ts">
import { loginApi, getUserInfoAPI } from 'http/api/login/index'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { mainStore } from 'store/main'
import { useStore } from 'store/user'
const userStore = mainStore()
const store = useStore()
const router = useRouter()
const route: any = useRoute()
const rememberPassword = ref<Boolean>(false)
const loginForm = ref({
    username: localStorage.getItem('username') || '',
    password: localStorage.getItem('password') || '',
    loginType: 'USERNAME_PASSWORD',
    code: '',
    phoneUuid: '',
    uuid: '',
    verificationCode: '',
})

if (localStorage.getItem('username') && localStorage.getItem('password')) {
    rememberPassword.value = true
}

const handlerLogin = async () => {
    const res: any = await loginApi(loginForm.value)
    console.log('登录成功**', res)
    if (res.code === 200) {
        userStore.setToken(res.data.access_token)
        const result: any = await getUserInfoAPI()
        console.log(result, '用户信息')
        ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success',
        })

        userStore.setUserInfo(result.user)

        if (rememberPassword.value) {
            localStorage.setItem('username', loginForm.value.username)
            localStorage.setItem('password', loginForm.value.password)
        } else {
            localStorage.setItem('username', '')
            localStorage.setItem('password', '')
        }
        // userStore.setToken(res.data.access_token);
        // if (res.data.user) {
        //     userStore.setUserInfo(res.data.user);
        // } else {
        //     userStore.setUserInfo({
        //         phonenumber: "",
        //         companyName: "",
        //         logoUrl:
        //             "https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/2023/12/09/815629f192564db98ac55a643b46f853gouwu.png",
        //     });
        // }

        localStorage.setItem('rolesType', '1')
        store.editcurrentMenuItem('goodsManagement')
        // 跳转登录页面
        if (route.query && route.query.redirect) {
            router.push(decodeURIComponent(route.query.redirect))
        } else {
            router.push('/home')
        }
    }
}
</script>

<template>
    <div class="login-container">
        <div class="login-form">
            <h3>机械化装备共享平台</h3>

            <div class="form-container">
                <!-- <div class="login-type">
                    <div class="active">账号登录</div>
                    <div>手机登录</div>
                </div> -->

                <el-form>
                    <el-form-item>
                        <h3 style="margin: 0; font-size: 20px">您好，欢迎登录</h3>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            :prefix-icon="User"
                            v-model.trim="loginForm.username"
                            placeholder="请输入账号"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            :prefix-icon="Lock"
                            v-model.trim="loginForm.password"
                            placeholder="请输入密码"
                            clearable
                            type="password"
                            show-password
                        />
                    </el-form-item>

                    <el-form-item>
                        <div class="remember-me">
                            <el-checkbox size="large" v-model="rememberPassword">
                                记住密码
                            </el-checkbox>
                            <a href="#">忘记密码</a>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <!-- <el-button
                            style="background-color: #009a91; padding: 20px 0"
                            type="primary"
                            @click="handlerLogin"
                            >立 即 登 录</el-button
                        > -->
                        <el-button
                            style="padding: 20px 0"
                            class="primary-lease"
                            type="primary"
                            @click="handlerLogin"
                            >立 即 登 录</el-button
                        >
                    </el-form-item>
                    <!-- <el-form-item class="forget-password">
                        <a href=""></a>
                        <a
                            style="cursor: pointer"
                            @click="$router.push('/register')"
                            >立即注册</a
                        >
                    </el-form-item> -->
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.login-container {
    height: 100vh;
    background-color: #125ab6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../assets/img/login_bg.png') no-repeat;
    background-size: cover;

    .login-form {
        width: 500px;
        // height: 360px;
        display: flex;
        flex-direction: column;

        h3 {
            color: #006461;
            font-size: 26px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 26px;
            letter-spacing: 2px;
        }

        .form-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 5px;

            .login-type {
                height: 40px;
                margin-bottom: 40px;
                display: flex;
                color: #333;

                div {
                    flex: 1;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;

                    &:hover {
                        cursor: pointer;
                    }
                }

                .active {
                    color: #3498db;
                    border-bottom: 1px solid #3498db;
                }
            }

            .el-form {
                padding: 30px 50px 0;

                .el-input {
                    height: 47px;
                }

                .el-button {
                    width: 100%;
                    height: 37px;
                }

                .forget-password {
                    margin-bottom: 0;
                }

                .forget-password .el-form-item__content {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .el-input .el-input__icon {
                    font-size: 18px;
                    color: #009a91;
                }
            }

            .remember-me {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                a {
                    color: var(--el-text-color-regular);
                }

                a:hover {
                    color: #009a91;
                }
            }
        }
    }
}
</style>