Mini_Program/pages/more-books/more-books.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">{{ pageTitle }}</text>
			<view class="placeholder"></view>
		</view>
		
		<!-- 分隔线 -->
		<view class="divider"></view>
		
		<!-- 书籍列表 -->
		<scroll-view class="scroll-content" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
			<!-- 加载中 -->
			<view class="loading-container" v-if="isLoading && bookList.length === 0">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 书籍列表 -->
			<view class="book-list" v-else-if="bookList.length > 0">
				<view 
					class="book-item" 
					v-for="(book, index) in bookList" 
					:key="book.id || index"
					@click="goToBookDetail(book)"
				>
					<image 
						class="book-cover" 
						:src="book.image || book.cover" 
						mode="aspectFill"
						:lazy-load="true"
						@error="handleImageError(index)"
					></image>
					<view class="book-info">
						<text class="book-title">{{ book.title }}</text>
						<text class="book-author">{{ book.author || '未知作者' }}</text>
						<text class="book-desc" v-if="book.desc || book.brief">{{ (book.desc || book.brief).substring(0, 50) }}...</text>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-container" v-else>
				<text class="empty-text">暂无书籍数据</text>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="hasMore && bookList.length > 0">
				<text class="load-more-text">加载中...</text>
			</view>
			<view class="load-more" v-else-if="!hasMore && bookList.length > 0">
				<text class="load-more-text">没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getBooks, getAllBooks, getRankingBooks, getPopularBooks, getNewBooks, getVipBooks, getTodayRecommend, getBestsellers, getFeaturedList, getMoreRecommend } from '../../utils/api.js'
	
	export default {
		data() {
			return {
				type: '', // 类型：today, bestseller, featured, category等
				categoryId: null, // 分类ID
				categoryName: '', // 分类名称
				pageTitle: '更多书籍',
				bookList: [],
				isLoading: false,
				hasMore: true,
				page: 1,
				pageSize: 20
			}
		},
		onLoad(options) {
			console.log('more-books页面加载，参数:', options);
			
			// 获取页面参数
		if (options && options.type) {
				this.type = options.type;
			}
		if (options && options.categoryId) {
			this.categoryId = parseInt(options.categoryId);
			}
		if (options && options.categoryName) {
			try {
				this.categoryName = decodeURIComponent(options.categoryName);
			} catch(e) {
				this.categoryName = options.categoryName;
			}
			}
			
			// 设置页面标题
			this.setPageTitle();
			
			// 加载数据
			this.loadBooks();
		},
	onShow() {
		// 返回页面后，如首屏无数据则重新拉取，避免白屏
		if (!this.bookList || this.bookList.length === 0) {
			this.page = 1
			this.hasMore = true
			this.loadBooks()
		}
	},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			setPageTitle() {
				if (this.categoryName) {
					this.pageTitle = this.categoryName;
				} else {
					const titleMap = {
						'today': '今日推荐',
						'bestseller': '畅销书籍',
						'featured': '精品书单',
						'ranking': '排行榜',
						'popular': '热门书籍',
						'new': '新书榜',
						'vip': 'VIP书籍',
						'category': '分类书籍',
						'all': '全部分类'
					};
					this.pageTitle = titleMap[this.type] || '更多书籍';
				}
			},
			loadBooks() {
				if (this.isLoading) return;
				
				console.log('开始加载书籍，类型:', this.type, '分类ID:', this.categoryId, '页码:', this.page);
				this.isLoading = true;
				
				let promise;
				
				if (this.type === 'all') {
					// 全部分类：显示所有书籍
					promise = getAllBooks(this.page, this.pageSize);
				} else if (this.type === 'category' && this.categoryId) {
					// 分类筛选：显示指定分类的书籍
					promise = getBooks({
						page: this.page,
						size: this.pageSize,
						categoryId: this.categoryId,
						status: 1
					});
				} else if (this.type === 'today') {
					// 今日推荐
					promise = getTodayRecommend(this.pageSize * this.page);
				} else if (this.type === 'bestseller') {
					// 畅销书籍
					promise = getBestsellers(this.pageSize * this.page);
				} else if (this.type === 'featured') {
					// 精品书单
					promise = getFeaturedList(this.pageSize * this.page);
				} else if (this.type === 'ranking') {
					// 排行榜
					promise = getRankingBooks(this.pageSize * this.page);
				} else if (this.type === 'popular') {
					// 热门书籍
					promise = getPopularBooks(this.pageSize * this.page);
				} else if (this.type === 'new') {
					// 新书榜
					promise = getNewBooks(this.pageSize * this.page);
				} else if (this.type === 'vip') {
					// VIP书籍
					promise = getVipBooks(this.page, this.pageSize);
				} else {
					// 默认：全部书籍
					promise = getAllBooks(this.page, this.pageSize);
				}
				
				promise
					.then((res) => {
						console.log('书籍列表API响应:', res);
						this.isLoading = false;
						
						if (res && (res.code === 200 || res.success === true)) {
							let newBooks = [];
							
							if (this.type === 'vip' || this.type === 'category' || this.type === 'all' || this.type === '' || !this.type) {
								// 分页接口，返回的是PageResult
								const pageData = res && res.data ? res.data : null
								if (pageData && Array.isArray(pageData.list)) {
									newBooks = pageData.list;
									this.hasMore = pageData.list.length >= this.pageSize && (this.page * this.pageSize < (pageData.total || 0));
								} else if (Array.isArray(pageData)) {
									newBooks = pageData;
									this.hasMore = newBooks.length >= this.pageSize;
								}
							} else {
								// 列表接口，返回的是数组
								if (res && Array.isArray(res.data)) {
									// 对于非分页接口，需要手动处理分页
									const start = (this.page - 1) * this.pageSize;
									const end = start + this.pageSize;
									newBooks = res.data.slice(start, end);
									this.hasMore = end < res.data.length;
								}
							}
							
							if (newBooks.length > 0) {
								// 处理数据格式
								const formattedBooks = newBooks.map((book) => {
									return {
										id: book.id,
										title: book.title || '未知书名',
										author: book.author || '',
										image: book.image || book.cover || 'https://picsum.photos/seed/book' + book.id + '/200/300',
										cover: book.cover || book.image,
										desc: book.desc,
										brief: book.brief,
										introduction: book.introduction
									};
								});
								
								if (this.page === 1) {
									this.bookList = formattedBooks;
								} else {
									this.bookList = [...this.bookList, ...formattedBooks];
								}
								
								console.log('书籍列表加载成功，当前共', this.bookList.length, '本');
							} else {
								if (this.page === 1) {
									this.bookList = [];
								}
								this.hasMore = false;
							}
						} else {
							console.warn('书籍列表API返回错误:', res);
							if (this.page === 1) {
								this.bookList = [];
							}
							uni.showToast({
								title: (res && (res.message || res.msg)) ? (res.message || res.msg) : '获取书籍列表失败',
								icon: 'none',
								duration: 2000
							});
						}
					})
					.catch((err) => {
						this.isLoading = false;
						console.error('获取书籍列表失败:', err);
						if (this.page === 1) {
							this.bookList = [];
						}
						uni.showToast({
							title: (err && err.message) ? err.message : '网络请求失败，请检查后端服务',
							icon: 'none',
							duration: 3000
						});
					});
			},
			loadMore() {
				if (this.hasMore && !this.isLoading) {
					this.page++;
					this.loadBooks();
				}
			},
			goToBookDetail(book) {
				if (!book || !book.id) {
					uni.showToast({
						title: '书籍信息不完整',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/book-detail/book-detail?bookId=${book.id}`
				});
			},
			handleImageError(index) {
				// 图片加载失败时使用备用图片
				if (this.bookList[index]) {
					this.bookList[index].image = 'https://picsum.photos/seed/fallback' + index + '/200/300';
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}
	
	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #000000;
		font-weight: bold;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	/* 分隔线 */
	.divider {
		width: 100%;
		height: 1rpx;
		background-color: #E5E5E5;
	}
	
	/* 滚动内容 */
	.scroll-content {
		flex: 1;
		width: 100%;
		height: 0;
		overflow: hidden;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	
	/* 书籍列表 */
	.book-list {
		display: flex;
		flex-direction: column;
	}
	
	/* 书籍项 */
	.book-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.book-item:last-child {
		border-bottom: none;
	}
	
	/* 书籍封面 */
	.book-cover {
		width: 120rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		background-color: #E0E0E0;
	}
	
	/* 书籍信息 */
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
	}
	
	.book-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.book-author {
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.book-desc {
		font-size: 24rpx;
		color: #666666;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	/* 加载中 */
	.loading-container {
		width: 100%;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loading-text {
		font-size: 28rpx;
		color: #999999;
	}
	
	/* 空状态 */
	.empty-container {
		width: 100%;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
	
	/* 加载更多 */
	.load-more {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.load-more-text {
		font-size: 28rpx;
		color: #999999;
	}
</style>