Merge remote-tracking branch 'origin/master'
This commit is contained in:
@@ -1,70 +1,15 @@
|
|||||||
<template>
|
|
||||||
<div class="login-container">
|
|
||||||
<div class="login-header">
|
|
||||||
<h1>福安德视频监控平台</h1>
|
|
||||||
</div>
|
|
||||||
<div class="login-content">
|
|
||||||
<div class="qr-code-section">
|
|
||||||
</div>
|
|
||||||
<div class="login-form-section">
|
|
||||||
<div class="login-form-card">
|
|
||||||
<h2 class="form-title">用户登录</h2>
|
|
||||||
<div>
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="text" v-model="loginForm.username" placeholder="账号" class="form-input" />
|
|
||||||
<p class="error-tip" v-if="loginForm.username === ''">用户名不能为空</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="password" v-model="loginForm.password" placeholder="密码" class="form-input" />
|
|
||||||
<p class="error-tip" v-if="loginForm.password === ''">密码不能为空</p>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="form-group captcha-group">
|
|
||||||
<input type="text" v-model="loginForm.code" placeholder="验证码" class="form-input captcha-input" />
|
|
||||||
<img :src="codeUrl" @click="getCode" alt="验证码" class="captcha-img" />
|
|
||||||
</div> -->
|
|
||||||
<div class="remember-group">
|
|
||||||
<input type="checkbox" id="remember" v-model="loginForm.rememberMe" class="remember-checkbox" />
|
|
||||||
<label for="remember" class="remember-label">记住密码</label>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="login-btn" @click="handleLogin" v-loading="loading">登录</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getCodeImg } from "@/api/login";
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const loginForm = ref({
|
const loginForm = ref({
|
||||||
username: "admin",
|
username: "admin",
|
||||||
password: "admin123",
|
password: "admin123",
|
||||||
rememberMe: false,
|
|
||||||
// code: "",
|
|
||||||
// uuid: ""
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const loginRules = {
|
|
||||||
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
|
|
||||||
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
|
|
||||||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
|
||||||
};
|
|
||||||
|
|
||||||
const codeUrl = ref("");
|
|
||||||
const loading = ref(false);
|
|
||||||
// 验证码开关
|
|
||||||
const captchaEnabled = ref(true);
|
|
||||||
// 注册开关
|
|
||||||
const register = ref(false);
|
|
||||||
const redirect = ref(undefined);
|
const redirect = ref(undefined);
|
||||||
|
|
||||||
watch(route, (newRoute) => {
|
watch(route, (newRoute) => {
|
||||||
@@ -72,212 +17,107 @@ watch(route, (newRoute) => {
|
|||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
function handleLogin() {
|
function handleLogin() {
|
||||||
// proxy.$refs.loginRef.validate(valid => {
|
// 调用action的登录方法
|
||||||
// if (valid) {
|
userStore.login(loginForm.value).then(() => {
|
||||||
loading.value = true;
|
const query = route.query;
|
||||||
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
|
const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
|
||||||
if (loginForm.value.rememberMe) {
|
if (cur !== "redirect") {
|
||||||
Cookies.set("username", loginForm.value.username, { expires: 30 });
|
acc[cur] = query[cur];
|
||||||
Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
|
|
||||||
Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
|
|
||||||
} else {
|
|
||||||
// 否则移除
|
|
||||||
Cookies.remove("username");
|
|
||||||
Cookies.remove("password");
|
|
||||||
Cookies.remove("rememberMe");
|
|
||||||
}
|
}
|
||||||
// 调用action的登录方法
|
return acc;
|
||||||
userStore.login(loginForm.value).then(() => {
|
}, {});
|
||||||
const query = route.query;
|
router.push({ path: redirect.value || "/", query: otherQueryParams });
|
||||||
const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
|
})
|
||||||
if (cur !== "redirect") {
|
|
||||||
acc[cur] = query[cur];
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
router.push({ path: redirect.value || "/", query: otherQueryParams });
|
|
||||||
}).catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
// 重新获取验证码
|
|
||||||
if (captchaEnabled.value) {
|
|
||||||
getCode();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCode() {
|
|
||||||
getCodeImg().then(res => {
|
|
||||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
|
||||||
if (captchaEnabled.value) {
|
|
||||||
codeUrl.value = "data:image/gif;base64," + res.img;
|
|
||||||
loginForm.value.uuid = res.uuid;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCookie() {
|
|
||||||
const username = Cookies.get("username");
|
|
||||||
const password = Cookies.get("password");
|
|
||||||
const rememberMe = Cookies.get("rememberMe");
|
|
||||||
loginForm.value = {
|
|
||||||
username: username === undefined ? loginForm.value.username : username,
|
|
||||||
password: password === undefined ? loginForm.value.password : decrypt(password),
|
|
||||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
getCode();
|
|
||||||
getCookie();
|
|
||||||
handleLogin();
|
handleLogin();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<template>
|
||||||
.login-container {
|
<!-- From Uiverse.io by Donewenfu -->
|
||||||
width: 100%;
|
<div class="loader">
|
||||||
height: 100vh;
|
<div class="justify-content-center jimu-primary-loading"></div>
|
||||||
background: url('../assets/images/login-back.png') no-repeat center center;
|
</div>
|
||||||
background-size: cover;
|
</template>
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.login-header {
|
<style lang="scss" scoped>
|
||||||
h1 {
|
/* From Uiverse.io by Donewenfu */
|
||||||
color: #fff;
|
.loader {
|
||||||
font-size: 24px;
|
position: absolute;
|
||||||
font-weight: bold;
|
top: 0;
|
||||||
}
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jimu-primary-loading:before,
|
||||||
|
.jimu-primary-loading:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.jimu-primary-loading:before {
|
||||||
|
left: -19.992px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jimu-primary-loading:after {
|
||||||
|
left: 19.992px;
|
||||||
|
-webkit-animation-delay: 0.32s !important;
|
||||||
|
animation-delay: 0.32s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jimu-primary-loading:before,
|
||||||
|
.jimu-primary-loading:after,
|
||||||
|
.jimu-primary-loading {
|
||||||
|
background: #076fe5;
|
||||||
|
-webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
|
||||||
|
animation: loading-keys-app-loading 0.8s infinite ease-in-out;
|
||||||
|
width: 13.6px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jimu-primary-loading {
|
||||||
|
text-indent: -9999em;
|
||||||
|
margin: auto;
|
||||||
|
position: absolute;
|
||||||
|
right: calc(50% - 6.8px);
|
||||||
|
top: calc(50% - 16px);
|
||||||
|
-webkit-animation-delay: 0.16s !important;
|
||||||
|
animation-delay: 0.16s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes loading-keys-app-loading {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
opacity: .75;
|
||||||
|
box-shadow: 0 0 #076fe5;
|
||||||
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-content {
|
40% {
|
||||||
display: flex;
|
opacity: 1;
|
||||||
justify-content: space-between;
|
box-shadow: 0 -8px #076fe5;
|
||||||
align-items: center;
|
height: 40px;
|
||||||
flex: 1;
|
}
|
||||||
padding: 0 50px;
|
}
|
||||||
|
|
||||||
.qr-code-section {
|
@keyframes loading-keys-app-loading {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.qr-code-item {
|
0%,
|
||||||
text-align: center;
|
80%,
|
||||||
margin-bottom: 10px;
|
100% {
|
||||||
|
opacity: .75;
|
||||||
|
box-shadow: 0 0 #076fe5;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
.qr-code-img {
|
40% {
|
||||||
width: 120px;
|
opacity: 1;
|
||||||
height: 120px;
|
box-shadow: 0 -8px #076fe5;
|
||||||
margin-bottom: 5px;
|
height: 40px;
|
||||||
}
|
|
||||||
|
|
||||||
.platform-label {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-tips {
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form-section {
|
|
||||||
.login-form-card {
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 500px;
|
|
||||||
|
|
||||||
.form-title {
|
|
||||||
font-size: 30px;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 18px;
|
|
||||||
outline: none;
|
|
||||||
line-height: 24px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-tip {
|
|
||||||
color: red;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.captcha-input {
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-img {
|
|
||||||
width: 100px;
|
|
||||||
height: 44px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.remember-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.remember-checkbox {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remember-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
background: #007bff;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user