无修改-重新发布

src/views/login/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="login-container">
     <div class="new-login">
       <div class="new-login-l">
@@ -42,94 +42,94 @@
       </p>
 
     </div>
-  </div>
-</template>
-
-<script>
-import { validUsername } from '@/utils/validate'
+  </div>
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate'
 import Cookies from 'js-cookie'
 import { getToken } from '@/utils/auth'
-const md5 = require("md5")
-export default {
-  name: 'Login',
-  data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('密码不能少于6个字符'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: '',
-        password: ''
-      },
-      loginRules: {
-        username: [
-          { required: true, trigger: 'blur', validator: validateUsername }
-        ],
-        password: [
-          { required: true, trigger: 'blur', validator: validatePassword }
-        ]
-      },
-      loading: false,
-      passwordType: 'password',
+const md5 = require("md5")
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('密码不能少于6个字符!!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: 'blur', validator: validateUsername }
+        ],
+        password: [
+          { required: true, trigger: 'blur', validator: validatePassword }
+        ]
+      },
+      loading: false,
+      passwordType: 'password',
       redirect: undefined,
-      rememberPassword: ''
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
-  created() {
-    var that = this
-    document.onkeydown = function(e) {
-      e = window.event || e
-      // eslint-disable-next-line eqeqeq
-      if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'Num Enter')) { // 验证在登录界面和按得键是回车键enter
-        that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
-      }
-    }
+      rememberPassword: ''
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  created() {
+    var that = this
+    document.onkeydown = function(e) {
+      e = window.event || e
+      // eslint-disable-next-line eqeqeq
+      if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'Num Enter')) { // 验证在登录界面和按得键是回车键enter
+        that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
+      }
+    }
   },
   mounted: function() {
     // 读取cookie中的账号信息，如果有accountInfo的话，则说明该用户之前勾选了记住密码的功能，则需要自动填上账号密码
     this.loadAccountInfo()
-  },
-  methods: {
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
     handleLogin() {
       var obj = {
         username: this.loginForm.username,
         password: md5(this.loginForm.password)
       }
       var rememberStatus = this.rememberPassword
-      var accountInfo = this.loginForm.username + '&' + this.loginForm.password
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
+      var accountInfo = this.loginForm.username + '&' + this.loginForm.password
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
           this.loading = true
-          this.$store.dispatch('user/login', obj).then(() => {
+          this.$store.dispatch('user/login', obj).then(() => {
           // this.$store.dispatch('user/login', this.loginForm).then(() => {
               if (rememberStatus) {
                 console.log('勾选了记住密码，现在开始写入cookie')
@@ -142,18 +142,18 @@ export default {
               // 若为本地环境 则手写cookie
               if (window.location.href.indexOf('localhost') != -1) {
                 Cookies.set('token', getToken(), 1440)
-              }
-              this.$router.push({ path: this.redirect || '/' })
-              this.loading = false
-            })
-            .catch(() => {
-              this.loading = false
-            })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+              }
+              this.$router.push({ path: this.redirect || '/' })
+              this.loading = false
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
     },
     doRememberPassword() {
       const rememberStatus = this.rememberPassword
@@ -181,50 +181,50 @@ export default {
         _this.loginForm.password = passWord
         _this.rememberPassword = true
       }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-// $bg: #283443;
-// $light_gray: #fff;
-// $cursor: #fff;
-// 更改
-// $bg: #ccc;
-// $light_gray: #ccc;
-// $cursor: #000;
-// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-//   .login-container .el-input input {
-//     color: $cursor;
-//   }
-// }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+// $bg: #283443;
+// $light_gray: #fff;
+// $cursor: #fff;
+// 更改
+// $bg: #ccc;
+// $light_gray: #ccc;
+// $cursor: #000;
+// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+//   .login-container .el-input input {
+//     color: $cursor;
+//   }
+// }
 // .login-container {
-//   min-height: 232px;
-//   .el-input {
-//     display: inline-block;
-//     height: 38px;
-//     width: 80%;
-
-//     input {
-//       background: #fff;
-//       border: 0px;
-//       -webkit-appearance: none;
-//       border-radius: 0px;
-//       padding: 5px 5px 5px 15px;
-//       color: #000;
-//       height: 16.7%;
-//       caret-color: $cursor;
-
-//       &:-webkit-autofill {
-//         box-shadow: 0 0 0px 1000px $bg inset !important;
-//         -webkit-text-fill-color: $cursor !important;
-//       }
-//     }
-//   }
+//   min-height: 232px;
+//   .el-input {
+//     display: inline-block;
+//     height: 38px;
+//     width: 80%;
+
+//     input {
+//       background: #fff;
+//       border: 0px;
+//       -webkit-appearance: none;
+//       border-radius: 0px;
+//       padding: 5px 5px 5px 15px;
+//       color: #000;
+//       height: 16.7%;
+//       caret-color: $cursor;
+
+//       &:-webkit-autofill {
+//         box-shadow: 0 0 0px 1000px $bg inset !important;
+//         -webkit-text-fill-color: $cursor !important;
+//       }
+//     }
+//   }
 //   .el-form-item {
 //       border: 1px solid rgba(255, 255, 255, 0.1);
 //       background: #fff;
@@ -256,10 +256,10 @@ export default {
 //       overflow: hidden;
 //     }
 //     .btn  span{width:72%;background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; margin: 0 auto;display: block;}
-
+
 //   }
-
-</style>
+
+</style>
 
 /* <style>
 
@@ -269,85 +269,85 @@ export default {
     -webkit-text-fill-color: #000 !important;
 }
 
-</style> */
-// <style lang="scss" scoped>
-// $bg: #2d3a4b;
-// $dark_gray: #999;
-// $light_gray: #000;
-
-// .login-container {
-//   min-height: 100%;
+</style> */
+// <style lang="scss" scoped>
+// $bg: #2d3a4b;
+// $dark_gray: #999;
+// $light_gray: #000;
+
+// .login-container {
+//   min-height: 100%;
 //   width: 100%;
-//   height: 100%;
-//   position: relative;
-//   background: url("../../assets/images/nlogin-bg.png") no-repeat;
-//   background-size:100%;
-//   overflow: hidden;
-//   .login {
-//     border-radius: 5%;
-//     padding: 30px;
-//     background: rgba(0,0,0,0.4);
-//     width: 380px;
-//     height: 340px;
-//     position: relative;
+//   height: 100%;
+//   position: relative;
+//   background: url("../../assets/images/nlogin-bg.png") no-repeat;
+//   background-size:100%;
+//   overflow: hidden;
+//   .login {
+//     border-radius: 5%;
+//     padding: 30px;
+//     background: rgba(0,0,0,0.4);
+//     width: 380px;
+//     height: 340px;
+//     position: relative;
 //     top: 50%;
 //     left: 50%;
 //     margin-left: -190px;
 //     margin-top: -270px;
-//     box-shadow:0px 0px 10px #fff;
+//     box-shadow:0px 0px 10px #fff;
 //     .login-form {
-//       margin-top: 60px;
-//       position: relative;
-//       width: 520px;
-//       max-width: 100%;
-//       overflow: hidden;
-//     }
-
-//     .tips {
-//       font-size: 14px;
-//       color: #fff;
-//       margin-bottom: 10px;
-
-//       span {
-//         &:first-of-type {
-//           margin-right: 16px;
-//         }
-//       }
-//     }
-
-//     .svg-container {
-//       padding: 6px 5px 6px 15px;
-//       color: $dark_gray;
-//       vertical-align: middle;
-//       width: 30px;
-//       display: inline-block;
-//     }
-
-//       .title {
-//         font-size: 26px;
-//         color: $light_gray;
-//         margin: 0px auto 0 auto;
-//         text-align: center;
-//         font-weight: bold;
-//       }
-//       b {
-//         text-align: center;
-//         font: 14px/2 "";
-//       }
-
-//     .show-pwd {
-//       position: absolute;
-//       right: 10px;
-//       top: 7px;
-//       font-size: 16px;
-//       color: $dark_gray;
-//       cursor: pointer;
-//       user-select: none;
-//     }
+//       margin-top: 60px;
+//       position: relative;
+//       width: 520px;
+//       max-width: 100%;
+//       overflow: hidden;
+//     }
+
+//     .tips {
+//       font-size: 14px;
+//       color: #fff;
+//       margin-bottom: 10px;
+
+//       span {
+//         &:first-of-type {
+//           margin-right: 16px;
+//         }
+//       }
+//     }
+
+//     .svg-container {
+//       padding: 6px 5px 6px 15px;
+//       color: $dark_gray;
+//       vertical-align: middle;
+//       width: 30px;
+//       display: inline-block;
+//     }
+
+//       .title {
+//         font-size: 26px;
+//         color: $light_gray;
+//         margin: 0px auto 0 auto;
+//         text-align: center;
+//         font-weight: bold;
+//       }
+//       b {
+//         text-align: center;
+//         font: 14px/2 "";
+//       }
+
+//     .show-pwd {
+//       position: absolute;
+//       right: 10px;
+//       top: 7px;
+//       font-size: 16px;
+//       color: $dark_gray;
+//       cursor: pointer;
+//       user-select: none;
+//     }
 
 //     .kpt{text-align: center;color: #fff;display: inline-block;width: 100%;font:12px/18px '';}
-//   }
-// }
+//   }
+// }
 // </style>
 // <style lang="scss" scoped>
 //   .login-container {
@@ -404,11 +404,11 @@ export default {
 //   }
 // </style>
 <style lang="scss" scoped>
-$bg: #2d3a4b;
-$dark_gray: #999;
+$bg: #2d3a4b;
+$dark_gray: #999;
 $light_gray: #000;
-$bg: #ccc;
-$light_gray: #ccc;
+$bg: #ccc;
+$light_gray: #ccc;
 $cursor: #000;
 .login-container{
   position: relative;height: 100%;width: 100%;background:  url("../../assets/images/nlogin-bg1.jpg") no-repeat;background-size: cover;
@@ -448,4 +448,4 @@ $cursor: #000;
       }
     }
 }
-</style>
+</style>