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 | 133 +++++++++++++++++++++++++++++--------------- 1 files changed, 87 insertions(+), 46 deletions(-) diff --git a/src/views/login/index.vue b/src/views/login/index.vue index f4982b5..cba0d56 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -3,9 +3,7 @@ <!-- 浜у搧鍚嶇О --> <div class="text"> <div class="logo"> - <img - :src="imgUrl" - alt=""> + <img :src="imgUrl" alt="" /> </div> <div class="text-r"> <h2 class="title font-extra-large">閬傛槍鍘挎櫤鎱ф墽娉曞钩鍙�</h2> @@ -16,12 +14,24 @@ </div> <el-card class="login-form-layout"> <!-- 琛ㄥ崟 --> - <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"> + <el-form + autoComplete="on" + :model="loginForm" + :rules="loginRules" + ref="loginForm" + label-position="left" + > <!-- title --> <h2 class="login-title">鐢ㄦ埛鐧诲綍 / USER LOGIN</h2> <el-form-item prop="username"> <!-- 鐢ㄦ埛鍚嶈緭鍏ユ --> - <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�"> + <el-input + name="username" + type="text" + v-model="loginForm.username" + autoComplete="on" + placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" + > <span slot="prefix"> <svg-icon icon-class="user" class="color-main"></svg-icon> </span> @@ -29,21 +39,42 @@ </el-form-item> <el-form-item prop="password"> <!-- 瀵嗙爜杈撳叆妗� --> - <el-input name="password" :type="pwdType ? 'text' : 'password'" @keyup.enter.native="handleLogin" - v-model="loginForm.password" autoComplete="on" placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�"> + <el-input + name="password" + :type="pwdType ? 'text' : 'password'" + @keyup.enter.native="handleLogin" + v-model="loginForm.password" + autoComplete="on" + placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" + > <!-- 杈撳叆妗嗗墠icon --> <span slot="prefix"> <svg-icon icon-class="password" class="color"></svg-icon> </span> <!-- 杈撳叆妗嗗悗icon --> <span slot="suffix" @click="showPwd"> - <svg-icon :icon-class="pwdType ? 'yanjing-zhengyan' : 'yanjing-biyan'" class="pointer"></svg-icon> + <svg-icon + :icon-class="pwdType ? 'yanjing-zhengyan' : 'yanjing-biyan'" + class="pointer" + ></svg-icon> </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 style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin"> + <el-button + style="width: 100%" + type="primary" + :loading="loading" + @click.native.prevent="handleLogin" + > 鐧诲綍 </el-button> </el-form-item> @@ -55,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)) { @@ -75,12 +112,10 @@ }; return { loginForm: { - username:"", - password:"", - // username: "admin", - // password: "macro123", + username: "", + password: "", }, - imgUrl:'', + imgUrl: "", loginRules: { username: [ { required: true, trigger: "blur", validator: validateUsername }, @@ -94,30 +129,33 @@ }; }, created() { - const pic = JSON.parse(sessionStorage.getItem('pic')); - if(pic){ - this.imgUrl = pic.loginPageIconUrl - }else{ + 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 - }) + 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() { - 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("sccg/admin/login", { password, @@ -127,29 +165,28 @@ if (response.code === 200) { // 璁剧疆toke鏃堕棿 // 淇濆瓨token - console.log(response); - sessionStorage.setItem('token',response.data.token); + sessionStorage.setItem("token", response.data.token); // 淇濆瓨token - sessionStorage.setItem('tokenHead',response.data.tokenHead); + sessionStorage.setItem("tokenHead", response.data.tokenHead); // 淇濆瓨鐢ㄦ埛鐧诲綍鍚� - sessionStorage.setItem('name',username) + sessionStorage.setItem("name", username); // 璺宠浆鍒伴椤� that.$router.push("/home"); - }else{ - that.$refs.loginForm.validate((valid)=>{ - if(valid){ + } else { + that.$refs.loginForm.validate((valid) => { + if (valid) { that.$message({ - type:'warning', - message:response.message - }) + type: "warning", + message: response.message, + }); } - }) + }); } - // console.log(response); }) - .catch(function (error) { - console.log(error); - }); + .catch(function (error) {}); + }, + createValidCode(data) { + this.validCode = data; }, }, }; @@ -175,6 +212,10 @@ top: 20%; right: 5%; width: 360px; + &:deep(.el-input__inner) { + background-color: #fff !important; + border: 1px solid #dcdfe6 !important; + } } .text { @@ -186,7 +227,7 @@ width: 420px; justify-content: space-between; - .logo>img { + .logo > img { width: 75px; height: 75px; border-radius: 4px; -- Gitblit v1.8.0