From d8b570430066fae42d6884671cef541fc820de1c Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 15 十一月 2024 14:42:44 +0800
Subject: [PATCH] 动态路由
---
src/views/components/loginForm.vue | 346 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 215 insertions(+), 131 deletions(-)
diff --git a/src/views/components/loginForm.vue b/src/views/components/loginForm.vue
index ee9ede4..7d4fd1b 100644
--- a/src/views/components/loginForm.vue
+++ b/src/views/components/loginForm.vue
@@ -1,81 +1,86 @@
<template>
- <div class="login-panel">
- <div class="login-img">
- <img :src="loginImgPng">
- </div>
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">登录系统</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="账号"
- >
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="密码"
- @keyup.enter="handleLogin"
- show-password
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
- </div>
- </el-form-item>
- <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
-<!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>-->
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width:63%;"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- <div v-if="isRegister">
- <el-button link type="primary" @click="openRegist">立即注册</el-button>
+ <el-row class="login-panel">
+ <el-col :sm="24" :md="12" class="login-img">
+ 新疆维吾尔自治区应急管理厅<br/>专家管理系统
+ </el-col>
+ <el-col :sm="24" :md="12" class="login-box">
+ <div class="login-card">
+ <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+ <h3 class="title">登录系统</h3>
+ <el-form-item prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ size="large"
+ auto-complete="off"
+ placeholder="账号"
+ >
+ <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ size="large"
+ auto-complete="off"
+ placeholder="密码"
+ @keyup.enter="handleLogin"
+ show-password
+ >
+ <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="code" v-if="captchaEnabled">
+ <el-input
+ v-model="loginForm.code"
+ size="large"
+ auto-complete="off"
+ placeholder="验证码"
+ style="width: 63%"
+ @keyup.enter="handleLogin"
+ >
+ <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+ </el-input>
+ <div class="login-code">
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ </div>
+ </el-form-item>
+ <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
+ <div class="btn-cont">
+ <button class="login-btn" @click.prevent="handleLogin">
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </button>
+ </div>
+ <!-- <div v-if="isRegister">-->
+ <!-- <el-button link type="primary" @click="openRegist">立即注册</el-button>-->
+ <!-- </div>-->
+ </div>
+ </el-form>
+ <div class="other-btns">
+ <el-button link type="primary" style="color: #fff" @click="openApply()">专家申请</el-button>
+ <el-button link type="primary" style="color: #fff" @click="openCheck">专家评定进度查询</el-button>
</div>
</div>
- </el-form>
- </div>
- <register ref="regRef"/>
+ </el-col>
+ </el-row>
+ <expert-form ref="expertFormRef"></expert-form>
+<!-- <register ref="regRef"/>-->
</template>
<script setup>
-import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue"
+import {onMounted, ref, watch, defineAsyncComponent, nextTick, computed} from "vue"
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import { Register } from "@/layout/components";
import { Base64 } from 'js-base64'
-import menu from "@/layout/components/Sidebar/menu";
-import loginImgPng from "@/assets/images/loginImg.png"
-
+import ExpertForm from "../safetyReview/expertManage/applyRecords/components/expertForm";
+import usePermissionStore from '@/store/modules/permission'
+const permissionStore = usePermissionStore()
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
@@ -108,7 +113,7 @@
})
const openRegist = ()=>{
- regRef.value.openDialog('add', {});
+ regRef.value.openApply();
}
watch(route, (newRoute) => {
@@ -116,7 +121,24 @@
}, { immediate: true });
-const sidebarRouters = ref([])
+const expertFormRef = ref()
+const openApply = () => {
+ // expertFormRef.value.openApply(type, value)
+ const routePath = '/fillForm';
+ const resolvedRoute = router.resolve(routePath);
+ const fullPath = resolvedRoute.href
+ window.open(fullPath, '_blank');
+}
+
+
+const openCheck = () => {
+ // expertFormRef.value.openApply(type, value)
+ const routePath = '/checkProgress';
+ const resolvedRoute = router.resolve(routePath);
+ const fullPath = resolvedRoute.href
+ window.open(fullPath, '_blank');
+}
+
function handleLogin() {
proxy.$refs.loginRef.validate(valid => {
if (valid) {
@@ -124,7 +146,8 @@
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
// if (loginForm.value.rememberMe) {
Cookies.set("username", loginForm.value.username, { expires: 30 });
- Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
+ Cookies.set("password", loginForm.value.password, { expires: 30 });
+ // Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
// Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
// } else {
// 否则移除
@@ -136,37 +159,19 @@
// loginForm.value.password = Base64.encode(loginForm.value.password)
const param = {
username: loginForm.value.username,
- password: Base64.encode(loginForm.value.password),
+ password: loginForm.value.password,
code: loginForm.value.code,
- uuid: loginForm.value.uuid
+ uuid: loginForm.value.uuid,
}
userStore.login(param).then(() => {
- // const query = route.query;
- // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
- // if (cur !== "redirect") {
- // acc[cur] = query[cur];
- // }
- // return acc;
- // }, {});
- const userInfo = JSON.parse(Cookies.get('userInfo'))
- if(userInfo.identity === 0 ) {
- sidebarRouters.value = menu.adminMenu
- Cookies.set('routers',JSON.stringify(sidebarRouters.value))
- }else if(userInfo.identity === 1) {
- sidebarRouters.value = menu.agencyMenu
- Cookies.set('routers',JSON.stringify(sidebarRouters.value))
+ const query = route.query;
+ const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+ if (cur !== "redirect") {
+ acc[cur] = query[cur];
}
- let path = ""
- if(sidebarRouters.value[0].children && sidebarRouters.value[0].children.length > 0){
- path = sidebarRouters.value[0].path + '/'+ sidebarRouters.value[0].children[0].path
- }else {
- path = sidebarRouters.value[0].path
- }
-
- router.push({
- path: path
- })
- // router.push({ path: redirect.value || "/", query: otherQueryParams });
+ return acc;
+ }, {});
+ router.push({ path: redirect.value || "/", query: otherQueryParams });
}).catch(() => {
loading.value = false;
// 重新获取验证码
@@ -180,64 +185,105 @@
function getCode() {
getCodeImg().then(res => {
- captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.captchaEnabled
+ captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (captchaEnabled.value) {
- codeUrl.value = "data:image/gif;base64," + res.data.image
- loginForm.value.uuid = res.data.uuid
+ 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")
-// loginForm.value = {
-// username: username === undefined ? loginForm.value.username : username,
-// password: password === undefined ? loginForm.value.password : decrypt(password),
-// };
-// }
+function getCookie() {
+ const username = Cookies.get("username")
+ const password = Cookies.get("password")
+ loginForm.value = {
+ username: username === undefined ? loginForm.value.username : username,
+ password: password === undefined ? loginForm.value.password : decrypt(password),
+ };
+}
getCode();
// getCookie();
</script>
<style lang='scss' scoped>
+@font-face {
+ font-family: "AliMa";
+ src: url("@/assets/styles/font/AlimamaShuHeiTi-Bold.ttf");
+ font-style: normal;
+ font-weight: normal;
+}
.login-panel{
width: 100%;
height: 100%;
- display: flex;
+ background: url("@/assets/images/loginBg.jpg") no-repeat center;
+ background-size: cover;
justify-content: center;
align-items: center;
+
}
.login-img{
- flex: 1;
display: flex;
justify-content: center;
align-items: center;
- img{
- width: 100%;
- }
+ font-family: 'AliMa';
+ color: #fff;
+ font-size: 3.2rem;
+ text-align: center;
+ line-height: 1.5;
+ transform: translateY(-80px);
+ text-shadow: -10px 10px 20px rgba(0,0,0,.4);
}
-.login-form {
- flex: 2;
- padding: 10px;
-
- .title{
- margin: 20px 0;
+.login-box{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform: translateY(-40px);
+ .login-card{
+ width: 500px;
+ padding: 30px;
+ border-radius: 16px;
+ background-color: rgba(255,255,255,.2);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255,255,255,.4);
+ max-width: 100%;
+ box-sizing: border-box;
+ box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
+ .login-form {
+ width: 100%;
+ box-sizing: border-box;
- .el-input {
- height: 40px;
- input {
- height: 40px;
+ .title{
+ margin: 0 0 30px;
+ text-align: center;
+ color: #fff
+ }
+
+ .el-form-item{
+ margin-bottom: 30px;
+ }
+
+ .el-input {
+ height: 48px;
+ input {
+ height: 48px;
+ }
+ }
+ .input-icon {
+ height: 39px;
+ width: 14px;
+ margin-left: 0px;
}
}
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
+ .other-btns{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
}
}
+
.login-tip {
font-size: 13px;
text-align: center;
@@ -245,11 +291,12 @@
}
.login-code {
width: 33%;
- height: 40px;
+ height: 48px;
float: right;
- img {
+ .login-code-img {
display: inline-block;
width: 100%;
+ padding-left: 12px;
cursor: pointer;
vertical-align: middle;
}
@@ -263,8 +310,45 @@
display: flex;
justify-content: space-between;
}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
+
+.login-btn {
+ width: 100%;
+ font-size: 1.2em;
+ padding: 0.6em 0.8em;
+ border-radius: 0.5em;
+ border: none;
+ background-color: #2563EB;
+ color: #fff;
+ cursor: pointer;
+ box-shadow: 2px 2px 3px #000000b4;
}
+
+.btn-cont {
+ width: 100%;
+ position: relative;
+ padding: 3px;
+ background: #03a9f4;
+ border-radius: 0.9em;
+ transition: all 0.3s ease;
+}
+
+.btn-cont::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ margin: auto;
+ border-radius: 0.9em;
+ z-index: -10;
+ filter: blur(0);
+ transition: filter 0.4s ease;
+}
+
+.btn-cont:hover::before {
+ background: #2559c9;
+ filter: blur(0.6em);
+}
+.btn-cont:active::before {
+ filter: blur(0.1em);
+}
+
</style>
--
Gitblit v1.9.2