diff --git a/src/components/Blog_comment.vue b/src/components/Blog_comment.vue index 1d062a9..8722893 100644 --- a/src/components/Blog_comment.vue +++ b/src/components/Blog_comment.vue @@ -40,7 +40,7 @@ :input-display="replyInputDisplay" @set-reply-display="(state) => {replyDisplay = state}" /> - 收起 ∧ +
收起
@@ -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; } diff --git a/src/components/Blog_commentDisplay.vue b/src/components/Blog_commentDisplay.vue index b8208a5..58f349c 100644 --- a/src/components/Blog_commentDisplay.vue +++ b/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] diff --git a/src/components/Blog_commentReplyDisplay.vue b/src/components/Blog_commentReplyDisplay.vue index d0cb37c..8e28095 100644 --- a/src/components/Blog_commentReplyDisplay.vue +++ b/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 = []; diff --git a/src/pages/blogPages/SingleBlog_page.vue b/src/pages/blogPages/SingleBlog_page.vue index 47c038d..61c6768 100644 --- a/src/pages/blogPages/SingleBlog_page.vue +++ b/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); +} +