From 34d93e1f2906cd3443b63e9ed42618668957984c Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 8 Mar 2022 16:31:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=90=8E=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=EF=BC=8C=E8=87=AA=E5=8A=A8=E9=80=80=E5=87=BA?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=EF=BC=8C=E7=99=BB=E5=BD=95=E9=A1=B5=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/header/index.vue      |  18 +-
 src/layouts/home/index.vue        |  40 +++--
 src/pages/account/login/index.vue | 269 +++++++++++++-----------------
 src/setting.js                    |   2 +
 4 files changed, 154 insertions(+), 175 deletions(-)

diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 00c61f1..bcc8594 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -23,11 +23,9 @@
                     </el-dropdown-menu>
                 </el-dropdown>
             </div>
-            <div v-else-if="!isLogin">
-                <router-link class="login" to="/login" target="_blank">
-                    <img src="@/assets/img/user.png" alt="">
-                    <span>登录</span>
-                </router-link>
+            <div class="login" v-else-if="!isLogin" @click="toLogin">
+              <img src="@/assets/img/user.png" alt="">
+              <span>登录</span>
             </div>
         </div>
 
@@ -116,6 +114,10 @@ export default {
           avatar: userInfo.userAvatars,
           userName: userInfo.userName
         })
+        // 如果没有用户名，说明是客户，那就从客户接口里去取
+        userInfo.userName || this.$get(this.api.isClient).then(res => {
+          res.customerName && this.setInfo({userName: res.customerName})
+        }).catch(res => {})
       }).catch(err => { })
     },
     hideSetting() {
@@ -131,10 +133,7 @@ export default {
       }
     },
     toLogin() {
-      this.$refs.nav.jump({
-        index: '/login',
-        title: '登录'
-      })
+      window.open(this.$router.resolve('/login').href)
     },
     // 跳转到管理员后台
     toManager() {
@@ -209,7 +208,6 @@ export default {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            max-width: $max-width;
             min-width: $min-width;
             padding: 0 80px 0 10px;
             margin: 0 auto;
diff --git a/src/layouts/home/index.vue b/src/layouts/home/index.vue
index 9b496bf..4692c1c 100644
--- a/src/layouts/home/index.vue
+++ b/src/layouts/home/index.vue
@@ -1,18 +1,10 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-03 14:33:21
- * @LastEditTime: 2021-11-05 17:58:45
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \questionnaired:\code\FE_huoran_data\src\layouts\home\index.vue
--->
 <template>
     <div class="main">
         <v-head></v-head>
         <div class="layout">
             <div class="content">
                 <transition name="move" mode="out-in">
-                    <keep-alive :include="tagsList">
+                    <keep-alive>
                         <router-view class="view"></router-view>
                     </keep-alive>
                 </transition>
@@ -26,21 +18,41 @@
 <script>
 import vHead from '../header'
 import vFooter from '../footer'
+import { mapActions } from 'vuex'
+import Setting from '@/setting'
+import util from '@/libs/util'
 export default {
     data() {
         return {
-            tagsList: [],
+            
         };
     },
     components: {
         vHead,
         vFooter
     },
-    computed: {
-        
+    mounted() {
+        this.autoLogout()
     },
-    created() {
-        
+    methods: {
+        ...mapActions('user', [
+            'logout'
+        ]),
+        // 长时间未操作,自动退出登录
+        autoLogout() {
+            let lastTime = new Date().getTime()
+            document.onmousedown = () => {
+                lastTime = new Date().getTime()
+            };
+            const autoLogoutTime = Setting.autoLogoutTime
+            const timer = setInterval(() => {
+                if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > autoLogoutTime) {
+                    util.errorMsg('用户登录过期，请重新登录')
+                    clearInterval(timer)
+                    setTimeout(this.logout, 1500)
+                }
+            }, 1000)
+        }
     }
 };
 </script>
diff --git a/src/pages/account/login/index.vue b/src/pages/account/login/index.vue
index 7b6cc24..34aa2bd 100644
--- a/src/pages/account/login/index.vue
+++ b/src/pages/account/login/index.vue
@@ -1,13 +1,5 @@
 <template>
     <div class="wrap">
-        <div class="shapes">
-            <img class="shape1" src="@/assets/img/shapes/shape1.png" alt="">
-            <img class="shape2" src="@/assets/img/shapes/shape2.png" alt="">
-            <img class="shape3" src="@/assets/img/shapes/shape3.png" alt="">
-            <img class="shape4" src="@/assets/img/shapes/shape4.png" alt="">
-            <img class="shape5" src="@/assets/img/shapes/shape5.png" alt="">
-            <img class="shape6" src="@/assets/img/shapes/shape6.png" alt="">
-        </div>
         <div class="login">
             <div class="form">
                 <h6 class="title">欢迎使用请登录</h6>
@@ -117,6 +109,7 @@ export default {
             this.$refs.login.validate(valid => {
                 if (valid) {
                     this.login(this.form).then(() => {
+                        window.opener && window.opener.location.reload() // 刷新官网
                         let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index'
                         this.$router.replace(redirect)
                     }).catch(res => {
@@ -204,157 +197,131 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    .wrap {
-        min-height: 100%;
-        background-color:  #F3F6FA;
-        overflow: hidden;
-        .shapes{
-            img{
-                position: absolute;
-            }
-        }
-        .shape1{
-            top: 123px;
-        }
-        .shape2{
-            top: 238px;
-            left: 35px;
-        }
-        .shape3{
-            top: 485px;
-        }
-        .shape4{
-            bottom: 285px;
-            right: 0;
-        }
-        .shape5{
-            bottom: 145px;
-            right: 0;
-        }
-        .shape6{
-            bottom: 0;
-            right: 0;
-        }
-        .login{
-            z-index: 4;
-            position: absolute;
-            top: 48%;
-            left: 50%;
-            transform: translate(-50%, -50%);
+.wrap {
+    min-height: 100%;
+    background-color: #F3F6FA;
+    .login{
+        min-height: calc(100vh - 70px);
+        padding-top: calc((100vh - 611px) / 2);
+        background: url(../../../assets/img/shapes/shape1.png) (0 123px)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape2.png) (35px 238px)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape3.png) (0 485px)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape4.png) (right 50%)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape5.png) (right 80%)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape6.png) (right bottom)/auto no-repeat;
+        .form{
             width: 436px;
-            .form{
-                padding: 38px 38px 60px;
-                border-radius: 6px;
-                background-color: #fff;
-                .title{
-                    margin-bottom: 25px;
-                    font-size: 26px;
-                    color: #0B1D30;
-                    letter-spacing: 4px;
-                }
-                .tab{
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: 24px;
-                    border-bottom: 2px solid #E1E6F2;
-                    li{
-                        padding: 18px 0;
-                        margin-bottom: -1px;
-                        font-size: 18px;
-                        color: #555;
-                        cursor: pointer;
-                        border-bottom: 4px solid transparent;
-                        &:first-child{
-                            margin-right: 50px;
-                        }
-                        &.active{
-                            color: #006EFF;;
-                            border-bottom-color: #006EFF;
-                        }
+            padding: 38px 38px 60px;
+            margin: 0 auto 0;
+            border-radius: 6px;
+            background-color: #fff;
+            .title{
+                margin-bottom: 25px;
+                font-size: 26px;
+                color: #0B1D30;
+                letter-spacing: 4px;
+            }
+            .tab{
+                display: flex;
+                align-items: center;
+                margin-bottom: 24px;
+                border-bottom: 2px solid #E1E6F2;
+                li{
+                    padding: 18px 0;
+                    margin-bottom: -1px;
+                    font-size: 18px;
+                    color: #555;
+                    cursor: pointer;
+                    border-bottom: 4px solid transparent;
+                    &:first-child{
+                        margin-right: 50px;
+                    }
+                    &.active{
+                        color: #006EFF;;
+                        border-bottom-color: #006EFF;
                     }
                 }
-                .label{
-                    margin-bottom: 10px;
-                    color: #105CB2;
-                }
-                /deep/.el-form-item{
-                    margin-bottom: 20px;
-                }
-                /deep/.el-input__inner{
-                    position: relative;
-                    height: 52px;
-                    padding: 0 20px 0 34px;
-                    line-height: 50px;
-                    background-color: #FBFBFB;
-                    border: 1px solid #E1E6F2;
-                    border-radius: 4px !important;
-                }
-                .account,.password,.code{
-                    z-index: 1;
-                    position: absolute;
-                    top: 17px;
-                    left: 11px;
-                    width: 18px;
-                    height: 18px;
-                    background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
-                }
-                .password{
-                    top: 18px;
-                    background-image: url(../../../assets/img/login/password.png);
-                }
-                .code{
-                    top: 18px;
-                    background-image: url(../../../assets/img/login/code.png);
-                }
-                .ver-img{
-                    position: absolute;
-                    top: 1px;
-                    right: 1px;
-                }
-                /deep/.el-form-item__error{
-                    top: 105%;
-                    left: auto;
-                    right: 0;
-                    color: #FFA94E;
-                }
-                .submit{
-                    width: 100%;
-                    height: 48px;
-                    margin-top: 30px;
-                    line-height: 48px;
-                    padding: 0;
-                    font-size: 20px;
-                    background-color: $main-color;
-                    border-radius: 4px;
-                    border: 0;
-                }
+            }
+            .label{
+                margin-bottom: 10px;
+                color: #105CB2;
+            }
+            /deep/.el-form-item{
+                margin-bottom: 20px;
+            }
+            /deep/.el-input__inner{
+                position: relative;
+                height: 52px;
+                padding: 0 20px 0 34px;
+                line-height: 50px;
+                background-color: #FBFBFB;
+                border: 1px solid #E1E6F2;
+                border-radius: 4px !important;
+            }
+            .account,.password,.code{
+                z-index: 1;
+                position: absolute;
+                top: 17px;
+                left: 11px;
+                width: 18px;
+                height: 18px;
+                background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
+            }
+            .password{
+                top: 18px;
+                background-image: url(../../../assets/img/login/password.png);
+            }
+            .code{
+                top: 18px;
+                background-image: url(../../../assets/img/login/code.png);
+            }
+            .ver-img{
+                position: absolute;
+                top: 1px;
+                right: 1px;
+            }
+            /deep/.el-form-item__error{
+                top: 105%;
+                left: auto;
+                right: 0;
+                color: #FFA94E;
+            }
+            .submit{
+                width: 100%;
+                height: 48px;
+                margin-top: 30px;
+                line-height: 48px;
+                padding: 0;
+                font-size: 20px;
+                background-color: $main-color;
+                border-radius: 4px;
+                border: 0;
             }
         }
     }
-    .footer{
-        z-index: 3;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-    }
-    .copyright{
-        padding: 18px 0;
+}
+.copyright{
+    padding: 18px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: #F3F6FA;
+    a{
+        color:#B1B4B8;
         font-size: 12px;
-        text-align: center;
-        background-color: #F3F6FA;
-        a{
-            color:#B1B4B8;
-            font-size: 12px;
-            &:hover{
-                opacity: .8;
-            }
+        &:hover{
+            opacity: .8;
         }
     }
-    .tips {
-        margin: 0 0 10px 5px;
-        font-size: 14px;
-        text-align: center;
-        color: #666;
+}
+.tips {
+    margin: 0 0 10px 5px;
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+}
+@media (max-height: 680px) {
+    .wrap .login {
+        padding: 40px 0;
     }
+}
 </style>
\ No newline at end of file
diff --git a/src/setting.js b/src/setting.js
index 250ecfd..fd69b8d 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -32,6 +32,8 @@ const Setting = {
     errorModalType: 'Message',
     // Cookies 默认保存时间，单位：天
     cookiesExpires: 1,
+    // 长时间未操作，自动退出登录时间
+    autoLogoutTime: 3600000,
     /**
      * localStorage里保存的token的key
      */