From 4262b6091c2d18fab5adf2bc32d939478d464643 Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Tue, 16 Apr 2024 23:17:59 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=A1=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostCard.vue | 130 +++++++++++++--------
 frontend/src/pages/service.vue       |  58 +++++++++-
 frontend/src/pages/world.vue         | 167 ++++++++++++++++++++++++---
 3 files changed, 292 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/PostCard.vue b/frontend/src/components/PostCard.vue
index 9a3ec01..0064336 100644
--- a/frontend/src/components/PostCard.vue
+++ b/frontend/src/components/PostCard.vue
@@ -1,44 +1,32 @@
 <template>
-<v-card
-    class="mx-auto postcard"
-    :color="backgrouldColor"
-    max-width="400"
-    style="border-radius: 10px; color: #fff"
-  >
+  <v-card class="mx-auto postcard" :color="backgrouldColor" max-width="400" style="border-radius: 10px; color: #fff">
     <div style="width: 100%; padding: 8px 8px 0px 8px">
       <div style="display: flex; align-items: center; justify-content: space-between;">
         <div style="display: flex; align-items: center;">
           <v-icon color="white" style="font-size: 25px">mdi-pin</v-icon>
-          <h3 style="margin-left: 8px">稿件</h3>
+          <h3 style="margin-left: 8px">稿件 #{{ post.id }}</h3>
         </div>
         <!-- 取消投稿 -->
-        <v-btn v-if="post.status == '待审核'" text="撤回" @click="recall" variant="plain"></v-btn>
+        <v-btn v-if="typ === 'self' && post.status == '待审核'" text="撤回" @click="recall" variant="plain"></v-btn>
       </div>
 
     </div>
-    
+
     <v-card-text class="py-2" style="font-size: 16px; font-weight: bold; line-height: 1.5; word-spacing: 2px">
-      {{post.text}}
+      {{ post.text }}
     </v-card-text>
 
     <!-- 图片显示，横向滑动，圆角 -->
-    <div style="display: flex; margin-left: 16px; margin-right: 16px; margin-top: 8px; overflow-x: auto; white-space: nowrap;">
-      <img
-        v-for="img in post.images"
-        :key="img"
-        :src="img"
-        style="border-radius: 10px; margin-right: 8px; width: 100px; height: 100px; object-fit: cover"
-      />
+    <div
+      style="display: flex; margin-left: 16px; margin-right: 16px; margin-top: 8px; overflow-x: auto; white-space: nowrap;">
+      <img v-for="img in post.images" :key="img" :src="img"
+        style="border-radius: 10px; margin-right: 8px; width: 100px; height: 100px; object-fit: cover" />
     </div>
 
     <v-card-actions>
       <v-list-item class="w-100">
         <template v-slot:prepend>
-          <v-avatar
-            v-if="!post.anon"
-            color="grey-darken-3"
-            :image="avatarBaseUrl + post.uin + '&s=100'"
-          ></v-avatar>
+          <v-avatar v-if="!post.anon" color="grey-darken-3" :image="avatarBaseUrl + post.uin + '&s=100'"></v-avatar>
           <span v-else style="font-size: 36px; margin-right: 16px">🫥</span>
         </template>
 
@@ -54,41 +42,89 @@
             <span class="me-1">·</span>
             <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
             <span class="subheading">45</span> -->
-            <span class="subheading" style="font-weight: bold">{{ post.status }}</span>
+            <span v-if="typ === 'self'" class="subheading" style="font-weight: bold">{{ post.status }}</span>
+            <!-- <v-select v-else v-model="post.status" label="标记为" :items="filterStatus" variant="outlined" size="small"
+            @update:model-value="updateJudgePost">
+            </v-select> -->
+
+            <v-menu v-else>
+              <template v-slot:activator="{ props }">
+                <v-btn v-bind="props">
+                  标记为
+                </v-btn>
+              </template>
+              <v-list @click:select="updateJudgePost">
+                <v-list-item v-for="(item, index) in filterStatus" :key="index" :value="index">
+                  <v-list-item-title>{{ item }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </div>
         </template>
       </v-list-item>
     </v-card-actions>
   </v-card>
+
+  <v-dialog v-model="dialog" variant="outlined" persistent>
+    <v-card
+      title="拒绝原因">
+      <v-card-text>
+        <v-text-field v-model="reason" label="拒绝原因" outlined></v-text-field>
+      </v-card-text>
+      <template v-slot:actions>
+        <v-btn text="取消" @click="dialog = false"></v-btn>
+        <v-btn class="ms-auto" text="OK" @click="dialog = false; emitJudgePost()"></v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-    export default {
-        name: 'PostCard',
-        props: ['post'],
-        data() {
-            return {
-                backgrouldColor: "",
-                avatarBaseUrl: "http://q1.qlogo.cn/g?b=qq&nk="
-            }
-        },
-        mounted() {
-            this.backgrouldColor = this.randomColor()
-        },
-        methods: {
-            randomColor() {
-                let colors = ["#FFC107", "#42A5F5", "#9CCC65", "#F06292", "#76FF03", "#9E9E9E", "#8D6E63"]
-                return colors[Math.floor(Math.random() * colors.length)]
-            },
-            recall() {
-                this.$emit('recall', this.post.id)
-            }
-        }
+export default {
+  name: 'PostCard',
+  props: ['post', 'typ'],
+  data() {
+    return {
+      dialog: false,
+      reason: "",
+
+      filterStatus: ['通过', '拒绝'],
+      backgrouldColor: "",
+      avatarBaseUrl: "http://q1.qlogo.cn/g?b=qq&nk="
+    }
+  },
+  mounted() {
+    this.backgrouldColor = this.randomColor()
+  },
+  methods: {
+    randomColor() {
+      let colors = ["#FFC107", "#42A5F5", "#9CCC65", "#F06292", "#76FF03", "#9E9E9E", "#8D6E63"]
+      return colors[Math.floor(Math.random() * colors.length)]
+    },
+    recall() {
+      this.$emit('recall', this.post.id)
+    },
+    updateJudgePost(e) {
+      // console.log(e)
+      let status = this.filterStatus[e.id]
+      this.post.status = status
+      if (status === '拒绝') {
+        this.dialog = true
+      } else {
+        this.emitJudgePost()
+      }
+    },
+    emitJudgePost() {
+      this.post.reason = this.reason
+      this.$emit('updateJudgePost', this.post)
     }
+  }
+}
 </script>
 
 <style>
-    .postcard {
-      box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
-    }
+.postcard {
+  margin-bottom: 16px;
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/pages/service.vue b/frontend/src/pages/service.vue
index 0583c6d..ce75fc4 100644
--- a/frontend/src/pages/service.vue
+++ b/frontend/src/pages/service.vue
@@ -1,10 +1,39 @@
 <template>
 
   <BottomNavBar v-model="value" @input="go" />
-
+  ·
   <div style="padding: 16px;">
 
     <h1 style="margin-bottom: 16px">🎲 服务</h1>
+
+    <h2 style="margin-top: 16px">🙂 账号服务</h2>
+    <v-dialog max-width="500">
+      <template v-slot:activator="{ props: activatorProps }">
+        <div class="rect1" style="background-color: #2196F3;" v-bind="activatorProps">
+          <div>
+            <p style="font-weight: bold; font-size: 16px">修改密码</p>
+          </div>
+          <a style="font-size: 16px; cursor:pointer; font-weight: bold;">></a>
+        </div>
+      </template>
+
+      <template v-slot:default="{ isActive }">
+        <v-card title="修改密码">
+
+          <v-card-text>
+            <v-text-field variant="outlined" v-model="password" label="新密码" type="password"></v-text-field>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text="取消" @click="isActive.value = false"></v-btn>
+            <v-btn text="确认" @click="isActive.value = false; updatePassword()"></v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+
+    <h2 style="margin-top: 16px">🤩 推荐网站</h2>
     <div class="rect1" style="background-color: #2196F3;">
       <div>
         <p style="font-weight: bold; font-size: 16px">🗺️ 桂林中学毕业生去向分布图</p>
@@ -30,6 +59,7 @@ export default {
   },
   data() {
     return {
+      password: "",
       snackbar: {
         show: false,
         text: '',
@@ -52,6 +82,27 @@ export default {
     go(url) {
       // this.displayInnerWindow = url
       window.open(url, '_blank')
+    },
+
+    updatePassword() {
+      if (this.password.length < 6) {
+        this.toast('密码长度至少为6位')
+        return
+      }
+      this.$axios.put('/v1/account/update-pwd', {
+        "new_passwd": this.password
+      })
+        .then(res => {
+          if (res.data.code === 0) {
+            this.toast('密码修改成功', 'success')
+          } else {
+            this.toast('密码修改失败：' + res.data.msg)
+          }
+        })
+        .catch(err => {
+          this.toast('失败：' + err.response.data.msg)
+          console.error(err)
+        })
     }
   }
 }
@@ -60,6 +111,7 @@ export default {
 
 <style>
 .rect1 {
+  cursor: pointer;
   padding: 16px;
   font-size: 18px;
   border-radius: 7px;
@@ -70,5 +122,9 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  transition: box-shadow 0.2s;
+}
+.rect1:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/pages/world.vue b/frontend/src/pages/world.vue
index 6571d3b..a7da93e 100644
--- a/frontend/src/pages/world.vue
+++ b/frontend/src/pages/world.vue
@@ -1,23 +1,21 @@
 <template>
 
   <BottomNavBar v-model="value" @input="go" />
-  
-  <v-tabs v-model="tab" align-tabs="center" color="deep-purple-accent-4">
-    <v-tab value="1">稿件管理</v-tab>
+
+  <v-tabs v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
+    <v-tab value="1">你的稿件</v-tab>
     <v-tab value="2">动态</v-tab>
+    <v-tab v-if="userGroup === 'admin'" value="3">审核稿件</v-tab>
   </v-tabs>
 
   <v-window v-model="tab">
     <v-window-item value="1" style="overflow-y: scroll">
       <div style="padding: 16px;">
-        <v-select
-          v-model="filter.status"
-          label="按条件筛选"
-          :items="filterStatus"
-          variant="solo"
-          @update:model-value="getPosts"
-        ></v-select>
-        <PostCard v-for="p in posts" :key="p.id" :post="p" style="margin-top: 16px" @recall="recallPost" />
+        <v-select v-model="filter.status" label="按条件筛选" :items="filterStatus" variant="solo"
+          @update:model-value="refreshPosts"></v-select>
+        <div style="overflow-y: scroll; max-height: 74vh;">
+          <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px" @recall="recallPost" />
+        </div>
       </div>
     </v-window-item>
     <v-window-item value="2">
@@ -25,11 +23,26 @@
         <p style="margin-top: 64px; font-weight: bold">前面的区域，以后再来探索吧</p>
       </div>
     </v-window-item>
+    <v-window-item value="3">
+      <div style="padding: 16px;">
+        <v-select v-model="filterForJudge.status" label="按条件筛选" :items="filterStatus" variant="solo"
+          @update:model-value="refreshPosts"></v-select>
+        <div style="overflow-y: scroll; max-height: 74vh;">
+          <PostCard v-for="p in judgePosts" :key="p.id" :post="p" typ="judge" style="margin-top: 16px" @updateJudgePost="updateJudgePost" />
+        </div>
+      </div>
+    </v-window-item>
   </v-window>
 
   <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout">
     {{ snackbar.text }}
   </v-snackbar>
+
+  <!-- fix在屏幕右下方 -->
+  <div style="position: fixed; right: 32px; bottom: 80px;">
+    <v-btn density="default" icon="mdi-refresh" size="large" :loading="pullLoading" color="primary"
+      @click="refreshPosts"></v-btn>
+  </div>
 </template>
 
 <script>
@@ -53,6 +66,13 @@ export default {
         "page": 1,
         "page_size": 999
       },
+      filterForJudge: {
+        "uin": -1,
+        "status": "待审核", // 状态
+        "time_order": 1, // 时间排序
+        "page": 1,
+        "page_size": 10
+      },
       posts: [],
       statusMap: {
         "pending_approval": "待审核",
@@ -68,14 +88,127 @@ export default {
       },
       filterStatus: ['全部', '待审核', '已通过', '已拒绝', '已取消', '队列中', '已发布', '失败', '待撤回', '已撤回'],
       tab: null,
+      uin: "",
+      avatarUrl: "",
+      userGroup: "user",
+      judgePosts: [],
+      pullLoading: false
     }
   },
 
   mounted() {
     this.getPosts()
+    this.tokenLogin()
   },
 
   methods: {
+    updateJudgePost(p) {
+      if (p.status === "通过") {
+        p.status = 'approve'
+      } else if (p.status === "拒绝") {
+        p.status = 'reject'
+        if (p.reason === "") {
+          p.reason = "无理由"
+        }
+      }
+
+      let form = {
+        "post_id": p.id,
+        "option": p.status,
+        "comment": p.reason
+      }
+
+      this.$axios.post('/v1/post/review-post', form)
+        .then((response) => {
+          if (response.data.code === 0) {
+            this.toast('已经将该稿件' + p.status, 'success')
+            this.refreshPosts()
+          } else {
+            this.toast('操作失败：' + response.data.msg)
+          }
+        })
+        .catch((error) => {
+          this.toast('操作失败：' + error.response.data.msg)
+          console.error(error)
+        })
+    },
+    refreshPosts() {
+      if (this.tab === '1') {
+        this.getPosts()
+      } else if (this.tab === '3') {
+        this.getJudgePosts()
+      }
+    },
+    getJudgePosts() {
+      console.log(this.filterForJudge)
+      // 检查status
+      let filter = JSON.parse(JSON.stringify(this.filterForJudge))
+      for (let key in this.statusMap) {
+        if (this.statusMap[key] === this.filterForJudge.status) {
+          filter.status = key
+          break
+        }
+      }
+      this.pullLoading = true
+      this.$axios.post('/v1/post/get-posts', filter)
+        .then((response) => {
+          if (response.data.code === 0) {
+            let p = response.data.data.list
+            if (p === null) {
+              this.toast('无记录')
+              this.judgePosts = []
+              this.pullLoading = false
+              return
+            }
+            // reverse
+            p.reverse()
+            for (let i = 0; i < p.length; i++) {
+              // 2024-04-12T08:19:51.096Z 转成日期，再转成字符串
+              let date = new Date(p[i].created_at)
+              p[i].created_at = date.getUTCFullYear() + "-" + (date.getUTCMonth() + 1) + "-" + date.getUTCDate() + " " + date.getUTCHours() + ":" + date.getUTCMinutes() + ":" + date.getUTCSeconds()
+              p[i].status = this.statusMap[p[i].status]
+              for (let j = 0; j < p[i].images.length; j++) {
+                p[i].images[j] = this.$baseurl.value + p[i].images[j]
+              }
+            }
+            console.log(p)
+            this.judgePosts = p
+          } else {
+            this.toast(response.data.msg)
+          }
+          this.pullLoading = false
+          console.log(response.data)
+        })
+        .catch((error) => {
+          this.pullLoading = false
+          if (error.response.data.code === -1) {
+            this.$router.push('/auth?hint=请先登录嗷')
+            return
+          }
+          this.toast('获取稿件失败')
+          console.log(error)
+        })
+    },
+    tokenLogin() {
+      this.$axios.get('/v1/account/token-check')
+        .then(res => {
+          if (res.data.code === 0) {
+            this.uin = res.data.data.uin
+            this.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
+            this.userGroup = res.data.data.user_group
+          } else {
+            this.toast('登录失败：' + res.data.msg)
+          }
+        })
+        .catch(err => {
+          if (err.response.data.code === -1) {
+            this.$router.push('/auth?hint=请先登录嗷')
+            return
+          }
+          this.toast('登录失败：' + err.response.data.msg)
+          console.error(err)
+        })
+    },
     getPosts() {
       console.log(this.filter)
       // 检查status
@@ -86,7 +219,7 @@ export default {
           break
         }
       }
-
+      this.pullLoading = true
       this.$axios.post('/v1/post/get-self-posts', filter)
         .then((response) => {
           if (response.data.code === 0) {
@@ -94,13 +227,15 @@ export default {
             if (p === null) {
               this.toast('无记录')
               this.posts = []
+              this.pullLoading = false
               return
             }
             // reverse
             p.reverse()
             for (let i = 0; i < p.length; i++) {
-              // 2024-04-12T08:19:51.096Z 转成日期，再转成字符串
-              p[i].created_at = new Date(p[i].created_at).toLocaleString()
+              // 2024-04-12T08:19:51.096Z 转成日期，再转成字符串，转成 YYYY-MM-DD HH:MM:SS UTC+8
+              let date = new Date(p[i].created_at)
+              p[i].created_at = date.getUTCFullYear() + "-" + (date.getUTCMonth() + 1) + "-" + date.getUTCDate() + " " + date.getUTCHours() + ":" + date.getUTCMinutes() + ":" + date.getUTCSeconds()
               p[i].status = this.statusMap[p[i].status]
               for (let j = 0; j < p[i].images.length; j++) {
                 p[i].images[j] = this.$baseurl.value + p[i].images[j]
@@ -111,13 +246,15 @@ export default {
           } else {
             this.toast(response.data.msg)
           }
+          this.pullLoading = false
           console.log(response.data)
         })
         .catch((error) => {
+          this.pullLoading = false
           if (error.response.data.code === -1) {
             this.$router.push('/auth?hint=请先登录嗷')
             return
-          } 
+          }
           this.toast('获取稿件失败')
           console.log(error)
         })