|
|
@@ -72,12 +72,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 观看次数 -->
|
|
|
+ <!-- 底部信息 -->
|
|
|
<div class="content-footer">
|
|
|
- <el-icon :size="14" color="#666">
|
|
|
- <Star />
|
|
|
- </el-icon>
|
|
|
- <span class="view-count">{{ item.dianzanCount }}</span>
|
|
|
+ <div class="footer-left">
|
|
|
+ <el-icon :size="14" color="#666">
|
|
|
+ <View />
|
|
|
+ </el-icon>
|
|
|
+ <span class="view-count">{{ item.viewCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="footer-right">
|
|
|
+ <i class="iconfont icon-dianzanb" :style="{ fontSize: '14px', color: item.isLike == '1' ? '#f56c6c' : '#666' }" />
|
|
|
+ <span class="like-count">{{ item.dianzanCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -207,10 +213,10 @@
|
|
|
<!-- 点赞 -->
|
|
|
<div class="action-item" @click="handleDetailLike">
|
|
|
<div class="action-icon">
|
|
|
- <el-icon :size="28" :color="currentDetail.isLiked ? '#f56c6c' : '#fff'">
|
|
|
- <StarFilled v-if="currentDetail.isLiked" />
|
|
|
- <Star v-else />
|
|
|
- </el-icon>
|
|
|
+ <i
|
|
|
+ class="iconfont icon-dianzanb"
|
|
|
+ :style="{ fontSize: '28px', color: currentDetail.isLiked ? '#f56c6c' : '#fff' }"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="action-count">
|
|
|
{{ currentDetail.likeCount }}
|
|
|
@@ -299,9 +305,7 @@
|
|
|
|
|
|
<div class="comment-actions">
|
|
|
<span class="comment-action-item" @click="handleLikeComment(comment)">
|
|
|
- <el-icon :size="16" :color="comment.isLiked ? '#f56c6c' : '#999'">
|
|
|
- <Star />
|
|
|
- </el-icon>
|
|
|
+ <i class="iconfont icon-dianzanb" :style="{ fontSize: '16px', color: comment.isLiked ? '#f56c6c' : '#999' }" />
|
|
|
<span>{{ comment.likeCount || 0 }}</span>
|
|
|
</span>
|
|
|
<span class="comment-action-item" @click="handleReplyComment(comment)">
|
|
|
@@ -327,10 +331,15 @@
|
|
|
</div>
|
|
|
<div class="store-comment-text">
|
|
|
{{ item.commentContent }}
|
|
|
- <span class="comment-action-item" @click="handleLikeComment(item)" style="display: flex">
|
|
|
- <el-icon :size="16" :color="item.isLiked ? '#f56c6c' : '#999'">
|
|
|
- <Star /> </el-icon
|
|
|
- >
|
|
|
+ <span
|
|
|
+ class="comment-action-item"
|
|
|
+ @click="handleLikeComment(item)"
|
|
|
+ style="display: flex; align-items: center"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="iconfont icon-dianzanb"
|
|
|
+ :style="{ fontSize: '16px', color: item.isLiked ? '#f56c6c' : '#999' }"
|
|
|
+ />
|
|
|
<span>{{ item.likeCount || 0 }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -504,8 +513,6 @@ import {
|
|
|
Picture,
|
|
|
View,
|
|
|
Close,
|
|
|
- Star,
|
|
|
- StarFilled,
|
|
|
Share,
|
|
|
MoreFilled,
|
|
|
Plus,
|
|
|
@@ -552,6 +559,7 @@ interface ContentItem {
|
|
|
viewCount: number;
|
|
|
likeCount: number;
|
|
|
isLiked: boolean;
|
|
|
+ isLike?: string; // "0" 或 "1"
|
|
|
createTime: string;
|
|
|
commentCount?: number;
|
|
|
mediaList?: MediaItem[];
|
|
|
@@ -803,9 +811,15 @@ const loadCommentList = async () => {
|
|
|
const res: any = await commentList(params);
|
|
|
if (res.code === 200) {
|
|
|
commentListData.value = res.data.records || [];
|
|
|
- // 更新评论总数
|
|
|
+ // 更新评论总数(包括回复数)
|
|
|
if (currentDetail.value) {
|
|
|
- currentDetail.value.commentCount = res.data.total || 0;
|
|
|
+ const baseCommentCount = res.data.total || 0;
|
|
|
+ // 计算所有回复的总数
|
|
|
+ const replyCount = commentListData.value.reduce((total, comment) => {
|
|
|
+ return total + (comment.storeComment?.length || 0);
|
|
|
+ }, 0);
|
|
|
+ // 评论总数 = 评论数 + 回复数
|
|
|
+ currentDetail.value.commentCount = baseCommentCount + replyCount;
|
|
|
}
|
|
|
console.log("评论列表:", commentListData.value);
|
|
|
console.log("评论总数:", res.data.total);
|
|
|
@@ -1511,10 +1525,23 @@ onMounted(() => {
|
|
|
// 底部信息
|
|
|
.content-footer {
|
|
|
display: flex;
|
|
|
- gap: 4px;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
padding: 0 4px;
|
|
|
- .view-count {
|
|
|
+ .footer-left {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+ .footer-right {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+ .view-count,
|
|
|
+ .like-count {
|
|
|
font-size: 13px;
|
|
|
color: #666666;
|
|
|
}
|
|
|
@@ -2144,3 +2171,7 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+@import "@/assets/dianzanFont/iconfont.css";
|
|
|
+</style>
|