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.coverUrl" mode="aspectFill"></image>
			</view>
			<view class="novel-basic">
				<text class="title">{{ novelData.title }}</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="score-line">
					<text class="score">{{ novelData.score || 2814}}</text>
					<text class="score-label">作者累计亲密度值</text>
				</view>
			</view>
		</view>

		<!-- 推荐票数显示 -->
		<view class="recommendation-section">
			<view class="rec-left">
				<text class="rec-count">2814</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">
				<text>这游戏也太真实了吧！</text>
				<text>搬砖、跑腿、捡垃圾、送快递。......公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。</text>
				<text>好了，不废话了，伟大的管理者大人嘛就去搬砖了。那位大人说了，只要我们努力献上自己的肝，下个月他又能换一套全新的动力甲，到时候候带我们开全新的地图，去广阔的废土捡更多的垃圾！</text>
				<text>穿越到废土世界的基光发现，自己解锁了游戏所系统，能够从平行世界召唤名为"玩家"的生物。</text>
			</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">
					<text class="btn-icon">📚</text>
					<text>加入书架</text>
				</view>
				<view class="action-btn" @click="goToGiftbox">
					<text class="btn-icon">🎁</text>
					<text>礼物盒</text>
				</view>
				<view class="action-btn" @click="toggleInteractive">
					<text class="btn-icon">🎯</text>
					<text>互动打赏</text>
				</view>
			</view>
			<view class="bottom-right">
				<button class="read-now-btn" @click="startReading">立即阅读</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'
	export default {
		components: {
			catalogpopup,
			chapterPopup,
			commentItem,
			novelVotePopup,
		},
		data() {
			return {
				novelData: {
					id: '1',
					title: '这游戏也太真实了',
					author: '大宝鉴在在',
					category: '玄幻',
					wordCount: '2814',
					coverUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
					introduction: '这游戏也太真实了！\n模拟，模拟，模拟，这游戏……公空居然把自己做成了游戏的NPC？这是什么新型的套路啊！好了，不要慌了，作为的管理者人员都在忙碌着，都在工作人员中，只要我们努力就自己的事，下个月他又给一套全新的剧情开始，如何将模拟的开关全新的世界，去广阔的世界去探索吧！'
				},
				isCollected: false,
				comments: [{
					username: '方寒锋',
					avatar: '/static/images/user1.jpg',
					content: '我是全书中年龄最大的人，这是一本很好的文章！满满心头热，只要对你"安全"文案有兴趣的，都可以不虚，不害怕，不要想太多就去尝试阅读吧！',
					time: '2024-07-09'
				}],
				currentIndex: 0,
			}
		},
		computed: {
			userInfo() {
				return {
					avatar: '/static/images/avatar.jpg',
					level: '67级达人'
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			startReading() {
				uni.navigateTo({
					url: `/pages_order/novel/readnovels?id=${this.novelData.id}`
				})
			},
			toggleCollect() {
				this.isCollected = !this.isCollected
				// TODO: 实现收藏功能
			},
			recommendNovel() {
				if (!this.novelData.id) {
					uni.showToast({
						title: '无效的小说ID',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages_order/novel/vote?id=${this.novelData.id}`
				})
			},
			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'
				})
			},
			handleShowCatalog() {
				console.log('点击目录区域');
				this.showCatalog = true;
			},
			selectChapter(idx) {
				this.currentIndex = idx
				this.showCatalog = false
				// TODO: 跳转到对应章节内容
			},
			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;
				}
				
				.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-bottom: env(safe-area-inset-bottom);
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.bottom-left {
				flex: 1;
				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-shrink: 0;
				
				.read-now-btn {
					background: #1a237e;
					color: #fff;
					font-size: 32rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 60rpx;
					border-radius: 40rpx;
					border: none;
				}
			}
		}
	}
</style>