Mini_Program/pages/vip-books/vip-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">VIP书籍</text>
			<view class="search-btn" @click="goToSearch">
				<text class="search-icon">🔍</text>
			</view>
		</view>
		
		<!-- VIP提示横幅 -->
		<view class="vip-banner" @click="goToVip">
			<text class="vip-banner-text">开通VIP，畅享海量精品书籍</text>
			<text class="vip-banner-arrow">→</text>
		</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)"
			>
				<view class="vip-badge" v-if="book.isVip">
					<text class="vip-badge-text">VIP</text>
				</view>
				<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('vip-internet-psychology'),
						isVip: true
					},
					{
						id: 2,
						title: '孝经 (中华经典诵读)',
						author: '孔子',
						desc: '以孔子与其弟子曾参之间问答的形式,将社会上各种阶层的人士,标示出其实践孝亲的法则与途径,阐述了「孝」的意义。',
						cover: getBookImage('vip-xiaojing'),
						isVip: true
					},
					{
						id: 3,
						title: '自省',
						author: '约翰·班扬',
						desc: '讲述了敬虔之人和不敬虔之人截然相反的结局。本书就是他的细细品味,文风一如从前,朴实无华却又字字珠玑。',
						cover: getBookImage('vip-self-reflection'),
						isVip: true
					},
					{
						id: 4,
						title: '思维的艺术',
						author: '延斯·森特根',
						desc: '一本关于思维方式和哲学思考的经典之作，帮助读者提升逻辑思维和批判性思考能力。',
						cover: getBookImage('vip-thinking-art'),
						isVip: true
					},
					{
						id: 5,
						title: '传习录:全译全注',
						author: '王阳明',
						desc: '王阳明心学的核心著作，记录了其与学生之间的对话，阐述了知行合一的哲学思想。',
						cover: getBookImage('vip-chuanxilu'),
						isVip: true
					},
					{
						id: 6,
						title: '社会契约论',
						author: '让·雅克·卢梭',
						desc: '探讨了政治权力的合法性和人民主权的基本原则，是现代民主理论的重要基石。',
						cover: getBookImage('vip-social-contract'),
						isVip: true
					},
					{
						id: 7,
						title: '没有烦恼的世界',
						author: '王觉仁',
						desc: '通过禅修和正念的实践，帮助读者摆脱内心的烦恼，获得内心的平静与智慧。',
						cover: getBookImage('vip-no-worries'),
						isVip: true
					},
					{
						id: 8,
						title: '透过电影看文化',
						author: '陈红',
						desc: '从电影的角度分析不同文化的特点，探讨电影如何反映和影响社会文化的发展。',
						cover: getBookImage('vip-film-culture'),
						isVip: true
					}
				]
			}
		},
		onLoad() {
			// 页面加载时加载数据
			this.loadBookList();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			goToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			goToVip() {
				uni.navigateTo({
					url: '/pages/vip/vip'
				});
			},
			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() {
				// 加载VIP书籍列表
				// 这里可以调用API获取数据
			},
			loadMore() {
				// 滚动到底部加载更多
				if (this.hasMore) {
					setTimeout(() => {
						// 模拟加载更多数据
						const moreBooks = [
							{
								id: 9,
								title: '车尔尼钢琴流畅练习曲',
								author: '高新颜',
								desc: '经典的钢琴练习曲集，适合中级钢琴学习者，帮助提升演奏技巧和流畅度。',
								cover: `https://picsum.photos/seed/vip-czerny${this.page}/200/300`,
								isVip: true
							},
							{
								id: 10,
								title: '古典哲学的趣味',
								author: '朱利安·巴吉尼',
								desc: '用通俗易懂的方式介绍古典哲学的核心思想，让哲学变得生动有趣。',
								cover: `https://picsum.photos/seed/vip-philosophy${this.page}/200/300`,
								isVip: true
							},
							{
								id: 11,
								title: '走向大洋',
								author: '未知',
								desc: '一部关于海洋探索和人类文明发展的历史著作，展现了人类对未知世界的探索精神。',
								cover: `https://picsum.photos/seed/vip-ocean${this.page}/200/300`,
								isVip: true
							},
							{
								id: 12,
								title: '思维的艺术',
								author: '延斯·森特根',
								desc: '一本关于思维方式和哲学思考的经典之作，帮助读者提升逻辑思维和批判性思考能力。',
								cover: `https://picsum.photos/seed/vip-thinking-art2${this.page}/200/300`,
								isVip: true
							}
						];
						
						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;
	}
	
	/* VIP横幅 */
	.vip-banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
	}
	
	.vip-banner-text {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	.vip-banner-arrow {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	/* 书籍列表容器 */
	.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;
		position: relative;
	}
	
	.book-item:last-child {
		border-bottom: none;
	}
	
	/* VIP徽章 */
	.vip-badge {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		width: 80rpx;
		height: 40rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.vip-badge-text {
		font-size: 20rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	/* 书籍封面 */
	.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>