1

src/other_pages/comment_reply/index.scss

@@ -96,6 +96,11 @@
         height: 48px;
         border-radius: 999px;
         flex-shrink: 0;
+        cursor: pointer;
+
+        &:active {
+          opacity: 0.8;
+        }
       }
 
       .comment-content {
@@ -111,6 +116,12 @@
           font-size: 14px;
           line-height: 1.43;
           color: #000000;
+          cursor: pointer;
+          width: fit-content;
+
+          &:active {
+            opacity: 0.6;
+          }
         }
 
         .action-row {
@@ -225,4 +236,73 @@
       color: rgba(0, 0, 0, 0.35);
     }
   }
-}
+
+  // 回复输入框
+  .reply-input-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #F8F8F8;
+    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+    padding: 8px 12px;
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+    z-index: 200;
+
+    .reply-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      background: #FFFFFF;
+      border-radius: 20px;
+
+      .input-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+
+        height: 36px;
+        padding-left: 16px;
+        margin: 12px 0px;
+
+
+        .reply-input {
+          flex: 1;
+          border: none;
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 1.4;
+          color: #000000;
+
+          &::placeholder {
+            color: rgba(60, 60, 67, 0.3);
+            font-size: 15px;
+          }
+        }
+
+        .input-actions {
+          display: flex;
+          align-items: center;
+
+          .send-btn {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            flex-shrink: 0;
+
+            .send-icon {
+              width: 100%;
+              height: 100%;
+            }
+
+          }
+        }
+      }
+    }
+  }
+}

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) => {
+  const handleReply = (e: any, item: CommentReplyItem) => {
-    console.log("回复:", item);
+    e.stopPropagation(); // 阻止事件冒泡
-    // TODO: 跳转到回复页面或弹出回复框
+    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)}>
+            <View className="reply-button" onClick={(e) => handleReply(e, item)}>
-              <Image 
+              <Image
-                className="reply-icon" 
+                className="reply-icon"
-                src={require('@/static/message/reply-icon.svg')} 
+                src={require('@/static/message/reply-icon.svg')}
               />
               <Text className="reply-text">回复</Text>
             </View>
           </View>
         </View>
-        
+
         {/* 右侧球局图片 */}
-        <Image 
+        <Image
-          className="activity-image" 
+          className="activity-image"
-          src={item.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>
   );
 };

src/static/message/send-icon.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="black"/>
+<rect x="0.25" y="0.25" width="35.5" height="35.5" rx="17.75" stroke="black" stroke-opacity="0.06" stroke-width="0.5"/>
+<path d="M18.0042 12.0503V24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18L18 12L24 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>