Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4b6f0198 1 parent 22215166

feat(评论): 添加评论弹窗功能以显示全部评论 

在评论区域添加了“查看更多”按钮，点击后弹出弹窗显示全部评论。弹窗包含可滚动的评论列表和底部输入框，用户可以在弹窗中提交新的评论。优化了评论展示逻辑，默认只显示前三条评论。
Inline Side-by-side
Showing 1 changed file with 76 additions and 10 deletions
......@@ -53,16 +53,13 @@
<div id="comment" class="py-4 px-4 space-y-4" :style="{ paddingBottom: bottomWrapperHeight }">
<div class="flex justify-between items-center mb-4">
<div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div>
<div class="text-gray-500 cursor-pointer text-sm">查看更多</div>
<div class="text-gray-500 cursor-pointer text-sm" @click="showCommentPopup = true">查看更多</div>
</div>
<div v-for="comment in comments" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4">
<!-- 显示前三条评论 -->
<div v-for="comment in comments.slice(0, 3)" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4">
<div class="flex">
<!-- 左侧头像 -->
<img :src="comment.avatar" class="w-10 h-10 rounded-full flex-shrink-0" style="margin-right: 0.5rem;" />
<!-- 右侧内容 -->
<div class="flex-1 ml-3">
<!-- 第一行：用户名和点赞 -->
<div class="flex justify-between items-center mb-1">
<span class="font-medium text-gray-900">{{ comment.username }}</span>
<div class="flex items-center space-x-1">
......@@ -75,15 +72,65 @@
/>
</div>
</div>
<!-- 第二行：评论内容 -->
<p class="text-gray-700 text-sm mb-1">{{ comment.content }}</p>
<!-- 第三行：时间 -->
<div class="text-gray-400 text-xs">{{ comment.time }}</div>
</div>
</div>
</div>
<van-popup v-model:show="showCommentPopup" position="bottom" round closeable safe-area-inset-bottom style="height: 80%">
<div class="flex flex-col h-full">
<!-- 固定头部 -->
<div class="flex-none px-4 py-3 border-b bg-white sticky top-0 z-10">
<div class="text-lg font-medium">全部评论 ({{ comments.length }})</div>
</div>
<!-- 可滚动的评论列表 -->
<div class="flex-1 overflow-y-auto">
<div class="px-4 py-2 pb-16">
<div v-for="comment in comments" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4">
<div class="flex">
<img :src="comment.avatar" class="w-10 h-10 rounded-full flex-shrink-0" style="margin-right: 0.5rem;" />
<div class="flex-1 ml-3">
<div class="flex justify-between items-center mb-1">
<span class="font-medium text-gray-900">{{ comment.username }}</span>
<div class="flex items-center space-x-1">
<span class="text-sm text-gray-500">{{ comment.likes }}</span> &nbsp;
<van-icon
:name="comment.isLiked ? 'like' : 'like-o'"
:class="{'text-red-500': comment.isLiked, 'text-gray-400': !comment.isLiked}"
@click="toggleLike(comment)"
class="text-lg cursor-pointer"
/>
</div>
</div>
<p class="text-gray-700 text-sm mb-1">{{ comment.content }}</p>
<div class="text-gray-400 text-xs">{{ comment.time }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 固定底部输入框 -->
<div class="flex-none border-t px-4 py-2 bg-white sticky bottom-0 z-10">
<div class="flex items-center space-x-2">
<van-field
v-model="popupComment"
rows="1"
autosize
type="textarea"
placeholder="请输入评论"
class="flex-1 bg-gray-100 rounded-lg"
/>
<van-button
type="primary"
size="small"
@click="submitPopupComment"
>发送</van-button>
</div>
</div>
</div>
</van-popup>
</div>
</div>
......@@ -119,6 +166,8 @@ const newComment = ref('');
const showCatalog = ref(false);
const isPlaying = ref(false);
const videoPlayerRef = ref(null);
const showCommentPopup = ref(false);
const popupComment = ref('');
// 开始播放视频
const startPlay = async () => {
......@@ -293,6 +342,23 @@ onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
// 提交弹窗中的评论
const submitPopupComment = () => {
if (!popupComment.value.trim()) return;
comments.value.unshift({
id: Date.now(),
username: '当前用户',
avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
content: popupComment.value,
time: new Date().toLocaleString(),
likes: 0,
isLiked: false
});
popupComment.value = '';
showCommentPopup.value = false;
};
</script>
<style lang="less" scoped>
......