library-wechat/subpkg/pages/collect-list/collect-list.vue

<template>
	<view class="collection-page">
		<view class="content-box">
			<view class="empty" v-if="bookCollectList.length === 0 && !isLoading">
        <uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
        <text style="margin-top: 20px;">暂无收藏的图书~</text>
			</view>
			<view class="recommendation-list" v-else>
        <book-list-item
					class="hot-list-item"
					v-for="(item, index) in bookCollectList"
					:key="index"
					:data="item"
					:ranking="index + 1"
					@click="onItemClick(item)"
				></book-list-item>
			</view>
			<uni-load-more status="loading" v-if="isLoading && bookCollectList.length > 0"></uni-load-more>
			<view class="no-more" v-if="noMore && bookCollectList.length > 0">
				没有更多数据了
			</view>
		</view>
	</view>
</template>

<script>
import BookListItem from "@/components/book-list-item/book-list-item.vue";
import { FetchFindAllBookCollectionByOpenId } from '@/api/book';
import { getOpenId } from '@/utils/storage';
import config from '@/utils/config';
import { loadBookCovers } from '@/utils/bookCover';

export default {
	components: {
		BookListItem,
	},
	data() {
		return {
			isLoading: false,
			noMore: false,
			pageNum: 0,
			pageSize: 10,
			bookCollectList: [],
			hasLoadedAll: false,
		}
	},

	onLoad() {
		// this.loadData();
	},
	onShow() {
		// 检查是否需要刷新（从图书详情取消收藏回来）
		const needRefresh = uni.getStorageSync('needRefreshCollect');
		uni.removeStorageSync('needRefreshCollect');
		
		// 如果已经加载到最后，或者有取消收藏操作，需要刷新数据
		if (this.hasLoadedAll || needRefresh) {
			this.refreshData();
		} else if (this.bookCollectList.length === 0) {
			// 如果还没加载过数据，也需要加载
			this.refreshData();
		}
	},
	onPullDownRefresh() {
		this.refreshData();
	},
	onReachBottom() {
		if (this.noMore || this.isLoading) return;
		this.loadMore();
	},
	methods: {
    // getTest(){
    //   //   34352,36153
    //    wx.request({
    //     url: `http://218.200.95.251:8081/opac/getExistsBookrecnoList/41534`,
    //     method: 'POST',
    //     success: (res) => {
    //       console.log(res.data || []);
    //     },
    //     fail: () => {
    //       resolve([]);
    //     }
    //   });
    // },
		async loadData() {
			this.isLoading = true;
			try {
				const openId = await getOpenId();
				if (!openId) {
					uni.showToast({ title: '获取用户信息失败', icon: 'none' });
					this.isLoading = false;
					return;
				}

				const res = await FetchFindAllBookCollectionByOpenId({
					libcode: config.LIB_CODE,
					openId: openId,
					page: this.pageNum,
					size: this.pageSize,
				});

				if (res.code === 200) {
				this.bookCollectList = res.data.content || [];
				this.noMore = (res.data.content || []).length < this.pageSize;
				this.hasLoadedAll = this.noMore;
				
				// 加载封面
				this.loadCoversForList();
			} else {
					uni.showToast({ title: res.message || '获取收藏列表失败', icon: 'none' });
				}
			} catch (err) {
				console.error('获取收藏列表失败', err);
				uni.showToast({ title: '获取收藏列表失败', icon: 'none' });
			} finally {
				this.isLoading = false;
			}
		},

		async refreshData() {
      this.pageNum = 0;
      this.noMore = false;
      this.bookCollectList = [];
      await this.loadData();
      // 滚动条回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
      uni.stopPullDownRefresh();
    },

		async loadMore() {
			if (this.noMore || this.isLoading) return;
			
			this.pageNum++;
			this.isLoading = true;

			try {
				const openId = await getOpenId();
				if (!openId) {
					uni.showToast({ title: '获取用户信息失败', icon: 'none' });
					this.isLoading = false;
					return;
				}

				const res = await FetchFindAllBookCollectionByOpenId({
					libcode: config.LIB_CODE,
					openId: openId,
					page: this.pageNum,
					size: this.pageSize,
				});
        console.log('res',res)
        console.log('res.data',res.data)
        console.log('res.data.content',res.data.content)

				if (res.code === 200) {
					const newData = res.data.content || [];
					this.bookCollectList = [...this.bookCollectList, ...newData];
					this.noMore = newData.length < this.pageSize;
					
					// 为新加载的数据加载封面
					if (newData.length > 0) {
						await this.loadCoversForList();
					}
				} else {
					this.pageNum--;
					uni.showToast({ title: res.message || '加载更多失败', icon: 'none' });
				}
			} catch (err) {
				console.error('加载更多收藏失败', err);
				this.pageNum--;
				uni.showToast({ title: '加载更多失败', icon: 'none' });
			} finally {
				this.isLoading = false;
			}
		},
		async loadCoversForList() {
			await loadBookCovers(this.bookCollectList, (index, coverUrl) => {
				console.log('index', index);
				console.log('coverUrl', coverUrl);
				if (this.bookCollectList[index]) {
					// 使用 Vue.set 确保响应式更新
					this.$set(this.bookCollectList[index], 'cover', coverUrl);
				}
			});
		},
		onItemClick(item) {
      console.log('item',item)
      uni.navigateTo({
        url: "/subpkg/pages/book-detail/book-detail?searchData=" + encodeURIComponent(JSON.stringify(item)) + '&isCollected=true'
      })
    }
	}
}
</script>

<style lang="scss" scoped>
.collection-page {
  padding: 10px 0;
	background-color: #f7f8fa;
	min-height: 100vh;
}

.content-box {
	padding: 0 10px;
}

.empty {
	padding: 60px 0;
	text-align: center;
	color: #999;
}

.no-more {
	text-align: center;
	padding: 20px 0;
	color: #999;
	font-size: 13px;
}

.recommendation-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.book-item {
	display: flex;
	background: #fff;
	border-radius: 8px;
	padding: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.book-cover {
	width: 80px;
	height: 100px;
	border-radius: 4px;
	flex-shrink: 0;
	background: #f5f5f5;
}

.book-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 12px;
	overflow: hidden;
}

.book-title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.book-author {
	font-size: 13px;
	color: #999;
	margin-top: 6px;
}

.book-publisher {
	font-size: 12px;
	color: #ccc;
	margin-top: 4px;
}
</style>