Mini_Program/pages/bookshelf/bookshelf.vue

<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" placeholder="搜索书架" />
			<text class="search-icon">🔍</text>
		</view>
		
		<scroll-view class="scroll-content" scroll-y>
		<!-- 我的书架 -->
		<view class="section" v-if="userInfo">
			<view class="section-header">
				<text class="section-title">我的书架</text>
				<text class="book-count">共{{ allItems.length }}本</text>
			</view>
			
			<view class="book-grid" v-if="allItems.length > 0">
				<view class="book-item" v-for="(item, index) in allItems" :key="item.id || index" @click="goToDetail(item)">
					<image class="book-cover" :src="item.image" mode="aspectFill" :lazy-load="true"></image>
					<text class="book-name">{{ item.title }}</text>
					<text class="book-progress" v-if="item.type === 'book'">{{ item.progress }}%</text>
					<text class="book-progress" v-else-if="item.type === 'audiobook'">{{ item.progressText || '继续收听' }}</text>
					<view class="type-badge" v-if="item.type === 'audiobook'">
						<text class="type-badge-text">听书</text>
					</view>
				</view>
			</view>
			<view class="empty-state" v-else>
				<text class="empty-text">书架空空如也，快去添加书籍吧~</text>
			</view>
		</view>
		
		<!-- 最近阅读/收听 -->
		<view class="section" v-if="userInfo && recentItems.length > 0">
			<view class="section-header">
				<text class="section-title">最近阅读</text>
			</view>
			<view class="book-list">
				<view class="book-list-item" v-for="(item, index) in recentItems" :key="item.id || index" @click="goToDetail(item)">
					<image class="book-cover-small" :src="item.image" mode="aspectFill" :lazy-load="true"></image>
					<view class="book-info">
						<view class="book-title-row">
							<text class="book-title">{{ item.title }}</text>
							<text class="type-tag" v-if="item.type === 'audiobook'">听书</text>
						</view>
						<text class="book-author">{{ item.author }}</text>
						<text class="book-progress-text" v-if="item.type === 'book'">阅读进度：{{ item.progress }}%</text>
						<text class="book-progress-text" v-else-if="item.type === 'audiobook'">{{ item.progressText || '继续收听' }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 未登录提示 -->
		<view class="empty-state" v-if="!userInfo">
			<text class="empty-text">请先登录查看书架</text>
			<button class="login-btn" @click="goToLogin">去登录</button>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getBookshelfList, getAudiobookBookshelfList } from '../../utils/api.js'
	
	export default {
		data() {
			return {
				books: [],
				audiobooks: [],
				allItems: [],
				recentItems: [],
				userInfo: null,
				isLoading: false
			}
		},
		onLoad() {
			// 获取用户信息
			this.loadUserInfo()
		},
		onShow() {
			// 页面显示时重新加载数据
			this.loadUserInfo()
		},
		methods: {
			loadUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo')
					const isLogin = uni.getStorageSync('isLogin')
					
					if (userInfo && userInfo.id && isLogin) {
						this.userInfo = userInfo
						this.loadBookshelfList()
					} else {
						// 未登录，清空数据
						this.books = []
						this.audiobooks = []
						this.allItems = []
						this.recentItems = []
						this.userInfo = null
					}
				} catch (e) {
					console.error('获取用户信息失败', e)
					this.books = []
					this.audiobooks = []
					this.allItems = []
					this.recentItems = []
					this.userInfo = null
				}
			},
			async loadBookshelfList() {
				if (!this.userInfo || !this.userInfo.id) {
					return
				}
				
				this.isLoading = true
				uni.showLoading({
					title: '加载中...',
					mask: false
				})
				
				try {
					// 同时加载书籍书架和听书书架
					const [bookRes, audiobookRes] = await Promise.all([
						getBookshelfList(this.userInfo.id).catch(err => {
							console.error('获取书籍书架失败:', err)
							return { code: 200, data: [] }
						}),
						getAudiobookBookshelfList(this.userInfo.id).catch(err => {
							console.error('获取听书书架失败:', err)
							return { code: 200, data: [] }
						})
					])
					
					uni.hideLoading()
					this.isLoading = false
					
					// 处理书籍数据
					if (bookRes.code === 200 && bookRes.data) {
						this.books = bookRes.data.map((item) => {
							const book = item.book || {}
							return {
								id: book.id || item.bookId,
								title: book.title || '未知书籍',
								author: book.author || '',
								image: book.image || book.cover || 'https://picsum.photos/seed/default/200/300',
								progress: item.readProgress || 0,
								type: 'book',
								lastReadTime: item.lastReadTime,
								addedAt: item.addedAt
							}
						})
					} else {
						this.books = []
					}
					
					// 处理听书数据
					if (audiobookRes.code === 200 && audiobookRes.data) {
						this.audiobooks = audiobookRes.data.map((item) => {
							const audiobook = item.audiobook || {}
							return {
								id: audiobook.id || item.audiobookId,
								title: audiobook.title || '未知听书',
								author: audiobook.author || '',
								narrator: audiobook.narrator || '',
								image: audiobook.image || audiobook.cover || 'https://picsum.photos/seed/default/200/300',
								progress: 0,
								progressText: item.lastListenedChapterId ? '继续收听' : '开始收听',
								type: 'audiobook',
								lastListenedChapterId: item.lastListenedChapterId,
								lastListenedPosition: item.lastListenedPosition,
								addedAt: item.addedAt,
								updatedAt: item.updatedAt
							}
						})
					} else {
						this.audiobooks = []
					}
					
					// 合并所有项目，按添加时间排序（最新的在前）
					this.allItems = [...this.books, ...this.audiobooks].sort((a, b) => {
						const timeA = a.addedAt ? new Date(a.addedAt).getTime() : 0
						const timeB = b.addedAt ? new Date(b.addedAt).getTime() : 0
						return timeB - timeA
					})
					
					// 最近阅读/收听（按最后阅读/收听时间排序，取前3本）
					this.recentItems = [...this.books, ...this.audiobooks]
						.filter((item) => {
							if (item.type === 'book') {
								return item.lastReadTime != null
							} else if (item.type === 'audiobook') {
								return item.lastListenedChapterId != null || item.updatedAt != null
							}
							return false
						})
						.sort((a, b) => {
							let timeA = 0
							let timeB = 0
							
							if (a.type === 'book' && a.lastReadTime) {
								timeA = new Date(a.lastReadTime).getTime()
							} else if (a.type === 'audiobook' && a.updatedAt) {
								timeA = new Date(a.updatedAt).getTime()
							}
							
							if (b.type === 'book' && b.lastReadTime) {
								timeB = new Date(b.lastReadTime).getTime()
							} else if (b.type === 'audiobook' && b.updatedAt) {
								timeB = new Date(b.updatedAt).getTime()
							}
							
							return timeB - timeA
						})
						.slice(0, 3)
					
				} catch (err) {
					uni.hideLoading()
					this.isLoading = false
					
					console.error('获取书架列表失败:', err)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
					this.books = []
					this.audiobooks = []
					this.allItems = []
					this.recentItems = []
				}
			},
			goToDetail(item) {
				if (!item || !item.id) {
					uni.showToast({
						title: '信息不完整',
						icon: 'none'
					})
					return
				}
				
				if (item.type === 'book') {
					// 跳转到书籍详情页
					if (!item.id) {
						uni.showToast({
							title: '书籍信息不完整',
							icon: 'none'
						})
						return
					}
					uni.navigateTo({
						url: `/pages/book-detail/book-detail?bookId=${item.id}`
					})
				} else if (item.type === 'audiobook') {
					// 跳转到听书详情页
					if (!item.id) {
						uni.showToast({
							title: '听书信息不完整',
							icon: 'none'
						})
						return
					}
					uni.navigateTo({
						url: `/pages/listen-detail/listen-detail?audiobookId=${item.id}`
					})
				}
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 60px;
		box-sizing: border-box;
	}
	
	.search-bar {
		position: relative;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
	}
	
	.search-input {
		width: 100%;
		height: 70rpx;
		background-color: #F5F5F5;
		border-radius: 35rpx;
		padding: 0 80rpx 0 30rpx;
		font-size: 28rpx;
		color: #333333;
	}
	
	.search-icon {
		position: absolute;
		right: 50rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
		padding-bottom: 20rpx;
	}
	
	.section {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.book-count {
		font-size: 28rpx;
		color: #999999;
	}
	
	.book-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.book-item {
		width: 160rpx;
		margin-bottom: 30rpx;
	}
	
	.book-cover {
		width: 160rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-bottom: 15rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		background-color: #F5F5F5;
	}
	
	.book-name {
		font-size: 24rpx;
		color: #333333;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 8rpx;
	}
	
	.book-progress {
		font-size: 22rpx;
		color: #4FC3F7;
	}
	
	.book-item {
		position: relative;
	}
	
	.type-badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		background-color: rgba(79, 195, 247, 0.9);
		border-radius: 8rpx;
		padding: 4rpx 12rpx;
	}
	
	.type-badge-text {
		font-size: 20rpx;
		color: #FFFFFF;
	}
	
	.book-list {
		display: flex;
		flex-direction: column;
	}
	
	.book-list-item {
		display: flex;
		margin-bottom: 30rpx;
	}
	
	.book-cover-small {
		width: 120rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		background-color: #F5F5F5;
	}
	
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.book-title-row {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.book-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-right: 15rpx;
		flex: 1;
	}
	
	.type-tag {
		font-size: 22rpx;
		color: #4FC3F7;
		background-color: #E3F2FD;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
	
	.book-author {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 15rpx;
	}
	
	.book-progress-text {
		font-size: 24rpx;
		color: #4FC3F7;
	}
	
	.empty-state {
		padding: 100rpx 30rpx;
		text-align: center;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
		display: block;
		margin-bottom: 40rpx;
	}
	
	.login-btn {
		width: 200rpx;
		height: 80rpx;
		background-color: #4FC3F7;
		color: #FFFFFF;
		font-size: 30rpx;
		border: none;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
</style>