From d92ead2d480779d3226e898c5827271795e21562 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 03 六月 2025 12:55:49 +0800
Subject: [PATCH] 视频发布封面
---
pages/tabbar/index/home.vue | 91 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 75 insertions(+), 16 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 66dbb7d..d6a2f29 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -8,7 +8,7 @@
:current="currentIndex"
@change="onSwiperChange"
>
- <swiper-item v-for="(item, index) in videoList" :key="item.id">
+ <swiper-item v-for="(item, index) in videoList" :key="item.id + index">
<!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
<view
class="play-icon"
@@ -66,14 +66,14 @@
</view>
<view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
<text class="video-title">{{item.title}}</text>
- <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag">#{{tag.tagName}}</text>
+ <text class="video-tag" v-for="(tag, index) in item.tagList" :key="item.id + tag.id">#{{tag.tagName}}</text>
</view>
</view>
<!-- 鍙充晶浜掑姩鎸夐挳 -->
<view class="action-buttons">
<view class="avatar-container">
- <image class="avatar" :src="item.authorAvatar" mode="aspectFill"></image>
+ <image class="avatar" @click="() => jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
<!-- 鍏虫敞鍥炬爣 - 浣跨敤缁濆瀹氫綅 -->
<view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)">
<text class="iconfont"></text>
@@ -114,7 +114,7 @@
鏆傛棤璇勮锛屽揩鏉ュ彂琛ㄧ涓�鏉¤瘎璁哄惂~
</view>
- <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
+ <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id + index">
<view style="display: flex;">
<image class="comment-avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image>
<view class="comment-content">
@@ -123,15 +123,17 @@
<view style="position: relative;">
<text class="time">{{formatTime(comment.createTime)}}</text>
<text @click="openReply(comment)" class="reply-btu time">鍥炲</text>
- <text class="thumbs-up time iconfont"></text>
+ <text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(comment.id, index, null)"><text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
+ <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(comment.id, index, null)"><text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
</view>
</view>
</view>
<!-- 鍥炲鍒楄〃 -->
<view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
- <view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
+ <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.id + index">
<view class="reply-content">
<view style="display: flex;">
+ <image class="comment-reply-avatar" :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image>
<text class="nickname">{{reply.userNickname}}</text>
<text v-if="reply.replyUserId && reply.masterCommentId !== reply.replyId" class="reply-to"><text style="margin-right: 10rpx;font-size: 28rpx;" class="iconfont"></text>{{reply.replyUserNickname}}</text>
</view>
@@ -139,20 +141,21 @@
<view class="reply-footer">
<text class="time">{{formatTime(reply.createTime)}}</text>
<text @click="openReply(comment, reply)" class="reply-btu time">鍥炲</text>
- <text class="thumbs-up time iconfont"> </text>
+ <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(reply.id, index, replyIndex)"><text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
+ <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(reply.id, index, replyIndex)"><text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
</view>
</view>
</view>
</view>
<view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply" @click="loadRepliesPage(comment, index)">
- 灞曞紑{{comment.replyTotalCount}}鏉″洖澶� 鈫�
+ <text class="line">鈥斺��</text>灞曞紑{{comment.replyTotalCount}}鏉″洖澶� 鈫�
</view>
<view class="reply-op" v-if="comment.replyTotalCount > replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
- <view @click="loadNextPageReply(index)" class="reply-op-item">灞曞紑鏇村<text class="iconfont textSideIcon"></text></view>
+ <view @click="loadNextPageReply(index)" class="reply-op-item"><text class="line">鈥斺��</text>灞曞紑鏇村<text class="iconfont textSideIcon"></text></view>
<view @click="retractReplyComment(index)" class="reply-op-item" style="margin-left: 50rpx;">鏀惰捣<text class="iconfont textSideIcon"></text></view>
</view>
<view class="reply-op" v-else-if="comment.replyTotalCount <= replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
- <view @click="retractReplyComment(index)" class="reply-op-item">鏀惰捣<text class="iconfont textSideIcon"></text></view>
+ <view @click="retractReplyComment(index)" class="reply-op-item"><text class="line">鈥斺��</text>鏀惰捣<text class="iconfont textSideIcon"></text></view>
</view>
</view>
</scroll-view>
@@ -175,7 +178,7 @@
</template>
<script>
-import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment } from "@/api/video.js";
+import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
export default {
data() {
@@ -200,7 +203,8 @@
replyId: '',
replyUserId: '',
replyUserNickname: '',
- masterCommentId: ''
+ replyUserAvatar: '',
+ masterCommentId: null
},
comments: [], // 璇勮鍒楄〃
commentsTotal: 0, // 璇勮鎬绘潯鏁�
@@ -247,6 +251,44 @@
this.initVideoContexts();
},
methods: {
+ // 璺宠浆涓汉涓婚〉
+ jumpToHomePage(authorId) {
+ uni.navigateTo({
+ url: "/pages/video/home-page?authorId=" + authorId
+ })
+ },
+ // 鍙栨秷鐐硅禐
+ async cancelThumbsUp(id, commentIndex, replyIndex) {
+ const data = {
+ refId: id,
+ thumbsUpType: 'video_comment'
+ }
+ cancelThubmsUpComment(data).then(res => {
+ if(replyIndex != null) {
+ this.comments[commentIndex].replies[replyIndex].hasThumbsUp = false;
+ this.comments[commentIndex].replies[replyIndex].thumbsUpNum -= 1;
+ } else {
+ this.comments[commentIndex].hasThumbsUp = false;
+ this.comments[commentIndex].thumbsUpNum -= 1;
+ }
+ })
+ },
+ // 璇勮鐐硅禐
+ async thubmsUp(id, commentIndex, replyIndex) {
+ const data = {
+ refId: id,
+ thumbsUpType: 'video_comment'
+ }
+ thubmsUpComment(data).then(res => {
+ if(replyIndex != null) {
+ this.comments[commentIndex].replies[replyIndex].hasThumbsUp = true;
+ this.comments[commentIndex].replies[replyIndex].thumbsUpNum += 1;
+ } else {
+ this.comments[commentIndex].hasThumbsUp = true;
+ this.comments[commentIndex].thumbsUpNum += 1;
+ }
+ })
+ },
// 鍔犺浇涓嬩竴椤靛洖澶�
loadNextPageReply(index) {
this.replyCommentQuery.pageNumber++;
@@ -277,12 +319,13 @@
const videoId = this.commentForm.videoId;
this.commentForm = { // 璇勮琛ㄥ崟鏁版嵁
id: '',
- videoId: videoId,
+ videoId: '',
commentContent: '',
replyId: '',
replyUserId: '',
replyUserNickname: '',
- masterCommentId: ''
+ replyUserAvatar: '',
+ masterCommentId: null
}
},
// 鍙栨秷鍥炲
@@ -298,6 +341,7 @@
this.commentForm.replyId = comment.id;
this.commentForm.replyUserId = comment.userId;
this.commentForm.replyUserNickname = comment.userNickname;
+ this.commentForm.replyUserAvatar = comment.userAvatar;
// 鑷姩鑱氱劍杈撳叆妗�
this.$nextTick(() => {
const input = this.$refs.commentInput;
@@ -804,7 +848,7 @@
.comment-item {
display: flex;
flex-direction: column;
- padding: 10rpx 0;
+ padding: 10rpx 0 20rpx 0;
}
.comment-avatar {
@@ -812,6 +856,12 @@
height: 70rpx;
border-radius: 50%;
margin-right: 10rpx;
+ }
+ .comment-reply-avatar {
+ width: 40rpx;
+ height: 40rpx;
+ border-radius: 50%;
+ margin-right: 10rpx;
}
.comment-content {
@@ -887,6 +937,7 @@
.reply-op-item {
display: flex;
align-items: center;
+ height: 40rpx;
}
.reply-item {
@@ -935,11 +986,19 @@
}
.thumbs-up {
position: absolute;
- right: 80rpx;
+ right: 20rpx;
font-size: 32rpx;
+ width: 120rpx;
}
.textSideIcon {
font-size: 36rpx;
margin-left: 5rpx;
}
+ .line {
+ margin-right: 10rpx;
+ color: #cccccc;
+ }
+ .thumbs-num {
+ margin-left: 4rpx;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0