<script setup>
|
import { ref, reactive, inject, watch } from "vue";
|
import { storeToRefs } from "pinia";
|
import userName from "./userName.vue";
|
import bgUrl from "@/assets/images/login-bg.jpg";
|
// TODO
|
import logoUrl from "@/assets/images/batt-g.png";
|
import loginImg from "@/assets/images/login-img2.png";
|
import { login } from "./api";
|
import { useRouter, useRoute } from "vue-router";
|
import { useUserStore } from "@/stores/user.js";
|
import config from "@/assets/js/config.js";
|
import formatPassword from "@/assets/js/tools/formatPassword.js";
|
import decryptPassword from "@/assets/js/tools/decryptPassword.js";
|
|
import { ElMessage } from "element-plus";
|
const $message = ElMessage;
|
|
const userStore = useUserStore();
|
// storeToRefs只会关注sotre中数据，不会对方法进行ref包裹
|
const { list } = storeToRefs(userStore);
|
const { setName, setId, addRemember, removeRemember } = userStore;
|
|
const router = useRouter();
|
const route = useRoute();
|
const remember = ref(false);
|
const elusername = ref();
|
const redirect = ref();
|
|
const loginForm = reactive({
|
username: "",
|
password: "",
|
// verify: "",
|
});
|
const loading = ref(false);
|
|
watch(
|
() => route,
|
(route) => {
|
redirect.value = route.query && route.query.redirect;
|
},
|
{
|
immediate: true,
|
}
|
);
|
|
function add() {
|
addRemember(elusername.value.username, formatPassword(loginForm.password));
|
// console.log("list", list, "=============");
|
}
|
function remove() {
|
removeRemember(elusername.value.username);
|
}
|
|
function selectedRemember($ev) {
|
loginForm.password = decryptPassword($ev);
|
remember.value = true;
|
}
|
|
function onSubmit(params) {
|
// 校验用户
|
if (elusername.value.username && loginForm.password) {
|
// 开启等待框
|
loading.value = true;
|
let username = elusername.value.username,
|
password = loginForm.password;
|
// verity = loginForm.value.verify;
|
login(username, password)
|
.then((res) => {
|
res = res.data;
|
// console.log(res, '======login res');
|
// 关闭等待
|
//loading = false;
|
if (res.code && res.data) {
|
// 用户登录状态 0-其他（不做动作） 2-首次登录 3-密码长时间未登录
|
// sessionStorage.setItem("useLoginState", res.data3);
|
// 用户登录状态 0-其他（不做动作） 2-首次登录 3-密码长时间未登录
|
//sessionStorage.setItem("useLoginState", "2");
|
setId(res.data2.uid);
|
setName(res.data2.uname);
|
|
// 是否记住密码
|
if (remember.value) {
|
add();
|
} else {
|
remove();
|
}
|
// 对结果进行处理
|
$message.success("登录成功");
|
router.push({ path: redirect.value || "/home" });
|
// handleLogin({ data: res });
|
} else {
|
// 关闭等待
|
loading.value = false;
|
$message.error(res.msg);
|
}
|
})
|
.catch((error) => {
|
// 关闭等待
|
loading.value = false;
|
console.log(error);
|
$message.error("网络异常");
|
});
|
} else {
|
$message.error("用户名或密码不能为空");
|
}
|
}
|
</script>
|
|
<template>
|
<!-- <div class="auto-login-loading" v-if="isAutoLogin">
|
<img src="../../assets/images/login_loading.gif" />
|
</div> -->
|
<!-- v-else -->
|
<div
|
v-loading="loading"
|
class="login-wrapper"
|
element-loading-text="页面装载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.2)"
|
>
|
<div
|
class="login_container"
|
:style="{
|
background: 'url(' + bgUrl + ') 0 0 no-repeat',
|
backgroundSize: '100% 100%',
|
}"
|
>
|
<div class="sliderCon">
|
<div class="logo">
|
<img :src="logoUrl" class="logoImg" />
|
{{ config.title }}
|
</div>
|
<img :src="loginImg" class="picImg" />
|
</div>
|
<div class="login_box">
|
<div class="title">用户登录</div>
|
<!-- 登录表单区 -->
|
<el-form
|
label-width="0px"
|
class="login_from"
|
:model="loginForm"
|
ref="loginFormRef"
|
>
|
<!-- 用户名 -->
|
<user-name
|
ref="elusername"
|
@ok="onSubmit"
|
@cancel-remember="remember = false"
|
@set-snid="selectedRemember"
|
></user-name>
|
<!-- <el-form-item prop="username"> -->
|
<!-- <el-input
|
class="input"
|
v-model="loginForm.username"
|
placeholder="请输入用户名"
|
@keyup.enter="onSubmit"
|
>
|
<template #prefix>
|
<el-icon class="el-input__icon"><User /></el-icon>
|
</template>
|
</el-input> -->
|
<!-- </el-form-item> -->
|
<!-- 密码 -->
|
<el-form-item prop="password">
|
<el-input
|
class="input"
|
v-model="loginForm.password"
|
placeholder="请输入密码"
|
type="password"
|
@keyup.enter="onSubmit"
|
>
|
<template #prefix>
|
<el-icon class="el-input__icon"><Lock /></el-icon>
|
</template>
|
</el-input>
|
</el-form-item>
|
<!-- <el-form-item>
|
<el-row :gutter="8">
|
<el-col :span="14">
|
<el-input
|
class="input"
|
placeholder="验证码"
|
v-model="loginForm.verify"
|
@keyup.enter="onSubmit"
|
></el-input>
|
</el-col>
|
<el-col :span="10">
|
<v-sidentify
|
:identifyCode="verifyCode"
|
@click="changeVerifyCode"
|
></v-sidentify>
|
</el-col>
|
</el-row>
|
</el-form-item> -->
|
<el-checkbox v-model="remember">记住密码</el-checkbox>
|
<el-form-item class="btns">
|
<el-button
|
:loading="loading"
|
type="primary"
|
@click="onSubmit"
|
class="loginBtn"
|
>登录</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.login_from :deep(.el-input__inner) {
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.login_from :deep(.el-input.is-disabled) .el-input__inner,
|
.login_from :deep(.el-input__inner) {
|
background-color: transparent;
|
border-color: #e4e4e4;
|
color: #868686;
|
}
|
|
.login_from :deep(.el-input__prefix),
|
:deep(.el-input__suffix),
|
.login_from :deep(.el-select) .el-input .el-select__caret {
|
color: #007fe1;
|
}
|
|
.login-wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
/* 登录大盒子背景 */
|
.login_container {
|
width: 100%;
|
height: 100%;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
|
.tools-container {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
background-color: #ffffff;
|
}
|
|
.tools-container .tools-item {
|
padding: 8px;
|
cursor: pointer;
|
}
|
|
.tools-container .tools-item:hover {
|
background-color: #e4e4e4;
|
}
|
|
.tools-container .iconfont {
|
font-size: 22px;
|
color: #0080ff;
|
}
|
|
.tools-container .state-default .iconfont {
|
color: #808080;
|
}
|
|
.tools-container .state-error .iconfont {
|
color: #ff0000;
|
}
|
|
.sliderCon {
|
margin-top: -6vh;
|
|
.logo {
|
display: flex;
|
align-items: center;
|
font-size: 48px;
|
color: #007fe1;
|
font-weight: bold;
|
|
.logoImg {
|
height: 50px;
|
margin-right: 14px;
|
}
|
}
|
|
.picImg {
|
width: 580px;
|
margin-top: 12vh;
|
}
|
}
|
|
/* 登录框 */
|
.login_box {
|
width: 430px;
|
// height: 400px;
|
background-color: #fff;
|
border-radius: 3px;
|
padding: 40px 60px;
|
box-sizing: border-box;
|
position: relative;
|
z-index: 2;
|
// outline: 8px solid rgba(255, 255, 255, 0.4);
|
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.4);
|
|
.title {
|
font-size: 20px;
|
color: #007fe1;
|
font-weight: bold;
|
margin-bottom: 30px;
|
}
|
|
/* v图片的盒子 */
|
|
.avatar {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
/* 边框圆角 */
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
/* v图片 */
|
|
img {
|
width: 130px;
|
height: 130px;
|
border-radius: 50%;
|
background-color: #eeeeee;
|
}
|
}
|
}
|
|
// .login_box::after {
|
// content: "";
|
// display: block;
|
// width: 446px;
|
// height: 416px;
|
// position: absolute;
|
// top: -8px;
|
// left: -8px;
|
// background: rgba(255, 255, 255, 0.4);
|
// z-index: -1;
|
// }
|
|
/* 登录按钮 */
|
.btns {
|
text-align: center;
|
}
|
|
.loginBtn {
|
width: 100%;
|
display: block;
|
text-align: center;
|
height: 48px;
|
margin-top: 10px;
|
}
|
|
.regBtn {
|
color: #007fe1;
|
margin-right: 10px;
|
}
|
|
@media screen and (max-width: 1680px) {
|
.sliderCon .logo {
|
font-size: 40px;
|
}
|
|
.sliderCon .picImg {
|
width: 480px;
|
}
|
|
.login_box {
|
width: 400px;
|
// height: 360px;
|
}
|
|
// .login_box::after {
|
// width: 416px;
|
// height: 376px;
|
// }
|
}
|
</style>
|
