bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-10-01 14:01:21 +08:00
parent 606aaf03d7
commit ccdc220638
3 changed files with 240 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/other_pages/comment_reply/index.scss
View File

@@ -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%;
}
}
}
}
}
}
}

185
src/other_pages/comment_reply/index.tsx
View File

@@ -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>
);
};

6
src/static/message/send-icon.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 496 B