feat: repley
This commit is contained in:
zzc
@@ -1,24 +1,60 @@
|
||||
<template>
|
||||
<view class="comment-item">
|
||||
<image class="c-avatar" :src="comment.avatar" mode="aspectFill" />
|
||||
<image class="c-avatar" :src="localComment.avatar" mode="aspectFill" />
|
||||
<view class="c-content-wrap">
|
||||
<view class="c-header">
|
||||
<view class="c-user-info">
|
||||
<text class="c-name">{{ comment.name }}</text>
|
||||
<!-- 用户态度徽章 -->
|
||||
<ActionBadge v-if="comment.userAction" :action="comment.userAction" />
|
||||
<view class="c-badge" v-if="comment.badge">
|
||||
<text class="b-icon">{{ comment.badgeIcon }}</text>
|
||||
<text class="b-text">{{ comment.badge }}</text>
|
||||
<text class="c-name">{{ localComment.name }}</text>
|
||||
<ActionBadge v-if="localComment.userAction" :action="localComment.userAction" />
|
||||
<view class="c-badge" v-if="localComment.badge">
|
||||
<text class="b-icon">{{ localComment.badgeIcon }}</text>
|
||||
<text class="b-text">{{ localComment.badge }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="c-like" @tap="handleLike">
|
||||
<text class="like-icon" :class="{ 'is-liked': isLiked }"></text>
|
||||
<text class="like-count" :class="{ 'liked-text': isLiked }">{{ currentLikes }}</text>
|
||||
<view class="c-like" @tap="handleLike()">
|
||||
<text class="like-icon" :class="{ 'is-liked': localComment.isLiked }"></text>
|
||||
<text class="like-count" :class="{ 'liked-text': localComment.isLiked }">{{ localComment.likes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="c-time">{{ localComment.time }}</text>
|
||||
<text class="c-text">{{ localComment.content }}</text>
|
||||
|
||||
<view class="c-actions">
|
||||
<text class="c-action-btn" @tap="emitReply(localComment)">回复</text>
|
||||
<text v-if="localComment.replyCount" class="c-action-count">{{ localComment.replyCount }} 条回复</text>
|
||||
</view>
|
||||
|
||||
<view v-if="localComment.replies && localComment.replies.length" class="reply-panel">
|
||||
<view
|
||||
v-for="reply in localComment.replies"
|
||||
:key="reply.id"
|
||||
class="reply-item"
|
||||
>
|
||||
<image class="reply-avatar" :src="reply.avatar" mode="aspectFill" />
|
||||
<view class="reply-main">
|
||||
<view class="reply-head">
|
||||
<view class="reply-user-wrap">
|
||||
<text class="reply-name">{{ reply.name }}</text>
|
||||
<ActionBadge v-if="reply.userAction" :action="reply.userAction" />
|
||||
</view>
|
||||
<view class="c-like reply-like" @tap="handleLike(reply)">
|
||||
<text class="like-icon reply-like-icon" :class="{ 'is-liked': reply.isLiked }"></text>
|
||||
<text class="like-count" :class="{ 'liked-text': reply.isLiked }">{{ reply.likes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="reply-time">{{ reply.time }}</text>
|
||||
<text class="reply-text">
|
||||
<text v-if="reply.replyToName" class="reply-at">@{{ reply.replyToName }} </text>{{ reply.content }}
|
||||
</text>
|
||||
|
||||
<view class="reply-footer">
|
||||
<text class="reply-btn" @tap="emitReply(reply)">回复</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="c-time">{{ comment.time }}</text>
|
||||
<text class="c-text">{{ comment.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -37,75 +73,139 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['need-login', 'like-change']);
|
||||
const emit = defineEmits(['need-login', 'like-change', 'reply']);
|
||||
const userStore = useUserStore();
|
||||
const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
|
||||
|
||||
const isLiked = ref(props.comment.isLiked || false);
|
||||
const currentLikes = ref(props.comment.likes || 0);
|
||||
let isLiking = false; // 防抖标志
|
||||
|
||||
watch(() => props.comment.likes, (newVal) => {
|
||||
currentLikes.value = newVal;
|
||||
const buildReplyItem = (reply = {}) => ({
|
||||
...reply,
|
||||
id: reply.id || '',
|
||||
name: reply.name || '匿名用户',
|
||||
avatar: reply.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=fallback',
|
||||
time: reply.time || '刚刚',
|
||||
content: reply.content || '',
|
||||
likes: Number(reply.likes || 0),
|
||||
isLiked: !!reply.isLiked,
|
||||
replyToName: reply.replyToName || '',
|
||||
parentCommentId: reply.parentCommentId || '',
|
||||
replyToCommentId: reply.replyToCommentId || '',
|
||||
userAction: reply.userAction || ''
|
||||
});
|
||||
|
||||
watch(() => props.comment.isLiked, (newVal) => {
|
||||
isLiked.value = newVal || false;
|
||||
const buildCommentState = (comment = {}) => ({
|
||||
...comment,
|
||||
likes: Number(comment.likes || 0),
|
||||
isLiked: !!comment.isLiked,
|
||||
replyCount: Number(comment.replyCount || 0),
|
||||
replies: Array.isArray(comment.replies) ? comment.replies.map(buildReplyItem) : []
|
||||
});
|
||||
|
||||
const handleLike = async () => {
|
||||
const localComment = ref(buildCommentState(props.comment));
|
||||
const likingMap = ref({});
|
||||
|
||||
watch(
|
||||
() => props.comment,
|
||||
(newVal) => {
|
||||
localComment.value = buildCommentState(newVal || {});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const emitReply = (target) => {
|
||||
emit('reply', {
|
||||
rootCommentId: localComment.value.id,
|
||||
parentCommentId: target.id === localComment.value.id ? localComment.value.id : (target.parentCommentId || localComment.value.id),
|
||||
replyToCommentId: target.id,
|
||||
replyToName: target.name,
|
||||
content: target.content
|
||||
});
|
||||
};
|
||||
|
||||
const patchLikeState = (targetId, updater) => {
|
||||
if (targetId === localComment.value.id) {
|
||||
localComment.value = {
|
||||
...localComment.value,
|
||||
...updater(localComment.value)
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
localComment.value = {
|
||||
...localComment.value,
|
||||
replies: localComment.value.replies.map((reply) => {
|
||||
if (reply.id !== targetId) return reply;
|
||||
return {
|
||||
...reply,
|
||||
...updater(reply)
|
||||
};
|
||||
})
|
||||
};
|
||||
};
|
||||
|
||||
const handleLike = async (target = null) => {
|
||||
if (!isLoggedIn.value) {
|
||||
emit('need-login');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLiking) return;
|
||||
isLiking = true;
|
||||
const currentTarget = target || localComment.value;
|
||||
if (!currentTarget?.id || likingMap.value[currentTarget.id]) return;
|
||||
|
||||
// 乐观更新 UI
|
||||
isLiked.value = !isLiked.value;
|
||||
if (isLiked.value) {
|
||||
currentLikes.value += 1;
|
||||
likingMap.value = {
|
||||
...likingMap.value,
|
||||
[currentTarget.id]: true
|
||||
};
|
||||
|
||||
const nextLiked = !currentTarget.isLiked;
|
||||
const nextLikes = nextLiked ? currentTarget.likes + 1 : Math.max(0, currentTarget.likes - 1);
|
||||
|
||||
patchLikeState(currentTarget.id, () => ({
|
||||
isLiked: nextLiked,
|
||||
likes: nextLikes
|
||||
}));
|
||||
|
||||
if (nextLiked) {
|
||||
uni.vibrateShort({ type: 'light' });
|
||||
} else {
|
||||
currentLikes.value -= 1;
|
||||
}
|
||||
|
||||
emit('like-change', {
|
||||
id: props.comment.id,
|
||||
isLiked: isLiked.value,
|
||||
likes: currentLikes.value
|
||||
id: currentTarget.id,
|
||||
parentId: currentTarget.id === localComment.value.id ? '' : localComment.value.id,
|
||||
isReply: currentTarget.id !== localComment.value.id,
|
||||
isLiked: nextLiked,
|
||||
likes: nextLikes
|
||||
});
|
||||
|
||||
try {
|
||||
// 调用点赞接口 (点赞和取消点赞为同一个接口)
|
||||
await topicItemCommentLike({ commentId: props.comment.id });
|
||||
// 记录点赞事件
|
||||
await topicItemCommentLike({ commentId: currentTarget.id });
|
||||
uni.$trackRecord({
|
||||
eventName: 'like_comment',
|
||||
eventType: 'like',
|
||||
elementId: `comment_${props.comment.id}`,
|
||||
elementContent: `评论项_${props.comment.name}`,
|
||||
elementId: `comment_${currentTarget.id}`,
|
||||
elementContent: `评论项_${currentTarget.name}`,
|
||||
customParams: {
|
||||
comment: props.comment.content,
|
||||
comment: currentTarget.content,
|
||||
isReply: currentTarget.id !== localComment.value.id,
|
||||
page: 'rating_detail'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
// 接口调用失败，回滚 UI 状态
|
||||
isLiked.value = !isLiked.value;
|
||||
if (isLiked.value) {
|
||||
currentLikes.value += 1;
|
||||
} else {
|
||||
currentLikes.value -= 1;
|
||||
}
|
||||
patchLikeState(currentTarget.id, () => ({
|
||||
isLiked: currentTarget.isLiked,
|
||||
likes: currentTarget.likes
|
||||
}));
|
||||
emit('like-change', {
|
||||
id: props.comment.id,
|
||||
isLiked: isLiked.value,
|
||||
likes: currentLikes.value
|
||||
id: currentTarget.id,
|
||||
parentId: currentTarget.id === localComment.value.id ? '' : localComment.value.id,
|
||||
isReply: currentTarget.id !== localComment.value.id,
|
||||
isLiked: currentTarget.isLiked,
|
||||
likes: currentTarget.likes
|
||||
});
|
||||
uni.showToast({ title: '操作失败', icon: 'none' });
|
||||
} finally {
|
||||
isLiking = false;
|
||||
const nextMap = { ...likingMap.value };
|
||||
delete nextMap[currentTarget.id];
|
||||
likingMap.value = nextMap;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -225,4 +325,102 @@ const handleLike = async () => {
|
||||
line-height: 1.65;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.c-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.c-action-btn,
|
||||
.reply-btn,
|
||||
.c-action-count {
|
||||
font-size: 22rpx;
|
||||
color: #8b8f98;
|
||||
}
|
||||
|
||||
.c-action-btn,
|
||||
.reply-btn {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reply-panel {
|
||||
margin-top: 20rpx;
|
||||
padding: 18rpx 18rpx 8rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(180deg, #f6f7fb 0%, #f9fafc 100%);
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.reply-avatar {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: #eceff5;
|
||||
}
|
||||
|
||||
.reply-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reply-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.reply-user-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.reply-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.reply-time {
|
||||
display: block;
|
||||
margin: 6rpx 0 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
color: #30343b;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.reply-at {
|
||||
color: #4f46e5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reply-footer {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.reply-like {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reply-like-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user