绿满眶商城微信小程序-uniapp
xiangpei
2025-07-04 51e529d5061acf0a8e0580758e335594f5603159
我的-收藏列表bug、优化
1个文件已修改
63 ■■■■■ 已修改文件
pages/mine/myCollect/myCollect.vue 63 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
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;