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

<template>
	<view class="collection-page">
		<view class="tab-box">
			<view class="tab-item" :class="activeTab === 1 ? 'active' : ''" @click="switchTab(1)"> 图书 </view>
			<view class="tab-item" :class="activeTab === 2 ? 'active' : ''" @click="switchTab(2)"> 活动 </view>
		</view>

		<!-- 内容区域 -->
		<view class="content-box">
			<!-- 图书收藏 -->
			<view v-if="activeTab === 1" class="tab-content">
				<view class="empty" v-if="bookCollectList.length === 0">
          <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>
					<view
						class="book-item"
						v-for="(item, index) in bookCollectList"
						@click="goToBookDetail(item)"
						:key="index"
					>
						<image class="book-cover" :src="item.cover"></image>
						<view class="book-title">{{ item.title }}</view>
					</view>
				</view>
				<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
				<view class="no-more" v-if="noMore && bookCollectList.length > 0">
					没有更多数据了
				</view>
			</view>

			<!-- 活动收藏 -->
			<view v-if="activeTab === 2" class="tab-content">
				<view class="empty" v-if="activityCollectList.length === 0">
          <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="activity-list" v-else>
					<view
						class="activity-item"
						v-for="(item, index) in activityCollectList"
						@click="toActivityDetail(item)"
						:key="index"
					>
						<image class="activity-img" :src="item.imgUrl"></image>
						<view class="activity-info">
							<view class="activity-info-left">
								<text class="title">{{ item.title }}</text>
								<view class="time">
									<uni-icons class="time-icon" type="time" size="15"></uni-icons>
									<text>{{ item.time }}</text>
								</view>
							</view>
							<button
								class="activity-btn"
								:class="item.status === 0 ? 'disabled-btn' : ''"
								type="primary"
								:disabled="item.status === 0"
							>
								{{ item.status === 1 ? '立即参加' : '活动结束' }}
							</button>
						</view>
					</view>
				</view>
				<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
				<view class="no-more" v-if="noMore && activityCollectList.length > 0">
					没有更多数据了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 1,
			isLoading: false,
			noMore: false,
			pageNum: 1,
			pageSize: 5,

			bookCollectList: [
				// { isbn: '9787544741110', title: '人工智能基础——数学知识', cover: 'https://qiniu.aiyxlib.com/1606124577077' },
				// { isbn: '9787539938032', title: 'Vim 8文本处理实战', cover: 'https://qiniu.aiyxlib.com/1606178450151' },
				// { isbn: '9787536692930', title: 'Oracle从入门到精通', cover: 'https://qiniu.aiyxlib.com/1606123986028' }
			],

			allActivityList: [
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '读书分享会', time: "2025-11-03 ~2025-11-09", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '作者见面会', time: "2025-11-03 ~2025-11-09", status: 0 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '新书签售会', time: "2025-11-05 ~2025-11-10", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '文学讲座', time: "2025-11-06 ~2025-11-12", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '亲子阅读日', time: "2025-11-07 ~2025-11-13", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '书法展览', time: "2025-11-08 ~2025-11-14", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '诗词大会', time: "2025-11-09 ~2025-11-15", status: 0 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '绘本故事', time: "2025-11-10 ~2025-11-16", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '读书打卡', time: "2025-11-11 ~2025-11-17", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '作家访谈', time: "2025-11-12 ~2025-11-18", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '文化沙龙', time: "2025-11-13 ~2025-11-19", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '手工创作', time: "2025-11-14 ~2025-11-20", status: 0 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '经典诵读', time: "2025-11-15 ~2025-11-21", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '图书交换', time: "2025-11-16 ~2025-11-22", status: 1 },
				// { imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '阅读竞赛', time: "2025-11-17 ~2025-11-23", status: 1 },
			],
			activityCollectList: [],
		}
	},

	onLoad() {
		this.initActivityList() // 只初始化一次活动列表
	},

	onPullDownRefresh() {
		this.refreshData()
	},

	onReachBottom() {
		if (this.noMore || this.isLoading) return
		this.loadMore() // 这里只调用“追加”，不刷新
	},

	methods: {
		switchTab(tab) {
			this.activeTab = tab
			// 切Tab不重置活动列表，避免闪屏
		},

		// 初始化第一页（进入页面/下拉刷新用）
		initActivityList() {
			this.pageNum = 1
			this.noMore = false
			this.activityCollectList = this.allActivityList.slice(0, this.pageSize)
			this.noMore = this.allActivityList.length <= this.pageSize
		},

		refreshData() {
			this.isLoading = true
			setTimeout(() => {
				// 图书重置
				this.bookCollectList = [
					{ isbn: '9787544741110', title: '人工智能基础——数学知识', cover: 'https://qiniu.aiyxlib.com/1606124577077' },
					{ isbn: '9787539938032', title: 'Vim 8文本处理实战', cover: 'https://qiniu.aiyxlib.com/1606178450151' },
					{ isbn: '9787536692930', title: 'Oracle从入门到精通', cover: 'https://qiniu.aiyxlib.com/1606123986028' }
				]
				// 活动回到第一页
				this.initActivityList()
				this.isLoading = false
				uni.stopPullDownRefresh()
			}, 500)
		},

		// 上拉加载
		loadMore() {
			this.isLoading = true
			this.pageNum++
			setTimeout(() => {
				const start = (this.pageNum - 1) * this.pageSize
				const end = this.pageNum * this.pageSize
				const newArr = this.allActivityList.slice(start, end)

				if (newArr.length) {
					this.activityCollectList = [...this.activityCollectList, ...newArr]
				}
				this.noMore = this.allActivityList.length <= end
				this.isLoading = false
			}, 500)
		},

		goToBookDetail(item) {
			uni.navigateTo({ url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn })
		},
		toActivityDetail(item) {
			uni.navigateTo({ url: "/subpkg/pages/activity-detail/activity-detail?title=" + item.title })
		},
	},
}
</script>

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

.tab-box {
	display: flex;
	background-color: #fff;
	margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 99;
}
.tab-item {
	flex: 1;
	text-align: center;
	padding: 10px 0;
	font-size: 15px;
	color: #333;
	position: relative;
}
.tab-item.active {
	color: #01a4fe;
	font-weight: bold;
}
.tab-item.active::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 2px;
	background-color: #01a4fe;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 2px;
}

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

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

.recommendation-list{
  flex-wrap: wrap;
  .book-item {
    margin-bottom: 16px;
  }
}
</style>