| | |
| | | </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="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> |
| | |
| | | <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"> |
| | | <view class="reply-content"> |
| | | <view style="display: flex;"> |
| | | <image class="comment-reply-avatar" :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image> |
| | |
| | | <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> |
| | |
| | | </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() { |
| | | return { |
| | | videoNoMore: false, // 是否还有更多视频 |
| | | commentNoMore: false, // 是否还有更多评论 |
| | | commentQuery: { |
| | | pageNumber: 1, |
| | |
| | | replyUserId: '', |
| | | replyUserNickname: '', |
| | | replyUserAvatar: '', |
| | | masterCommentId: '' |
| | | masterCommentId: null |
| | | }, |
| | | comments: [], // 评论列表 |
| | | commentsTotal: 0, // 评论总条数 |
| | |
| | | ], // 视频列表数据 |
| | | videoContexts: [], // 视频上下文对象集合 |
| | | loading: false, // 是否正在加载 |
| | | page: 1, // 当前页码 |
| | | pageSize: 10 // 每页数量 |
| | | videoQuery: { |
| | | pageNumber: 1, |
| | | pageSize: 6, |
| | | videoFrom: 'recommend' |
| | | } |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | 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++; |
| | |
| | | replyUserId: '', |
| | | replyUserNickname: '', |
| | | replyUserAvatar: '', |
| | | masterCommentId: '' |
| | | masterCommentId: null |
| | | } |
| | | }, |
| | | // 取消回复 |
| | |
| | | |
| | | // 加载视频数据 |
| | | async loadVideos() { |
| | | if (this.loading) return; |
| | | if (this.loading || this.videoNoMore) return; |
| | | this.loading = true; |
| | | |
| | | getRecommendVideos({pageNumber: this.page, pageSize: this.pageSize}).then(res => { |
| | | getRecommendVideos(this.videoQuery).then(res => { |
| | | console.log(res, "视频数据"); |
| | | if (this.page === 1) { |
| | | if (this.videoQuery.pageNumber === 1) { |
| | | this.videoList = res.data.data; |
| | | } else { |
| | | this.videoList = [...this.videoList, ...res.data.data]; |
| | | this.videoList = [ |
| | | ...this.videoList, |
| | | ...res.data.data.filter( |
| | | (newItem) => !this.videoList.some((oldItem) => oldItem.id === newItem.id) |
| | | ), |
| | | ]; |
| | | } |
| | | |
| | | this.page++; |
| | | this.$nextTick(() => { |
| | | this.initVideoContexts(); |
| | | }); |
| | | this.loading = false; |
| | | if(res.data.data.length < this.videoQuery.pageSize) { |
| | | this.videoNoMore = true; |
| | | return; |
| | | } |
| | | this.videoQuery.pageNumber++; |
| | | |
| | | }) |
| | | }, |
| | | |
| | |
| | | }, |
| | | // 单击屏幕:暂停或继续播放 |
| | | togglePlay(index) { |
| | | console.log("单击视频", index, this.videoContexts); |
| | | if(this.currentVideoIsPlaying) { |
| | | this.videoContexts[index].pause(); |
| | | } else { |
| | |
| | | } |
| | | .thumbs-up { |
| | | position: absolute; |
| | | right: 80rpx; |
| | | right: 20rpx; |
| | | font-size: 32rpx; |
| | | width: 120rpx; |
| | | } |
| | | .textSideIcon { |
| | | font-size: 36rpx; |
| | |
| | | margin-right: 10rpx; |
| | | color: #cccccc; |
| | | } |
| | | .thumbs-num { |
| | | margin-left: 4rpx; |
| | | } |
| | | </style> |