feat: ntrp逻辑变更 & 替换海报二维码

src/components/Comments/index.tsx

@@ -8,7 +8,9 @@ import React, {
 import { View, Text, Image, Input } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import dayjs from "dayjs";
+import classnames from "classnames";
 import CommentServices from "@/services/commentServices";
+import { delay } from "@/utils";
 import type {
   BaseComment,
   Comment,
@@ -133,6 +135,7 @@ function CommentItem(props: {
   level: number;
   publisher_id: number;
   comment: Comment | ReplyComment;
+  blink_id: number | undefined;
   loadMore: (c: Comment) => void;
   handleReply: (options: CommentInputReplyParamsType) => void;
   handleDelete: (options: { parent_id: number | null; id: number }) => void;
@@ -144,12 +147,20 @@ function CommentItem(props: {
     loadMore: handleLoadMore,
     handleReply,
     handleDelete,
+    blink_id,
   } = props;
   const currentUserInfo = useUserInfo();
   const isGamePublisher = publisher_id === comment.user.id;
   const isCommentPublisher = currentUserInfo.id === comment.user.id;
   return (
-    <View className={styles.commentItem} key={comment.id}>
+    <View
+      className={classnames(
+        styles.commentItem,
+        blink_id === comment.id && styles.blink
+      )}
+      key={comment.id}
+      id={`comment_id_${comment.id}`}
+    >
       <View style={{ width: level === 1 ? "36px" : "28px" }}>
         <Image
           className={styles.avatar}
@@ -218,6 +229,7 @@ function CommentItem(props: {
         {!isReplyComment(comment) &&
           comment.replies.map((item: ReplyComment) => (
             <CommentItem
+              blink_id={blink_id}
               key={comment.id}
               publisher_id={publisher_id}
               comment={item}
@@ -242,24 +254,74 @@ function CommentItem(props: {
 }
 
 export default forwardRef(function Comments(
-  props: { game_id: number; publisher_id: number },
+  props: { game_id: number; publisher_id: number; message_id?: number },
   ref
 ) {
-  const { game_id, publisher_id } = props;
+  const { game_id, publisher_id, message_id } = props;
   const [comments, setComments] = useState<Comment[]>([]);
   const inputRef = useRef<CommentInputRef>(null);
+  const [blink_id, setBlinkId] = useState<number | undefined>();
 
-  const commentCountUpdateRef = useRef()
+  const commentCountUpdateRef = useRef();
 
   useEffect(() => {
-    getComments(1);
+    init();
   }, [game_id]);
 
+  async function init() {
+    if (!game_id) return;
+    await getComments(1);
+    if (message_id) {
+      scrollToComment();
+    }
+  }
+
+  async function scrollToComment() {
+    const res = await CommentServices.getCommentDetail({
+      comment_id: message_id as number,
+    });
+    if (res.code === 0) {
+      // 判断当前评论是否渲染到页面上，有的话直接跳转，没有的话先插入再跳转
+      const query = Taro.createSelectorQuery();
+      query
+        .select(`#comment_id_${res.data.id}`)
+        .boundingClientRect() // 或 .fields({id:true}) 根据需求
+        .exec(async (resArr) => {
+          // resArr 是数组，长度为选择器数量
+          const nodeInfo = resArr[0];
+          if (!nodeInfo) {
+            // 节点不存在，执行插入逻辑
+            const parent_id = res.data.parent_id;
+            if (parent_id) {
+              setComments((prev) => {
+                return prev.map((item) => {
+                  if (item.id !== parent_id) return item;
+                  return {
+                    ...item,
+                    replies: [res.data, ...item.replies],
+                  };
+                });
+              });
+            }
+          }
+          await delay(100);
+          Taro.pageScrollTo({
+            selector: `#comment_id_${res.data.id}`,
+            duration: 300,
+          });
+          setBlinkId(res.data.id);
+          setTimeout(() => {
+            setBlinkId(undefined);
+          }, 3300);
+        });
+    }
+  }
+
   useImperativeHandle(ref, () => ({
     addComment: handleReply,
     getCommentCount: (onUpdate) => {
-      commentCountUpdateRef.current = onUpdate
-      onUpdate(comments.length)
+      commentCountUpdateRef.current = onUpdate;
+      onUpdate(comments.length);
     },
   }));
 
@@ -275,7 +337,7 @@ export default forwardRef(function Comments(
       setComments((prev) => {
         const res = [...prev];
         res.splice(page * PAGESIZE - 1, newComments.length, ...newComments);
-        commentCountUpdateRef.current?.(res.length)
+        commentCountUpdateRef.current?.(res.length);
         return res;
       });
     }
@@ -303,7 +365,7 @@ export default forwardRef(function Comments(
             item.reply_count = res.data.count;
           }
         });
-        commentCountUpdateRef.current?.(newComments.length)
+        commentCountUpdateRef.current?.(newComments.length);
         return newComments;
       });
     }
@@ -325,7 +387,7 @@ export default forwardRef(function Comments(
     const res = await CommentServices.createComment({ game_id, content: val });
     if (res.code === 0) {
       setComments((prev) => {
-        commentCountUpdateRef.current?.(prev.length + 1)
+        commentCountUpdateRef.current?.(prev.length + 1);
         return [{ ...res.data, replies: [] }, ...prev];
       });
       toast("发布成功");
@@ -375,7 +437,7 @@ export default forwardRef(function Comments(
         });
       } else {
         setComments((prev) => {
-          commentCountUpdateRef.current?.(prev.length - 1)
+          commentCountUpdateRef.current?.(prev.length - 1);
           return prev.filter((item) => item.id !== id);
         });
       }
@@ -400,6 +462,7 @@ export default forwardRef(function Comments(
             return (
               <CommentItem
                 key={comment.id}
+                blink_id={blink_id}
                 publisher_id={publisher_id}
                 level={1}
                 comment={comment}