'normal'

src/pages/login/components/SignInForm.vue

@@ -3,13 +3,14 @@
     <div slot="header" align="center">
       <span>登入内业管理系统</span>
     </div>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0">
-      <el-form-item prop="email">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0" class="rpm-sign-in-login">
+      <el-form-item prop="username">
         <el-input
           ref="username"
           placeholder="输入账号"
           type="text"
           tabindex="1"
+          autocomplete="off"
           v-model="loginForm.username"
         />
         <div class="rpm-sign__tip cprimary" >
@@ -23,6 +24,7 @@
           type="password"
           tabindex="2"
           :key="passwordType"
+          autocomplete="new-password"
           v-model="loginForm.password"
           @keyup.native="checkCapslock"
           @blur="capsTooltip = false"
@@ -32,6 +34,11 @@
           忘记密码
         </div>
       </el-form-item>
+
+      <el-form-item prop="remember">
+        <input type="checkbox" v-model="loginForm.remember" />
+        <label class="ml10">记住密码</label>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click.native.prevent="handleLogin">
           登入
@@ -60,7 +67,7 @@ import { validateLoginname, validatePassword } from '@/utils/validate'
 import md5 from '@/utils/md5'
 import { mapActions } from "vuex";
 
-
+const Base64 = require("js-base64").Base64;
 
 export default {
   name: 'Login',
@@ -69,7 +76,8 @@ export default {
       visibleForm: 'signIn',
       loginForm: {
         username: '',
-        password: ''
+        password: '',
+        remember: false,
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateLoginname }],
@@ -92,8 +100,14 @@ export default {
     }
   },
   created(){
-    console.log( this.$route.query  )
-     this.redirect = this.$route.query.redirect
+    this.redirect = this.$route.query.redirect
+    let username = this.getCookie("username");
+    if (username) {
+      this.loginForm.username = username;
+      this.loginForm.password = Base64.decode(this.getCookie("password"));
+      this.loginForm.remember = true;
+    }
+    console.log( this.loginForm )
   },
   methods: {
     ...mapActions("user", ["login", "loadDepartment"]),
@@ -101,6 +115,27 @@ export default {
       const { key } = e
       this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
     },
+    getCookie: function (key) {
+      if (document.cookie.length > 0) {
+        var start = document.cookie.indexOf(key + "=");
+        if (start !== -1) {
+          start = start + key.length + 1;
+          var end = document.cookie.indexOf(";", start);
+          if (end === -1) end = document.cookie.length;
+          return unescape(document.cookie.substring(start, end));
+        }
+      }
+      return "";
+    },
+    setCookie: function (cName, value, expiredays) {
+      var exdate = new Date();
+      exdate.setDate(exdate.getDate() + expiredays);
+      document.cookie =
+        cName +
+        "=" +
+        decodeURIComponent(value) +
+        (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
@@ -112,6 +147,7 @@ export default {
       })
     },
     handleLogin() {
+      let remember = this.loginForm.remember
       this.$refs.loginForm.validate(valid => {
         if (!valid)  return;
         this.loading = true
@@ -119,6 +155,14 @@ export default {
         let path = this.redirect || '/';
         this.login( param).then(() => {
           this.$router.push({ path, query: this.otherQuery })
+          if( remember ){
+            let passWord = Base64.encode(this.loginForm.password);
+            this.setCookie("password", passWord, 7);
+            this.setCookie("username", this.loginForm.username, 7);
+          }else{
+            this.setCookie("password", "", 7);
+            this.setCookie("username", "", 7);
+          }
           this.loadDepartment()
           this.loading = false
         }).catch((err) => {
@@ -136,6 +180,9 @@ export default {
 .el-button {
   width: 100% !important;
 }
+.login-form{
+  width: 450px;
+}
 .rpm-sign-in {
   position: absolute;
   top: 20px;

src/pages/login/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="rpm-login other-container" style="margin-top: 200px;  padding: 12px;">
+  <div class="rpm-login" style="margin-top: 200px;  padding: 12px;">
 
       <div class="rpm-login-info" >
         <div data-options="novalidate:true">
-          <div style="width:410px; height: 400px; background-color: #fff; position: absolute; right: 0px; top:0px;">
+          <div class="login-box">
               <SignInForm v-if="visibleForm === 'signIn'" @show-form="showForm" />
           </div>
         </div>
@@ -83,17 +83,16 @@ export default {
 
 .rpm-login {
 
-  width: 100%;
-  height: 530px;
+  width: 1088px;
+  height: 580px;
   background-image:url('../../assets/login_bg.jpg');
 
   position: relative;
   margin-left: auto;
   margin-right: auto;
-
   .rpm-login-info{
     width: 100%;
-    height: 400px;
+    height: 480px;
     margin: auto;
     background-image: url("../../assets/login_bg1.png");
     position: relative;
@@ -106,7 +105,7 @@ export default {
     height: 40px;
     text-align: center;
     .el-image, .el-avatar {
-      margin-right: 20px;
+      margin-right: 10px;
       background-color: $rpm-theme-color;
     }
     .rpm-logo__title {
@@ -131,7 +130,7 @@ export default {
     .rpm-contact__item {
       position: relative;
       margin-top: 10px;
-      padding-left: 36px;
+      padding-left: 30px;
       height: 40px;
       line-height: 40px;
       font-size: 16px;

src/utils/validate.js

@@ -84,7 +84,7 @@ export function isArray(arg) {
  * @returns {Boolean}
  */
 export function validUsername(value) {
-  return value.length >= 6
+  return value.length >= 2
 }
 
 /**
@@ -308,7 +308,7 @@ export function validText1023(rule, value, callback) {
 
 export function validateLoginname(rule, value, callback) {
   if (!validUsername(value) && !validEmail(value)) {
-    callback(new Error('Please enter the correct email'))
+    callback(new Error('请输入用户名'))
   } else {
     callback()
   }
@@ -316,7 +316,7 @@ export function validateLoginname(rule, value, callback) {
 
 export function validateUsername(rule, value, callback) {
   if (!validUsername(value)) {
-    callback(new Error('Please enter the correct user name'))
+    callback(new Error('请输入用户名'))
   } else {
     callback()
   }
@@ -332,7 +332,7 @@ export function validateEmail(rule, value, callback) {
 
 export function validatePassword(rule, value, callback){
   if (value.length < 6) {
-    callback(new Error('The password can not be less than 6 digits'))
+    callback(new Error('密码不能小于6位数'))
   } else {
     callback()
   }