From 400b84abf490fb62329e26973079b644aade22db Mon Sep 17 00:00:00 2001
From: buluu97 <Changle20040907@163.com>
Date: Tue, 19 Dec 2023 23:27:43 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E8=AF=84=E8=AE=BA=E7=9A=84=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/moment/Reply.vue                | 222 +++++++++++++++++-----
 src/pages/moment/moment.vue               |   7 +-
 src/static/images/right-triangle-grey.png | Bin 0 -> 4331 bytes
 3 files changed, 180 insertions(+), 49 deletions(-)
 create mode 100644 src/static/images/right-triangle-grey.png

diff --git a/src/pages/moment/Reply.vue b/src/pages/moment/Reply.vue
index 95715970..14560f46 100644
--- a/src/pages/moment/Reply.vue
+++ b/src/pages/moment/Reply.vue
@@ -1,78 +1,153 @@
 <template>
   <view class="background" @click="closeSelf" @touchmove.stop.prevent />
   <scroll-view class="frame" scroll-y="true" @touchmove.stop>
-    <view class="main">
-      <view class="comment">
-        <view
-          :style="{
-            backgroundImage: 'url( ' + mainComment.user.avatarUrl + ')'
-          }"
-          class="avatar"
-        />
-        <view class="thread">
-          <view class="content">
-            <view class="left">
-              <view class="upper">
-                <view class="username">{{ mainComment.user.nickname }}</view>
-                <view class="timestamp"
-                  >· {{ displayTime(mainComment.createAt) }}
+    <view class="container">
+      <!-- 主评论 -->
+      <view class="main main-comment">
+        <view class="comment">
+          <view
+            :style="{
+              backgroundImage: 'url( ' + mainComment.user.avatarUrl + ')'
+            }"
+            class="avatar"
+          />
+          <view class="thread">
+            <view class="content">
+              <view class="left">
+                <view class="upper">
+                  <view class="username">{{ mainComment.user.nickname }}</view>
+                  <view class="timestamp"
+                    >· {{ displayTime(mainComment.createAt) }}
+                  </view>
                 </view>
+                <view class="lower" @click="emit('interactWithComment')">{{
+                  mainComment.text
+                }}</view>
               </view>
-              <view class="lower">{{ mainComment.text }}</view>
-            </view>
-            <view class="right">
-              <view class="likes-frame" @click="likeComment(mainComment)">
-                <view v-if="mainComment.isLiked" class="thumb liked" />
-                <view v-else class="thumb" />
-                <view class="likes">{{ mainComment.likeCount }}</view>
+              <view class="right">
+                <view class="likes-frame" @click="likeComment(mainComment)">
+                  <view v-if="mainComment.isLiked" class="thumb liked" />
+                  <view v-else class="thumb" />
+                  <view class="likes">{{ mainComment.likeCount }}</view>
+                </view>
               </view>
             </view>
           </view>
         </view>
       </view>
-      <view v-for="(comment, index) in comments" :key="index" class="reply">
-        <view
-          :style="{
-            backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
-          }"
-          class="avatar"
-          style="margin-left: calc(42 / 390 * 100vw)"
-        />
-        <view class="thread">
-          <view class="content">
-            <view class="left">
-              <view class="upper">
-                <view class="username">{{ comment.user.nickname }}</view>
-                <view class="timestamp"
-                  >· {{ displayTime(comment.createAt) }}
+
+      <!-- 二级评论 -->
+      <view v-for="(comment, index) in comments" :key="index" class="main">
+        <view class="comment">
+          <view
+            :style="{
+              backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
+            }"
+            class="avatar"
+          />
+          <view class="thread">
+            <view class="content">
+              <view class="left">
+                <view class="upper">
+                  <view class="username">{{ comment.user.nickname }}</view>
+                  <view class="timestamp"
+                    >· {{ displayTime(comment.createAt) }}
+                  </view>
+                </view>
+                <view class="lower" @click="emit('interactWithComment')">{{
+                  comment.text
+                }}</view>
+              </view>
+              <view class="right">
+                <view class="likes-frame" @click="likeComment(comment)">
+                  <view v-if="comment.isLiked" class="thumb liked" />
+                  <view v-else class="thumb" />
+                  <view class="likes">{{ comment.likeCount }}</view>
                 </view>
               </view>
-              <view class="lower">{{ comment.text }}</view>
             </view>
-            <view v-if="comment.likeCount >= 0" class="right">
-              <view class="likes-frame" @click="likeComment(comment)">
-                <view v-if="comment.isLiked" class="thumb liked" />
-                <view v-else class="thumb" />
-                <view class="likes">{{ comment.likeCount }}</view>
+          </view>
+        </view>
+
+        <!-- 三级评论 -->
+        <view
+          v-for="(comment, index) in comments"
+          :key="index"
+          class="reply"
+          @click="focusReplyComment(comment)"
+        >
+          <view
+            :style="{
+              backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
+            }"
+            class="avatar"
+            style="margin-left: calc(42 / 390 * 100vw)"
+          />
+          <view class="thread">
+            <view class="content">
+              <view class="left">
+                <view class="upper">
+                  <view class="username">
+                    <view>{{ comment.user.nickname }}</view>
+                    <image
+                      class="right-triangle-grey"
+                      src="/static/images/right-triangle-grey.png"
+                    />
+                    <view>{{ comment.user.nickname }}</view>
+                  </view>
+                  <view class="timestamp"
+                    >· {{ displayTime(comment.createAt) }}
+                  </view>
+                </view>
+                <view class="lower">{{ comment.text }}</view>
+              </view>
+              <view v-if="comment.likeCount >= 0" class="right">
+                <view class="likes-frame" @click="likeComment(comment3)">
+                  <view v-if="comment.isLiked" class="thumb liked" />
+                  <view v-else class="thumb" />
+                  <view class="likes">{{ comment.likeCount }}</view>
+                </view>
               </view>
             </view>
           </view>
         </view>
+
+        <view class="more-sub-replies">
+          展开查看更多 <view class="down-arrow" />
+        </view>
       </view>
     </view>
+    <view v-if="firstLevelId && moment" style="height: 16vw" />
+    <WriteCommentBox
+      v-if="firstLevelId && moment"
+      :placeholder-text="placeholderText"
+      :like-count="moment.likeCount"
+      :is-liked="moment.isLiked"
+      :parent-id="moment.id"
+      :parent-type="CommentType.Moment"
+      :first-level-id="firstLevelId"
+      :comment-callback="(res) => fishAwardEmitter.triggerCallbacks(res)"
+      @do-like="likeMoment(moment, fishAwardEmitter)"
+      @cancel-reply="afterBlur"
+    />
   </scroll-view>
 </template>
 
 <script lang="ts" setup>
-import { Comment } from "@/apis/schemas";
+import { Comment, Moment } from "@/apis/schemas";
 import { displayTime } from "@/utils/time";
 import { ref } from "vue";
-import { getCommentsData, likeComment } from "@/pages/moment/utils";
+import { getCommentsData, likeComment, likeMoment } from "@/pages/moment/utils";
 import { onReachBottom } from "@dcloudio/uni-app";
 import { CommentType } from "@/apis/comment/comment-interfaces";
+import WriteCommentBox from "@/pages/moment/WriteCommentBox.vue";
+import { getMomentDetail } from "@/apis/moment/moment";
+import { GetMomentDetailReq } from "@/apis/moment/moment-components";
 
 const props = defineProps<{
   mainComment: Comment;
+  moment?: Moment;
+  fishAwardEmitter: any;
 }>();
 
 const comments = ref<Comment[]>([]);
@@ -109,6 +184,19 @@ const emits = defineEmits(["closeReply"]);
 function closeSelf() {
   emits("closeReply");
 }
+
+const defaultPlaceholderText = "发布评论";
+const placeholderText = ref(defaultPlaceholderText);
+const firstLevelId = ref();
+const afterBlur = () => {
+  placeholderText.value = defaultPlaceholderText;
+  firstLevelId.value = undefined;
+};
+
+const focusReplyComment = (comment: Comment) => {
+  placeholderText.value = "回复 @" + comment.user.nickname + ": ";
+  firstLevelId.value = comment.id;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -134,10 +222,18 @@ function closeSelf() {
   border-radius: 5vw 5vw 0 0;
 }
 
+.container {
+  padding: calc(10 / 390 * 100vw) 0;
+}
+
 .main {
-  padding: calc(20 / 390 * 100vw);
+  padding: calc(10 / 390 * 100vw) calc(20 / 390 * 100vw);
   box-sizing: border-box;
 
+  &-comment {
+    border-bottom: 5px #eee solid;
+  }
+
   .comment,
   .reply {
     display: flex;
@@ -247,11 +343,41 @@ function closeSelf() {
   }
 
   .comment {
-    margin-bottom: calc(20 / 390 * 100vw);
+    // margin-bottom: calc(20 / 390 * 100vw);
   }
 
   .reply {
-    margin: calc(20 / 390 * 100vw) 0;
+    margin: calc(5 / 390 * 100vw) 0;
+    .avatar {
+      width: calc(22 / 390 * 100vw);
+      height: calc(22 / 390 * 100vw);
+    }
+
+    .username {
+      display: flex;
+      align-items: center;
+      .right-triangle-grey {
+        width: 5px;
+        height: 5px;
+        margin: 0 5px;
+      }
+    }
+  }
+
+  .more-sub-replies {
+    color: #696969;
+    margin-left: calc(74 / 390 * 100vw);
+    display: flex;
+    align-items: center;
+    font-size: calc(12 / 390 * 100vw);
+
+    .down-arrow {
+      background-image: url("../../static/images/down-black.png");
+      width: calc(8 / 390 * 100vw);
+      height: calc(5 / 390 * 100vw);
+      background-size: 100% 100%;
+      margin-left: calc(8 / 390 * 100vw);
+    }
   }
 }
 </style>
diff --git a/src/pages/moment/moment.vue b/src/pages/moment/moment.vue
index f630199e..8125df8f 100644
--- a/src/pages/moment/moment.vue
+++ b/src/pages/moment/moment.vue
@@ -97,7 +97,12 @@
   />
 
   <view v-if="isReplyOpened && selectComment" class="reply">
-    <Reply :main-comment="selectComment" @close-reply="closeReply" />
+    <Reply
+      :main-comment="selectComment"
+      :moment="moment"
+      :fish-award-emitter="fishAwardEmitter"
+      @close-reply="closeReply"
+    />
   </view>
   <view
     v-if="isShowDeleteDialogue"
diff --git a/src/static/images/right-triangle-grey.png b/src/static/images/right-triangle-grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..0054395abd0eebe0690f4b18deea7c6735376a3b
GIT binary patch
literal 4331
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
Q@b3kHH88_e=)2wfAI2rzF8}}l

literal 0
HcmV?d00001


From bc73a638b92ad8beb73ce5e21b84fe009c1d4f17 Mon Sep 17 00:00:00 2001
From: buluu97 <Changle20040907@163.com>
Date: Wed, 20 Dec 2023 00:59:34 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=8F=96=E6=B6=88=E4=B8=89?=
 =?UTF-8?q?=E7=BA=A7=E8=AF=84=E8=AE=BA=E7=BC=A9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/moment/Reply.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/moment/Reply.vue b/src/pages/moment/Reply.vue
index 14560f46..c9d6a93d 100644
--- a/src/pages/moment/Reply.vue
+++ b/src/pages/moment/Reply.vue
@@ -347,7 +347,7 @@ const focusReplyComment = (comment: Comment) => {
   }
 
   .reply {
-    margin: calc(5 / 390 * 100vw) 0;
+    margin: 0rpx;
     .avatar {
       width: calc(22 / 390 * 100vw);
       height: calc(22 / 390 * 100vw);

From 15525689de85323a65093519431a781d576f5e09 Mon Sep 17 00:00:00 2001
From: buluu97 <Changle20040907@163.com>
Date: Wed, 20 Dec 2023 01:05:54 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E5=8F=96=E6=B6=88=E4=B8=89?=
 =?UTF-8?q?=E7=BA=A7=E8=AF=84=E8=AE=BA=E7=BC=A9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/moment/Reply.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/moment/Reply.vue b/src/pages/moment/Reply.vue
index c9d6a93d..6eb7ffec 100644
--- a/src/pages/moment/Reply.vue
+++ b/src/pages/moment/Reply.vue
@@ -71,7 +71,7 @@
 
         <!-- 三级评论 -->
         <view
-          v-for="(comment, index) in comments"
+          v-for="(comment3, index) in comments"
           :key="index"
           class="reply"
           @click="focusReplyComment(comment)"
@@ -81,7 +81,7 @@
               backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
             }"
             class="avatar"
-            style="margin-left: calc(42 / 390 * 100vw)"
+            style="margin-left: 0vw"
           />
           <view class="thread">
             <view class="content">
@@ -102,7 +102,7 @@
                 <view class="lower">{{ comment.text }}</view>
               </view>
               <view v-if="comment.likeCount >= 0" class="right">
-                <view class="likes-frame" @click="likeComment(comment3)">
+                <view class="likes-frame" @click="likeComment(comment)">
                   <view v-if="comment.isLiked" class="thumb liked" />
                   <view v-else class="thumb" />
                   <view class="likes">{{ comment.likeCount }}</view>
@@ -347,7 +347,7 @@ const focusReplyComment = (comment: Comment) => {
   }
 
   .reply {
-    margin: 0rpx;
+    margin: 0;
     .avatar {
       width: calc(22 / 390 * 100vw);
       height: calc(22 / 390 * 100vw);
@@ -366,7 +366,7 @@ const focusReplyComment = (comment: Comment) => {
 
   .more-sub-replies {
     color: #696969;
-    margin-left: calc(74 / 390 * 100vw);
+    margin-left: 0;
     display: flex;
     align-items: center;
     font-size: calc(12 / 390 * 100vw);

From 84724f76ecf231c263d0ef67c163ac0b56255469 Mon Sep 17 00:00:00 2001
From: foliet <1843619244@qq.com>
Date: Wed, 20 Dec 2023 18:04:11 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E4=B8=89?=
 =?UTF-8?q?=E7=BA=A7=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/moment/Reply.vue           | 80 ++++++----------------------
 src/pages/moment/WriteCommentBox.vue |  3 +-
 src/pages/plan/MomentTask.vue        |  2 +-
 3 files changed, 20 insertions(+), 65 deletions(-)

diff --git a/src/pages/moment/Reply.vue b/src/pages/moment/Reply.vue
index 6eb7ffec..a6bb90b6 100644
--- a/src/pages/moment/Reply.vue
+++ b/src/pages/moment/Reply.vue
@@ -37,7 +37,12 @@
       </view>
 
       <!-- 二级评论 -->
-      <view v-for="(comment, index) in comments" :key="index" class="main">
+      <view
+        v-for="(comment, index) in comments"
+        :key="index"
+        class="main"
+        @click="focusReplyComment(comment)"
+      >
         <view class="comment">
           <view
             :style="{
@@ -45,44 +50,6 @@
             }"
             class="avatar"
           />
-          <view class="thread">
-            <view class="content">
-              <view class="left">
-                <view class="upper">
-                  <view class="username">{{ comment.user.nickname }}</view>
-                  <view class="timestamp"
-                    >· {{ displayTime(comment.createAt) }}
-                  </view>
-                </view>
-                <view class="lower" @click="emit('interactWithComment')">{{
-                  comment.text
-                }}</view>
-              </view>
-              <view class="right">
-                <view class="likes-frame" @click="likeComment(comment)">
-                  <view v-if="comment.isLiked" class="thumb liked" />
-                  <view v-else class="thumb" />
-                  <view class="likes">{{ comment.likeCount }}</view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
-
-        <!-- 三级评论 -->
-        <view
-          v-for="(comment3, index) in comments"
-          :key="index"
-          class="reply"
-          @click="focusReplyComment(comment)"
-        >
-          <view
-            :style="{
-              backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
-            }"
-            class="avatar"
-            style="margin-left: 0vw"
-          />
           <view class="thread">
             <view class="content">
               <view class="left">
@@ -99,9 +66,11 @@
                     >· {{ displayTime(comment.createAt) }}
                   </view>
                 </view>
-                <view class="lower">{{ comment.text }}</view>
+                <view class="lower" @click="emit('interactWithComment')">{{
+                  comment.text
+                }}</view>
               </view>
-              <view v-if="comment.likeCount >= 0" class="right">
+              <view class="right">
                 <view class="likes-frame" @click="likeComment(comment)">
                   <view v-if="comment.isLiked" class="thumb liked" />
                   <view v-else class="thumb" />
@@ -264,6 +233,13 @@ const focusReplyComment = (comment: Comment) => {
 
             .username {
               margin-right: calc(10 / 390 * 100vw);
+              display: flex;
+              align-items: center;
+              .right-triangle-grey {
+                width: 15rpx;
+                height: 15rpx;
+                margin: 0 5px;
+              }
             }
           }
 
@@ -342,28 +318,6 @@ const focusReplyComment = (comment: Comment) => {
     }
   }
 
-  .comment {
-    // margin-bottom: calc(20 / 390 * 100vw);
-  }
-
-  .reply {
-    margin: 0;
-    .avatar {
-      width: calc(22 / 390 * 100vw);
-      height: calc(22 / 390 * 100vw);
-    }
-
-    .username {
-      display: flex;
-      align-items: center;
-      .right-triangle-grey {
-        width: 5px;
-        height: 5px;
-        margin: 0 5px;
-      }
-    }
-  }
-
   .more-sub-replies {
     color: #696969;
     margin-left: 0;
diff --git a/src/pages/moment/WriteCommentBox.vue b/src/pages/moment/WriteCommentBox.vue
index 931ace18..74fb771b 100644
--- a/src/pages/moment/WriteCommentBox.vue
+++ b/src/pages/moment/WriteCommentBox.vue
@@ -86,11 +86,12 @@ const blur = () => {
   }
 
   .like-box {
+    margin-top: 20rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    margin-right: 12px;
+    margin-right: 24rpx;
 
     .like-icon {
       width: calc(20 / 390 * 100vw);
diff --git a/src/pages/plan/MomentTask.vue b/src/pages/plan/MomentTask.vue
index 8ceb0cef..8cbf460a 100644
--- a/src/pages/plan/MomentTask.vue
+++ b/src/pages/plan/MomentTask.vue
@@ -3,7 +3,7 @@
     <view class="content">
       <text class="title">首次发布动态</text>
       <text class="detail"
-        >每次发布首条动态可以获得{{ userData.ContentFishes[0] }}小鱼干</text
+        >每日发布首条动态可以获得{{ userData.ContentFishes[0] }}小鱼干</text
       >
     </view>
     <view class="get-fish-number">

From feee11ffd2e661657eddc749c25fed75835a8667 Mon Sep 17 00:00:00 2001
From: foliet <1843619244@qq.com>
Date: Sat, 23 Dec 2023 03:32:32 +0800
Subject: [PATCH 5/6] fix

---
 src/pages/moment/Reply.vue  | 37 ++++++++++++++++++-------------------
 src/pages/moment/moment.vue |  2 +-
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/pages/moment/Reply.vue b/src/pages/moment/Reply.vue
index a6bb90b6..5b8920da 100644
--- a/src/pages/moment/Reply.vue
+++ b/src/pages/moment/Reply.vue
@@ -56,11 +56,13 @@
                 <view class="upper">
                   <view class="username">
                     <view>{{ comment.user.nickname }}</view>
-                    <image
-                      class="right-triangle-grey"
-                      src="/static/images/right-triangle-grey.png"
-                    />
-                    <view>{{ comment.user.nickname }}</view>
+                    <template v-if="comment.replyUser">
+                      <image
+                        class="right-triangle-grey"
+                        src="/static/images/right-triangle-grey.png"
+                      />
+                      <view>{{ comment.replyUser?.nickname }}</view>
+                    </template>
                   </view>
                   <view class="timestamp"
                     >· {{ displayTime(comment.createAt) }}
@@ -86,9 +88,9 @@
         </view>
       </view>
     </view>
-    <view v-if="firstLevelId && moment" style="height: 16vw" />
+    <view v-if="moment" style="height: 16vw" />
     <WriteCommentBox
-      v-if="firstLevelId && moment"
+      v-if="moment"
       :placeholder-text="placeholderText"
       :like-count="moment.likeCount"
       :is-liked="moment.isLiked"
@@ -131,9 +133,7 @@ const localGetCommentsData = () => {
     type: CommentType.Comment,
     page: page
   }).then((res) => {
-    for (const data of res.data) {
-      comments.value.push(data);
-    }
+    comments.value.push(...res.data);
     isCommentsLoaded = true;
     page += 1;
     if (res.data.length < 10) allCommentsLoaded = true;
@@ -154,12 +154,11 @@ function closeSelf() {
   emits("closeReply");
 }
 
-const defaultPlaceholderText = "发布评论";
-const placeholderText = ref(defaultPlaceholderText);
-const firstLevelId = ref();
+const placeholderText = ref("回复 @" + props.mainComment.user.nickname + ": ");
+const firstLevelId = ref(props.mainComment.id);
 const afterBlur = () => {
-  placeholderText.value = defaultPlaceholderText;
-  firstLevelId.value = undefined;
+  placeholderText.value = "回复 @" + props.mainComment.user.nickname + ": ";
+  firstLevelId.value = props.mainComment.id;
 };
 
 const focusReplyComment = (comment: Comment) => {
@@ -261,13 +260,13 @@ const focusReplyComment = (comment: Comment) => {
             align-items: center;
 
             .thumb {
-              background-image: url("../../static/images/like_grey_0.png");
+              background-image: url("/static/images/like_grey_0.png");
               width: calc(12 / 390 * 100vw);
               height: calc(12 / 390 * 100vw);
               background-size: 100% 100%;
 
               &.liked {
-                background-image: url("../../static/images/like_grey_1.png");
+                background-image: url("/static/images/like_grey_1.png");
               }
             }
 
@@ -308,7 +307,7 @@ const focusReplyComment = (comment: Comment) => {
         align-items: center;
 
         .down-arrow {
-          background-image: url("../../static/images/down-black.png");
+          background-image: url("/static/images/down-black.png");
           width: calc(8 / 390 * 100vw);
           height: calc(5 / 390 * 100vw);
           background-size: 100% 100%;
@@ -326,7 +325,7 @@ const focusReplyComment = (comment: Comment) => {
     font-size: calc(12 / 390 * 100vw);
 
     .down-arrow {
-      background-image: url("../../static/images/down-black.png");
+      background-image: url("/static/images/down-black.png");
       width: calc(8 / 390 * 100vw);
       height: calc(5 / 390 * 100vw);
       background-size: 100% 100%;
diff --git a/src/pages/moment/moment.vue b/src/pages/moment/moment.vue
index 8125df8f..b646774c 100644
--- a/src/pages/moment/moment.vue
+++ b/src/pages/moment/moment.vue
@@ -220,7 +220,7 @@ const localGetCommentsData = () => {
     }
     isCommentsLoaded = true;
     page += 1;
-    if (res.data?.length < 10) allCommentsLoaded = true;
+    if (!res.data?.length) allCommentsLoaded = true;
   });
 };
 

From e45800546fbe53ee1c9c23817282859cd33ad2d7 Mon Sep 17 00:00:00 2001
From: foliet <1843619244@qq.com>
Date: Sat, 23 Dec 2023 14:56:54 +0800
Subject: [PATCH 6/6] fix

---
 src/apis/comment/comment-interfaces.ts |   1 +
 src/pages/moment/CommentBox.vue        |  14 +--
 src/pages/moment/Reply.vue             | 139 +++++++++----------------
 src/pages/moment/WriteCommentBox.vue   |  37 +++++--
 src/pages/moment/moment.vue            |  81 ++++++++------
 src/pages/post/post.vue                |  82 +++++++++------
 src/pages/profile/utils.ts             |   5 +-
 src/utils/time.ts                      |  11 ++
 8 files changed, 195 insertions(+), 175 deletions(-)

diff --git a/src/apis/comment/comment-interfaces.ts b/src/apis/comment/comment-interfaces.ts
index ae1cf901..14527a8f 100644
--- a/src/apis/comment/comment-interfaces.ts
+++ b/src/apis/comment/comment-interfaces.ts
@@ -18,6 +18,7 @@ export interface NewCommentReq {
   text: string;
   id: string;
   firstLevelId?: string;
+  replyToUserId?: string;
   type: CommentType;
 }
 
diff --git a/src/pages/moment/CommentBox.vue b/src/pages/moment/CommentBox.vue
index d4562767..5a334888 100644
--- a/src/pages/moment/CommentBox.vue
+++ b/src/pages/moment/CommentBox.vue
@@ -6,10 +6,7 @@
       @click="showDeleteDialogue"
     />
     <view class="commenter-info-box">
-      <view
-        class="d-flex a-start"
-        @click="toPersonInfo(comment.user.id, myUserId)"
-      >
+      <view class="d-flex a-start" @click="toPersonInfo(comment.user.id)">
         <image
           :src="getThumbnail(comment.user.avatarUrl)"
           class="commenter-profile"
@@ -17,14 +14,11 @@
       </view>
       <view style="margin-top: 12rpx; margin-left: 12rpx; width: 100%">
         <view class="d-flex a-center">
-          <view
-            class="commenter-name"
-            @click="toPersonInfo(comment.user.id, myUserId)"
-          >
+          <view class="commenter-name" @click="toPersonInfo(comment.user.id)">
             {{ comment.user.nickname }}
           </view>
           <view class="comment-time">
-            · {{ displayTime(comment.createAt) }}
+            · {{ displayDetailTime(comment.createAt) }}
           </view>
         </view>
         <view>
@@ -81,7 +75,7 @@
 
 <script lang="ts" setup>
 import { Comment } from "@/apis/schemas";
-import { displayTime } from "@/utils/time";
+import { displayDetailTime, displayTime } from "@/utils/time";
 import { deleteComment } from "@/apis/comment/comment";
 import { ref } from "vue";
 import { toPersonInfo } from "@/pages/profile/utils";
diff --git a/src/pages/moment/Reply.vue b/src/pages/moment/Reply.vue
index 5b8920da..4a4ad188 100644
--- a/src/pages/moment/Reply.vue
+++ b/src/pages/moment/Reply.vue
@@ -10,6 +10,7 @@
               backgroundImage: 'url( ' + mainComment.user.avatarUrl + ')'
             }"
             class="avatar"
+            @click="toPersonInfo(mainComment.user.id)"
           />
           <view class="thread">
             <view class="content">
@@ -17,12 +18,10 @@
                 <view class="upper">
                   <view class="username">{{ mainComment.user.nickname }}</view>
                   <view class="timestamp"
-                    >· {{ displayTime(mainComment.createAt) }}
+                    >· {{ displayDetailTime(mainComment.createAt) }}
                   </view>
                 </view>
-                <view class="lower" @click="emit('interactWithComment')">{{
-                  mainComment.text
-                }}</view>
+                <view class="lower">{{ mainComment.text }}</view>
               </view>
               <view class="right">
                 <view class="likes-frame" @click="likeComment(mainComment)">
@@ -37,18 +36,14 @@
       </view>
 
       <!-- 二级评论 -->
-      <view
-        v-for="(comment, index) in comments"
-        :key="index"
-        class="main"
-        @click="focusReplyComment(comment)"
-      >
+      <view v-for="(comment, index) in comments" :key="index" class="main">
         <view class="comment">
           <view
             :style="{
               backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
             }"
             class="avatar"
+            @click="toPersonInfo(comment.user.id)"
           />
           <view class="thread">
             <view class="content">
@@ -65,10 +60,10 @@
                     </template>
                   </view>
                   <view class="timestamp"
-                    >· {{ displayTime(comment.createAt) }}
+                    >· {{ displayDetailTime(comment.createAt) }}
                   </view>
                 </view>
-                <view class="lower" @click="emit('interactWithComment')">{{
+                <view class="lower" @click="onReplyComment(comment)">{{
                   comment.text
                 }}</view>
               </view>
@@ -82,89 +77,63 @@
             </view>
           </view>
         </view>
-
-        <view class="more-sub-replies">
-          展开查看更多 <view class="down-arrow" />
-        </view>
+      </view>
+      <view
+        v-if="isCommentsLoaded && !allCommentsLoaded"
+        class="more-sub-replies"
+        @click="localGetCommentsData"
+      >
+        展开查看更多
+        <view class="down-arrow" />
       </view>
     </view>
-    <view v-if="moment" style="height: 16vw" />
-    <WriteCommentBox
-      v-if="moment"
-      :placeholder-text="placeholderText"
-      :like-count="moment.likeCount"
-      :is-liked="moment.isLiked"
-      :parent-id="moment.id"
-      :parent-type="CommentType.Moment"
-      :first-level-id="firstLevelId"
-      :comment-callback="(res) => fishAwardEmitter.triggerCallbacks(res)"
-      @do-like="likeMoment(moment, fishAwardEmitter)"
-      @cancel-reply="afterBlur"
-    />
   </scroll-view>
 </template>
 
 <script lang="ts" setup>
-import { Comment, Moment } from "@/apis/schemas";
-import { displayTime } from "@/utils/time";
+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 { onReachBottom } from "@dcloudio/uni-app";
 import { CommentType } from "@/apis/comment/comment-interfaces";
-import WriteCommentBox from "@/pages/moment/WriteCommentBox.vue";
-import { getMomentDetail } from "@/apis/moment/moment";
-import { GetMomentDetailReq } from "@/apis/moment/moment-components";
+import { EventEmitter } from "@/utils/utils";
+import { toPersonInfo } from "@/pages/profile/utils";
 
 const props = defineProps<{
   mainComment: Comment;
   moment?: Moment;
-  fishAwardEmitter: any;
+  fishAwardEmitter: EventEmitter<FishAward>;
+  onReplyComment: (comment: Comment) => void;
 }>();
 
 const comments = ref<Comment[]>([]);
 
-let allCommentsLoaded = false;
-let isCommentsLoaded = true;
+let allCommentsLoaded = ref(false);
+let isCommentsLoaded = ref(true);
 let page = 0;
 const localGetCommentsData = () => {
-  isCommentsLoaded = false;
+  isCommentsLoaded.value = false;
   getCommentsData({
     id: props.mainComment.id,
     type: CommentType.Comment,
     page: page
   }).then((res) => {
     comments.value.push(...res.data);
-    isCommentsLoaded = true;
+    isCommentsLoaded.value = true;
     page += 1;
-    if (res.data.length < 10) allCommentsLoaded = true;
+    if (!res.data.length) {
+      allCommentsLoaded.value = true;
+    }
   });
 };
 
 localGetCommentsData();
 
-onReachBottom(() => {
-  if (isCommentsLoaded && !allCommentsLoaded) {
-    localGetCommentsData();
-  }
-});
-
-const emits = defineEmits(["closeReply"]);
+const emits = defineEmits(["close"]);
 
 function closeSelf() {
-  emits("closeReply");
+  emits("close");
 }
-
-const placeholderText = ref("回复 @" + props.mainComment.user.nickname + ": ");
-const firstLevelId = ref(props.mainComment.id);
-const afterBlur = () => {
-  placeholderText.value = "回复 @" + props.mainComment.user.nickname + ": ";
-  firstLevelId.value = props.mainComment.id;
-};
-
-const focusReplyComment = (comment: Comment) => {
-  placeholderText.value = "回复 @" + comment.user.nickname + ": ";
-  firstLevelId.value = comment.id;
-};
 </script>
 
 <style lang="scss" scoped>
@@ -181,7 +150,7 @@ const focusReplyComment = (comment: Comment) => {
 .frame {
   overflow: scroll;
   position: fixed;
-  bottom: 0;
+  bottom: 16vw;
   left: 0;
   width: 100vw;
   max-height: 75vh;
@@ -299,38 +268,24 @@ const focusReplyComment = (comment: Comment) => {
           }
         }
       }
-
-      .more-sub-replies {
-        color: #696969;
-        margin-left: calc(33 / 390 * 100vw);
-        display: flex;
-        align-items: center;
-
-        .down-arrow {
-          background-image: url("/static/images/down-black.png");
-          width: calc(8 / 390 * 100vw);
-          height: calc(5 / 390 * 100vw);
-          background-size: 100% 100%;
-          margin-left: calc(8 / 390 * 100vw);
-        }
-      }
     }
   }
-
-  .more-sub-replies {
-    color: #696969;
-    margin-left: 0;
-    display: flex;
-    align-items: center;
-    font-size: calc(12 / 390 * 100vw);
-
-    .down-arrow {
-      background-image: url("/static/images/down-black.png");
-      width: calc(8 / 390 * 100vw);
-      height: calc(5 / 390 * 100vw);
-      background-size: 100% 100%;
-      margin-left: calc(8 / 390 * 100vw);
-    }
+}
+.more-sub-replies {
+  position: relative;
+  color: #696969;
+  margin-left: 0;
+  display: flex;
+  left: 50rpx;
+  align-items: center;
+  font-size: calc(12 / 390 * 100vw);
+
+  .down-arrow {
+    background-image: url("/static/images/down-black.png");
+    width: calc(8 / 390 * 100vw);
+    height: calc(5 / 390 * 100vw);
+    background-size: 100% 100%;
+    margin-left: calc(8 / 390 * 100vw);
   }
 }
 </style>
diff --git a/src/pages/moment/WriteCommentBox.vue b/src/pages/moment/WriteCommentBox.vue
index 74fb771b..43f89347 100644
--- a/src/pages/moment/WriteCommentBox.vue
+++ b/src/pages/moment/WriteCommentBox.vue
@@ -3,9 +3,10 @@
     <input
       ref="input"
       v-model="text"
-      :placeholder="placeholderText"
+      :placeholder="placeholder"
       class="write-comment"
       type="text"
+      :focus="focus"
       @blur="blur"
     />
     <view v-if="likeCount >= 0" class="like-box">
@@ -20,27 +21,43 @@
 </template>
 
 <script lang="ts" setup>
-import { CommentType, NewCommentResp } from "@/apis/comment/comment-interfaces";
+import {
+  CommentType,
+  NewCommentReq,
+  NewCommentResp
+} from "@/apis/comment/comment-interfaces";
 import { createComment } from "@/pages/moment/utils";
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import { Comment, User } from "@/apis/schemas";
 
 const props = defineProps<{
   parentId: string;
   parentType: CommentType;
-  firstLevelId?: string;
+  firstLevelComment?: Comment;
+  replyComment?: Comment;
   likeCount?: number;
   isLiked: boolean;
-  placeholderText: string;
   commentCallback: (res: NewCommentResp) => void;
+  focus: boolean;
 }>();
 const text = ref("");
-const emit = defineEmits(["doLike", "afterCreateComment", "cancelReply"]);
+const placeholder = computed(() => {
+  let placeholder = "";
+  if (props.replyComment) {
+    placeholder = "回复 @" + props.replyComment.user?.nickname + ": ";
+  } else if (props.firstLevelComment) {
+    return "回复 @" + props.firstLevelComment.user?.nickname + ": ";
+  }
+  return placeholder || "发布评论";
+});
+const emit = defineEmits(["doLike", "afterCreateComment", "blur"]);
 
 const localCreateComment = async () => {
-  const req = {
+  const req: NewCommentReq = {
     text: text.value,
     type: props.parentType,
-    firstLevelId: props.firstLevelId,
+    firstLevelId: props.firstLevelComment?.id,
+    replyToUserId: props.replyComment?.user?.id,
     id: props.parentId
   };
   text.value = "";
@@ -52,7 +69,7 @@ const blur = () => {
   if (text.value) {
     return;
   }
-  emit("cancelReply");
+  emit("blur");
 };
 </script>
 
@@ -63,7 +80,7 @@ const blur = () => {
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: 50;
+  z-index: 102;
   display: flex;
   width: 100vw;
   box-sizing: border-box;
diff --git a/src/pages/moment/moment.vue b/src/pages/moment/moment.vue
index b646774c..42d32ab1 100644
--- a/src/pages/moment/moment.vue
+++ b/src/pages/moment/moment.vue
@@ -6,7 +6,7 @@
 
   <view
     v-if="moment"
-    :style="{ height: 'calc(100vh - 16vw - ' - keyboardHeight + 'px)' }"
+    :style="{ height: 'calc(100vh - 16vw - ' + keyboardHeight + 'px)' }"
     class="content-frame"
   >
     <view class="container">
@@ -15,12 +15,9 @@
           <image
             :src="getThumbnail(moment.user.avatarUrl)"
             class="poster-profile"
-            @click="toPersonInfo(moment.user.id, myUserId)"
+            @click="toPersonInfo(moment.user.id)"
           />
-          <text
-            class="poster-name"
-            @click="toPersonInfo(moment.user.id, myUserId)"
-          >
+          <text class="poster-name" @click="toPersonInfo(moment.user.id)">
             {{ moment.user.nickname }}
           </text>
           <text class="post-time"> · {{ displayTime(moment.createAt) }} </text>
@@ -84,24 +81,26 @@
   </view>
   <WriteCommentBox
     v-if="moment"
-    :placeholder-text="placeholderText"
     :like-count="moment.likeCount"
     :is-liked="moment.isLiked"
     :parent-id="moment.id"
     :parent-type="CommentType.Moment"
-    :first-level-id="firstLevelId"
+    :first-level-comment="firstLevelComment"
+    :reply-comment="replyComment"
+    :focus="writeBoxFocus"
     :comment-callback="(res) => fishAwardEmitter.triggerCallbacks(res)"
     @do-like="likeMoment(moment, fishAwardEmitter)"
     @after-create-comment="init"
-    @cancel-reply="afterBlur"
+    @blur="afterBlur"
   />
 
-  <view v-if="isReplyOpened && selectComment" class="reply">
+  <view v-if="isReplyOpened && selectComment">
     <Reply
       :main-comment="selectComment"
       :moment="moment"
       :fish-award-emitter="fishAwardEmitter"
-      @close-reply="closeReply"
+      :on-reply-comment="onReplyComment"
+      @close="closeReply"
     />
   </view>
   <view
@@ -135,7 +134,7 @@
 
 <script lang="ts" setup>
 import ToastBoxWithShadow from "@/components/ToastBoxWithShadow.vue";
-import { reactive, ref } from "vue";
+import { nextTick, reactive, ref } from "vue";
 import TopBar from "@/components/TopBar.vue";
 import {
   chooseImageClass,
@@ -173,6 +172,7 @@ const fishAwardEmitter = new EventEmitter((res: FishAward) => {
   }
 });
 
+const writeBoxFocus = ref(false);
 const keyboardHeight = ref(0);
 
 const getMomentDetailReq = reactive<GetMomentDetailReq>({
@@ -224,17 +224,20 @@ const localGetCommentsData = () => {
   });
 };
 
-const defaultPlaceholderText = "发布评论";
-const placeholderText = ref(defaultPlaceholderText);
-const firstLevelId = ref();
+const firstLevelComment = ref<Comment>();
 const afterBlur = () => {
-  placeholderText.value = defaultPlaceholderText;
-  firstLevelId.value = undefined;
+  writeBoxFocus.value = false;
+  replyComment.value = undefined;
+  if (!selectComment.value) {
+    firstLevelComment.value = undefined;
+  } else {
+    firstLevelComment.value = selectComment.value;
+  }
 };
 
 const focusReplyComment = (comment: Comment) => {
-  placeholderText.value = "回复 @" + comment.user.nickname + ": ";
-  firstLevelId.value = comment.id;
+  writeBoxFocus.value = true;
+  firstLevelComment.value = comment;
 };
 
 const showDeleteDialogue = () => {
@@ -267,16 +270,23 @@ const relaunchCurrentPage = () => {
 
 let initLock = false;
 const init = () => {
-  if (initLock) return;
-  initLock = true;
-  getData();
-  page = 0;
-  getCommentsReq.page = 0;
-  comments.value = [];
-  allCommentsLoaded = false;
-  isCommentsLoaded = true;
-  localGetCommentsData();
-  initLock = false;
+  if (!isReplyOpened.value) {
+    if (initLock) return;
+    initLock = true;
+    getData();
+    page = 0;
+    getCommentsReq.page = 0;
+    comments.value = [];
+    allCommentsLoaded = false;
+    isCommentsLoaded = true;
+    localGetCommentsData();
+    initLock = false;
+  } else {
+    isReplyOpened.value = false;
+    nextTick(() => {
+      isReplyOpened.value = true;
+    });
+  }
 };
 
 const wcbHeight = ref(81);
@@ -304,9 +314,12 @@ onPullDownRefresh(() => {
   }
 });
 
-init();
-
 const selectComment = ref<Comment>();
+const replyComment = ref<Comment>();
+const onReplyComment = (comment: Comment) => {
+  writeBoxFocus.value = true;
+  replyComment.value = comment;
+};
 
 let enterMaskData = ref(null);
 let enterReplyData = ref(null);
@@ -315,10 +328,15 @@ const isReplyOpened = ref(false);
 
 function onClickReplies(comment: Comment) {
   selectComment.value = comment;
+  firstLevelComment.value = comment;
   isReplyOpened.value = true;
 }
 
 function closeReply() {
+  writeBoxFocus.value = false;
+  selectComment.value = undefined;
+  firstLevelComment.value = undefined;
+  replyComment.value = undefined;
   isReplyOpened.value = false;
 }
 
@@ -328,6 +346,7 @@ function leaveReply() {
   enterReply.height("0%").step();
   enterReplyData.value = enterReply.export();
 }
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/post/post.vue b/src/pages/post/post.vue
index ffd825ed..cc70673c 100644
--- a/src/pages/post/post.vue
+++ b/src/pages/post/post.vue
@@ -6,7 +6,7 @@
 
   <view
     v-if="post"
-    :style="{ height: 'calc(100vh - 16vw - ' - keyboardHeight + 'px)' }"
+    :style="{ height: 'calc(100vh - 16vw - ' + keyboardHeight + 'px)' }"
     class="content-frame"
   >
     <view class="header">
@@ -30,11 +30,7 @@
     </view>
 
     <view class="post">
-      <view
-        v-if="post.user"
-        class="user"
-        @click="toPersonInfo(post.user.id, myUserId)"
-      >
+      <view v-if="post.user" class="user" @click="toPersonInfo(post.user.id)">
         <image :src="getThumbnail(post.user.avatarUrl)" class="avatar" />
         <view class="name">
           {{ post.user.nickname }}
@@ -51,9 +47,7 @@
         @click="onClickImage(post.coverUrl)"
       />
       <view v-if="comments.data.length === 0" class="commentNum"> 评论</view>
-      <view v-else class="commentNum">
-        评论 {{ comments.data.length + comments.replyNumber }}
-      </view>
+      <view v-else class="commentNum"> 评论 {{ post.comments }} </view>
       <view v-if="comments.data.length === 0">
         <view class="nomore">这里还没有评论，快发布第一条评论吧！</view>
       </view>
@@ -72,20 +66,26 @@
   </view>
   <WriteCommentBox
     v-if="post"
-    v-model:placeholder-text="placeholderText"
     :is-liked="post.isLiked || false"
     :like-count="post.likes"
     :parent-type="CommentType.Post"
     :parent-id="post.id"
-    :first-level-id="firstLevelId"
+    :first-level-comment="firstLevelComment"
+    :reply-comment="replyComment"
+    :focus="writeBoxFocus"
     :comment-callback="(res) => fishAwardEmitter.triggerCallbacks(res)"
     @do-like="likePost(post, fishAwardEmitter)"
     @after-create-comment="init"
-    @cancel-reply="afterBlur"
+    @blur="afterBlur"
   />
 
   <view v-if="isReplyOpened && selectComment" class="reply">
-    <reply :main-comment="selectComment" @close-reply="closeReply" />
+    <reply
+      :main-comment="selectComment"
+      :fish-award-emitter="fishAwardEmitter"
+      :on-reply-comment="onReplyComment"
+      @close="closeReply"
+    />
   </view>
   <view
     v-if="isShowDeleteDialogue"
@@ -116,7 +116,7 @@
   />
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { nextTick, reactive, ref } from "vue";
 import TopBar from "@/components/TopBar.vue";
 import {
   enterMask,
@@ -216,16 +216,21 @@ const localGetCommentsData = async () => {
   });
 };
 
-const placeholderText = ref("发布评论");
-const firstLevelId = ref<string>();
-
+const firstLevelComment = ref<Comment>();
+const writeBoxFocus = ref(false);
 const afterBlur = () => {
-  firstLevelId.value = undefined;
+  writeBoxFocus.value = false;
+  replyComment.value = undefined;
+  if (!selectComment.value) {
+    firstLevelComment.value = undefined;
+  } else {
+    firstLevelComment.value = selectComment.value;
+  }
 };
 
 const focusReplyComment = (comment: Comment) => {
-  placeholderText.value = "回复 @" + comment.user.nickname + ": ";
-  firstLevelId.value = comment.id;
+  writeBoxFocus.value = true;
+  firstLevelComment.value = comment;
 };
 
 const showDeleteDialogue = () => {
@@ -254,16 +259,23 @@ const deleteThisPost = () => {
 
 let initLock = false;
 const init = async () => {
-  if (initLock) return;
-  initLock = true;
-  await getData();
-  page = 0;
-  getCommentsReq.page = 0;
-  comments.data = [];
-  allCommentsLoaded = false;
-  isCommentsLoaded = true;
-  await localGetCommentsData();
-  initLock = false;
+  if (!isReplyOpened.value) {
+    if (initLock) return;
+    initLock = true;
+    await getData();
+    page = 0;
+    getCommentsReq.page = 0;
+    comments.data = [];
+    allCommentsLoaded = false;
+    isCommentsLoaded = true;
+    await localGetCommentsData();
+    initLock = false;
+  } else {
+    isReplyOpened.value = false;
+    nextTick(() => {
+      isReplyOpened.value = true;
+    });
+  }
 };
 
 const wcbHeight = ref(81);
@@ -290,6 +302,11 @@ uni.onKeyboardHeightChange((res) => {
 });
 
 const selectComment = ref<Comment>();
+const replyComment = ref<Comment>();
+const onReplyComment = (comment: Comment) => {
+  writeBoxFocus.value = true;
+  replyComment.value = comment;
+};
 
 let enterMaskData = ref(null);
 let enterReplyData = ref(null);
@@ -298,10 +315,15 @@ const isReplyOpened = ref(false);
 
 function onClickReplies(comment: Comment) {
   selectComment.value = comment;
+  firstLevelComment.value = comment;
   isReplyOpened.value = true;
 }
 
 function closeReply() {
+  writeBoxFocus.value = false;
+  selectComment.value = undefined;
+  firstLevelComment.value = undefined;
+  replyComment.value = undefined;
   isReplyOpened.value = false;
 }
 
diff --git a/src/pages/profile/utils.ts b/src/pages/profile/utils.ts
index 35587c61..bff16420 100644
--- a/src/pages/profile/utils.ts
+++ b/src/pages/profile/utils.ts
@@ -1,4 +1,5 @@
 import { Pages } from "@/utils/url";
+import { StorageKeys } from "@/utils/const";
 
 export function CopyToClipboard(res: string) {
   uni.setClipboardData({
@@ -24,8 +25,8 @@ export function showPage() {
   }, 1500);
 }
 
-export function toPersonInfo(id: string, ownid: string) {
-  if (id === ownid)
+export function toPersonInfo(id: string) {
+  if (id === uni.getStorageSync(StorageKeys.UserId))
     uni.switchTab({
       url: `${Pages.Profile}`
     });
diff --git a/src/utils/time.ts b/src/utils/time.ts
index 6d01a16b..645885e6 100644
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -21,6 +21,17 @@ export function displayTime(timestamp: number) {
     return time.format("MM-DD");
   }
 }
+
+export function displayDetailTime(timestamp: number) {
+  timestamp = adaptTime(timestamp);
+  const now = new Date().getTime();
+  if (now < timestamp) {
+    timestamp = now;
+  }
+  const time = moment(timestamp);
+  return time.fromNow();
+}
+
 export function displayTimeTotal(timestamp: number) {
   timestamp = adaptTime(timestamp);
   const now = new Date().getTime();