Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c2565d07 1 parent 7716279b

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

- 重构评论列表布局，增加评论数量显示和查看更多按钮
- 为评论添加点赞功能，支持切换点赞状态并更新点赞数
- 优化底部操作栏样式，调整输入框为多行文本区域
Inline Side-by-side
Showing 1 changed file with 92 additions and 15 deletions
......@@ -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 items-center mb-2">
<img :src="comment.avatar" class="w-8 h-8 rounded-full mr-2" />
<div>
<div class="font-medium">{{ comment.username }}</div>
<div class="text-gray-500 text-xs">{{ comment.time }}</div>
<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>
<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 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-grow">
<van-field v-model="newComment" placeholder="说点什么吧~" class="bg-gray-100 rounded-full" />
<div class="flex-none flex flex-col items-center gap-1 cursor-pointer active:opacity-80" @click="showCatalog = true">
<van-icon name="bars" class="text-lg text-gray-600" />
<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>
......