perf: 优化“加载更多评论”按钮

src/pages/moment/Reply.vue

@@ -94,10 +94,11 @@
 import { Comment, FishAward, Moment } from "@/apis/schemas";
 import { displayDetailTime, displayTime } from "@/utils/time";
 import { ref } from "vue";
-import { getCommentsData, likeComment, likeMoment } from "@/pages/moment/utils";
+import { likeComment } from "@/pages/moment/utils";
 import { CommentType } from "@/apis/comment/comment-interfaces";
 import { EventEmitter } from "@/utils/utils";
 import { toPersonInfo } from "@/pages/profile/utils";
+import { getComments } from "@/apis/comment/comment";
 
 const props = defineProps<{
   mainComment: Comment;
@@ -113,15 +114,15 @@ let isCommentsLoaded = ref(true);
 let page = 0;
 const localGetCommentsData = () => {
   isCommentsLoaded.value = false;
-  getCommentsData({
+  getComments({
     id: props.mainComment.id,
     type: CommentType.Comment,
     page: page
   }).then((res) => {
-    comments.value.push(...res.data);
+    comments.value.push(...res.comments);
     isCommentsLoaded.value = true;
     page += 1;
-    if (!res.data.length) {
+    if (comments.value.length >= res.total || !res.comments.length) {
       allCommentsLoaded.value = true;
     }
   });

src/pages/moment/moment.vue

@@ -141,7 +141,6 @@ import {
   chooseImageMode,
   enterMask,
   enterReply,
-  getCommentsData,
   likeComment,
   likeMoment,
   onClickImage
@@ -160,6 +159,7 @@ import CommentBox from "@/pages/moment/CommentBox.vue";
 import { Pages } from "@/utils/url";
 import { StorageKeys } from "@/utils/const";
 import { EventEmitter, getThumbnail } from "@/utils/utils";
+import { getComments } from "@/apis/comment/comment";
 
 const props = defineProps<{
   id: string;
@@ -210,17 +210,17 @@ let isCommentsLoaded = true;
 let page = 0;
 const localGetCommentsData = () => {
   isCommentsLoaded = false;
-  getCommentsData({
+  getComments({
     id: props.id,
     type: CommentType.Moment,
     page: page
   }).then((res) => {
-    for (const data of res.data) {
-      comments.value.push(data);
-    }
+    comments.value.push(...res.comments);
     isCommentsLoaded = true;
     page += 1;
-    if (!res.data?.length) allCommentsLoaded = true;
+    if (comments.value.length >= res.total || !res.comments.length) {
+      allCommentsLoaded = true;
+    }
   });
 };
 

src/pages/moment/utils.ts

@@ -59,11 +59,6 @@ export const likeComment = (
   });
 };
 
-export const getCommentsData = async (req: GetCommentsReq) => {
-  const commentsTemp = (await getComments(req)).comments;
-  return { data: commentsTemp };
-};
-
 export const createComment = async (
   req: NewCommentReq,
   callback?: (res: NewCommentResp) => void

src/pages/post/post.vue

@@ -46,14 +46,14 @@
         mode="widthFix"
         @click="onClickImage(post.coverUrl)"
       />
-      <view v-if="comments.data.length === 0" class="commentNum"> 评论</view>
+      <view v-if="comments.length === 0" class="commentNum"> 评论</view>
       <view v-else class="commentNum"> 评论 {{ post.comments }} </view>
-      <view v-if="comments.data.length === 0">
+      <view v-if="comments.length === 0">
         <view class="nomore">这里还没有评论，快发布第一条评论吧！</view>
       </view>
 
       <CommentBox
-        v-for="(comment, index) in comments.data"
+        v-for="(comment, index) in comments"
         :key="index"
         :comment="comment"
         @after-delete="init"
@@ -118,12 +118,7 @@
 <script lang="ts" setup>
 import { nextTick, reactive, ref } from "vue";
 import TopBar from "@/components/TopBar.vue";
-import {
-  enterMask,
-  enterReply,
-  getCommentsData,
-  likeComment
-} from "../moment/utils";
+import { enterMask, enterReply, likeComment } from "@/pages/moment/utils";
 import Reply from "@/pages/moment/Reply.vue";
 import { toPersonInfo } from "@/pages/profile/utils";
 import { GetPostDetailReq } from "@/apis/post/post-interfaces";
@@ -140,6 +135,7 @@ import { Icons, Pages } from "@/utils/url";
 import { StorageKeys } from "@/utils/const";
 import ToastBoxWithShadow from "@/components/ToastBoxWithShadow.vue";
 import { EventEmitter, getThumbnail } from "@/utils/utils";
+import { getComments } from "@/apis/comment/comment";
 
 const props = defineProps<{
   id: string;
@@ -184,13 +180,7 @@ const getCommentsReq = reactive<GetCommentsReq>({
   id: props.id
 });
 
-const comments = reactive<{
-  data: Comment[];
-  replyNumber: number;
-}>({
-  data: [],
-  replyNumber: 0
-});
+const comments = ref<Comment[]>([]);
 let allCommentsLoaded = false;
 let isCommentsLoaded = true;
 let page = 0;
@@ -200,19 +190,17 @@ const localGetCommentsData = async () => {
   );
   commentDoLikeMap.clear();
   isCommentsLoaded = false;
-  getCommentsData({
+  getComments({
     id: props.id,
     type: CommentType.Post,
     page: page
   }).then((res) => {
-    comments.replyNumber = 0;
-    for (const data of res.data) {
-      comments.data.push(data);
-      comments.replyNumber += data.comments || 0;
-    }
+    comments.value.push(...res.comments);
     isCommentsLoaded = true;
     page += 1;
-    if (res.data?.length < 10) allCommentsLoaded = true;
+    if (!res.comments?.length) {
+      allCommentsLoaded = true;
+    }
   });
 };
 
@@ -265,7 +253,7 @@ const init = async () => {
     await getData();
     page = 0;
     getCommentsReq.page = 0;
-    comments.data = [];
+    comments.value = [];
     allCommentsLoaded = false;
     isCommentsLoaded = true;
     await localGetCommentsData();