pc登录记住密码功能

.babelrc

@@ -3,5 +3,12 @@
     "es2015",
     "stage-2"
   ],
-  "plugins": []
+  "plugins": [
+    ["transform-runtime", {
+      "helpers": false, // defaults to true
+      "polyfill": false, // defaults to true
+      "regenerator": false, // defaults to true
+      "moduleName": "babel-runtime" // defaults to "babel-runtime"
+    }]
+  ]
 }

assets/scss/common.scss

@@ -390,6 +390,7 @@ form .text-position .el-form-item__content{
   line-height: 20px;
 }
 form .text-position .el-form-item__content .el-checkbox .el-checkbox__inner{
+  margin-top: -1px;
   width: 14px;
   height: 14px;
   border: 1px solid #ccc;
@@ -400,7 +401,16 @@ form .text-position .el-form-item__content .el-checkbox .el-checkbox__label{
   color: #606266;
 }
 form .text-position .el-form-item__content .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
-  color: #409EFF;
+  color: #2d8cf0;
+}
+form .text-position .el-checkbox__input.is-checked .el-checkbox__inner{
+  background-color: #5078cb!important;
+  border-color: transparent!important;
+}
+form .text-position .el-checkbox__inner::after {
+  border: 2px solid #fff !important;
+  border-top: 0 !important;
+  border-left: 0 !important;
 }
 //登录页面样式
 //错误提示框变红隐藏

components/login/Login.vue

@@ -39,13 +39,15 @@
             <div>
               <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
                 <el-form-item prop="username">
-                  <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱/账号ID"></el-input>
+                  <el-input type="text" v-model="login.username" auto-complete="new-password" placeholder="手机号/邮箱/账号ID"></el-input>
                   <i class="fa fa-user"></i>
                 </el-form-item>
                 <el-form-item prop="password">
+                  <input autocomplete="new-password"
+                         type="password" style="display: none;width:0;height:0;">
                   <el-input type="password"
                             v-model="login.password"
-                            auto-complete="off"
+                            auto-complete="new-password"
                             placeholder="密码"
                             @keyup.enter.native="isLogin(true)"></el-input>
                   <i class="fa fa-lock"></i>
@@ -59,7 +61,10 @@
                   <img id="captchaImage" class="code-img" src="/sso/login/checkCode"/>
                   <a class="code-click" @click="getCode">看不清换一张</a>
                 </el-form-item>
-                <el-form-item class="text-right">
+                <el-form-item class="text-position">
+                  <div class="page-part" v-if="checkedRemember">
+                    <el-checkbox v-model="checked">记住密码</el-checkbox>
+                  </div>
                   <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
                 </el-form-item>
                 <el-form-item>
@@ -186,6 +191,8 @@
           captcha: '',
           spaceUU: ''
         },
+        checked: false,
+        checkedRemember: false,
         isShowLoading: false,
         checkUsername: false,
         checkPassword: false,
@@ -210,6 +217,11 @@
       this.$nextTick(() => {
         this.getLoginStyle()
       })
+      this.$nextTick(() => {
+        if (this.appId === 'mall' || this.appId === 'home') {
+          this.getCookie()
+        }
+      })
     },
     computed: {
       enterprise () {
@@ -241,6 +253,9 @@
         this.appId = request['appId'] || ''
         this.returnUrl = request['returnURL'] || ''
         this.baseUrl = request['baseUrl'] || ''
+        if (this.appId === 'home') {
+          this.checkedRemember = true
+        }
       },
       // 获取后台返回的数据
       getLoginStyle () {
@@ -257,6 +272,7 @@
               nb.style.backgroundImage = 'url(' + logoUrlStyle + ')'
               nb.innerHTML = title
               if (appId === 'mall') {
+                this.checkedRemember = true
                 nb.href = 'https://www.usoftmall.com/'
               }
               let bg = document.getElementById('bgStyle')
@@ -304,6 +320,13 @@
           this.isShowLoading = false
           this.$message.error('请填写密码')
         } else {
+          if (this.appId === 'mall' || this.appId === 'home') {
+            if (this.checked) {
+              this.setCookie(this.login.username, this.login.password, 7)
+            } else {
+              this.clearCookie()
+            }
+          }
           let param = new FormData()
           param.append('username', this.login.username)
           param.append('password', this.login.password)
@@ -409,6 +432,39 @@
         } catch (err) {
           console.log(err)
         }
+      },
+      // 设置cookie
+      setCookie (cName, cPwd, exdays) {
+        let exdate = new Date()
+        // let len = cPwd.substring(0)
+        // cPwd = cPwd.replace(len, '***')
+        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
+        window.document.cookie = 'userName' + '=' + cName + ';path=/;expires=' + exdate.toGMTString()
+        window.document.cookie = 'userPwd' + '=' + cPwd + ';path=/;expires=' + exdate.toGMTString()
+      },
+      // 读取cookies
+      getCookie () {
+        if (document.cookie.length > 0) {
+          let arr = document.cookie.split(';')
+          for (var i = 0; i < arr.length; i++) {
+            let arr2 = arr[i].split('=')
+            if (arr2[0].trim() === 'userName') {
+              this.login.username = arr2[1]
+              // console.log('get', this.login.username)
+            }
+            if (arr2[0].trim() === 'userPwd') {
+              this.login.password = arr2[1]
+              // console.log('get', this.login.password)
+            }
+            if (this.login.username && this.login.username) {
+              this.checked = true
+            }
+          }
+        }
+      },
+      // 清除cookie
+      clearCookie () {
+        this.setCookie('', '', -1)
       }
     }
   }
@@ -614,6 +670,24 @@
             font-size: 13px;
             color: #000;
           }
+          .text-position {
+            overflow: hidden;
+            .page-part {
+              float: left;
+              margin-bottom: 0;
+              .el-checkbox {
+                margin: 0;
+                span.el-checkbox__inner{
+                  width: 14px;
+                  height: 14px;
+                }
+              }
+            }
+            .forget {
+              float: right;
+              color: #2d8cf0;
+            }
+          }
         }
         .x-login-qrcode{
           display: none;

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.15.3",
+    "babel-polyfill": "^6.26.0",
     "bezier-easing": "^2.0.3",
     "bootstrap": "^3.3.7",
     "cookiejar": "^2.1.1",