置顶帖子前端

src/layouts/post.vue

@@ -52,15 +52,16 @@ const bt_comment = () => {
             :md="18"
             :lg="18"
             :xl="18">
-
       <Suspense>
+
         <template #default>
           <postarticle :postid="id"
                        :auth_id="data.author.auth_id"
                        :title="data.title"
                        :plateId="data.plateId"
                        :content="data.content"
-                       :updatedAt="data.updatedAt" />
+                       :updatedAt="data.updatedAt"
+                       :Istop="data.isTop" />
         </template>
         <template #fallback>
           <el-skeleton />

src/plugins/router.ts

@@ -31,6 +31,10 @@ const router = createRouter({
         {
           path: "/platelist/:id",
           component: () => import("../views/plate/platelist.vue"),
+
+          meta: {
+            keepAlive: false,
+          },
         },
         {
           path: "/post/:id",

src/views/plate/platelist.vue

@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 import service from '../../plugins/axios'
 import { token } from '../../plugins/pinia'
 import platePostItem from '../../components/plate/platePostItem.vue'
+import plateMenu from '../../components/plate/plateMenu.vue'
 import { ChatSquare } from '@element-plus/icons-vue'
 // <el-icon><ChatSquare /></el-icon>
 let id = useRoute().params.id as any
@@ -63,15 +64,38 @@ const page = async (v: number) => {
 function bt_post() {
   window.location.href = `/posting?plate=${id === 0 ? 1 : id}`
 }
+
+const topPost = ref([])
+if (id != 0) {
+  topPost.value = await (
+    await service.get(
+      `/post/platelist?plateid=${id}&page=${1}&limit=${5}&isTop=true`
+    )
+  ).data.data
+}
 </script>
 
 <template>
   <el-empty v-show="data.data.length==0"
             description="没有找到任何帖子" />
+  <div v-show="topPost.length > 0">
+    <el-divider>置顶帖子</el-divider>
+    <div v-for="(item,i) of topPost"
+         :key="i"
+         style="margin: 10px 0;">
+      <platePostItem :id="item.id"
+                     :title="item.title"
+                     :content="item.content"
+                     :authorid="item.authorId"
+                     :time="item.updatedAt"
+                     :numberOfReplies="item.comments"
+                     :views="item.views" />
+    </div>
+  </div>
+  <el-divider>普通帖子</el-divider>
   <div v-for="(item,i) of data.data"
        :key="i"
        style="margin: 10px 0;">
-
     <platePostItem :id="item.id"
                    :title="item.title"
                    :content="item.content"
@@ -86,6 +110,7 @@ function bt_post() {
                  @current-change="page"
                  id="page" />
   <el-affix position="bottom"
+            id="posting"
             :offset="20"
             :v-shou="id == 0">
     <el-button type="primary"
@@ -94,14 +119,31 @@ function bt_post() {
                :icon="ChatSquare"
                circle></el-button>
   </el-affix>
-
+  <!-- 板块菜单 -->
+  <el-affix :offset="120"
+            id="plate">
+    <Suspense>
+      <template #default>
+        <plateMenu />
+      </template>
+      <template #fallback>
+        <el-skeleton />
+      </template>
+    </Suspense>
+  </el-affix>
 </template>
 
 <style scoped >
 /* 右对齐 */
-.el-affix {
+#posting {
   position: absolute;
   right: 0;
   bottom: 0;
 }
+#plate {
+  position: fixed;
+  top: 120px;
+  left: 0;
+  z-index: 1000;
+}
 </style>

src/views/post/postarticle.vue

@@ -29,24 +29,32 @@ const data = defineProps({
     type: String,
     required: true,
   },
+  Istop: {
+    type: Boolean,
+    required: true,
+  },
 })
+
 const edit = () => {
   window.location.href = `/posting?plate=${data.plateId}&postid=${data.postid}`
 }
 const del = async () => {
-  await service({
-    url: `/post?postid=${data.postid}`,
-    method: 'delete',
-    headers: {
-      Authorization: `Bearer ${token().token}`,
-    },
-  })
-  ElMessage({
-    message: '删除成功',
-    type: 'success',
-  })
-  window.location.href = `/home`
+  if (token().token) {
+    await service({
+      url: `/post?postid=${data.postid}`,
+      method: 'delete',
+      headers: {
+        Authorization: `Bearer ${token().token}`,
+      },
+    })
+    ElMessage({
+      message: '删除成功',
+      type: 'success',
+    })
+    window.location.href = `/home`
+  }
 }
+const jurisdiction = ref()
 async function IsMypost() {
   if (token().token === '') {
     return false
@@ -60,23 +68,52 @@ async function IsMypost() {
       },
     })
   ).data
-  const jurisdiction = await (
+  if (token().token) {
+    jurisdiction.value = await (
+      await service({
+        url: `/auth/Permissions`,
+        method: 'get',
+        headers: {
+          Authorization: `Bearer ${token().token}`,
+        },
+      })
+    ).data
+  }
+
+  if (
+    data.auth_id === res ||
+    jurisdiction.value.msg === '管理员' ||
+    jurisdiction.value.msg === '超级管理员'
+  ) {
+    return true
+  }
+  return false
+}
+const Istop = ref(data.Istop)
+const toppost = async () => {
+  if (!token().token) {
+    ElMessage({
+      message: '请先登陆',
+      type: 'success',
+    })
+    return
+  }
+  const res = (
     await service({
-      url: `/auth/Permissions`,
-      method: 'get',
+      url: `post/top?id=${data.postid}`,
+      method: 'put',
       headers: {
         Authorization: `Bearer ${token().token}`,
       },
     })
   ).data
-  if (
-    data.auth_id === res ||
-    jurisdiction.msg === '管理员' ||
-    jurisdiction.msg === '超级管理员'
-  ) {
-    return true
+  if (res.cod === 200) {
+    ElMessage({
+      message: res.message,
+      type: 'success',
+    })
+    Istop.value = res.data
   }
-  return false
 }
 onMounted(() => {
   const md = document.querySelector('.vuepress-markdown-body') as HTMLElement
@@ -112,6 +149,13 @@ function formatDate(date: any) {
   }
   return Math.ceil(diff / (3600 * 24)) + '天前'
 }
+const isadmin = ref()
+if (jurisdiction.value) {
+  isadmin.value = ref(
+    jurisdiction.value.msg === '管理员' ||
+      jurisdiction.value.msg === '超级管理员'
+  )
+}
 </script>
 
 <template>
@@ -122,6 +166,11 @@ function formatDate(date: any) {
       <div class="card-header">
         <span>{{ data.title }}</span>
         <div v-show="isMypost">
+          <el-button type="text"
+                     v-show="isadmin"
+                     @click="toppost">{{ Istop?`取消置顶`:`置顶帖子` }}</el-button>
+          <el-divider v-show="isadmin"
+                      direction="vertical" />
           <el-button type="text"
                      @click="edit">编辑</el-button>
           <el-divider direction="vertical" />

vite.config.ts

@@ -10,6 +10,10 @@ export default defineConfig({
   optimizeDeps: {
     include: ["@kangc/v-md-editor/lib/theme/vuepress.js"],
   },
+  //  配置服务器
+  server: {
+    port: 8080,
+  },
   plugins: [
     vue(),
     AutoImport({