Mini_Program/pages/book-cover/book-cover.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">封面</text>
			<view class="header-right"></view>
		</view>
		
		<!-- 书籍封面 -->
		<view class="cover-section">
			<image class="book-cover-image" :src="bookInfo.image" mode="aspectFit" :lazy-load="true"></image>
		</view>
		
		<!-- 书籍信息 -->
		<view class="book-info-section">
			<text class="book-title">{{ bookInfo.title }}</text>
			<text class="book-author">{{ bookInfo.author }}</text>
		</view>
		
		<!-- 开始阅读按钮 -->
		<view class="start-reading-section">
			<button class="start-reading-btn" @click="startReading">
				<text class="btn-text">左滑开始阅读</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookInfo: {
					id: 1,
					title: '西游记',
					author: '(明) 吴承恩',
					image: 'https://picsum.photos/seed/xiyouji/400/600'
				}
			}
		},
		onLoad(options) {
			// 从路由参数获取书籍信息
			if (options.bookId) {
				this.bookInfo.id = parseInt(options.bookId)
			}
			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)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			startReading() {
				// 开始阅读，跳转到阅读页面
				uni.showToast({
					title: '开始阅读',
					icon: 'success'
				})
				// 这里可以跳转到阅读页面
				// uni.navigateTo({
				// 	url: `/pages/reader/reader?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}`
				// })
				
				// 或者直接开始阅读第一页
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/reader/reader?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}&image=${encodeURIComponent(this.bookInfo.image)}&author=${encodeURIComponent(this.bookInfo.author)}`
					})
				}, 500)
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		padding-top: calc(30px + 40rpx);
		box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	
	.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;
	}
	
	.header-right {
		width: 60rpx;
	}
	
	.cover-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 40rpx 0;
	}
	
	.book-cover-image {
		width: 500rpx;
		height: 700rpx;
		border-radius: 8rpx;
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
		background-color: #F5F5F5;
	}
	
	.book-info-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}
	
	.book-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.book-author {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
	}
	
	.start-reading-section {
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.start-reading-btn {
		width: 100%;
		height: 88rpx;
		background-color: #E0E0E0;
		color: #333333;
		font-size: 32rpx;
		border: none;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.start-reading-btn::after {
		border: none;
	}
	
	.btn-text {
		color: #333333;
	}
</style>