记住密码

src/pages/home/login.vue

@@ -29,14 +29,26 @@
             </ul>
           </div>
           <!-- <router-link to="/product"> -->
-          <button
+          <div class="remember">
+            <el-checkbox v-model="checked">记住密码</el-checkbox>
+          </div>
+          <!-- <button
             class="loginBtn"
             @click="loginAction"
             :class="loginDisable ? 'disableLoginBtn' : ''"
             :disabled="loginDisable"
           >
             登录
+          </button> -->
+          <button
+            class="loginBtn"
+            @click="submitForm"
+            :class="loginDisable ? 'disableLoginBtn' : ''"
+            :disabled="loginDisable"
+          >
+            登录
           </button>
+
           <!-- <router-link to="/forgetPassword"> -->
           <div class="newForget" style="display:none">忘记密码</div>
           <!-- </router-link> -->
@@ -64,7 +76,8 @@ export default {
       form: {
         mobile: "",
         pwd: ""
-      }
+      },
+      checked: false
     };
   },
   computed: {
@@ -78,6 +91,9 @@ export default {
     this.form.mobile = loginInfo.mobile;
     this.form.pwd = loginInfo.password;
   },
+  mounted() {
+    this.getCookie();
+  },
   methods: {
     loginAction: function() {
       loginByPwd(this.form.mobile, hex_md5(this.form.pwd)).then(rs => {
@@ -116,6 +132,83 @@ export default {
     },
     to: function() {
       this.$router.push({ path: "/forgetPassword" });
+    },
+    submitForm() {
+      const self = this;
+      //判断复选框是否被勾选 勾选则调用配置cookie方法
+      if (self.checked == true) {
+        console.log("checked == true");
+        //传入账号名，密码，和保存天数3个参数
+        self.setCookie(self.form.mobile, self.form.pwd, 7);
+      } else {
+        console.log("清空Cookie");
+        //清空Cookie
+        self.clearCookie();
+      }
+
+      //与后端请求代码，本功能不需要与后台交互所以省略
+      loginByPwd(this.form.mobile, hex_md5(this.form.pwd)).then(rs => {
+        var resp = rs.data;
+
+        if (resp.state == 1) {
+          cacheLoginInfo(this.form.mobile, this.form.pwd);
+          console.log(resp);
+
+          var user = resp.data.user;
+          var org = resp.data.org;
+          var subscibe = resp.data.subscibe;
+          var config_list = resp.data.config_list;
+          var template_info = resp.data.template_info;
+          var filed_list = resp.data.filed_list;
+          console.log(resp.data.filed_list);
+          console.log(filed_list);
+
+          this.$store.dispatch("InitUserInfo", {
+            user: user,
+            org: org,
+            subscibe: subscibe,
+            template_info: template_info,
+            filed_list: filed_list
+          });
+          this.$store.dispatch("SetConfigList", config_list);
+
+          // this.$router.push({path: "/product"})
+          this.$router.push({ path: "/main" });
+        } else {
+          this.$toast({
+            message: resp.msg
+          });
+        }
+      });
+      console.log("登陆成功");
+    },
+    //设置cookie
+    setCookie(c_name, c_pwd, exdays) {
+      var exdate = new Date(); //获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
+      //字符串拼接cookie
+      window.document.cookie =
+        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
+    },
+    getCookie: function() {
+      if (document.cookie.length > 0) {
+        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
+        for (var i = 0; i < arr.length; i++) {
+          var arr2 = arr[i].split("="); //再次切割
+          //判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.form.mobile = arr2[1]; //保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.form.pwd = arr2[1];
+          }
+        }
+      }
+    },
+    //清除cookie
+    clearCookie: function() {
+      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
     }
   }
 };
@@ -234,5 +327,8 @@ export default {
       }
     }
   }
+  .remember {
+    float: left;
+  }
 }
 </style>