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

Merge branch 'light_v3'

Browse Source
This commit is contained in:
张成
2025-10-01 14:31:56 +08:00
parent 4e681ec13a ffc8995fc8
commit 105c3e3a6a
6 changed files with 334 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,44 +12,43 @@
.navbar {
height: 100px;
background: #FFFFFF;
position: sticky;
top: 0;
flex-shrink: 0;
z-index: 100;
.navbar-content {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
margin-top: 44px;
position: relative;
gap: 12px;
.back-button {
position: absolute;
left: 10px;
width: 32px;
height: 32px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
.back-icon {
width: 8px;
height: 16px;
width: 10px;
height: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-left: 2.67px solid #000000;
border-bottom: 2.67px solid #000000;
transform: rotate(45deg);
width: 10px;
height: 10px;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
transform: rotate(45deg) translateY(-1px);
}
}
}
@@ -61,6 +60,7 @@
line-height: 1.4;
letter-spacing: 0.019em;
color: #000000;
flex: 1;
}
}
}
@@ -68,8 +68,10 @@
// 评论列表滚动区域
.comment-scroll {
flex: 1;
height: 100%;
height: 0;
padding: 0 15px;
box-sizing: border-box;
overflow-y: auto;
}
// 评论列表
@@ -84,6 +86,7 @@
gap: 12px;
padding: 16px 0;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
box-sizing: border-box;
.comment-left {
display: flex;
@@ -96,6 +99,11 @@
height: 48px;
border-radius: 999px;
flex-shrink: 0;
cursor: pointer;
&:active {
opacity: 0.8;
}
}
.comment-content {
@@ -111,6 +119,12 @@
font-size: 14px;
line-height: 1.43;
color: #000000;
cursor: pointer;
width: fit-content;
&:active {
opacity: 0.6;
}
}
.action-row {
@@ -225,4 +239,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%;
}
}
}
}
}
}
}

213
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"; // 评论了你的球局 / 回复了你的评论
@@ -18,12 +19,18 @@ interface CommentReplyItem {
activity_image: string;
activity_id: number;
activity_title: string;
parent_id: number | null; // 父评论ID，用于回复
game_id: number; // 球局ID
}
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,29 +39,32 @@ 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,
time: item.create_time,
content: item.content || "",
original_comment: item.parent_comment?.content || "",
activity_image: item.game?.image_list?.[0] || "",
activity_image: item.game?.image || "",
activity_id: item.game_id,
activity_title: item.game?.title || "",
parent_id: item.parent_id,
game_id: item.game_id,
}));
setCommentList(mappedList);
}
} catch (e) {
@@ -71,14 +81,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 +105,95 @@ 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 {
// 调用回复接口
// 如果是回复评论，parent_id 使用评论的 parent_id 或 id
// 如果是顶级评论，parent_id 为 null，则使用评论的 id 作为 parent_id
const parentId = replyTarget.parent_id || replyTarget.id;
const res = await commentService.replyComment(
parentId,
replyTarget.user_id,
replyContent.trim()
);
if (res.code === 0) {
Taro.showToast({
title: "回复成功",
icon: "success",
duration: 2000,
});
// 关闭输入框
setShowReplyInput(false);
setReplyTarget(null);
setReplyContent("");
setInputFocus(false);
// 刷新列表
getCommentReplyList();
} else {
throw new Error(res.message || "回复失败");
}
} catch (e: any) {
Taro.showToast({
title: e.message || "回复失败",
icon: "none",
duration: 2000,
});
}
};
// 取消回复
const handleCancelReply = () => {
setShowReplyInput(false);
setReplyTarget(null);
setReplyContent("");
setInputFocus(false);
};
// 输入框失去焦点
const handleInputBlur = () => {
// 延迟执行，避免点击发送按钮时输入框先失焦导致发送失败
setTimeout(() => {
handleCancelReply();
}, 200);
};
// 处理返回
const handleBack = () => {
Taro.navigateBack();
@@ -120,21 +207,24 @@ 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,
time: item.create_time,
content: item.content || "",
original_comment: item.parent_comment?.content || "",
activity_image: item.game?.image_list?.[0] || "",
activity_image: item.game?.image || "",
activity_id: item.game_id,
activity_title: item.game?.title || "",
parent_id: item.parent_id,
game_id: item.game_id,
}));
setCommentList(mappedList);
}
} catch (e) {
@@ -151,26 +241,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 +278,29 @@ 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)}
onClick={(e) => {
e.stopPropagation();
Taro.navigateTo({
url: `/game_pages/detail/index?id=${item.game_id}`,
});
}}
/>
</View>
);
@@ -227,7 +332,7 @@ const CommentReply = () => {
{commentList.length > 0 ? (
<View className="comment-list">
{commentList.map(renderCommentItem)}
{/* 到底了提示 */}
<View className="bottom-tip">
<Text className="tip-text">到底了</Text>
@@ -237,6 +342,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>
);
};

40
src/other_pages/message/index.tsx
View File

@@ -19,6 +19,7 @@ interface MessageItem {
related_user_avatar?: string;
related_user_nickname?: string;
activity_image?: string;
jump_url?: string;
}
// 消息分类类型
@@ -68,7 +69,7 @@ const Message = () => {
});
return;
}
// 点击关注标签跳转到新增关注页面
if (tab === "follow") {
Taro.navigateTo({
@@ -76,14 +77,27 @@ const Message = () => {
});
return;
}
setActiveTab(activeTab === tab ? null : tab);
};
// 处理查看详情
const handleViewDetail = (messageId: string) => {
console.log("查看详情:", messageId);
// TODO: 根据消息类型跳转到对应详情页
const handleViewDetail = (message: MessageItem) => {
if (!message.jump_url) {
console.log("暂无跳转链接");
return;
}
Taro.navigateTo({
url: message.jump_url,
}).catch(() => {
Taro.showToast({
title: "页面不存在",
icon: "none",
duration: 2000,
});
});
};
// 处理滚动到底部
@@ -152,7 +166,7 @@ const Message = () => {
<View className="navbar-left">
<Avatar
className="navbar-avatar"
src={userInfo?.avatar_url }
src={userInfo?.avatar_url}
size="28px"
/>
<Text className="navbar-title">消息</Text>
@@ -166,9 +180,9 @@ const Message = () => {
className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
onClick={() => handleTabClick("comment")}
>
<Image
className="tab-icon"
src={require('@/static/message/comment-icon.svg')}
<Image
className="tab-icon"
src={require('@/static/message/comment-icon.svg')}
/>
<Text className="tab-text">评论和回复</Text>
</View>
@@ -176,9 +190,9 @@ const Message = () => {
className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
onClick={() => handleTabClick("follow")}
>
<Image
className="tab-icon"
src={require('@/static/message/follow-icon.svg')}
<Image
className="tab-icon"
src={require('@/static/message/follow-icon.svg')}
/>
<Text className="tab-text">新增关注</Text>
</View>
@@ -212,7 +226,7 @@ const Message = () => {
</View>
<View className="card-footer">
<View className="footer-divider"></View>
<View className="footer-action" onClick={() => handleViewDetail(message.id)}>
<View className="footer-action" onClick={() => handleViewDetail(message)}>
<Text className="action-text">查看详情</Text>
<View className="action-arrow">

37
src/other_pages/new_follow/index.scss
View File

@@ -12,44 +12,43 @@
.navbar {
height: 100px;
background: #FFFFFF;
position: sticky;
top: 0;
flex-shrink: 0;
z-index: 100;
.navbar-content {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
margin-top: 44px;
position: relative;
gap: 12px;
.back-button {
position: absolute;
left: 10px;
width: 32px;
height: 32px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
.back-icon {
width: 8px;
height: 16px;
width: 10px;
height: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-left: 2.67px solid #000000;
border-bottom: 2.67px solid #000000;
transform: rotate(45deg);
width: 10px;
height: 10px;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
transform: rotate(45deg) translateY(-1px);
}
}
}
@@ -61,6 +60,7 @@
line-height: 1.4;
letter-spacing: 0.019em;
color: #000000;
flex: 1;
}
}
}
@@ -68,7 +68,8 @@
// 关注列表滚动区域
.follow-scroll {
flex: 1;
height: 100%;
height: 0;
overflow-y: auto;
}
// 关注列表

1
src/services/commentService.ts
View File

@@ -23,6 +23,7 @@ export interface CommentActivity {
title: string;
start_time: string;
location_name: string;
image?: string;
image_list?: string[];
};
reply_to_user: {

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