novel-front-app/pages_order/novel/novelDetail.vue

<template>
	<!-- 小说详情页面 -->
	<view class="novel-detail">
		<navbar title="小说详情" leftClick @leftClick="$utils.navigateBack" />

		<!-- 小说基本信息 -->
		<view class="novel-info">
			<view class="novel-cover">
				<image :src="novelData.image &&
				novelData.image.split(',')[0]" mode="aspectFill"></image>
			</view>
			<view class="novel-basic">
				<text class="title">{{ novelData.name }}</text>
				<view class="author-line">
					<text class="label">作者：</text>
					<text class="author">{{ novelData.author }}</text>
				</view>
				<!-- <view class="status-line">
					<text class="label">完结：</text>
					<text class="status">{{ novelData.status }}</text>
				</view> -->
				
				<view class="content-row">
				    <view class="book-status">
				        <text>{{novelData.status}}</text>
				    </view>
				    <view class="book-text">
				        {{ novelData.service }}
				    </view>
				</view>
				
				<view class="score-line">
					<text class="score">{{ novelData.qmNum || 0}}</text>
					<text class="score-label">作者累计亲密度值</text>
				</view>
			</view>
		</view>

		<!-- 推荐票数显示 -->
		<view class="recommendation-section">
			<view class="rec-left">
				<text class="rec-count">{{ novelData.tuiNum }}</text>
				<text class="rec-label">推荐票数</text>
			</view>
			<view class="rec-divider"></view>
			<view class="rec-right">
				<button class="recommend-btn" @click="$refs.novelVotePopup.open()">
					<text class="btn-icon">📑</text>
					投推荐票
				</button>
			</view>
		</view>

		<!-- 阅读和收藏按钮 -->


		<!-- 我的等级 -->
		<view class="user-level">
			<view class="level-left">
				<view class="level-title">
					<!-- <text class="title-icon">👑</text> -->

					<image style="width: 30rpx;height: 30rpx;" src="/pages_order/static/book/level.png"
						mode="aspectFill"></image>

					<text>我的等级</text>
				</view>
				<view class="level-info">
					<image class="user-avatar"
					src="/pages_order/static/book/dj.png"
					mode="aspectFill"></image>
					
					<view class="user-details">
						<text class="username">
							<image
							src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"
							mode="aspectFill"></image>
							
							<view class="name">
								周海
							</view>
							
						</text>
						<view class="user-score">
							<text class="score-value">6785452</text>
							<text class="score-label">亲密值</text>
						</view>
						<text class="user-role">护书使者 五级</text>
					</view>
				</view>
			</view>
			<view class="level-right">
				<view class="rank-btn">
					<image class="rank-icon" src="/pages_order/static/book/bd.png" mode="aspectFit"></image>
					<text class="check-text">点击查看</text>
				</view>
			</view>
		</view>

		<!-- 小说简介 -->
		<view class="novel-intro">
			<view class="intro-title">
				<text>简介：</text>
			</view>
			<view class="intro-content">
				{{ novelData.details }}
			</view>
		</view>

		<!-- 目录 -->
		<view class="novel-catalog" @click="$refs.chapterPopup.open()">
			<view class="catalog-header">
				<view class="catalog-title">
					<text class="title-icon">📖</text>
					<text>目录</text>
				</view>
				<view class="chapter-nav">
					<text class="current-chapter">第九集 - 高去与归来</text>
					<text class="nav-arrow">></text>
				</view>
			</view>
		</view>


		<!-- 书评区域 -->
		<view class="comments-section">
			<view class="comments-header">
				<view class="header-left">
					<text class="title-icon">📝</text>
					<text>书评</text>
				</view>
				<view class="header-right">
					<text @click="goToWriteReview">写书评</text>
				</view>
			</view>
			<view class="comment-list">
				<commentItem v-for="(item, index) in 10" :key="index" />
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="novel-bottom">
			<view class="bottom-left">
				<view class="action-btn" @click="addToBookshelf">
					<view class="btn-icon">
						<uv-icon
						name="grid"
						color="#999"
						size="60rpx"
						></uv-icon>
					</view>
					<text>加入书架</text>
				</view>
				<!-- <view class="action-btn" @click="goToGiftbox">
					<text class="btn-icon">🎁</text>
					<text>礼物盒</text>
				</view> -->
				<view class="action-btn" 
				@click="$utils.navigateTo(`/pages_order/novel/Giftbox?id=${novelData.id}`)">
					<view class="btn-icon">
						<uv-icon
						name="gift"
						color="#999"
						size="60rpx"
						></uv-icon>
					</view>
					<text>互动打赏</text>
				</view>
			</view>
			<view class="bottom-right">
				<button class="read-now-btn" @click="">立即阅读</button>
			</view>
		</view>
		
		<novelVotePopup ref="novelVotePopup"/>

		<chapterPopup ref="chapterPopup" />
	</view>
</template>

<script>
	import catalogpopup from '@/components/novel/CatalogPopup.vue'
	import chapterPopup from '../components/novel/chapterPopup.vue'
	import commentItem from '../components/comment/commentItem.vue'
	import novelVotePopup from '../components/novel/novelVotePopup.vue'
    import mixinsList from '@/mixins/list.js'
	export default {
        mixins: [mixinsList],
		components: {
			catalogpopup,
			chapterPopup,
			commentItem,
			novelVotePopup,
		},
		data() {
			return {
				novelData: {},
				isCollected: false,
				comments: [],
				currentIndex: 0,
				id : 0,
				bookLevel : {},
                mixinsListApi : 'getBookCommentList',
			}
		},
		computed: {
			userInfo() {
				return {
					avatar: '/static/images/avatar.jpg',
					level: '67级达人'
				}
			}
		},
		onLoad({id}) {
			this.id = id
			this.queryParams.id = id
			this.getDateil()
			this.getAchievement()
		},
		methods: {
			getDateil(){
				this.$fetch('getBookDetail', {
					id : this.id
				}).then(res => {
					this.novelData = res
				})
			},
			getAchievement(){
				this.$fetch('getAchievement', {
					id : this.id
				}).then(res => {
					this.bookLevel = res
				})
			},
			getBookCatalogList(){
				this.$fetch('getBookCatalogList', {
					id : this.id
				}).then(res => {
				})
			},
			toggleCollect() {
				this.isCollected = !this.isCollected
			},
			goToWriteReview() {
				uni.navigateTo({
					url: `/pages_order/novel/Review?title=${encodeURIComponent(this.novelData.title)}`
				})
			},
			addToBookshelf() {
				// TODO: 实现加入书架功能
				uni.showToast({
					title: '已加入书架',
					icon: 'success'
				})
			},
			toggleInteractive() {
				uni.navigateTo({
					url: `/pages_order/novel/Tipping?id=${this.novelData.id}`
				})
			},
			goToGiftbox() {
				uni.navigateTo({
					url: `/pages_order/novel/Giftbox?id=${this.novelData.id}`
				})
			},
			goToCommentReply() {
				uni.navigateTo({
					url: '/pages_order/novel/comments'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.novel-detail {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		
		.nav-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: transparent;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
		}
		
		.novel-info {
			padding: 20rpx;
			display: flex;
			background: #fff;
			
			.novel-cover {
				width: 200rpx;
				height: 280rpx;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
			
			.novel-basic {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
				}
				
				.author-line,
				.status-line {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;
					font-size: 28rpx;
					color: #666;
				}
				
				.content-row {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.book-status {
						flex-shrink: 0;
						
						text {
							font-size: 20rpx;
							color: #67C23A;
							background-color: rgba(103, 194, 58, 0.1);
							border-radius: 20rpx;
							padding: 4rpx 12rpx;
						}
					}
					.book-text{
					    font-size: 20rpx;
					}
				}
				
				.label {
					color: #999;
					margin-right: 8rpx;
				}
				
				.score-line {
					margin-top: 16rpx;
					
					.score {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					
					.score-label {
						font-size: 24rpx;
						color: #999;
						margin-left: 8rpx;
					}
				}
			}
		}
		
		.recommendation-section {
			padding: 24rpx 32rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			
			.rec-left {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-left: 70rpx;
				
				.rec-count {
					font-size: 44rpx;
					font-weight: 500;
					color: #333;
					line-height: 1.2;
				}
				
				.rec-label {
					font-size: 26rpx;
					color: #999;
					margin-top: 4rpx;
				}
			}
			
			.rec-divider {
				position: absolute;
				right: 160rpx;
				top: 20rpx;
				bottom: 20rpx;
				width: 2rpx;
				background: #eee;
			}
			
			.rec-right {
				flex-shrink: 0;
				
				.recommend-btn {
					background: #fff;
					color: #4a90e2;
					border: 2rpx solid #4a90e2;
					border-radius: 40rpx;
					padding: 12rpx 32rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					line-height: 1;
					height: 64rpx;
					
					.btn-icon {
						margin-right: 8rpx;
						font-size: 32rpx;
					}
				}
			}
		}
		
		.action-buttons {
			display: flex;
			padding: 30rpx;
			gap: 20rpx;
			
			button {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.read-btn {
				background-color: #4a90e2;
				color: #fff;
			}
			
			.collect-btn {
				background-color: #f0f0f0;
				color: #666;
			}
		}
		
		.user-level {
			margin: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			
			.level-left {
				flex: 1;
				
				.level-title {
					display: flex;
					align-items: center;
					gap: 8rpx;
					margin-bottom: 20rpx;
					margin-left: 20rpx;
					
					.title-icon {
						font-size: 36rpx;
						color: #FFB800;
					}
					
					text {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
					}
				}
				
				.level-info {
					display: flex;
					align-items: flex-start;
					gap: 20rpx;
					
					.user-avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 2rpx solid #f0f0f0;
					}
					
					.user-details {
						display: flex;
						flex-direction: column;
						gap: 8rpx;
						
						.username {
							display: flex;
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
							
							image {
								width: 60rpx;
								height: 60rpx;
							}
						}
						
						.user-score {
							display: flex;
							align-items: center;
							gap: 8rpx;
							
							.score-value {
								font-size: 28rpx;
								color: #333;
							}
							
							.score-label {
								font-size: 24rpx;
								color: #999;
							}
						}
						
						.user-role {
							font-size: 24rpx;
							color: #666;
							background: #f5f5f5;
							padding: 4rpx 12rpx;
							border-radius: 4rpx;
							display: inline-block;
						}
					}
				}
			}
			
			.level-right {
				display: flex;
				align-items: center;
				
				.rank-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 20rpx;
					
					.rank-icon {
						width: 200rpx;
						height: 60rpx;
						margin-bottom: 8rpx;
					}
					
					text {
						font-size: 26rpx;
						color: #333;
						line-height: 1.4;
					}
					
					.check-text {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
		
		.novel-intro {
			margin: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			
			.intro-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 16rpx;
			}
			
			.intro-content {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				
				text {
					display: block;
				}
			}
		}
		
		.comments-section {
			margin: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			
			.comments-header {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				border-bottom: 2rpx solid #f5f5f5;
				padding-bottom: 24rpx;
				justify-content: flex-start;
				
				.header-left {
					display: flex;
					align-items: center;
					gap: 8rpx;
					
					.title-icon {
						font-size: 32rpx;
					}
					
					text {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						white-space: nowrap;
					}
				}
				
				.header-right {
					margin-left: auto;
				}
			}
			
			.comment-list {
				display: flex;
				flex-direction: column;
				gap: 32rpx;
			}
			
			.like-icon {
				font-size: 24rpx;
				color: #999;
			}
			
			.like-count {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.novel-catalog {
			margin: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			
			.catalog-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #f5f5f5;
				
				.catalog-title {
					display: flex;
					align-items: center;
					gap: 8rpx;
					
					.title-icon {
						font-size: 32rpx;
					}
					
					text {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
					}
				}
				
				.chapter-nav {
					display: flex;
					align-items: center;
					gap: 8rpx;
					
					.current-chapter {
						font-size: 28rpx;
						color: #666;
					}
					
					.nav-arrow {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}
		
		.novel-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			padding-top: 15rpx;
			padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			gap: 40rpx;
			.bottom-left {
				display: flex;
				gap: 40rpx;
				
				.action-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 4rpx;
					
					.btn-icon {
						font-size: 40rpx;
						line-height: 1;
					}
					
					text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			
			.bottom-right {
				flex: 1;
				display: flex;
				.read-now-btn {
					flex: 1;
					background: #1a237e;
					color: #fff;
					font-size: 32rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 60rpx;
					border-radius: 40rpx;
					border: none;
				}
			}
		}
	}
</style>