视频管理页面-静态

xiangpei

2025-06-04 bd3a7fe563cd5590109ae68d27ae747c1556f51e

 pages/tabbar/index/home.vue

@@ -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="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">&#xe629;</text>
@@ -183,6 +183,7 @@
export default {
  data() {
    return {
      videoNoMore: false, // 是否还有更多视频
      commentNoMore: false, // 是否还有更多评论
      commentQuery: {
         pageNumber: 1,
@@ -228,8 +229,11 @@
      ],   // 视频列表数据
      videoContexts: [], // 视频上下文对象集合
      loading: false,  // 是否正在加载
      page: 1,         // 当前页码
      pageSize: 10     // 每页数量
      videoQuery: {
         pageNumber: 1,
         pageSize: 6,
         videoFrom: 'recommend'
      }
    }
  },
  onShow() {
@@ -251,6 +255,12 @@
    this.initVideoContexts();
  },
  methods: {
      // 跳转个人主页
      jumpToHomePage(authorId) {
         uni.navigateTo({
            url: "/pages/video/home-page?authorId=" + authorId
         })
      },
      // 取消点赞
      async cancelThumbsUp(id, commentIndex, replyIndex) {
         const data = {
@@ -487,22 +497,31 @@
    
    // 加载视频数据
    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++;
		  
     })
    },
    
@@ -556,6 +575,7 @@
    },
    // 单击屏幕：暂停或继续播放
   togglePlay(index) {
      console.log("单击视频", index, this.videoContexts);
      if(this.currentVideoIsPlaying) {
         this.videoContexts[index].pause();
      } else {