| | |
| | | :current="currentIndex" |
| | | @change="onSwiperChange" |
| | | > |
| | | <swiper-item v-for="(item, index) in videoList" :key="item.id + index"> |
| | | <swiper-item v-for="(item, index) in videoList" :key="item.id"> |
| | | <!-- 播放按钮(仅当视频暂停时显示) --> |
| | | <view |
| | | class="play-icon" |
| | |
| | | </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="item.id + tag.id">#{{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" @click="() => jumpToHomePage(item.authorId)" :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> |
| | | |
| | | <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id + index"> |
| | | <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"> |
| | |
| | | </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-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> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | videoNoMore: false, // 是否还有更多视频 |
| | | commentNoMore: false, // 是否还有更多评论 |
| | | commentQuery: { |
| | | pageNumber: 1, |
| | |
| | | ], // 视频列表数据 |
| | | videoContexts: [], // 视频上下文对象集合 |
| | | loading: false, // 是否正在加载 |
| | | page: 1, // 当前页码 |
| | | pageSize: 10 // 每页数量 |
| | | videoQuery: { |
| | | pageNumber: 1, |
| | | pageSize: 6, |
| | | videoFrom: 'recommend' |
| | | } |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | |
| | | // 加载视频数据 |
| | | 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 { |