feat:新增帖子管理以及评论的翻页功能 (#198)

CloudStriver · Apr 14, 2024 · a71a5c8 · a71a5c8
1 parent 02a49e9
commit a71a5c8
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/src/views/manage/post.vue b/src/views/manage/post.vue
@@ -170,6 +170,12 @@
                                 </div>
                             </div>
                         </div>
+                        <el-pagination
+                            class="el-pagination"
+                            layout="prev, pager, next"
+                            :total="100"
+                            :hide-on-single-page="true"
+                        />
                     </div>
                 </section>
             </div>
@@ -558,6 +564,14 @@ const searchPostsList = async() => {
                         }
                     }
                 }
+
+                .el-pagination {
+                    height: 50px;
+                    margin-top: -25px;
+                    background-color: #fff;
+                    display: flex;
+                    justify-content: center;
+                }
             }
         }
     }

diff --git a/src/views/posts/comment.vue b/src/views/posts/comment.vue
@@ -83,13 +83,15 @@
                     </div>
                     <div class="more-comments">
                         <div class="pagination-container" v-if="commentBlock.isExpand">
-                          <span v-if="commentBlock.replyList.total > 10">共 {{ getPages(commentBlock.replyList.total) }} 页</span>
-                          <el-pagination
-                              layout="prev, pager, next"
-                              :total="commentBlock.replyList.total"
-                              :hide-on-single-page="true"
-                              @update:current-page="handlePageChange($event, commentBlock, index)"
-                          />
+                            <span 
+                                v-if="commentBlock.replyList.total > 10"
+                            >共 {{ getPages(commentBlock.replyList.total) }} 页</span>
+                            <el-pagination
+                                layout="prev, pager, next"
+                                :total="commentBlock.replyList.total"
+                                :hide-on-single-page="true"
+                                @update:current-page="handlePageChange($event, commentBlock, index)"
+                            />
                         </div>
                         <span v-else>共{{commentBlock.replyList.total}}条回复</span>
                         <span class="more" v-if="commentBlock.replyList.comments.length > 3 && !commentBlock.isExpand" @click="commentBlock.isExpand = true">查看更多</span>
@@ -107,6 +109,13 @@
                     </div>
                 </div>
             </div>
+            <el-pagination
+                class="el-pagination"
+                layout="prev, pager, next"
+                :total="commentCount"
+                :hide-on-single-page="true"
+                @update:current-page="handlePageChange($event, commentList[0], 0)"
+            />
         </div>
     </div>
 </template>
@@ -316,7 +325,6 @@ const submitComment = async (subjectId: string,rootId: string, fatherId: string,
             margin-bottom: 20px;
             display: flex;
 
-
             .image {
                 width: 40px;
                 height: 40px;
@@ -415,14 +423,23 @@ const submitComment = async (subjectId: string,rootId: string, fatherId: string,
                     }
                 }
             }
+
+            .more-comment {
+                height: 100px;
+            }
+        }
+
+        .el-pagination {
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
         }
     }
 }
 
 .pagination-container {
   display: flex;
   align-items: center; /* 垂直居中 */
-  justify-content: space-between; /* 元素之间的空间平均分配 */
   width: 100%; /* 或根据实际需要调整宽度 */
 }
 

diff --git a/src/views/posts/post.vue b/src/views/posts/post.vue
@@ -267,6 +267,8 @@ const changePost = async (nowPostId: string) => {
             .post {
                 width: 1000px;
                 margin: 0 30px;
+                margin-bottom: 10px;
+
 
                 .information {
                     position: fixed;