Mini_Program/pages/new-books/new-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">新书榜</text>
			<view class="search-btn" @click="goToSearch">
				<text class="search-icon">🔍</text>
			</view>
		</view>
		
		<!-- 书籍列表 -->
		<scroll-view class="book-list-container" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
			<view 
				class="book-item" 
				v-for="(book, index) in bookList" 
				:key="book.id || index"
				@click="goToBookDetail(book)"
			>
				<image 
					class="book-cover" 
					:src="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-desc">{{ book.desc }}</text>
					<text class="book-author">{{ book.author }}</text>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="hasMore">
				<text class="load-more-text">加载中...</text>
			</view>
			<view class="load-more" v-else-if="bookList.length > 0">
				<text class="load-more-text">没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			// 生成书籍封面图片的函数
			const getBookImage = (seed) => {
				return `https://picsum.photos/seed/${seed}/200/300`;
			};
			
			return {
				hasMore: true,
				page: 1,
				bookList: [
					{
						id: 1,
						title: '互联网心理学',
						author: '雷雳',
						desc: '当连接万物的互联网遇见无处不在的心理学,我们需要用心理学的方式,重新思考互联网背后的人与社会。',
						cover: getBookImage('new-internet-psychology')
					},
					{
						id: 2,
						title: '孝经 (中华经典诵读)',
						author: '孔子',
						desc: '以孔子与其弟子曾参之间问答的形式,将社会上各种阶层的人士,标示出其实践孝亲的法则与途径,阐述了「孝」的意义。',
						cover: getBookImage('new-xiaojing')
					},
					{
						id: 3,
						title: '自省',
						author: '约翰·班扬',
						desc: '讲述了敬虔之人和不敬虔之人截然相反的结局。本书就是他的细细品味,文风一如从前,朴实无华却又字字珠玑。',
						cover: getBookImage('new-self-reflection')
					},
					{
						id: 4,
						title: '人工智能的未来',
						author: '未知',
						desc: '探讨人工智能技术的最新发展和未来趋势，分析AI如何改变我们的生活和工作方式。',
						cover: getBookImage('new-ai')
					},
					{
						id: 5,
						title: '数字时代的阅读',
						author: '未知',
						desc: '分析数字阅读与传统阅读的差异，探讨如何在数字时代保持深度阅读的能力和习惯。',
						cover: getBookImage('new-digital-reading')
					},
					{
						id: 6,
						title: '量子物理入门',
						author: '未知',
						desc: '用通俗易懂的语言介绍量子物理的基本概念，帮助读者理解这个神秘而有趣的科学领域。',
						cover: getBookImage('new-quantum')
					},
					{
						id: 7,
						title: '全球气候变化',
						author: '未知',
						desc: '深入分析全球气候变化的成因、影响和应对措施，呼吁全社会关注环境保护。',
						cover: getBookImage('new-climate')
					},
					{
						id: 8,
						title: '现代艺术史',
						author: '未知',
						desc: '全面介绍从19世纪末到21世纪初的现代艺术发展历程，包括各种艺术流派和代表作品。',
						cover: getBookImage('new-art-history')
					}
				]
			}
		},
		onLoad() {
			// 页面加载时加载数据
			this.loadBookList();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			goToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			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].cover = `https://picsum.photos/seed/fallback${index}/200/300`;
				}
			},
			loadBookList() {
				// 加载新书列表
				// 这里可以调用API获取数据
			},
			loadMore() {
				// 滚动到底部加载更多
				if (this.hasMore) {
					setTimeout(() => {
						// 模拟加载更多数据
						const moreBooks = [
							{
								id: 9,
								title: '区块链技术原理',
								author: '未知',
								desc: '详细介绍区块链技术的基本原理、应用场景和发展前景，帮助读者理解这项革命性技术。',
								cover: `https://picsum.photos/seed/blockchain${this.page}/200/300`
							},
							{
								id: 10,
								title: '生物多样性保护',
								author: '未知',
								desc: '探讨生物多样性保护的重要性和方法，呼吁人类共同保护地球上的生命多样性。',
								cover: `https://picsum.photos/seed/biodiversity${this.page}/200/300`
							},
							{
								id: 11,
								title: '太空探索新纪元',
								author: '未知',
								desc: '介绍最新的太空探索技术和计划，展望人类探索宇宙的美好未来。',
								cover: `https://picsum.photos/seed/space${this.page}/200/300`
							},
							{
								id: 12,
								title: '数字化转型指南',
								author: '未知',
								desc: '为企业提供数字化转型的实用指南，帮助企业在数字时代保持竞争力。',
								cover: `https://picsum.photos/seed/digital-transform${this.page}/200/300`
							}
						];
						
						if (this.page < 3) {
							const newBooks = moreBooks.map((book, idx) => ({
								...book,
								id: book.id + this.page * 10
							}));
							this.bookList = [...this.bookList, ...newBooks];
							this.page++;
						} else {
							this.hasMore = false;
						}
					}, 500);
				}
			}
		}
	}
</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;
		border-bottom: 1rpx solid #E5E5E5;
	}
	
	.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%);
	}
	
	.search-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.search-icon {
		font-size: 36rpx;
		color: #000000;
	}
	
	/* 书籍列表容器 */
	.book-list-container {
		flex: 1;
		width: 100%;
		height: 0;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	
	/* 书籍项 */
	.book-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.book-item:last-child {
		border-bottom: none;
	}
	
	/* 书籍封面 */
	.book-cover {
		width: 160rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
		background-color: #F5F5F5;
	}
	
	/* 书籍信息 */
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-width: 0;
	}
	
	.book-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		margin-bottom: 16rpx;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.book-desc {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.book-author {
		font-size: 26rpx;
		color: #999999;
		margin-top: auto;
	}
	
	/* 加载更多 */
	.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>