登录改造

src/views1/LoginView.vue

@@ -32,7 +32,7 @@
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
-           <p class="login-form-password">密码</p>
+            <p class="login-form-password">密码</p>
             <el-input
               v-model="loginForm.password"
               type="password"
@@ -62,14 +62,15 @@
               />
             </el-input>
             <div class="login-code">
-              <img :src="codeUrl" @click="getCode" class="login-code-img" />
+              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
             </div>
           </el-form-item>
           <el-checkbox
             v-model="loginForm.rememberMe"
             style="margin: 0px 0px 25px 50px"
             class="remember"
-            >记住密码</el-checkbox
+          >记住密码
+          </el-checkbox
           >
           <el-form-item style="width: 100%">
             <el-button
@@ -84,7 +85,8 @@
             </el-button>
             <div style="float: right" v-if="register">
               <router-link class="link-type" :to="'/register'"
-                >立即注册</router-link
+              >立即注册
+              </router-link
               >
             </div>
           </el-form-item>
@@ -95,107 +97,109 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login1";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from "@/utils/jsencrypt";
+import { getCodeImg } from '@/api/login1'
+import Cookies from 'js-cookie'
+import { decrypt, encrypt } from '@/utils/jsencrypt'
 
 export default {
-  name: "Login",
+  name: 'Login',
   data() {
     return {
-      codeUrl: "",
+      codeUrl: '',
       loginForm: {
-        username: "",
-        password: "",
+        username: '',
+        password: '',
         rememberMe: false,
-        code: "",
-        uuid: "",
+        code: '',
+        uuid: ''
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的用户名" },
+          { required: true, trigger: 'blur', message: '请输入您的用户名' }
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" },
+          { required: true, trigger: 'blur', message: '请输入您的密码' }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
       },
       loading: false,
       // 验证码开关
       captchaEnabled: false,
       // 注册开关
       register: false,
-      redirect: undefined,
-    };
+      redirect: undefined
+    }
   },
   watch: {
     $route: {
-      handler: function (route) {
-        this.redirect = route.query && route.query.redirect;
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   created() {
-    this.getCode();
-    this.getCookie();
+    this.getCode()
+    this.getCookie()
   },
   methods: {
     getCode() {
       getCodeImg().then((res) => {
         this.captchaEnabled =
-          res.captchaEnabled === undefined ? true : res.captchaEnabled;
+          res.captchaEnabled === undefined ? true : res.captchaEnabled
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid;
+          this.codeUrl = 'data:image/gif;base64,' + res.img
+          this.loginForm.uuid = res.uuid
         }
-      });
+      })
     },
     getCookie() {
-      const username = Cookies.get("username");
-      const password = Cookies.get("password");
-      const rememberMe = Cookies.get("rememberMe");
+      const username = Cookies.get('username')
+      const password = Cookies.get('password')
+      const rememberMe = Cookies.get('rememberMe')
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password:
           password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
-      };
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      }
     },
     handleLogin() {
-      sessionStorage.setItem("name",this.loginForm.username);
+      sessionStorage.setItem('name', this.loginForm.username)
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true;
+          this.loading = true
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), {
-              expires: 30,
-            });
-            Cookies.set("rememberMe", this.loginForm.rememberMe, {
-              expires: 30,
-            });
+            Cookies.set('username', this.loginForm.username, { expires: 30 })
+            Cookies.set('password', encrypt(this.loginForm.password), {
+              expires: 30
+            })
+            Cookies.set('rememberMe', this.loginForm.rememberMe, {
+              expires: 30
+            })
           } else {
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove("rememberMe");
+            Cookies.remove('username')
+            Cookies.remove('password')
+            Cookies.remove('rememberMe')
           }
           this.$store
-            .dispatch("Login", this.loginForm)
+            .dispatch('Login', this.loginForm)
             .then(() => {
-              this.$router.push({ path: this.redirect || "/index" }).catch(() => {});
+              //TODO 在这里弹出来修改密码框框
+              this.$router.push({ path: this.redirect || '/index' }).catch(() => {
+              })
             })
             .catch(() => {
-              this.loading = false;
+              this.loading = false
               if (this.captchaEnabled) {
-                this.getCode();
+                this.getCode()
               }
-            });
+            })
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style scoped lang='scss'>
@@ -205,6 +209,7 @@ export default {
   height: 100%;
   width: 100%;
   display: flex;
+
   .left {
     background: url(../assets/img/dl_logo.png);
     background-size: calc(100vw * (820 / 1920)) calc(100vh * (894 / 1080));
@@ -213,11 +218,13 @@ export default {
     margin-top: 93px;
     margin-left: 189px;
   }
+
   .right {
     height: calc(100vh * (780 / 1080));
     width: calc(100vw * (516 / 1920));
     margin-top: 140px;
     margin-left: 193px;
+
     .right_top {
       background: url(../assets/img/dl_title.png);
       background-size: calc(100vw * (497 / 1920)) calc(100vh * (70 / 1080));
@@ -225,6 +232,7 @@ export default {
       width: calc(100vw * (497 / 1920));
       font-family: YouSheBiaoTiHei-Regular;
     }
+
     .login {
       background: url(../assets/img/dl_login.png);
       background-size: calc(100vw * (482 / 1920)) calc(100vh * (630 / 1080));
@@ -245,29 +253,34 @@ export default {
         margin-left: 45%;
         margin-top: 15%;
       }
-      .login-form-username{
-      color: #5C7994FF;
-      margin: 0;
-      font-size: 18px;
+
+      .login-form-username {
+        color: #5C7994FF;
+        margin: 0;
+        font-size: 18px;
       }
-      .login-form-password{
+
+      .login-form-password {
         color: #5C7994FF;
         margin-bottom: 0;
         font-size: 18px;
       }
-      .remember{
+
+      .remember {
         margin-top: calc(100vh * (20 / 1080)) !important;
         margin-bottom: calc(100vh * (50 / 1080)) !important;
       }
     }
   }
-    ::v-deep .el-input--medium .el-input__inner {
-      background:transparent;
-      border: 1px solid #03486F;
+
+  ::v-deep .el-input--medium .el-input__inner {
+    background: transparent;
+    border: 1px solid #03486F;
   }
+
   ::v-deep .el-form-item__content {
     margin-left: 50px !important;
     width: calc(100vw * (360 / 1920));
   }
 }
-</style>
+</style>