feat: 稿件查看

idoknow · Apr 13, 2024 · 57947e3 · 57947e3
1 parent 2659735
commit 57947e3
Show file tree

Hide file tree

Showing 5 changed files with 263 additions and 92 deletions.
diff --git a/frontend/src/components/BottomNavBar.vue b/frontend/src/components/BottomNavBar.vue
@@ -8,7 +8,7 @@
     <v-btn @click="go('/world')">
         <v-icon>mdi-earth</v-icon>
 
-        动态
+        稿件
     </v-btn>
 
     <v-btn @click="go('/service')">

diff --git a/frontend/src/components/PostCard.vue b/frontend/src/components/PostCard.vue
@@ -0,0 +1,84 @@
+<template>
+<v-card
+    class="mx-auto postcard"
+    :color="backgrouldColor"
+    max-width="400"
+    style="border-radius: 10px; color: #fff"
+  >
+    <template v-slot:prepend>
+      <v-icon color="white" style="font-size: 25px">mdi-pin</v-icon>
+      <h3 style="margin-left: 8px">稿件</h3>
+    </template>
+
+    <v-card-text class="py-2" style="font-size: 16px; font-weight: bold; line-height: 1.5; word-spacing: 2px">
+      {{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>
+
+    <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>
+          <span v-else style="font-size: 36px; margin-right: 16px">🫥</span>
+        </template>
+
+        <v-list-item-title v-if="!post.anon">{{ post.uin }}</v-list-item-title>
+        <v-list-item-title v-else>匿名</v-list-item-title>
+
+        <v-list-item-subtitle>{{ post.created_at }}</v-list-item-subtitle>
+
+        <template v-slot:append>
+          <div class="justify-self-end">
+            <!-- <v-icon class="me-1" icon="mdi-heart"></v-icon>
+            <span class="subheading me-2">256</span>
+            <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>
+          </div>
+        </template>
+      </v-list-item>
+    </v-card-actions>
+  </v-card>
+</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)]
+            }
+        }
+    }
+</script>
+
+<style>
+    .postcard {
+      box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+    }
+</style>
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
@@ -33,8 +33,8 @@
   <div style="margin-left: 16px; display: flex; flex-wrap: wrap;">
     <!-- 图片上传 -->
     <!-- 长按图片可删除 -->
-    <img v-for="(image, index) in post.images" :src="image" :key="index" width="70" height="70" style="margin-right: 8px;" @click="selectedIndex = index; showDeleteImageDialog = true">
-    <svg @click="selectImage" t="1712897639010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    <img v-for="(image, index) in post.images" :src="image" :key="index" width="70" height="70" style="margin-right: 8px; margin-top:4px; border-radius: 10px;" @click="selectedIndex = index; showDeleteImageDialog = true">
+    <svg style="margin-top: 8px" @click="selectImage" t="1712897639010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
       p-id="1448" width="70" height="70">
       <path
         d="M85.312 85.312v853.376h853.376V85.312H85.312zM0 0h1024v1024H0V0z m554.624 213.312v256h256v85.376h-256v256H469.312v-256h-256V469.376h256v-256h85.312z"
@@ -270,6 +270,7 @@ export default {
       input.click()
     },
     selectTag(index) {
+      this.toast("标签功能暂时关闭", "warning")
       this.tags[index].selected = !this.tags[index].selected
     },
     tokenLogin() {

diff --git a/frontend/src/pages/service.vue b/frontend/src/pages/service.vue
@@ -1,67 +1,74 @@
 <template>
 
-    <BottomNavBar v-model="value" @input="go" />
+  <BottomNavBar v-model="value" @input="go" />
 
+  <div style="padding: 16px;">
+
+    <h1 style="margin-bottom: 16px">🎲 服务</h1>
     <div class="rect1" style="background-color: #2196F3;">
-      <p style="font-weight: bold;">🗺️ 桂林中学毕业生去向分布图</p>
-      <a style="font-size: 16px;" @click="go('https://stumap.idoknow.top/')">点击查看</a>
+      <div>
+        <p style="font-weight: bold; font-size: 16px">🗺️ 桂林中学毕业生去向分布图</p>
+        <small style="color: #fff; font-size: 13px">https://stumap.idoknow.top</small>
+      </div>
+      <a style="font-size: 16px; cursor:pointer; font-weight: bold;" @click="go('https://stumap.idoknow.top/')">点击查看</a>
     </div>
 
-    <iframe style="width: 100%; height: 80%;" v-if="displayInnerWindow !== ''" :src="displayInnerWindow" frameborder="0"></iframe>
-
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout">
-      {{ snackbar.text }}
-    </v-snackbar>
-  </template>
-
-  <script>
-  import BottomNavBar from '@/components/BottomNavBar.vue'
-  export default {
-    components: {
-      BottomNavBar
-    },
-    data() {
-      return {
-        snackbar: {
-          show: false,
-          text: '',
-          color: ''
-        },
-        value: 2,
-        displayInnerWindow: '',
-      }
-    },
-  
-    mounted() {
-    },
-  
-    methods: {
-      toast(text, color = 'error') {
-        this.snackbar.text = text
-        this.snackbar.color = color
+    <p style="text-align: center; margin-top: 16px; color: #c3c3c3">更多服务正在开发...</p>
+  </div>
+
+
+  <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout">
+    {{ snackbar.text }}
+  </v-snackbar>
+</template>
+
+<script>
+import BottomNavBar from '@/components/BottomNavBar.vue'
+export default {
+  components: {
+    BottomNavBar
+  },
+  data() {
+    return {
+      snackbar: {
+        show: false,
+        text: '',
+        color: ''
       },
+      value: 2,
+      displayInnerWindow: '',
+    }
+  },
 
-      go(url) {
-        this.displayInnerWindow = url
-      }
+  mounted() {
+  },
+
+  methods: {
+    toast(text, color = 'error') {
+      this.snackbar.text = text
+      this.snackbar.color = color
+    },
+
+    go(url) {
+      // this.displayInnerWindow = url
+      window.open(url, '_blank')
     }
   }
-  
-  </script>
-
-<style>
+}
+
+</script>
 
+<style>
 .rect1 {
   padding: 16px;
   font-size: 18px;
-  margin-left: 8px;
-  border-radius: 5px;
+  border-radius: 7px;
   color: #fff;
   margin-top: 8px;
   width: 95%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11);
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
-
 </style>