添加博客评论回复排序逻辑；

添加排序偏好储存

src/components/Blog_commentDisplay.vue

@@ -92,9 +92,7 @@ const fetchComments = async (pageNum, sortMode) => {
   // }
 
   try {
-    console.log('ss1',sortMode)
     sortMode = ['DESC', 'ASC'][sortMode];
-    console.log(sortMode)
     const response = await getInfoWithPages(`/blogs/${props.blogId}/comments`, pageNum, pageSize, {
       sort: sortMode
     })

src/components/Blog_commentReplyDisplay.vue

@@ -1,7 +1,6 @@
 <script setup>
 
 import Blog_comment from "./Blog_comment.vue";
-import {getCurrentISODateTime} from "../utils/formatTime.js";
 import store from "../store/index.js";
 import {getInfoWithPages} from "../utils/getInfoWithPages.js";
 import {onMounted, ref, watch} from "vue";
@@ -33,6 +32,7 @@ function addCommentToFront(newComments) {
 
 const hmReplyDisplay = ref(false);
 
+const error = ref(0);
 const comments = ref([]);
 const amount = ref(0);
 const currentPage = ref(0);
@@ -40,7 +40,7 @@ const isLoading = ref(false);
 
 const pageSize = 7;
 
-const fetchComments = async (pageNum) => {
+const fetchComments = async (pageNum, sortMode) => {
   isLoading.value = true;
 
   // await new Promise(resolve => setTimeout(resolve, 1000));// 测试测试
@@ -68,16 +68,20 @@ const fetchComments = async (pageNum) => {
   // return;
 
   try {
+    sortMode = ['DESC', 'ASC'][sortMode];
+    const response = await getInfoWithPages(`/comments/${props.commentId}/replies`, pageNum, pageSize, {
+      sort: sortMode
+    })
 
-    const response = await getInfoWithPages(`/comments/${props.commentId}/replies`, pageNum, pageSize, {sort: 'DESC'})
+    if (response.code !== 0) {
-
-    if (response.code === 3) {
       error.value = 1;
+      isLoading.value = false;
       throw new Error('请刷新重试')
     }
     comments.value = response.data;
     amount.value = Math.ceil(response.amount / pageSize);
     currentPage.value = pageNum
+    error.value = 0;
   } catch (err) {
 
     error.value = 1
@@ -90,8 +94,9 @@ onMounted(() => {
 
 })
 watch(() => props.replyDisplay, (newValue, oldValue) => {
+  error.value = 0;
   if (newValue) {
-    fetchComments(1)
+    fetchComments(1, store.state.userPreference.blogSortMode)
   }
 
 })
@@ -115,6 +120,7 @@ watch(() => props.replyDisplay, (newValue, oldValue) => {
           :loading="isLoading"
       />
     </div>
+    <div v-if="error" class="error-message">加载失败, 请收起后重试</div>
     <Blog_commentInput
         :always-show-btn="true"
         v-if="inputDisplay"
@@ -129,4 +135,7 @@ watch(() => props.replyDisplay, (newValue, oldValue) => {
 .el-container {
   flex-direction: column;
 }
+.error-message {
+  opacity: 0.6;
+}
 </style>

src/pages/blogPages/SingleBlog_page.vue

@@ -38,7 +38,7 @@ const commentInputFocus = ref(false);
 const commentButtonFocus = ref(false);
 const commentSubmitLoading = ref(false);
 
-const sortMode = ref(1);
+const sortMode = ref(store.state.userPreference.blogSortMode >-1 ? store.state.userPreference.blogSortMode : 1);
 
 const checkWindowSize = () => {
   windowWidth.value = window.innerWidth;
@@ -46,6 +46,7 @@ const checkWindowSize = () => {
 
 // 在组件挂载时获取数据
 onMounted(async () => {
+  console.log(sortMode.value, 'ads')
   checkWindowSize();
   window.addEventListener('resize', checkWindowSize);
 
@@ -161,7 +162,7 @@ const submitComment = async () => {
 
 const changeSort = () => {
   sortMode.value = (sortMode.value + 1) % 2;
-  console.log('sss', sortMode.value)
+  store.commit('setPreferenceValue', {blogSortMode: sortMode.value})
   commentDisplayRef.value.reSort(sortMode.value);
 }
 

src/store/index.js

@@ -19,6 +19,7 @@ const store = createStore({
         sessionStore: {
             account: {}
         },
+        userPreference: {}
     },
     mutations: {
         toggleTheme(state) {
@@ -78,6 +79,15 @@ const store = createStore({
         hideNavBar(state) {
             state.navBar.display = false;
         },
+        setPreferenceValue(state, obj) {
+            state.userPreference = {...state.userPreference, ...obj}
+        },
+        deletePreferenceValue(state, obj) {
+            if (typeof obj === 'string') {
+                delete state.userPreference[obj.key];
+            }
+            delete state.userPreference[obj.key][obj.value];
+        }
     },
     getters: {
         currentTheme: state => state.theme,
@@ -111,7 +121,7 @@ const store = createStore({
     plugins: [
         createPersistedStatePlugin({
             key: 'cyberStorage',
-            whitelist: ['theme', 'userInfo', 'demosLocal', 'editStore', 'editAutoSave'],
+            whitelist: ['theme', 'userInfo', 'demosLocal', 'editStore', 'editAutoSave', 'userPreference'],
         }),
         createSessionStatePlugin({
             key: 'cyberStorage',