1

src/other_pages/comment_reply/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { View, Text, ScrollView, Image } from "@tarojs/components";
+import { View, Text, ScrollView, Image, Input } from "@tarojs/components";
 import { Avatar } from "@nutui/nutui-react-taro";
 import { withAuth, EmptyState } from "@/components";
 import commentService, { CommentActivity } from "@/services/commentService";
@@ -9,6 +9,7 @@ import "./index.scss";
 // 评论/回复类型定义
 interface CommentReplyItem {
   id: number;
+  user_id: number;
   user_avatar: string;
   user_nickname: string;
   action_type: "comment" | "reply"; // 评论了你的球局 / 回复了你的评论
@@ -24,6 +25,10 @@ const CommentReply = () => {
   const [commentList, setCommentList] = useState<CommentReplyItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [showReplyInput, setShowReplyInput] = useState(false);
+  const [replyTarget, setReplyTarget] = useState<CommentReplyItem | null>(null);
+  const [replyContent, setReplyContent] = useState("");
+  const [inputFocus, setInputFocus] = useState(false);
 
   useEffect(() => {
     getCommentReplyList();
@@ -32,18 +37,19 @@ const CommentReply = () => {
   // 获取评论和回复列表
   const getCommentReplyList = async () => {
     if (loading) return;
-    
+
     setLoading(true);
     try {
       const res = await commentService.getMyActivities({
         page: 1,
         pageSize: 20,
       });
-      
+
       if (res.code === 0 && res.data) {
         // 映射数据
         const mappedList = res.data.rows.map((item: CommentActivity) => ({
           id: item.id,
+          user_id: item.user?.id || 0,
           user_avatar: item.user?.avatar_url || "",
           user_nickname: item.user?.nickname || "匿名用户",
           action_type: item.type === "reply" ? "reply" as const : "comment" as const,
@@ -54,7 +60,7 @@ const CommentReply = () => {
           activity_id: item.game_id,
           activity_title: item.game?.title || "",
         }));
-        
+
         setCommentList(mappedList);
       }
     } catch (e) {
@@ -71,14 +77,14 @@ const CommentReply = () => {
   // 格式化时间显示
   const formatTime = (timeStr: string) => {
     if (!timeStr) return "";
-    
+
     const date = new Date(timeStr);
     const now = new Date();
     const diff = now.getTime() - date.getTime();
     const minutes = Math.floor(diff / (1000 * 60));
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-    
+
     if (minutes < 60) {
       return `${minutes}分钟前`;
     } else if (hours < 24) {
@@ -95,18 +101,83 @@ const CommentReply = () => {
   };
 
   // 处理回复
-  const handleReply = (item: CommentReplyItem) => {
-    console.log("回复:", item);
-    // TODO: 跳转到回复页面或弹出回复框
+  const handleReply = (e: any, item: CommentReplyItem) => {
+    e.stopPropagation(); // 阻止事件冒泡
+    setReplyTarget(item);
+    setShowReplyInput(true);
+    setInputFocus(true);
+    setReplyContent("");
   };
 
-  // 处理点击球局
-  const handleGameClick = (gameId: number) => {
+  // 处理点击评论项（跳转到球局详情）
+  const handleCommentClick = (item: CommentReplyItem) => {
     Taro.navigateTo({
-      url: `/game_pages/detail/index?id=${gameId}`,
+      url: `/game_pages/detail/index?id=${item.activity_id}&message_id=${item.id}`,
     });
   };
 
+  // 处理点击用户（跳转到个人页）
+  const handleUserClick = (e: any, userId: number) => {
+    e.stopPropagation(); // 阻止事件冒泡
+    Taro.navigateTo({
+      url: `/user_pages/other/index?user_id=${userId}`,
+    });
+  };
+
+  // 发送回复
+  const handleSendReply = async () => {
+    if (!replyContent.trim() || !replyTarget) {
+      Taro.showToast({
+        title: "请输入回复内容",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+
+    try {
+      // TODO: 调用回复接口
+      // await commentService.replyComment(replyTarget.id, replyContent);
+
+      Taro.showToast({
+        title: "回复成功",
+        icon: "success",
+        duration: 2000,
+      });
+
+      // 关闭输入框
+      setShowReplyInput(false);
+      setReplyTarget(null);
+      setReplyContent("");
+      setInputFocus(false);
+
+      // 刷新列表
+      getCommentReplyList();
+    } catch (e) {
+      Taro.showToast({
+        title: "回复失败",
+        icon: "none",
+        duration: 2000,
+      });
+    }
+  };
+
+  // 取消回复
+  const handleCancelReply = () => {
+    setShowReplyInput(false);
+    setReplyTarget(null);
+    setReplyContent("");
+    setInputFocus(false);
+  };
+
+  // 输入框失去焦点
+  const handleInputBlur = () => {
+    // 延迟执行，避免点击发送按钮时输入框先失焦导致发送失败
+    // setTimeout(() => {
+    //   handleCancelReply();
+    // }, 200);
+  };
+
   // 处理返回
   const handleBack = () => {
     Taro.navigateBack();
@@ -120,10 +191,11 @@ const CommentReply = () => {
         page: 1,
         pageSize: 20,
       });
-      
+
       if (res.code === 0 && res.data) {
         const mappedList = res.data.rows.map((item: CommentActivity) => ({
           id: item.id,
+          user_id: item.user?.id || 0,
           user_avatar: item.user?.avatar_url || "",
           user_nickname: item.user?.nickname || "匿名用户",
           action_type: item.type === "reply" ? "reply" as const : "comment" as const,
@@ -134,7 +206,7 @@ const CommentReply = () => {
           activity_id: item.game_id,
           activity_title: item.game?.title || "",
         }));
-        
+
         setCommentList(mappedList);
       }
     } catch (e) {
@@ -151,26 +223,36 @@ const CommentReply = () => {
   // 渲染评论/回复项
   const renderCommentItem = (item: CommentReplyItem) => {
     const actionText = item.action_type === "comment" ? "评论了你的球局" : "回复了你的评论";
-    
+
     return (
-      <View className="comment-item" key={item.id}>
+      <View
+        className="comment-item"
+        key={item.id}
+        onClick={() => handleCommentClick(item)}
+      >
         <View className="comment-left">
           <Avatar
             className="user-avatar"
             src={item.user_avatar || "https://img.yzcdn.cn/vant/cat.jpeg"}
             size="48px"
+            onClick={(e) => handleUserClick(e, item.user_id)}
           />
-          
+
           <View className="comment-content">
-            <Text className="user-nickname">{item.user_nickname}</Text>
-            
+            <Text
+              className="user-nickname"
+              onClick={(e) => handleUserClick(e, item.user_id)}
+            >
+              {item.user_nickname}
+            </Text>
+
             <View className="action-row">
               <Text className="action-text">{actionText}</Text>
               <Text className="time-text">{formatTime(item.time)}</Text>
             </View>
-            
+
             <Text className="comment-text">{item.content}</Text>
-            
+
             {/* 如果是回复，显示被回复的评论 */}
             {item.action_type === "reply" && item.original_comment && (
               <View className="original-comment">
@@ -178,24 +260,23 @@ const CommentReply = () => {
                 <Text className="original-text">{item.original_comment}</Text>
               </View>
             )}
-            
+
             {/* 回复按钮 */}
-            <View className="reply-button" onClick={() => handleReply(item)}>
-              <Image 
-                className="reply-icon" 
-                src={require('@/static/message/reply-icon.svg')} 
+            <View className="reply-button" onClick={(e) => handleReply(e, item)}>
+              <Image
+                className="reply-icon"
+                src={require('@/static/message/reply-icon.svg')}
               />
               <Text className="reply-text">回复</Text>
             </View>
           </View>
         </View>
-        
+
         {/* 右侧球局图片 */}
-        <Image 
-          className="activity-image" 
-          src={item.activity_image} 
+        <Image
+          className="activity-image"
+          src={item.activity_image}
           mode="aspectFill"
-          onClick={() => handleGameClick(item.activity_id)}
         />
       </View>
     );
@@ -227,7 +308,7 @@ const CommentReply = () => {
         {commentList.length > 0 ? (
           <View className="comment-list">
             {commentList.map(renderCommentItem)}
-            
+
             {/* 到底了提示 */}
             <View className="bottom-tip">
               <Text className="tip-text">到底了</Text>
@@ -237,6 +318,46 @@ const CommentReply = () => {
           <EmptyState text="暂无评论和回复" />
         )}
       </ScrollView>
+
+      {/* 回复输入框 */}
+      {showReplyInput && replyTarget && (
+        <>
+          {/* 遮罩层 */}
+          <View className="reply-mask" onClick={handleCancelReply}></View>
+
+          <View className="reply-input-container">
+            <View className="reply-input-wrapper">
+              <View className="input-row">
+                <Input
+                  className="reply-input"
+                  type="text"
+                  placeholder={`回复 ${replyTarget.user_nickname}`}
+                  value={replyContent}
+                  focus={inputFocus}
+                  adjustPosition={true}
+                  cursorSpacing={30}
+                  holdKeyboard={false}
+                  onInput={(e) => setReplyContent(e.detail.value)}
+                  onBlur={handleInputBlur}
+                  confirmType="send"
+                  onConfirm={handleSendReply}
+                />
+                <View className="input-actions">
+                  <View
+                    className={`send-btn ${replyContent.trim() ? 'active' : ''}`}
+                    onClick={handleSendReply}
+                  >
+                    <Image
+                      className="send-icon"
+                      src={require('@/static/message/send-icon.svg')}
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </>
+      )}
     </View>
   );
 };