绿满眶商城微信小程序-uniapp
peng
2025-07-02 d3d0b4dbb4f1f8c4784c834e0a39feba8aa5afa5
pages/video/home-page.vue
@@ -52,6 +52,13 @@
          </view>
          <view
            class="tab-item"
            :class="{active: currentTab === 'collect'}"
            @click="switchTab('collect')"
          >
            收藏
          </view>
        <view
          class="tab-item"
            :class="{active: currentTab === 'likes'}"
            @click="switchTab('likes')"
          >
@@ -88,13 +95,33 @@
            </view>
         </view>
      </scroll-view>
      <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'likes' && collectVideoList.length > 0">
      <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'collect' && collectVideoList.length > 0">
         <view class="video-container">
            <view
              class="video-item"
              v-for="(item, index) in collectVideoList"
              :key="item.id"
              @click="playCollectVideo(index)"
            >
              <image class="video-cover" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image>
              <view class="video-info">
                <view class="video-stats">
                  <view class="stat">
                    <uni-icons type="heart" size="16" color="#fff"></uni-icons>
                    <text>{{item.collectNum}}</text>
                  </view>
                </view>
              </view>
            </view>
         </view>
      </scroll-view>
      <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'likes' && likeVideoList.length > 0">
         <view class="video-container">
            <view
              class="video-item"
              v-for="(item, index) in likeVideoList"
              :key="item.id"
              @click="playLikeVideo(index)"
            >
              <image class="video-cover" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image>
              <view class="video-info">
@@ -115,7 +142,12 @@
          <text class="empty-text">还未发布作品哦~</text>
        </view>
      <!-- 空状态 -->
      <view class="empty-state" v-if="collectVideoList.length === 0 && currentTab === 'likes'">
      <view class="empty-state" v-if="collectVideoList.length === 0 && currentTab === 'collect'">
        <!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image> -->
        <text class="empty-text">还没有收藏作品哦~</text>
      </view>
      <!-- 空状态 -->
      <view class="empty-state" v-if="likeVideoList.length === 0 && currentTab === 'likes'">
        <!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image> -->
        <text class="empty-text">还没有点赞作品哦~</text>
      </view>
@@ -137,7 +169,7 @@
<script>
import DropdownMenu from '@/components/dropdown-menu.vue'
import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage} from '@/api/user.js'
import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage, getAuthorLikeVideoPage} from '@/api/user.js'
import {subscribe, unSubscribe, delVideo, updateVideo, userDownVideo} from '@/api/video.js'
export default {
  components: {DropdownMenu},
@@ -175,15 +207,35 @@
        pageNumber: 1,
        pageSize: 10
     },
     likeVideoQuery: {
        authorId: '',
        pageNumber: 1,
        pageSize: 10
     },
     videoTotal: 0,
      videoList: [], // 作品
     collectVideoList: [], // 收藏
     likeVideoList: [], // 点赞
     nomoreVideo: false,
     nomoreCollectVideo: false
     nomoreCollectVideo: false,
     nomoreLikeVideo: false,
    }
  },
  onShow() {
    this.getAuthorInfo();
    if (this.currentTab === 'works') {
      this.videoQuery.pageNumber = 1
      this.nomoreVideo = false
      this.getAuthorVideoPage();
    } else if (this.currentTab === 'collect') {
       this.collectVideoQuery.pageNumber = 1
       this.nomoreCollectVideo = false
       this.getAuthorCollectVideoPage()
    } else if (this.currentTab === 'likes') {
       this.likeVideoQuery.pageNumber = 1
       this.nomoreLikeVideo = false
       this.getAuthorLikeVideoPage()
    }
  },
  onLoad(option) {
   this.authorId = option.authorId;
@@ -261,7 +313,7 @@
               this.videoQuery.pageNumber += 1;
            }
         })
      } else if(this.currentTab === 'likes') {
      } else if(this.currentTab === 'collect') {
         if(this.nomoreCollectVideo) {
            return;
         }
@@ -280,6 +332,27 @@
               this.nomoreCollectVideo = true;
            } else {
               this.collectVideoQuery.pageNumber += 1;
            }
         })
      } else if(this.currentTab === 'likes') {
         if(this.nomoreLikeVideo) {
            return;
         }
         getAuthorLikeVideoPage(this.likeVideoQuery).then(res => {
            if(this.likeVideoQuery.pageNumber === 1) {
               this.likeVideoList = res.data.data
            } else {
               this.likeVideoList = [
                 ...this.likeVideoList,
                 ...res.data.data.filter(
                   (newItem) => !this.likeVideoList.some((oldItem) => oldItem.id === newItem.id)
                 ),
               ];
            }
            if(res.data.data.length < this.likeVideoQuery.pageSize) {
               this.nomoreLikeVideo = true;
            } else {
               this.likeVideoQuery.pageNumber += 1;
            }
         })
      }
@@ -333,13 +406,33 @@
      this.currentTab = tab;
     if(tab === 'works') {
        this.collectVideoList = []
        this.likeVideoList = []
        this.videoQuery.pageNumber = 1
        this.nomoreVideo = false
        this.getAuthorVideoPage()
     } else if(tab === 'collect') {
        this.videoList = []
        this.likeVideoList = []
        this.collectVideoQuery.pageNumber = 1
        this.nomoreCollectVideo = false
        this.getAuthorCollectVideoPage()
     } else if(tab === 'likes') {
        this.videoList = []
        this.collectVideoQuery.pageNumber = 1
        this.getAuthorCollectVideoPage()
        this.collectVideoList = []
        this.likeVideoQuery.pageNumber = 1
        this.nomoreLikeVideo = false
        this.getAuthorLikeVideoPage()
     }
    },
   // 获取作者喜欢的视频
   async getAuthorLikeVideoPage() {
      this.likeVideoQuery.authorId = this.authorId
      getAuthorLikeVideoPage(this.likeVideoQuery).then(res => {
         this.likeVideoList = res.data.data
         if(res.data.data.length < this.likeVideoQuery.pageSize) {
            this.nomoreLikeVideo = true;
         }
      })
    },
   // 获取作者的收藏视频
    async getAuthorCollectVideoPage() {
@@ -377,6 +470,19 @@
        url: `/pages/video/video-play?authorId=${this.authorId}&videoFrom=collect`
      });
    },
   // 播放点赞视频
   playLikeVideo(index) {
     const playInfo = {
        videoList: this.likeVideoList,
        nomore: this.nomoreLikeVideo,
        pageNumber: this.likeVideoQuery.pageNumber,
        playIndex: index
     }
     uni.setStorageSync("playInfo", playInfo)
     uni.navigateTo({
       url: `/pages/video/video-play?authorId=${this.authorId}&videoFrom=like`
     });
   },
    // 编辑个人资料
    editInfo() {
      uni.navigateTo({