1. 完善admin.php ui 2. 完善verify.php功能

shinn-lancelot · Aug 23, 2018 · 0a0443c · 0a0443c
1 parent e51e125
commit 0a0443c
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 7 deletions.
diff --git a/admin.php b/admin.php
@@ -25,8 +25,13 @@
                 font-size: 4vw;
             }
             .user-size, .logout-size {
+                height: 4vw;
                 line-height: 4vw;
                 font-size: 3vw;
+                margin-left: 2vw;
+                display: inline-block;
+                vertical-align: top;
+                overflow: hidden;
             }
             .logo {
                 margin: 0 auto 10vw;
@@ -44,8 +49,13 @@
                 font-size: calc(640px * 0.04);
             }
             .user-size, .logout-size {
+                height: calc(640px * 0.04);
                 line-height: calc(640px * 0.04);
                 font-size: calc(640px * 0.03);
+                margin-left: 2vw;
+                display: inline-block;
+                vertical-align: top;
+                overflow: hidden;
             }
             .logo {
                 margin: 0 auto calc(640px * 0.1);
@@ -78,19 +88,14 @@
             top: 2vw;
             left: 0;
             z-index: 100;
+            font-size: 0;
         }
 
         .user {
-            margin-left: 1vw;
-            display: inline-block;
-            overflow: hidden;
             color: #36a82e;
         }
 
         .logout-btn {
-            margin-left: 1vw;
-            display: inline-block;
-            overflow: hidden;
             color: #ddd;
             text-decoration: underline;
             cursor: pointer;

diff --git a/asset/image/home.png b/asset/image/home.png
diff --git a/verify.php b/verify.php
@@ -40,12 +40,30 @@
                 right: 2.5vw;
                 cursor: pointer;
             }
+            .user-size, .logout-size {
+                height: 4vw;
+                line-height: 4vw;
+                font-size: 3vw;
+                margin-left: 2vw;
+                display: inline-block;
+                vertical-align: top;
+                overflow: hidden;
+            }
             .logo {
                 margin: 0 auto 10vw;
                 width: 30vw;
                 height: 30vw;
                 background: url("./asset/image/oauth_proxy.png") no-repeat center / contain;
             }
+            .home {
+                width: 4vw;
+                height: 4vw;
+                background: url("./asset/image/home.png") no-repeat center / contain;
+                float: left;
+                display: inline-block;
+                vertical-align: top;
+                cursor: pointer;
+            }
         }
 
         @media screen and (min-width: 640px) {
@@ -71,12 +89,30 @@
                 right: calc(640px * 0.025);
                 cursor: pointer;
             }
+            .user-size, .logout-size {
+                height: calc(640px * 0.04);
+                line-height: calc(640px * 0.04);
+                font-size: calc(640px * 0.03);
+                margin-left: 2vw;
+                display: inline-block;
+                vertical-align: top;
+                overflow: hidden;
+            }
             .logo {
                 margin: 0 auto calc(640px * 0.1);
                 width: calc(640px * 0.3);
                 height: calc(640px * 0.3);
                 background: url("./asset/image/oauth_proxy.png") no-repeat center / contain;
             }
+            .home {
+                width: calc(640px * 0.04);
+                height: calc(640px * 0.04);
+                background: url("./asset/image/home.png") no-repeat center / contain;
+                float: left;
+                display: inline-block;
+                vertical-align: top;
+                cursor: pointer;
+            }
         }
 
         .wrapper {
@@ -93,6 +129,28 @@
             position: relative;
         }
 
+        .user-box {
+            width: 100%;
+            padding: 0 2vw;
+            box-sizing: border-box;
+            text-align: right;
+            position: absolute;
+            top: 2vw;
+            left: 0;
+            z-index: 100;
+            font-size: 0;
+        }
+
+        .user {
+            color: #36a82e;
+        }
+
+        .logout-btn {
+            color: #ddd;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
         .box {
             width: 100%;
             height: auto;
@@ -170,6 +228,11 @@
 <body>
 <div class="wrapper">
     <div class="container">
+        <div class="user-box">
+            <a href="./admin.php"><div class="home"></div></a>
+            <p class="user user-size"><?php echo $user; ?></p>
+            <p class="logout-btn logout-size">退出登录</p>
+        </div>
         <div class="box">
             <div class="logo"></div>
             <form id="form">
@@ -200,7 +263,9 @@
         txtClass = '',
         clearIconObj = document.getElementsByClassName('icon-clear')[0],
         redirectUrl = window.location.host,
-        formObj = document.getElementById('form');
+        formObj = document.getElementById('form'),
+        loginoutBtnObj = document.getElementsByClassName('logout-btn')[0],
+        logoutState = 1;
 
     if (window.ActiveXObject) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
@@ -236,6 +301,34 @@
         }
     }
 
+    var logout = function(e) {
+        e.preventDefault();
+        if (logoutState != 1) {
+            return;
+        }
+        logoutState = 0;
+
+        xhr.open('post', './common/logoutHandle.php', true);
+        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
+        xhr.send('');
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                responseObj = JSON.parse(xhr.response);
+                alert(responseObj.message);
+                if (responseObj.code == 1) {
+                    setTimeout(function() {
+                        window.location.href = './login.php';
+                    }, 500);
+                } else {
+                    logoutState = 1;
+                }
+
+            } else {
+                console.log(xhr.readyState);
+            }
+        }
+    }
+
     var clearFunc = function (e) {
         txtObj.value = '';
         txt = '';
@@ -247,6 +340,10 @@
         submitBtnObj.removeEventListener('click', submitFunc);
     }
 
+    loginoutBtnObj.addEventListener('click', function(e) {
+        confirm('您确定要退出吗？') && logout(e);
+    });
+
     txtObj.addEventListener('input', function (e) {
         submitBtnObj.removeEventListener('click', submitFunc);
         txt = txtObj.value;