From 474781abbec22374faf768856f4c04e9a3a868cd Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 29 五月 2025 17:32:10 +0800
Subject: [PATCH] 视频评论的加载显示完成
---
App.vue | 6
pages/tabbar/index/home.vue | 258 +++++++++++++++++++++++++++++++++++++++++++--------
2 files changed, 220 insertions(+), 44 deletions(-)
diff --git a/App.vue b/App.vue
index 7488ba6..fff17be 100644
--- a/App.vue
+++ b/App.vue
@@ -255,9 +255,9 @@
@font-face {
font-family: 'iconfont'; /* Project id 4921691 */
src:
- url('//at.alicdn.com/t/c/font_4921691_1hkd3qibo87.woff2?t=1748343163548') format('woff2'),
- url('//at.alicdn.com/t/c/font_4921691_1hkd3qibo87.woff?t=1748343163548') format('woff'),
- url('//at.alicdn.com/t/c/font_4921691_1hkd3qibo87.ttf?t=1748343163548') format('truetype');
+ url('//at.alicdn.com/t/c/font_4921691_egp12flgzc7.woff2?t=1748508836450') format('woff2'),
+ url('//at.alicdn.com/t/c/font_4921691_egp12flgzc7.woff?t=1748508836450') format('woff'),
+ url('//at.alicdn.com/t/c/font_4921691_egp12flgzc7.ttf?t=1748508836450') format('truetype');
}
.iconfont {
/* font-family闇�瑕佸拰鑷畾涔夌殑鐩稿悓 */
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 4b7f2e1..66dbb7d 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -97,7 +97,11 @@
<uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup">
<view class="comment-popup">
<view class="popup-header">
- <text class="popup-title">璇勮({{commentsTotal}})</text>
+ <text class="popup-title" v-if="!commentForm.replyId">璇勮({{commentsTotal}})</text>
+ <view class="reply-title" v-else>
+ <text>鍥炲 @{{commentForm.replyUserNickname}}</text>
+ <text class="cancel-reply" @click="cancelReply">鍙栨秷</text>
+ </view>
<text class="iconfont close-icon" @click="closeCommentPopup"></text>
</view>
@@ -110,25 +114,58 @@
鏆傛棤璇勮锛屽揩鏉ュ彂琛ㄧ涓�鏉¤瘎璁哄惂~
</view>
- <view v-else class="comment-item" v-for="comment in comments" :key="comment.id">
- <image class="avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image>
- <view class="comment-content">
- <text class="nickname">{{comment.userNickname}}</text>
- <text class="content">{{comment.commentContent}}</text>
- <text class="time">{{formatTime(comment.createTime)}}</text>
- </view>
+ <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
+ <view style="display: flex;">
+ <image class="comment-avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image>
+ <view class="comment-content">
+ <text class="nickname">{{comment.userNickname}}</text>
+ <text class="content">{{comment.commentContent}}</text>
+ <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>
+ </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-content">
+ <view style="display: flex;">
+ <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>
+ <text class="content">{{reply.commentContent}}</text>
+ <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>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply" @click="loadRepliesPage(comment, index)">
+ 灞曞紑{{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="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>
</view>
</scroll-view>
-
<view class="comment-input-area">
- <input
- class="comment-input"
- v-model="commentForm.commentContent"
- placeholder="鍐欎笅浣犵殑璇勮..."
- placeholder-class="placeholder"
- />
- <button class="submit-btn" @click="submitComment">鍙戦��</button>
- </view>
+ <input
+ ref="commentInput"
+ class="comment-input"
+ v-model="commentForm.commentContent"
+ :placeholder="commentForm.replyId ? `鍥炲 @${commentForm.replyUserNickname}` : '鍐欎笅浣犵殑璇勮...'"
+ placeholder-class="placeholder"
+ />
+ <button class="submit-btn" @click="submitComment" :disabled="!commentForm.commentContent.trim()">鍙戦��</button>
+ </view>
</view>
</uni-popup>
@@ -150,11 +187,20 @@
videoId: '',
masterCommentId: ''
},
+ replyCommentQuery: {
+ pageNumber: 1,
+ pageSize: 5,
+ videoId: '',
+ masterCommentId: ''
+ },
commentForm: { // 璇勮琛ㄥ崟鏁版嵁
- id: null,
- videoId: null,
+ id: '',
+ videoId: '',
commentContent: '',
- replyId: null
+ replyId: '',
+ replyUserId: '',
+ replyUserNickname: '',
+ masterCommentId: ''
},
comments: [], // 璇勮鍒楄〃
commentsTotal: 0, // 璇勮鎬绘潯鏁�
@@ -201,6 +247,63 @@
this.initVideoContexts();
},
methods: {
+ // 鍔犺浇涓嬩竴椤靛洖澶�
+ loadNextPageReply(index) {
+ this.replyCommentQuery.pageNumber++;
+ getVideoComments(this.replyCommentQuery).then(res => {
+ this.comments[index].replies = [
+ ...this.comments[index].replies,
+ ...res.data.data.filter(
+ (newItem) => !this.comments[index].replies.some((oldItem) => oldItem.id === newItem.id)
+ ),
+ ];
+ })
+ },
+ // 鏀惰捣鍥炲
+ retractReplyComment(index) {
+ this.comments[index].expandReply = false;
+ this.comments[index].replies = [];
+ },
+ // 鍔犺浇鍥炲
+ loadRepliesPage(comment, index) {
+ this.replyCommentQuery.pageNumber = 1;
+ this.replyCommentQuery.masterCommentId = comment.id
+ getVideoComments(this.replyCommentQuery).then(res => {
+ this.comments[index].replies = res.data.data;
+ this.comments[index].expandReply = true;
+ })
+ },
+ resetCommentForm() {
+ const videoId = this.commentForm.videoId;
+ this.commentForm = { // 璇勮琛ㄥ崟鏁版嵁
+ id: '',
+ videoId: videoId,
+ commentContent: '',
+ replyId: '',
+ replyUserId: '',
+ replyUserNickname: '',
+ masterCommentId: ''
+ }
+ },
+ // 鍙栨秷鍥炲
+ cancelReply() {
+ this.resetCommentForm()
+ },
+ // 鎵撳紑鍥炲妗�
+ openReply(comment, reply = null) {
+ if(reply) {
+ comment = reply
+ }
+ this.commentForm.masterCommentId = comment.masterCommentId ? comment.masterCommentId : comment.id;
+ this.commentForm.replyId = comment.id;
+ this.commentForm.replyUserId = comment.userId;
+ this.commentForm.replyUserNickname = comment.userNickname;
+ // 鑷姩鑱氱劍杈撳叆妗�
+ this.$nextTick(() => {
+ const input = this.$refs.commentInput;
+ if (input) input.focus();
+ });
+ },
// 鏍煎紡鍖栨椂闂�
formatTime(time) {
const date = new Date(time);
@@ -225,13 +328,20 @@
// 鍙戣〃璇勮
addVideoComment(this.commentForm).then(res => {
if(res.data.code === 200) {
- this.commentForm = {
- id: null,
- videoId: null,
- commentContent: '',
- replyId: null
+ this.resetCommentForm()
+
+ // 濡傛灉鏄瘎璁哄埆浜虹殑鍥炲锛岄偅涔堝氨灏嗚繖涓彂甯冨埌replies閲岄潰
+ if(res.data.data.replyId) {
+ for (const [index, item] of this.comments.entries()) {
+ if (item.id === res.data.data.replyId) {
+ item.replies.unshift(res.data.data);
+ // this.loadRepliesPage(item, index)
+ break; // 璺冲嚭寰幆
+ }
+ }
+ } else {
+ this.comments.unshift(res.data.data);
}
- this.comments.unshift(res.data.data);
console.log("鏂板鍚�",this.comments);
uni.showToast({
title: '璇勮鎴愬姛'
@@ -257,12 +367,7 @@
this.$refs.commentPopup.close()
this.showCommentPopup = false;
this.comments = [];
- this.commentForm = {
- id: null,
- videoId: null,
- commentContent: '',
- replyId: null
- }
+ this.resetCommentForm()
this.commentQuery.pageNumber = 1;
this.commentNoMore = false;
},
@@ -295,6 +400,7 @@
this.$refs.commentPopup.open();
this.commentLoading = true;
this.commentQuery.videoId = item.id
+ this.replyCommentQuery.videoId = item.id
// 棣栨鍔犺浇璇勮鍒嗛〉澶у皬澧炲姞涓�鍊嶏紝浠ヤ骇鐢熸粴鍔ㄦ潯锛屽悗缁彲瑙﹀彂
this.commentQuery.pageSize *= 2;
getVideoComments(this.commentQuery).then(res => {
@@ -642,7 +748,7 @@
}
.original-price {
- font-size: 24rpx;
+ font-size: 28rpx;
color: #999;
text-decoration: line-through;
}
@@ -655,7 +761,7 @@
.buy-button {
background: linear-gradient(to right, #ff5a5f, #ff2e4d);
color: white;
- padding: 10rpx 24rpx;
+ padding: 10rpx 28rpx;
border-radius: 20rpx;
font-size: 26rpx;
font-weight: bold;
@@ -697,14 +803,15 @@
.comment-item {
display: flex;
+ flex-direction: column;
padding: 10rpx 0;
}
- .avatar {
- width: 80rpx;
- height: 80rpx;
+ .comment-avatar {
+ width: 70rpx;
+ height: 70rpx;
border-radius: 50%;
- margin-right: 20rpx;
+ margin-right: 10rpx;
}
.comment-content {
@@ -712,21 +819,21 @@
}
.nickname {
- font-size: 24rpx;
+ font-size: 28rpx;
color: #666;
display: block;
margin-bottom: 10rpx;
}
.content {
- font-size: 24rpx;
+ font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 10rpx;
}
.time {
- font-size: 24rpx;
+ font-size: 28rpx;
color: #999;
}
@@ -766,4 +873,73 @@
text-align: center;
color: #999;
}
+ .reply-list {
+ margin-top: 20rpx;
+ padding-left: 80rpx;
+ }
+ .reply-op {
+ margin-top: 10rpx;
+ padding-left: 80rpx;
+ display: flex;
+ font-size: 28rpx;
+ color: #333;
+ }
+ .reply-op-item {
+ display: flex;
+ align-items: center;
+ }
+
+ .reply-item {
+ display: flex;
+ margin-bottom: 20rpx;
+ }
+
+ .reply-content {
+ flex: 1;
+ }
+
+ .reply-to {
+ color: #576b95;
+ margin: 0 10rpx;
+ font-size: 28rpx;
+ }
+ .reply-title {
+ display: flex;
+ align-items: center;
+ font-size: 28rpx;
+ color: #333;
+ }
+
+ .cancel-reply {
+ margin-left: 20rpx;
+ color: #576b95;
+ font-size: 28rpx;
+ padding: 6rpx 12rpx;
+ background: #f5f5f5;
+ border-radius: 20rpx;
+ }
+ .view-more-replies {
+ color: #576b95;
+ font-size: 28rpx;
+ padding: 10rpx 0;
+ padding-left: 80rpx;
+ }
+ .comment-footer, .reply-footer {
+ display: flex;
+ align-items: center;
+ font-size: 28rpx;
+ color: #999;
+ }
+ .reply-btu {
+ margin-left: 30rpx;
+ }
+ .thumbs-up {
+ position: absolute;
+ right: 80rpx;
+ font-size: 32rpx;
+ }
+ .textSideIcon {
+ font-size: 36rpx;
+ margin-left: 5rpx;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0