账户管理页面

kiisoo-ic-ui/src/pages/Login.vue

@@ -23,8 +23,11 @@
                             </i-input>
                             <p v-if="showPrompt" class="font-prompt">{{loginPrompt}}</p>
                         </FormItem>
+                        <FormItem style="text-align: left;margin-bottom: 10px">
+                            <Checkbox v-model="remember">记住密码</Checkbox>
+                        </FormItem>
                         <FormItem>
-                            <Button size="large" type="primary" :long="true" @click="handleSubmit">登录</Button>
+                            <Button :loading="loading" size="large" type="primary" :long="true" @click="handleSubmit">{{loginText}}</Button>
                         </FormItem>
                     </Form>
                 </div>
@@ -59,9 +62,17 @@
                 },
                 loginPrompt: '',
                 showPrompt: false,
-                showPromptUser: false
+                showPromptUser: false,
+                //登录中
+                loading: false,
+                loginText:'登录',
+                //记住密码
+                remember: false,
             }
         },
+        mounted: function() {
+            this.getCookie();
+        },
         methods: {
             // 聚焦事件
             inputFocus: function () {
@@ -69,17 +80,29 @@
                 this.showPromptUser = false;
             },
             handleSubmit() {
+                //记住密码
+                this.rememberMe();
                 const that = this;
-
+                that.setLoading();
                 let login = this.formInline.user.trim();
                 let password = this.formInline.password.trim();
+                if(!login || !password) {
+                    that.setNoLoading();
+                    this.formInline.user = '';
+                    this.formInline.password = '';
+                    return;
+                }
                 let request = {
                     login:login,
                     password:password
                 };
                 LoginService.login(request, function (data) {
                     let code = data.data.code;
+                    that.setNoLoading();
                     if(code === '0000'){
+                        sessionStorage.setItem("loginInfo", JSON.stringify(data.data.results));
+                        sessionStorage.setItem("userId", data.data.results.userId);
+                        sessionStorage.setItem("roleCode", data.data.results.roleCode);
                         that.$router.push('/home');
                         that.$Message.info("登陆成功");
                     }else if(code === '0004'){
@@ -92,7 +115,61 @@
                         that.$Message.info("系统繁忙");
                     }
                 });
+            },
+            //登录加载样式
+            setLoading() {
+                this.loading = true;
+                this.loginText = '登录中...';
+            },
+            //取消登录加载样式
+            setNoLoading() {
+                this.loading = false;
+                this.loginText = '登录';
+            },
+            //记住密码
+            rememberMe() {
+                //记住密码
+                if (this.remember) {
+                    // 保存期限为30天
+                    this.setCookie(this.formInline.user, this.formInline.password, 30);
+                } else {
+                    // 清空 Cookie
+                    this.clearCookie();
                 }
+            },
+            // 设置Cookie-用户名, 密码, 保存天数
+            setCookie(phone, password, exdays) {
+                let exdate = new Date(); // 获取时间
+                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+                // 字符串拼接cookie
+                window.document.cookie = 'login=' + phone + ';path=/;expires=' + exdate.toGMTString();
+                window.document.cookie = 'password=' + password + ';path=/;expires=' + exdate.toGMTString();
+            },
+            // 清除Cookie
+            clearCookie() {
+                // 修改2值都为空，天数为负1天就好了
+                this.setCookie('', '', -1);
+            },
+            // 读取Cookie
+            getCookie() {
+                if (document.cookie.length > 0) {
+                    // 这里显示的格式需要切割一下自己可输出看下
+                    let arr = document.cookie.split('; ');
+                    for (let i = 0; i < arr.length; i++) {
+                        // 再次切割
+                        let arr2 = arr[i].split('=');
+                        // 判断查找相对应的值
+                        if (arr2[0] === 'login') {
+                            this.remember = true;
+                            // 保存到保存数据的地方
+                            this.formInline.user = arr2[1];
+                        } else if (arr2[0] === 'password') {
+                            this.remember = true;
+                            this.formInline.password = arr2[1];
+                        }
+                    }
+                }
+            },
         }
     }