From 829f5116884f98643ffc5b2a548a600d40c0cedb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 14 四月 2025 23:09:32 +0800
Subject: [PATCH] 处理图片显示问题

---
 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;
+      // 鐧诲綍鍑芥暟涓獙璇侀獙璇佺爜鏄惁姝ｇ‘锛氱粺涓�杞崲涓哄皬鍐�
+      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