feat: 添加封禁展示页

idoknow · Jul 6, 2024 · c205251 · c205251
1 parent 0968907
commit c205251
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 1 deletion.
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
@@ -1,4 +1,19 @@
 <template>
+  <div id="banning-toast" v-if="$store.state.account.access.is_banned">
+      <div id="banning-card">
+        <div style="display: flex;flex-direction: row;margin-block: 8px;">
+          <div style="font-size: 80px;">🚫</div>
+          <div id="banning-details">
+              <h3>账号已被封禁</h3>
+              <p><strong>UIN：</strong>{{ $store.state.account.uin }}</p>
+              <p style="word-wrap: break-word;"><strong>封禁原因：</strong>{{ $store.state.account.access.comment }}</p>
+              <p><strong>结束时间：</strong>{{ $store.state.account.access.end_time }}</p>
+          </div>
+        </div>
+        <div>
+          <v-btn color="primary" text @click="logout" style="margin-top: 0px;width: 100%;">退出登录</v-btn></div>
+      </div>
+  </div>
 
   <!-- 左侧导航栏 -->
   <div id="container-wrap" style="height: calc(100vh - 64px)">
@@ -63,6 +78,7 @@
 
 <script>
 import BottomNavBar from '@/components/BottomNavBar.vue'
+import Cookies from "js-cookie";
 
 export default {
   components: {
@@ -88,6 +104,12 @@ export default {
   },
 
   methods: {
+
+    logout() {
+            Cookies.remove("access-token");
+            // reload
+            window.location.reload()
+        },
   }
 }
 </script>
@@ -104,6 +126,38 @@ button {
   padding: 0;
 }
 
+#banning-toast {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(238, 238, 238);
+    z-index: 10001;
+}
+
+#banning-card {
+    background-color: #fff;
+    padding: 16px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(71, 71, 71, 0.174);
+    text-align: center;
+    max-width: 25rem;
+    min-width: 20rem;
+    display: flex;
+    flex-direction: column;
+}
+
+#banning-details {
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
 
 /* 适配pc端 */
 @media (min-width: 600px) {

diff --git a/frontend/src/pages/post.vue b/frontend/src/pages/post.vue
@@ -15,7 +15,8 @@
     <div style="display: flex; padding: 16px">
         <v-dialog max-width="500">
             <template v-slot:activator="{ props: activatorProps }">
-                <img v-bind="activatorProps" :src="$store.state.account.avatarUrl" width="50" height="50" style="border-radius: 50%;">
+                <img v-bind="activatorProps" :src="$store.state.account.avatarUrl" width="50" height="50"
+                    style="border-radius: 50%;">
             </template>
 
             <template v-slot:default="{ isActive }">
@@ -371,6 +372,7 @@ button {
     color: #ffffff;
 }
 
+
 /* 适配pc端 */
 @media (min-width: 600px) {
 

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -28,6 +28,9 @@ export default createStore({
             "uin": 0,
             "avatarUrl": '',
             "userGroup": 'user',
+            "access": {
+                "is_banned": false
+            }
         }
     },
     mutations: {
@@ -66,6 +69,14 @@ export default createStore({
                         this.state.account.uin = res.data.data.uin
                         this.state.account.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
                         this.state.account.userGroup = res.data.data.user_group
+                        this.state.account.access = res.data.data.access
+
+                        console.log(this.state.account.access)
+                        // 如果 access.end_time 存在
+                        if (this.state.account.access.end_time) {
+                            let date = new Date(this.state.account.access.end_time)
+                            this.state.account.access.end_time = date.toLocaleString()
+                        }
                     }
                 })
                 .catch(err => {