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

<template>
	<!-- 小说详情页面 -->
	<view class="novel-detail">
		<!-- 顶部返回导航 -->
		<uv-navbar title="小说详情" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;"
			:border="false">
			<template #left>
				<BackArrow :size="56" color="#333" @back="goBack" />
			</template>
		</uv-navbar>

		<!-- 小说基本信息 -->
		<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="recommendNovel">
					<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>
					<text>我的等级</text>
				</view>
				<view class="level-info">
					<image class="user-avatar"
						src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"
						mode="aspectFill"></image>
					<view class="user-details">
						<text class="username">周海</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="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"
						mode="aspectFit"></image>
					<text>读者榜单</text>
					<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>

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

<script>
	import catalogpopup from '@/components/novel/CatalogPopup.vue'
	import BackArrow from './components/BackArrow.vue'
	import chapterPopup from '../components/novel/chapterPopup.vue'
	import commentItem from '../components/comment/commentItem.vue'
	export default {
		components: {
			catalogpopup,
			BackArrow,
			chapterPopup,
			commentItem,
		},
		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;
	}

	.novel-cover 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 {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.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>