添加博客评论排序

src/components/Blog_comment.vue

@@ -40,7 +40,7 @@
             :input-display="replyInputDisplay"
             @set-reply-display="(state) => {replyDisplay = state}"
         />
-        <span v-if="replyDisplay" class="view-more-btn" @click="replyDisplay = false">收起 ∧</span>
+        <div v-if="replyDisplay" class="view-more-btn" @click="replyDisplay = false"><span>收起</span><el-icon style="margin: 0 5px"><ArrowUp /></el-icon></div>
       </div>
     </div>
   </div>
@@ -57,6 +57,7 @@ import More_button from "./More_button.vue";
 import store from "../store/index.js";
 import Blog_commentReplyDisplay from "./Blog_commentReplyDisplay.vue";
 import Blog_commentInput from "./Blog_replyInput.vue";
+import {ArrowUp} from "@element-plus/icons-vue";
 
 // 定义 props
 const props = defineProps({
@@ -198,6 +199,7 @@ const clickDeleteBtn = async (isLiked) => {
 }
 
 .view-more-btn {
+  margin: 5px 0;
   cursor: pointer;
   opacity: 0.8;
 }

src/components/Blog_commentDisplay.vue

@@ -36,7 +36,11 @@ const props = defineProps({
   scrollContainer: {
     type: Object,
     default: null
-  }
+  },
+  sortMode: {
+    type: Number,
+    default: null
+  },
 })
 // 数据相关
 const comments = ref([]) // 评论列表
@@ -46,17 +50,23 @@ const pageSize = 20 // 每页数量
 const loading = ref(false) // 加载状态
 const isEnd = ref(false) // 是否已加载全部
 const error = ref(null) // 错误信息
-const scrollContainer = ref(null) // 滚动容器引用
 
 function addCommentToFront(newComments) {
   comments.value.unshift(newComments); // 在数组前插入新项
 }
+function reSort(sortMode) {
+  comments.value = [];
+  amount.value = 0;
+  page.value = 1;
+  isEnd.value = false;
+  loadComments(sortMode);
+}
 
 // 通过 defineExpose 暴露方法
-defineExpose({addCommentToFront});
+defineExpose({addCommentToFront, reSort});
 
 
-const fetchComments = async (pageNum) => {
+const fetchComments = async (pageNum, sortMode) => {
   // await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
   // return {
   //   list: (() => {
@@ -82,8 +92,12 @@ const fetchComments = async (pageNum) => {
   // }
 
   try {
-
-    const response = await getInfoWithPages(`/blogs/${props.blogId}/comments`, pageNum, pageSize, {sort: 'DESC'})
+    console.log('ss1',sortMode)
+    sortMode = ['DESC', 'ASC'][sortMode];
+    console.log(sortMode)
+    const response = await getInfoWithPages(`/blogs/${props.blogId}/comments`, pageNum, pageSize, {
+      sort: sortMode
+    })
 
     if (response.code === 3) {
       error.value = 1;
@@ -101,14 +115,16 @@ const fetchComments = async (pageNum) => {
 }
 
 // 加载评论
-const loadComments = async () => {
+const loadComments = async (sortMode) => {
+  console.log('ld' ,sortMode)
+  sortMode = sortMode > -1 ? sortMode : props.sortMode;
   if (loading.value || isEnd.value) return
 
   loading.value = true
   error.value = null
 
   try {
-    const {list, total} = await fetchComments(page.value)
+    const {list, total} = await fetchComments(page.value, sortMode)
     amount.value = total;
 
     comments.value = [...comments.value, ...list]

src/components/Blog_commentReplyDisplay.vue

@@ -42,6 +42,7 @@ const pageSize = 7;
 
 const fetchComments = async (pageNum) => {
   isLoading.value = true;
+
   // await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
   // comments.value = (() => {
   //   let arr = [];

src/pages/blogPages/SingleBlog_page.vue

@@ -12,6 +12,7 @@ import {getInfoWithPages} from "../../utils/getInfoWithPages.js";
 import Blog_commentDisplay from "../../components/Blog_commentDisplay.vue";
 import Profile_display from "../../components/Profile_display.vue";
 import {formatGMTToLocal, getCurrentISODateTime} from "../../utils/formatTime.js";
+import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
 
 // 获取路由参数
 const route = useRoute()
@@ -37,6 +38,7 @@ const commentInputFocus = ref(false);
 const commentButtonFocus = ref(false);
 const commentSubmitLoading = ref(false);
 
+const sortMode = ref(1);
 
 const checkWindowSize = () => {
   windowWidth.value = window.innerWidth;
@@ -157,6 +159,12 @@ const submitComment = async () => {
   commentSubmitLoading.value = false;
 }
 
+const changeSort = () => {
+  sortMode.value = (sortMode.value + 1) % 2;
+  console.log('sss', sortMode.value)
+  commentDisplayRef.value.reSort(sortMode.value);
+}
+
 </script>
 
 <template>
@@ -194,7 +202,7 @@ const submitComment = async () => {
                       icon-size="24"></Like_button>
                 </div>
               </Transition>
-              <div class="comment-input" v-if="store.getters.hasUserInfo">
+              <div class="comment-input" v-if="store.getters.hasUserInfo && blog.allow_comments === 1">
                 <el-container>
                   <el-aside class="comment-input-profile" width="60px">
                     <Profile_display v-if="store.getters.profileImage" :id="store.getters.profileImage" size="55"/>
@@ -225,6 +233,13 @@ const submitComment = async () => {
                 </el-container>
               </div>
             </div>
+            <el-container class="sort-btn" @click="changeSort">
+              {{ ['降序', '升序'][sortMode] }}
+              <el-icon>
+                <ArrowDown v-if="sortMode === 0" />
+                <ArrowUp v-if="sortMode === 1" />
+              </el-icon>
+            </el-container>
             <Transition name="fade">
               <div class="comments-section">
                 <Blog_commentDisplay
@@ -232,6 +247,7 @@ const submitComment = async () => {
                     v-if="blog.allow_comments === 1"
                     :scroll-container="scrollRef"
                     :blog-id="Number(id)"
+                    :sort-mode="sortMode"
                 />
                 <p v-else>不允许评论</p>
               </div>
@@ -376,6 +392,15 @@ h1 {
   width: 100%;
 }
 
+.sort-btn {
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  font-size: 14px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 /* 浅色模式 */
 .theme-light .blog-container {
   background-color: #ffffff;