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 @@ ...@@ -53,16 +53,13 @@
53 <div id="comment" class="py-4 px-4 space-y-4" :style="{ paddingBottom: bottomWrapperHeight }"> 53 <div id="comment" class="py-4 px-4 space-y-4" :style="{ paddingBottom: bottomWrapperHeight }">
54 <div class="flex justify-between items-center mb-4"> 54 <div class="flex justify-between items-center mb-4">
55 <div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div> 55 <div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div>
56 - <div class="text-gray-500 cursor-pointer text-sm">查看更多</div> 56 + <div class="text-gray-500 cursor-pointer text-sm" @click="showCommentPopup = true">查看更多</div>
57 </div> 57 </div>
58 - <div v-for="comment in comments" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4"> 58 + <!-- 显示前三条评论 -->
59 + <div v-for="comment in comments.slice(0, 3)" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4">
59 <div class="flex"> 60 <div class="flex">
60 - <!-- 左侧头像 -->
61 <img :src="comment.avatar" class="w-10 h-10 rounded-full flex-shrink-0" style="margin-right: 0.5rem;" /> 61 <img :src="comment.avatar" class="w-10 h-10 rounded-full flex-shrink-0" style="margin-right: 0.5rem;" />
62 -
63 - <!-- 右侧内容 -->
64 <div class="flex-1 ml-3"> 62 <div class="flex-1 ml-3">
65 - <!-- 第一行：用户名和点赞 -->
66 <div class="flex justify-between items-center mb-1"> 63 <div class="flex justify-between items-center mb-1">
67 <span class="font-medium text-gray-900">{{ comment.username }}</span> 64 <span class="font-medium text-gray-900">{{ comment.username }}</span>
68 <div class="flex items-center space-x-1"> 65 <div class="flex items-center space-x-1">
...@@ -75,15 +72,65 @@ ...@@ -75,15 +72,65 @@
75 /> 72 />
76 </div> 73 </div>
77 </div> 74 </div>
78 -
79 - <!-- 第二行：评论内容 -->
80 <p class="text-gray-700 text-sm mb-1">{{ comment.content }}</p> 75 <p class="text-gray-700 text-sm mb-1">{{ comment.content }}</p>
81 -
82 - <!-- 第三行：时间 -->
83 <div class="text-gray-400 text-xs">{{ comment.time }}</div> 76 <div class="text-gray-400 text-xs">{{ comment.time }}</div>
84 </div> 77 </div>
85 </div> 78 </div>
86 </div> 79 </div>
80 + <van-popup v-model:show="showCommentPopup" position="bottom" round closeable safe-area-inset-bottom style="height: 80%">
81 + <div class="flex flex-col h-full">
82 + <!-- 固定头部 -->
83 + <div class="flex-none px-4 py-3 border-b bg-white sticky top-0 z-10">
84 + <div class="text-lg font-medium">全部评论 ({{ comments.length }})</div>
85 + </div>
86 +
87 + <!-- 可滚动的评论列表 -->
88 + <div class="flex-1 overflow-y-auto">
89 + <div class="px-4 py-2 pb-16">
90 + <div v-for="comment in comments" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4">
91 + <div class="flex">
92 + <img :src="comment.avatar" class="w-10 h-10 rounded-full flex-shrink-0" style="margin-right: 0.5rem;" />
93 + <div class="flex-1 ml-3">
94 + <div class="flex justify-between items-center mb-1">
95 + <span class="font-medium text-gray-900">{{ comment.username }}</span>
96 + <div class="flex items-center space-x-1">
97 + <span class="text-sm text-gray-500">{{ comment.likes }}</span> &nbsp;
98 + <van-icon
99 + :name="comment.isLiked ? 'like' : 'like-o'"
100 + :class="{'text-red-500': comment.isLiked, 'text-gray-400': !comment.isLiked}"
101 + @click="toggleLike(comment)"
102 + class="text-lg cursor-pointer"
103 + />
104 + </div>
105 + </div>
106 + <p class="text-gray-700 text-sm mb-1">{{ comment.content }}</p>
107 + <div class="text-gray-400 text-xs">{{ comment.time }}</div>
108 + </div>
109 + </div>
110 + </div>
111 + </div>
112 + </div>
113 +
114 + <!-- 固定底部输入框 -->
115 + <div class="flex-none border-t px-4 py-2 bg-white sticky bottom-0 z-10">
116 + <div class="flex items-center space-x-2">
117 + <van-field
118 + v-model="popupComment"
119 + rows="1"
120 + autosize
121 + type="textarea"
122 + placeholder="请输入评论"
123 + class="flex-1 bg-gray-100 rounded-lg"
124 + />
125 + <van-button
126 + type="primary"
127 + size="small"
128 + @click="submitPopupComment"
129 + >发送</van-button>
130 + </div>
131 + </div>
132 + </div>
133 + </van-popup>
87 </div> 134 </div>
88 </div> 135 </div>
89 136
...@@ -119,6 +166,8 @@ const newComment = ref(''); ...@@ -119,6 +166,8 @@ const newComment = ref('');
119 const showCatalog = ref(false); 166 const showCatalog = ref(false);
120 const isPlaying = ref(false); 167 const isPlaying = ref(false);
121 const videoPlayerRef = ref(null); 168 const videoPlayerRef = ref(null);
169 +const showCommentPopup = ref(false);
170 +const popupComment = ref('');
122 171
123 // 开始播放视频 172 // 开始播放视频
124 const startPlay = async () => { 173 const startPlay = async () => {
...@@ -293,6 +342,23 @@ onUnmounted(() => { ...@@ -293,6 +342,23 @@ onUnmounted(() => {
293 window.removeEventListener('scroll', handleScroll); 342 window.removeEventListener('scroll', handleScroll);
294 }); 343 });
295 344
345 +// 提交弹窗中的评论
346 +const submitPopupComment = () => {
347 + if (!popupComment.value.trim()) return;
348 +
349 + comments.value.unshift({
350 + id: Date.now(),
351 + username: '当前用户',
352 + avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
353 + content: popupComment.value,
354 + time: new Date().toLocaleString(),
355 + likes: 0,
356 + isLiked: false
357 + });
358 +
359 + popupComment.value = '';
360 + showCommentPopup.value = false;
361 +};
296 </script> 362 </script>
297 363
298 <style lang="less" scoped> 364 <style lang="less" scoped>
......