From 9698cd8b7b1c280d5a533c3a1ddc73771da07ffc Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 13 十二月 2023 20:26:51 +0800 Subject: [PATCH] bug修改 --- src/views/login/index.vue | 116 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 91 insertions(+), 25 deletions(-) diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 97555ea..cba0d56 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -2,7 +2,9 @@ <div id="background"> <!-- 浜у搧鍚嶇О --> <div class="text"> - <div class="logo"></div> + <div class="logo"> + <img :src="imgUrl" alt="" /> + </div> <div class="text-r"> <h2 class="title font-extra-large">閬傛槍鍘挎櫤鎱ф墽娉曞钩鍙�</h2> <div class="title font-title-medium"> @@ -58,6 +60,13 @@ </span> </el-input> </el-form-item> + <el-form-item> + <el-input + v-model="loginForm.validCode" + placeholder="楠岃瘉鐮�" + ></el-input> + <SIdentify @input="createValidCode"></SIdentify> + </el-form-item> <!-- 琛ㄥ崟鎻愪氦鎸夐挳 --> <el-form-item style="margin-bottom: 60px; text-align: center"> <el-button @@ -77,9 +86,15 @@ <script> import { isvalidUsername } from "@/utils/validate"; import { createNamespacedHelpers } from "vuex"; +import users from "@/api/users"; +import { Decrypt, Encrypt } from "@/utils/cryptojs"; +import leafletMapVue from "../systemSetting/device/grid/components/components/leafletMap.vue"; +// 寮曞叆鐧诲綍楠岃瘉缁勪欢 +import SIdentify from "./SIdentify"; const { mapActions } = createNamespacedHelpers("users"); export default { name: "login", + components: { SIdentify }, data() { const validateUsername = (rule, value, callback) => { if (!isvalidUsername(value)) { @@ -97,9 +112,10 @@ }; return { loginForm: { - username: "admin", - password: "macro123", + username: "", + password: "", }, + imgUrl: "", loginRules: { username: [ { required: true, trigger: "blur", validator: validateUsername }, @@ -112,30 +128,65 @@ pwdType: false, }; }, - created() {}, + created() { + const pic = JSON.parse(sessionStorage.getItem("pic")); + if (pic) { + this.imgUrl = pic.loginPageIconUrl; + } else { + this.$axios({ + method: "get", + url: "sccg/system/portal/logo/search", + }).then((res) => { + this.imgUrl = res.data.loginPageIconUrl; + }); + } + }, methods: { showPwd() { - if (!this.pwdType) { - this.pwdType = true; - } else { - this.pwdType = false; - } + this.pwdType = !this.pwdType; }, ...mapActions(["login"]), handleLogin() { - console.log("in login"); - const { username, password } = this.loginForm; + // 鐧诲綍鍑芥暟涓獙璇侀獙璇佺爜鏄惁姝g‘锛氱粺涓�杞崲涓哄皬鍐� + if (this.loginForm.validCode.toLowerCase() !== this.validCode.toLowerCase()) { + this.$message.error("楠岃瘉鐮侀敊璇�"); + return; + } + let { username, password } = this.loginForm; + const that = this; + + password = Encrypt(password); this.$axios - .post("http://42.193.1.25:8082/sccg/admin/login", { - password, - username, + .post("sccg/admin/login", { + password, + username, }) .then(function (response) { - console.log(response); + if (response.code === 200) { + // 璁剧疆toke鏃堕棿 + // 淇濆瓨token + sessionStorage.setItem("token", response.data.token); + // 淇濆瓨token + sessionStorage.setItem("tokenHead", response.data.tokenHead); + // 淇濆瓨鐢ㄦ埛鐧诲綍鍚� + sessionStorage.setItem("name", username); + // 璺宠浆鍒伴椤� + that.$router.push("/home"); + } else { + that.$refs.loginForm.validate((valid) => { + if (valid) { + that.$message({ + type: "warning", + message: response.message, + }); + } + }); + } }) - .catch(function (error) { - console.log(error); - }); + .catch(function (error) {}); + }, + createValidCode(data) { + this.validCode = data; }, }, }; @@ -145,41 +196,56 @@ .color { color: red; } + #background { width: 100vw; height: 100vh; - background: url("@/assets/imgs/login/login_bg.jpg"); + background: url("@/assets/imgs/login/bk.png"); background-size: cover; position: relative; display: flex; min-width: 800px; } + .login-form-layout { position: absolute; top: 20%; right: 5%; width: 360px; + &:deep(.el-input__inner) { + background-color: #fff !important; + border: 1px solid #dcdfe6 !important; + } } + .text { align-self: flex-start; position: absolute; top: 20%; left: 5%; display: flex; - width: 400px; + width: 420px; justify-content: space-between; - .logo { - width: 50px; - height: 50px; - border-radius: 50%; - background-color: pink; + + .logo > img { + width: 75px; + height: 75px; + border-radius: 4px; } + .text-r { + margin-left: 15px; + .title { color: white; } + + .font-title-medium { + margin-top: -10px; + } } } + .login-title { text-align: left; font-size: 1.2rem; -- Gitblit v1.8.0