Mini_Program/pages/book-detail/book-detail.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">{{ bookInfo.title }}</text>
			<view class="share-btn" @click="handleShare">
				<text class="share-icon">↗</text>
			</view>
		</view>
		
		<scroll-view class="scroll-content" scroll-y>
			<!-- 书籍头部信息 -->
			<view class="book-header" v-if="!isLoading">
				<view class="book-cover-wrapper">
					<image class="book-cover" :src="bookInfo.image || bookInfo.cover" mode="aspectFill"></image>
				</view>
				<view class="book-info">
					<text class="book-title">{{ bookInfo.title }}</text>
					<text class="book-brief" v-if="bookInfo.brief || bookInfo.desc">{{ bookInfo.brief || bookInfo.desc }}</text>
					<text class="book-author" v-if="bookInfo.author">{{ bookInfo.author }}</text>
					<text class="book-price" v-if="bookInfo.isFree">免费</text>
					<text class="book-price-paid" v-else-if="bookInfo.price">¥{{ bookInfo.price }}</text>
				</view>
			</view>
			
			<!-- 加载中 -->
			<view class="loading-section" v-if="isLoading">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 简介 -->
			<view class="section" v-if="bookInfo.introduction || bookInfo.desc || bookInfo.brief">
				<text class="section-title">简介</text>
				<text class="section-content">{{ bookInfo.introduction || bookInfo.desc || bookInfo.brief }}</text>
			</view>
			
			<!-- 书评 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">书评</text>
					<text class="write-review-btn" @click="handleWriteReview">写书评</text>
				</view>
				<view class="review-list">
					<view class="review-item" v-for="(review, index) in reviews" :key="index">
						<view class="review-header">
							<image class="review-avatar" :src="review.avatar" mode="aspectFill"></image>
							<view class="review-user-info">
								<text class="review-name">{{ review.name }}</text>
								<text class="review-tag" v-if="review.isRecommended">推荐</text>
							</view>
							<text class="review-date">{{ review.date }}</text>
							<view class="review-likes" @click="toggleLike(review, index)">
								<text class="like-icon">{{ review.isLiked ? '❤️' : '🤍' }}</text>
								<text class="like-count">{{ review.likes }}</text>
							</view>
						</view>
						<text class="review-content">{{ review.content }}</text>
					</view>
				</view>
				<view class="view-all-reviews" @click="viewAllReviews">
					<text class="view-all-text">查看全部书评</text>
				</view>
			</view>
			
			<!-- 更多推荐 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">更多推荐</text>
					<text class="section-more" @click="viewMoreRecommend">更多 ></text>
				</view>
				<view class="recommend-grid">
					<view class="recommend-item" v-for="(book, index) in recommendBooks" :key="index" @click="goToBookDetail(book)">
						<image class="recommend-cover" :src="book.image" mode="aspectFill" :lazy-load="true"></image>
						<text class="recommend-title">{{ book.title }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button 
				class="add-to-shelf-btn" 
				:class="{ 'in-shelf': isInShelf }"
				@click="handleAddToShelf"
				:disabled="isLoading"
			>
				{{ isInShelf ? '已在书架' : '加入书架' }}
			</button>
			<button class="read-btn" @click="handleRead">阅读</button>
		</view>
	</view>
</template>

<script>
	import { addToBookshelf, checkInBookshelf, getBookById, getMoreRecommend, recordBrowsingHistory, getComments, toggleCommentLike } from '../../utils/api.js'
	
	export default {
		data() {
			return {
				bookInfo: {
					id: null,
					title: '',
					image: '',
					cover: '',
					brief: '',
					desc: '',
					author: '',
					isFree: false,
					price: 0,
					introduction: ''
				},
				isLoading: false,
				userInfo: null,
				isInShelf: false,
				reviews: [],
				recommendBooks: []
			}
		},
		onLoad(options) {
			// 获取用户信息
			try {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.id) {
					this.userInfo = userInfo
				}
			} catch (e) {
				console.error('获取用户信息失败', e)
			}
			
			// 从路由参数获取bookId
			if (options.bookId) {
				this.bookInfo.id = parseInt(options.bookId)
				// 加载书籍详情
				this.loadBookDetail(this.bookInfo.id)
			} else if (options.title) {
				// 兼容旧的参数方式，但优先从数据库加载
				this.bookInfo.title = decodeURIComponent(options.title)
				if (options.image) {
					this.bookInfo.image = decodeURIComponent(options.image)
				}
				if (options.author) {
					this.bookInfo.author = decodeURIComponent(options.author)
				}
				// 如果有bookId，从数据库加载
				if (options.bookId) {
					this.bookInfo.id = parseInt(options.bookId)
					this.loadBookDetail(this.bookInfo.id)
				}
			}
		},
		onShow() {
			// 页面显示时重新获取用户信息
			try {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.id) {
					this.userInfo = userInfo
					// 重新检查书架状态
					if (this.bookInfo.id) {
						this.checkBookshelfStatus(userInfo.id, this.bookInfo.id)
						// 重新加载评论（更新点赞状态）
						this.loadComments(this.bookInfo.id)
					}
				}
			} catch (e) {
				console.error('获取用户信息失败', e)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			handleShare() {
				uni.showToast({
					title: '分享功能',
					icon: 'none'
				})
			},
			async loadBookDetail(bookId) {
				if (!bookId) {
					uni.showToast({
						title: '书籍ID不能为空',
						icon: 'none'
					})
					return
				}
				
				try {
					this.isLoading = true
					uni.showLoading({
						title: '加载中...',
						mask: false
					})
					
					// 传递userId参数用于VIP权限检查
					const userId = this.userInfo && this.userInfo.id ? this.userInfo.id : null
					const res = await getBookById(bookId, userId)
					
					if (res && res.code === 200 && res.data) {
						const book = res.data
						// 更新书籍信息
						this.bookInfo = {
							id: book.id,
							title: book.title || '',
							image: book.image || book.cover || '',
							cover: book.cover || book.image || '',
							brief: book.brief || '',
							desc: book.desc || book.brief || '',
							author: book.author || '',
							isFree: book.isFree || false,
							price: book.price || 0,
							introduction: book.introduction || book.desc || book.brief || ''
						}
						
						// 如果简介为空，使用描述作为简介
						if (!this.bookInfo.brief && this.bookInfo.desc) {
							this.bookInfo.brief = this.bookInfo.desc
						}
						
						// 如果详细介绍为空，使用描述或简介作为详细介绍
						if (!this.bookInfo.introduction) {
							this.bookInfo.introduction = this.bookInfo.desc || this.bookInfo.brief || ''
						}
						
						// 检查书架状态
						if (this.userInfo && this.userInfo.id) {
							this.checkBookshelfStatus(this.userInfo.id, bookId)
						}
						
					// 加载推荐书籍
					this.loadRecommendBooks()
					
					// 记录浏览历史
					if (this.userInfo && this.userInfo.id) {
						this.recordBrowsingHistory(this.userInfo.id, bookId)
					}
					
					// 加载评论列表
					this.loadComments(bookId)
				} else {
						uni.showToast({
							title: res.message || '加载失败',
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('加载书籍详情失败:', e)
					uni.showToast({
						title: e.message || '加载失败，请重试',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},
			async loadRecommendBooks() {
				try {
					const res = await getMoreRecommend(6)
					if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
						// 过滤掉当前书籍
						this.recommendBooks = res.data
							.filter(book => book.id !== this.bookInfo.id)
							.slice(0, 6)
							.map(book => ({
								id: book.id,
								title: book.title || '',
								image: book.image || book.cover || ''
							}))
					}
				} catch (e) {
					console.error('加载推荐书籍失败:', e)
					// 不显示错误提示，因为这是非关键功能
				}
			},
			handleWriteReview() {
				uni.navigateTo({
					url: `/pages/write-review/write-review?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}`
				})
			},
			async toggleLike(review, index) {
				if (!this.userInfo || !this.userInfo.id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				
				try {
					const res = await toggleCommentLike(this.userInfo.id, review.id)
					
					if (res && res.code === 200) {
						// 更新本地状态
						this.reviews[index].isLiked = res.data
						if (res.data) {
							this.reviews[index].likes++
						} else {
							this.reviews[index].likes--
						}
					} else {
						uni.showToast({
							title: res.message || '操作失败',
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('点赞失败', e)
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none'
					})
				}
			},
			async loadComments(bookId) {
				if (!bookId) {
					return
				}
				
				try {
					const userId = this.userInfo && this.userInfo.id ? this.userInfo.id : null
					const res = await getComments(bookId, userId)
					
					if (res && res.code === 200 && res.data) {
						this.reviews = res.data.map(item => ({
							id: item.id,
							name: item.name || '匿名用户',
							avatar: item.avatar || 'https://via.placeholder.com/100x100?text=User',
							isRecommended: item.isRecommended || false,
							date: item.date || '',
							likes: item.likes || 0,
							isLiked: item.isLiked || false,
							content: item.content || ''
						}))
					}
				} catch (e) {
					console.error('加载评论失败', e)
					// 不显示错误提示，因为评论是非关键功能
				}
			},
			async recordBrowsingHistory(userId, bookId) {
				if (!userId || !bookId) {
					return
				}
				
				try {
					await recordBrowsingHistory(userId, bookId)
				} catch (e) {
					console.error('记录浏览历史失败', e)
					// 不显示错误提示，因为这是后台操作
				}
			},
			viewAllReviews() {
				uni.showToast({
					title: '查看全部书评',
					icon: 'none'
				})
			},
			viewMoreRecommend() {
				uni.showToast({
					title: '查看更多推荐',
					icon: 'none'
				})
			},
			goToBookDetail(book) {
				if (!book || !book.id) {
					uni.showToast({
						title: '书籍信息不完整',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/book-detail/book-detail?bookId=${book.id}`
				})
			},
			// 检查书架状态
			checkBookshelfStatus(userId, bookId) {
				if (!userId || !bookId) {
					return
				}
				
				checkInBookshelf(userId, bookId)
					.then((res) => {
						if (res.code === 200 && res.data !== undefined) {
							this.isInShelf = res.data
						}
					})
					.catch((err) => {
						console.error('检查书架状态失败', err)
					})
			},
			handleAddToShelf() {
				// 检查用户是否登录
				if (!this.userInfo || !this.userInfo.id) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
					return
				}
				
				// 检查是否已在书架中
				if (this.isInShelf) {
					uni.showToast({
						title: '已在书架中',
						icon: 'none'
					})
					return
				}
				
				// 检查书籍ID
				if (!this.bookInfo.id) {
					uni.showToast({
						title: '书籍信息不完整',
						icon: 'none'
					})
					return
				}
				
				// 防止重复提交
				if (this.isLoading) {
					return
				}
				
				this.isLoading = true
				uni.showLoading({
					title: '加入中...',
					mask: true
				})
				
				// 调用后端接口
				addToBookshelf(this.userInfo.id, this.bookInfo.id)
					.then((res) => {
						uni.hideLoading()
						this.isLoading = false
						
						if (res.code === 200) {
							this.isInShelf = true
							uni.showToast({
								title: '已加入书架',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: res.message || '加入失败',
								icon: 'none'
							})
						}
					})
					.catch((err) => {
						uni.hideLoading()
						this.isLoading = false
						
						console.error('加入书架失败:', err)
						uni.showToast({
							title: err.message || '加入失败，请检查网络连接',
							icon: 'none',
							duration: 2000
						})
					})
			},
			handleRead() {
				// 跳转到书籍封面页
				uni.navigateTo({
					url: `/pages/book-cover/book-cover?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}&image=${encodeURIComponent(this.bookInfo.image)}&author=${encodeURIComponent(this.bookInfo.author)}`
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E0E0E0;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.share-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.share-icon {
		font-size: 36rpx;
		color: #333333;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
		padding-bottom: 120rpx;
	}
	
	.loading-section {
		padding: 100rpx 30rpx;
		text-align: center;
	}
	
	.loading-text {
		font-size: 28rpx;
		color: #999999;
	}
	
	.book-header {
		display: flex;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.book-cover-wrapper {
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	
	.book-cover {
		width: 180rpx;
		height: 250rpx;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
		background-color: #F5F5F5;
	}
	
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.book-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.book-brief {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}
	
	.book-author {
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}
	
	.book-price {
		font-size: 32rpx;
		color: #FF5722;
		font-weight: bold;
		margin-top: 10rpx;
	}
	
	.book-price-paid {
		font-size: 32rpx;
		color: #FF5722;
		font-weight: bold;
	}
	
	.section {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.section-content {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.8;
		display: block;
	}
	
	.write-review-btn {
		font-size: 26rpx;
		color: #999999;
		padding: 8rpx 20rpx;
		background-color: #F5F5F5;
		border-radius: 30rpx;
	}
	
	.review-list {
		display: flex;
		flex-direction: column;
	}
	
	.review-item {
		margin-bottom: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.review-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.review-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #F5F5F5;
	}
	
	.review-user-info {
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.review-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-right: 15rpx;
	}
	
	.review-tag {
		font-size: 20rpx;
		color: #4CAF50;
		background-color: #E8F5E9;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}
	
	.review-date {
		font-size: 24rpx;
		color: #999999;
		margin-right: 20rpx;
	}
	
	.review-likes {
		display: flex;
		align-items: center;
	}
	
	.like-icon {
		font-size: 28rpx;
		margin-right: 8rpx;
	}
	
	.like-count {
		font-size: 24rpx;
		color: #999999;
	}
	
	.review-content {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.8;
		display: block;
	}
	
	.view-all-reviews {
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #F5F5F5;
		border-radius: 8rpx;
		text-align: center;
	}
	
	.view-all-text {
		font-size: 28rpx;
		color: #333333;
	}
	
	.section-more {
		font-size: 26rpx;
		color: #999999;
	}
	
	.recommend-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.recommend-item {
		width: 160rpx;
		margin-bottom: 30rpx;
	}
	
	.recommend-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;
	}
	
	.recommend-title {
		font-size: 24rpx;
		color: #333333;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #E0E0E0;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}
	
	.add-to-shelf-btn {
		flex: 1;
		height: 88rpx;
		background-color: #FFFFFF;
		color: #333333;
		font-size: 32rpx;
		border: 1rpx solid #E0E0E0;
		border-radius: 44rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.add-to-shelf-btn.in-shelf {
		background-color: #F5F5F5;
		color: #999999;
		border-color: #E0E0E0;
	}
	
	.add-to-shelf-btn[disabled] {
		opacity: 0.6;
	}
	
	.read-btn {
		flex: 1;
		height: 88rpx;
		background-color: #4FC3F7;
		color: #FFFFFF;
		font-size: 32rpx;
		border: none;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>