feat(评论模块): 优化评论列表样式并添加点赞功能

- 重构评论列表布局，增加评论数量显示和查看更多按钮 - 为评论添加点赞功能，支持切换点赞状态并更新点赞数 - 优化底部操作栏样式，调整输入框为多行文本区域

feat(评论模块): 优化评论列表样式并添加点赞功能
- 重构评论列表布局，增加评论数量显示和查看更多按钮 - 为评论添加点赞功能，支持切换点赞状态并更新点赞数 - 优化底部操作栏样式，调整输入框为多行文本区域
hookehuyr
Commit c2565d071385b22e3334d7e1b8663ee3215cab1f c2565d07 1 parent 7716279b
Showing 1 changed file with 92 additions and 15 deletions
src/views/study/StudyDetailPage.vue
--- a/src/views/study/StudyDetailPage.vue
View file @c2565d0
+++ b/src/views/study/StudyDetailPage.vue
View file @c2565d0
@@ -51,24 +51,54 @@
                 <div class="h-2 bg-gray-100"></div>
                 <div id="comment" class="py-4 px-4 space-y-4">
-                    <div v-for="comment in comments" :key="comment.id" class="bg-white rounded-lg p-4 shadow-sm">
+                    <div class="flex justify-between items-center mb-4">
-                        <div class="flex items-center mb-2">
+                        <div class="text-gray-900 font-medium text-sm">评论 ({{ comments.length }})</div>
-                            <img :src="comment.avatar" class="w-8 h-8 rounded-full mr-2" />
+                        <div class="text-gray-500 cursor-pointer text-sm">查看更多</div>
-                            <div>
+                    </div>
-                                <div class="font-medium">{{ comment.username }}</div>
+                    <div v-for="comment in comments" :key="comment.id" class="border-b border-gray-100 last:border-b-0 py-4">
-                                <div class="text-gray-500 text-xs">{{ comment.time }}</div>
+                        <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 class="text-gray-700">{{ comment.content }}</div>
                     </div>
                 </div>
             </div>
             <!-- 底部操作栏 -->
             <div class="fixed bottom-0 left-0 right-0 bg-white border-t px-4 py-2 flex items-center space-x-4">
-                <van-button icon="bars" class="flex-none" @click="showCatalog = true">课程目录</van-button>
+                <div class="flex-none flex flex-col items-center gap-1 cursor-pointer active:opacity-80" @click="showCatalog = true">
-                <div class="flex-grow">
+                    <van-icon name="bars" class="text-lg text-gray-600" />
-                    <van-field v-model="newComment" placeholder="说点什么吧~" class="bg-gray-100 rounded-full" />
+                    <span class="text-xs text-gray-600">课程目录</span>
+                </div>
+                <div class="flex-grow flex-1 min-w-0">
+                    <van-field v-model="newComment" rows="1" autosize type="textarea" placeholder="请输入留言" class="bg-gray-100 rounded-lg !p-0">
+                        <template #input>
+                            <textarea v-model="newComment" rows="1" placeholder="请输入留言" class="w-full h-full bg-transparent outline-none resize-none" />
+                        </template>
+                    </van-field>
                 </div>
                 <van-button type="primary" size="small" @click="submitComment">发送</van-button>
             </div>
@@ -115,21 +145,54 @@ const comments = ref([
         username: '欢乐马',
         avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         content: '教育的顶级传承，是你用什么样的心，传承智慧',
-        time: '2024-12-04 18:51'
+        time: '2024-12-04 18:51',
+        likes: 12,
+        isLiked: false
+    },
+    {
+        id: 2,
+        username: '欢乐马',
+        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        content: '不要用战术上的勤奋，掩盖战略上的懒惰',
+        time: '2024-12-04 08:01',
+        likes: 8,
+        isLiked: true
+    },
+    {
+        id: 3,
+        username: '欢乐马',
+        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        content: '和老师积极互动，整个课堂像为你而讲',
+        time: '2024-12-04 07:54',
+        likes: 5,
+        isLiked: false
+    },
+    {
+        id: 1,
+        username: '欢乐马',
+        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        content: '教育的顶级传承，是你用什么样的心，传承智慧',
+        time: '2024-12-04 18:51',
+        likes: 12,
+        isLiked: false
     },
     {
         id: 2,
         username: '欢乐马',
         avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         content: '不要用战术上的勤奋，掩盖战略上的懒惰',
-        time: '2024-12-04 08:01'
+        time: '2024-12-04 08:01',
+        likes: 8,
+        isLiked: true
     },
     {
         id: 3,
         username: '欢乐马',
         avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         content: '和老师积极互动，整个课堂像为你而讲',
-        time: '2024-12-04 07:54'
+        time: '2024-12-04 07:54',
+        likes: 5,
+        isLiked: false
     }
 ]);
@@ -164,6 +227,12 @@ onMounted(() => {
 })
 // 提交评论
+// 切换点赞状态
+const toggleLike = (comment) => {
+    comment.isLiked = !comment.isLiked;
+    comment.likes += comment.isLiked ? 1 : -1;
+};
+
 const submitComment = () => {
     if (!newComment.value.trim()) return;
@@ -172,7 +241,9 @@ const submitComment = () => {
         username: '当前用户',
         avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         content: newComment.value,
-        time: new Date().toLocaleString()
+        time: new Date().toLocaleString(),
+        likes: 0,
+        isLiked: false
     });
     newComment.value = '';
@@ -182,7 +253,7 @@ const submitComment = () => {
 const handleTabChange = (name) => {
     nextTick(() => {
         const element = document.getElementById(name === 'intro' ? 'intro' : 'comment');
-        if (element && container) {
+        if (element) {
             const topOffset = element.offsetTop - parseInt(topWrapperHeight.value);
             window.scrollTo({
                 top: topOffset,
@@ -194,3 +265,9 @@ const handleTabChange = (name) => {
 </script>
+
+<style lang="less" scoped>
+:deep(.van-cell.van-field) {
+    background-color: rgb(244, 244, 244);
+}
+</style>