[add] Login Page auto login

src/store/modules/app.js

@@ -13,7 +13,8 @@ const state = {
   userInfo: null,
   storeItems: store.get("storeItems") || null,
   goName: store.get("goName") || "",
-  expires: ""
+  expires: "",
+  autoLogin: true
 };
 
 const mutations = {
@@ -39,15 +40,32 @@ const mutations = {
   //   state.token = token;
   //   store.set(LOGIN_KEY, token, expires_time);
   // },
-  LOGIN(state, datas) {
-    state.token = datas.token;
-    state.expires_time = datas.expires_time;
-    store.set(LOGIN_KEY, datas.token, datas.expires_time);
-    store.set("expires", datas.expires_time);
+  AUTOLOGIN(state, auto) {
+    state.autoLogin = auto;
+  },
+  LOAD() {
+    const token = window.localStorage.getItem("token");
+    const expires = window.localStorage.getItem("expires");
+    if (token) state.token = token;
+    if (expires) state.expires = expires;
+  },
+  LOGIN(state, dates) {
+    state.token = dates.token;
+    state.expires_time = dates.expires_time;
+    store.set(LOGIN_KEY, dates.token, dates.expires_time);
+    store.set("expires", dates.expires_time);
+
+    if (state.autoLogin) {
+      window.localStorage.setItem("token", dates.token);
+      window.localStorage.setItem("expires", dates.expires_time);
+    }
   },
   LOGOUT(state) {
     state.token = undefined;
     store.remove(LOGIN_KEY);
+
+    window.localStorage.removeItem("token");
+    window.localStorage.removeItem("expires");
   },
   BACKGROUND_COLOR(state, color) {
     state.color = color;

src/views/user/Login.vue

@@ -52,11 +52,17 @@
             </div>
           </div>
         </form>
-        <div
-          class="forgetPwd"
-          @click="$router.push({ name: 'RetrievePassword' })"
-        >
-          <span class="iconfont icon-wenti"></span>忘记密码
+        <div style="display: flex;">
+          <div class="remeber">
+            <img :src="check_img" @click="remeberClick" />
+            <div class="text">记住密码</div>
+          </div>
+          <div
+            class="forgetPwd"
+            @click="$router.push({ name: 'RetrievePassword' })"
+          >
+            <span class="iconfont icon-wenti"></span>忘记密码
+          </div>
         </div>
       </div>
       <div class="list" :hidden="current !== 1">
@@ -194,6 +200,8 @@ import { getLogo } from "@api/public";
 import cookie from "@utils/store/cookie";
 import { VUE_APP_API_URL } from "@utils";
 const BACK_URL = "login_back_url";
+import check_on from "@assets/images/check_on.png";
+import check_off from "@assets/images/check_off.png";
 
 export default {
   name: "Login",
@@ -201,7 +209,7 @@ export default {
   data: function() {
     return {
       navList: ["账号登录", "快速登录"],
-      current: 1,
+      current: 0,
       account: "",
       password: "",
       captcha: "",
@@ -211,7 +219,9 @@ export default {
       keyCode: "",
       codeUrl: "",
       codeVal: "",
-      isShowCode: false
+      isShowCode: false,
+      remembed: true,
+      check_img: check_on
     };
   },
   mounted: function() {
@@ -405,6 +415,13 @@ export default {
         .catch(e => {
           this.$dialog.error(e.msg);
         });
+    },
+
+    remeberClick() {
+      this.remembed = !this.remembed;
+      this.check_img = this.remembed ? check_on : check_off;
+      console.log(this.remembed);
+      this.$store.commit("AUTOLOGIN", this.remembed);
     }
   }
 };
@@ -414,4 +431,25 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+.remeber {
+  display: flex;
+  margin-top: 0.2rem;
+  margin-left: 0.2rem;
+  margin-right: 2rem;
+}
+
+.remeber .text {
+  text-align: center;
+  /* font-size: 13px; */
+  color: #666;
+  line-height: 0.2rem;
+  margin-top: 0.1rem;
+}
+
+.remeber img {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-right: 0.1rem;
+}
 </style>