我的-收藏列表bug、优化

xiangpei

2025-07-04 51e529d5061acf0a8e0580758e335594f5603159

 pages/mine/myCollect/myCollect.vue

@@ -15,9 +15,9 @@
            <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
               :lower-threshold="100">
               <view v-if="videoCollects.length > 0">
                  <view v-for="(item, idx) in videoCollects" :key="idx" class="video-item">
                  <view v-for="(item, idx) in videoCollects" :key="item.id" class="video-item">
                     <!-- 视频封面+播放按钮 -->
                     <view class="video-cover-container">
                     <view class="video-cover-container" @click="jumpToPlay(idx)">
                        <image :src="item.coverUrl" mode="aspectFill" class="video-cover" />
                        <view class="play-icon">
                           <u-icon name="play-circle-fill" size="60" color="#fff"></u-icon>
@@ -26,7 +26,7 @@
                     </view>

                     <!-- 视频信息 -->
                     <view class="video-info">
                     <view class="video-info" @click="jumpToPlay(idx)">
                        <view class="video-title">{{ item.authorName || '未知作者' }}</view>
                        <view class="video-meta">
                           <text class="video-weight" v-if="item.weight > 0">
@@ -38,7 +38,7 @@

                     <!-- 操作按钮 -->
                     <view class="video-actions">
                        <button class="cancel-btn" @click.stop="handleCancelCollection(item,'video')">
                        <button class="cancel-btn" @click.stop="handleCancelCollection(item,'video',idx)">
                           取消收藏
                        </button>
                     </view>
@@ -65,7 +65,7 @@
            <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
               :lower-threshold="100">
               <view v-if="goodsCollects.length > 0">
                  <view v-for="(item, idx) in goodsCollects" :key="idx" class="activity-item">
                  <view v-for="(item, idx) in goodsCollects" :key="item.id" class="activity-item">
                     <!-- 封面区域 -->
                     <block>
                        <image :src="item.original" mode="aspectFill" class="activity-cover" />
@@ -82,7 +82,7 @@

                     <!-- 操作区域 -->
                     <view class="action-container">
                        <button class="cancel-btn" @click="handleCancelCollection(item,'goods')"
                        <button class="cancel-btn" @click="handleCancelCollection(item,'goods',idx)"
                           hover-class="cancel-btn-hover">
                           取消收藏
                        </button>
@@ -109,7 +109,7 @@
            <scroll-view scroll-y class="activity-list" style="height: 80vh;" @scrolltolower="loadMore"
               :lower-threshold="100">
               <view v-if="activityCollects.length > 0">
                  <view v-for="(item, idx) in activityCollects" :key="idx" class="activity-item">
                  <view v-for="(item, idx) in activityCollects" :key="item.id" class="activity-item">
                     <!-- 封面区域 -->
                     <block v-if="item.coverType === '图片' || item.coverType === '视频'">
                        <image :src="item.cover" mode="aspectFill" class="activity-cover" />
@@ -128,7 +128,7 @@
                     </view>
                     <!-- 操作区域 -->
                     <view class="action-container">
                        <button class="cancel-btn" @click="handleCancelCollection(item,'activity')"
                        <button class="cancel-btn" @click="handleCancelCollection(item,'activity', idx)"
                           hover-class="cancel-btn-hover">
                           取消收藏
                        </button>
@@ -165,6 +165,8 @@

<script>
   import '@/components/uview-components/uview-ui';
   import storage from '@/utils/storage';
   import {getAuthorCollectVideoPage} from '@/api/user.js'
   import {
      getFilePreviewUrl
   } from '@/api/common.js'
@@ -181,11 +183,7 @@
         return {
            total: 0,
            loading: false,
            noMore: {
               video: false,
               goods: false,
               activity: false
            },
            noMore: false,
            currentTab: 0, // 当前选中的tab索引
            tabs: ['视频', '商品', '活动'],
            //
@@ -197,6 +195,7 @@
               refId: '',
            },
            query: {
               authorId: '',
               type: 'video',
               pageNumber: 1,
               pageSize: 5,
@@ -205,11 +204,22 @@
      },
      onLoad() {
         this.currentTab = 0;
         //TODO 未登录需要id，测试用写死\
         this.query.authorId = storage.getUserInfo().id
         this.getintit()
      },
      methods: {

         jumpToPlay(index) {
            const playInfo = {
                 videoList: this.videoCollects,
                 nomore: this.noMore,
                 pageNumber: this.query.pageNumber,
                 playIndex: index
            }
            uni.setStorageSync("playInfo", playInfo)
            uni.navigateTo({
              url: `/pages/video/video-play?authorId=${this.query.authorId}&videoFrom=collect`
            });
         },
         /**
          * 下拉刷新时
          */
@@ -224,25 +234,31 @@
         },
         loadMore() {
            this.loading = true;
            this.query.pageNumber += 1;
            // 延迟执行让UI有反应时间
            setTimeout(() => {
               this.query.pageNumber += 1;
               this.getintit();
            }, 300);
         },
         handleCancelCollection(item, type) {
         handleCancelCollection(item, type, index) {
            console.log(item)
            this.collectForm.collectType = type;
            this.collectForm.refId = item.id;
            changeCollect(this.collectForm).then(res => {
               if (res.statusCode === 200) {
               if (res.data.code === 200) {
                  uni.showToast({
                     title: res.data.msg, // 提示文字
                     icon: 'none', // 图标类型（success/loading/none）
                     mask: true // 是否显示透明蒙层（防止触摸穿透）
                  });
                  this.getintit();
                  this.query.pageNumber = 1
                  // 因为视频走的mq有延迟，前端直接删除该元素达到效果
                  if (type === 'video') {
                     this.videoCollects.splice(index, 1)
                  } else {
                     this.noMore = false
                     this.getintit()
                  }
               }

            })
@@ -272,11 +288,11 @@
            });
            if (this.currentTab === 0) {
               this.query.type = 'video';
               getMyCollectList(this.query).then(res => {
               getAuthorCollectVideoPage(this.query).then(res => {
                  uni.hideLoading();
                  this.loading = false;

                  if (res.statusCode === 200) {
                  if (res.data.code === 200) {
                     const newData = res.data.data
                     this.total = res.data.total || 0;
                     // 追加或替换数据
@@ -286,7 +302,6 @@
                     // 判断是否还有更多数据
                     this.noMore = newData.length < this.query.pageSize ||
                        this.videoCollects.length >= this.total;

                  }
               })
            } else if (this.currentTab === 1) {
@@ -294,7 +309,7 @@
               getMyCollectList(this.query).then(res => {
                  uni.hideLoading();
                  this.loading = false;
                  if (res.statusCode === 200) {
                  if (res.data.code === 200) {
                     const newData = res.data.data
                     this.total = res.data.total || 0;

@@ -311,7 +326,7 @@
               getMyCollectList(this.query).then(res => {
                  uni.hideLoading();
                  this.loading = false;
                  if (res.statusCode === 200) {
                  if (res.data.code === 200) {
                     const newData = res.data.data
                     this.total = res.data.total || 0;