From 7786e561f165ae3045cc070063cbeaebba6f1ff0 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期四, 20 十一月 2025 17:27:52 +0800
Subject: [PATCH] 修改
---
src/views/components/loginForm.vue | 353 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 245 insertions(+), 108 deletions(-)
diff --git a/src/views/components/loginForm.vue b/src/views/components/loginForm.vue
index 2f5995e..5a2c5af 100644
--- a/src/views/components/loginForm.vue
+++ b/src/views/components/loginForm.vue
@@ -1,85 +1,101 @@
<template>
- <div class="login-panel">
- <div class="login-img">
- <img src="src/assets/images/loginImg.png">
- </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"
- >
- <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"/>
+ <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" v-preReClick>
+ <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()" v-preReClick>专家申请</el-button>
+ <el-button link type="primary" style="color: #fff" @click="openCheck" v-preReClick>专家评定进度查询</el-button>
</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:50%;"
- @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>
+ <div style="margin-top: 10px;display: flex;align-items: center">
+ <img :src="info" style="width: 20px;height: auto;margin-right: 6px"/>
+ <el-button link type="primary" style="color: yellow;text-decoration: underline;font-size: 18px" @click="openFile()" v-preReClick>2025年第三方评定工作的通知</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 {getSettings} from "@/api/backManage/evaluate";
+import info from '@/assets/icons/info.png'
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 ExpertForm from "../safetyReview/expertManage/applyRecords/components/expertForm";
+import usePermissionStore from '@/store/modules/permission'
+import {ElMessage} from "element-plus";
+const permissionStore = usePermissionStore()
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const loginForm = ref({
- username: "admin",
- password: "admin@123",
+ username: "",
+ password: "",
code: "",
uuid: ""
});
@@ -87,7 +103,7 @@
const loginRules = {
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
- code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+ code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
};
const codeUrl = ref("");
@@ -95,6 +111,7 @@
const regRef = ref(null)
// 验证码开关
const captchaEnabled = ref(true);
+const applyStatus = ref('1')
// 注册开关
const isRegister = ref(true);
const redirect = ref(undefined);
@@ -104,12 +121,49 @@
})
const openRegist = ()=>{
- regRef.value.dialogVisible = true
+ regRef.value.openApply();
}
watch(route, (newRoute) => {
redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });
+
+const openFile =()=>{
+ window.open('noticeFile.pdf', '_blank')
+}
+
+const expertFormRef = ref()
+
+const getApplyStatus = async ()=>{
+ const res = await getSettings()
+ if(res.code == 200){
+ return res.data
+ }else{
+ ElMessage.warning(res.msg)
+ return '0'
+ }
+}
+
+const openApply = async () => {
+ const status = await getApplyStatus();
+ if(status == '1'){
+ const routePath = '/fillForm';
+ const resolvedRoute = router.resolve(routePath);
+ const fullPath = resolvedRoute.href
+ window.open(fullPath, '_blank');
+ }else{
+ ElMessage.warning('抱歉，专家申请暂未开启，请联系相关人员进行处理')
+ }
+}
+
+
+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 => {
@@ -118,7 +172,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 {
// 否则移除
@@ -127,7 +182,14 @@
// Cookies.remove("rememberMe");
// }
// 调用action的登录方法
- userStore.login(loginForm.value).then(() => {
+ // loginForm.value.password = Base64.encode(loginForm.value.password)
+ const param = {
+ username: loginForm.value.username,
+ password: loginForm.value.password,
+ code: loginForm.value.code,
+ uuid: loginForm.value.uuid,
+ }
+ userStore.login(param).then(() => {
const query = route.query;
const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
if (cur !== "redirect") {
@@ -135,11 +197,7 @@
}
return acc;
}, {});
- const routers = JSON.parse(Cookies.get('routers'))
- router.push({
- path: routers[0].path
- })
- // router.push({ path: redirect.value || "/", query: otherQueryParams });
+ router.push({ path: redirect.value || "/", query: otherQueryParams });
}).catch(() => {
loading.value = false;
// 重新获取验证码
@@ -153,64 +211,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;
@@ -218,11 +317,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;
}
@@ -236,8 +336,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