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 | 351 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 299 insertions(+), 52 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index c43e545..d6a2f29 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -8,12 +8,12 @@
: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"
@click="togglePlay(index)"
- v-if="currentVideoIsPlaying != null && !currentVideoIsPlaying"
+ v-if="!currentVideoIsPlaying"
>
<image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
</view>
@@ -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>
@@ -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,61 @@
鏆傛棤璇勮锛屽揩鏉ュ彂琛ㄧ涓�鏉¤瘎璁哄惂~
</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 + index">
+ <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 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, 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>
+ <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 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)">
+ <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="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="line">鈥斺��</text>鏀惰捣<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>
@@ -138,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() {
@@ -150,11 +190,21 @@
videoId: '',
masterCommentId: ''
},
+ replyCommentQuery: {
+ pageNumber: 1,
+ pageSize: 5,
+ videoId: '',
+ masterCommentId: ''
+ },
commentForm: { // 璇勮琛ㄥ崟鏁版嵁
- id: null,
- videoId: null,
+ id: '',
+ videoId: '',
commentContent: '',
- replyId: null
+ replyId: '',
+ replyUserId: '',
+ replyUserNickname: '',
+ replyUserAvatar: '',
+ masterCommentId: null
},
comments: [], // 璇勮鍒楄〃
commentsTotal: 0, // 璇勮鎬绘潯鏁�
@@ -169,7 +219,7 @@
playAt: 0 ,// 杩欎釜瑙嗛鎾斁鍒板摢浜�
startPlayTime: 0 // 杩欎釜瑙嗛浠庝粈涔堟椂鍊欏紑濮嬫挱鏀剧殑
},
- currentVideoIsPlaying: null, // 褰撳墠瑙嗛鏄惁姝ｅ湪鎾斁
+ currentVideoIsPlaying: true, // 褰撳墠瑙嗛鏄惁姝ｅ湪鎾斁
isFullScreen: false,
windowHeight: 0,
currentIndex: 0, // 褰撳墠鎾斁鐨勮棰戠储寮�
@@ -183,6 +233,7 @@
}
},
onShow() {
+ this.loadVideos()
// 濡傛灉瑙嗛鎸変笅鏆傚仠鍚庡垏鎹㈤〉闈㈠啀鍥炲埌椤甸潰鏃讹紝鍙畻鏆傚仠鏃堕棿锛堝洜涓烘殏鍋滄椂闂村拰绂诲紑椤甸潰鏃堕棿鏄噸澶嶇殑锛屽彧绠椾竴涓級
if(this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
const duration = Date.now() - this.startHidenTime
@@ -200,6 +251,103 @@
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++;
+ 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: '',
+ commentContent: '',
+ replyId: '',
+ replyUserId: '',
+ replyUserNickname: '',
+ replyUserAvatar: '',
+ masterCommentId: null
+ }
+ },
+ // 鍙栨秷鍥炲
+ 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.commentForm.replyUserAvatar = comment.userAvatar;
+ // 鑷姩鑱氱劍杈撳叆妗�
+ this.$nextTick(() => {
+ const input = this.$refs.commentInput;
+ if (input) input.focus();
+ });
+ },
// 鏍煎紡鍖栨椂闂�
formatTime(time) {
const date = new Date(time);
@@ -224,13 +372,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: '璇勮鎴愬姛'
@@ -256,12 +411,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;
},
@@ -294,6 +444,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 => {
@@ -373,14 +524,13 @@
// 淇濆瓨涓婁竴涓棰戠殑鎾斁璁板綍
this.savePlayRecord()
const oldIndex = this.currentIndex;
- console.log("瑙嗛涓婁笅鏂�",this.videoContexts[oldIndex]);
this.currentIndex = e.detail.current;
// 鏆傚仠涓婁竴涓棰�
if (this.videoContexts[oldIndex]) {
this.videoContexts[oldIndex].pause();
}
- this.currentVideoIsPlaying = true;
+
this.startPauseTime = 0;
// 鎾斁褰撳墠瑙嗛
if (this.videoContexts[this.currentIndex]) {
@@ -420,7 +570,13 @@
},
// 瑙嗛鎾斁浜嬩欢
onPlay(id, index) {
- this.currentVideoIsPlaying = true;
+ console.log(id, index, "瑙﹀彂鎾斁");
+ if(index === this.currentIndex) {
+ this.currentVideoIsPlaying = true;
+ } else {
+ this.currentVideoIsPlaying = false;
+ return
+ }
this.playRecord.videoId = id;
// 娌″垵濮嬪寲鎵嶈祴鍊硷紝鍥犱负涓�涓棰戦噸澶嶆挱鏀緊nPlay浼氶噸澶嶈Е鍙�
if(this.playRecord.startPlayTime === 0) {
@@ -434,7 +590,13 @@
// 瑙嗛鏆傚仠浜嬩欢
onPause(index) {
- this.currentVideoIsPlaying = false;
+ console.log(index, "瑙﹀彂鏆傚仠");
+ if(index === this.currentIndex) {
+ this.currentVideoIsPlaying = false;
+ } else {
+ this.currentVideoIsPlaying = true;
+ return
+ }
this.startPauseTime = Date.now()
},
@@ -630,7 +792,7 @@
}
.original-price {
- font-size: 24rpx;
+ font-size: 28rpx;
color: #999;
text-decoration: line-through;
}
@@ -643,7 +805,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;
@@ -685,14 +847,21 @@
.comment-item {
display: flex;
- padding: 10rpx 0;
+ flex-direction: column;
+ padding: 10rpx 0 20rpx 0;
}
- .avatar {
- width: 80rpx;
- height: 80rpx;
+ .comment-avatar {
+ width: 70rpx;
+ height: 70rpx;
border-radius: 50%;
- margin-right: 20rpx;
+ margin-right: 10rpx;
+ }
+ .comment-reply-avatar {
+ width: 40rpx;
+ height: 40rpx;
+ border-radius: 50%;
+ margin-right: 10rpx;
}
.comment-content {
@@ -700,21 +869,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;
}
@@ -754,4 +923,82 @@
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;
+ height: 40rpx;
+ }
+
+ .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: 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