app_ancientSayings/pages/booksReadingDetail/booksReadingDetail.vue

<template>
	<view class="booksReadingDetail_content">
		<view class="step_book_basic_info">
			<view class="step_book_basic_info_comm">
				<BookBasicInfo :bookInfo="bookInfo" />
			</view>
		</view>
		<view class="step_book_other_info">
			<view class="step_book_other_info_comm">
				<BookOtherInfo :bookInfo="bookInfo" />
			</view>
		</view>
		<view class="step_book_synopsis_info">
			<view class="step_book_synopsis_info_comm">
				<BookSynopsisInfo :bookInfo="bookInfo" />
			</view>
		</view>
		<view class="step_book_chapter_info">
			<view class="step_book_chapter_info_comm">
				<BookChapterInfo :directoryCount="directoryCount" :bookDirectory="bookDirectory" :bookSid="bookSid"
					:bookInfo="bookInfo" />
			</view>
		</view>
		<view style="width: 100%">
			<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
		</view>
		<view class="step_book_recommend_info">
			<view class="step_book_recommend_info_comm">
				<BookRecommendInfo :recommendBooks="recommendBooks" :bookSid="bookSid" />
			</view>
		</view>
		<view class="step_book_button_info">
			<view class="step_book_button_info_comm">
				<view v-if="!bookcase" class="_add_book_shelf" @tap="addBookshelf">
					加入书架
				</view>
				<view v-else class="_add_book_shelf active">
					已加书架
				</view>
				<view class="_start_read_book" @tap="toNovelReading">
					开始阅读
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BookBasicInfo from './bookBasicInfo.vue';
	import BookOtherInfo from './bookOtherInfo.vue';
	import BookSynopsisInfo from './bookSynopsisInfo.vue';
	import BookChapterInfo from './bookChapterInfo.vue';
	import BookRecommendInfo from './bookRecommendInfo.vue';
	import config from '@/config/index';
	import {
		baseUrlImage
	} from '@/utils/utils'
	export default {
		components: {
			BookBasicInfo,
			BookOtherInfo,
			BookSynopsisInfo,
			BookChapterInfo,
			BookRecommendInfo
		},
		data() {
			return {
				bookSid: '',
				bookDirectory: [],
				recommendBooks: [],
				bookInfo: {},
				directoryCount: 0,
				bookcase: 0
			}
		},
		onLoad(options) {
			this.bookSid = options.sid
		},
		onShow() {
			const bookSid = this.bookSid
			uni.showLoading({
				title: '加载中...'
			});
			const data = {
				sid: bookSid,
			}
			uni.$u.http.post('/bookdetails', data).then((res) => {
				uni.hideLoading();
				if (res.status == 1) {
					const directory = res.data.directory;
					const info = res.data.info;
					const module = res.data.module;
					const directory_count = res.data.directory_count;
					const bookcase = res.data.bookcase;
					this.bookDirectory = directory;
					this.recommendBooks = baseUrlImage(module);
					this.directoryCount = directory_count;
					this.bookcase = bookcase
					const cover = info.cover.includes('http') ? info.cover : `${config.baseUrl}${info.cover}`;
					this.bookInfo = {
						...info,
						cover
					};
					console.log(res, this.bookInfo, "=======")
				}
			}).catch((err) => {
				uni.hideLoading();
				console.log(err, "========")
			})
		},
		methods: {
			addBookshelf() {
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid: this.bookSid,
				}
				uni.$u.http.post('/addBookshelf', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						uni.showToast({
							title: '加入成功',
							icon: 'none'
						})
						this.bookcase = 1;
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, "========")
				})
			},
			toNovelReading() {
				const bookInfo = this.bookInfo;
				uni.navigateTo({
					url: `/pages/novelReading/novelReading?sid=${bookInfo.id}&n=${bookInfo.title}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.booksReadingDetail_content {
		width: 100%;
		// padding-bottom: 130rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 90px); /* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 90px); /* 兼容 iPhone X 及以上设备 */

		.step_book_basic_info {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.step_book_basic_info_comm {
				width: 100%;
				padding: 32rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #E5E5E5;
			}
		}

		.step_book_other_info {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.step_book_other_info_comm {
				width: 100%;
				padding: 32rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #E5E5E5;
			}
		}

		.step_book_synopsis_info {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.step_book_synopsis_info_comm {
				width: 100%;
				padding: 32rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #E5E5E5;
			}
		}

		.step_book_chapter_info {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.step_book_chapter_info_comm {
				width: 100%;
				padding: 32rpx 0;
				box-sizing: border-box;
			}
		}

		.step_book_recommend_info {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;

			.step_book_recommend_info_comm {
				width: 100%;
				padding: 32rpx 0;
				box-sizing: border-box;
			}
		}

		.step_book_button_info {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			border-top: 1rpx solid #E5E5E5;
			padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */

			.step_book_button_info_comm {
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 14rpx 32rpx;
				box-sizing: border-box;

				._add_book_shelf {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 328rpx;
					height: 100rpx;
					border-radius: 10rpx;
					border: 2rpx solid #1A1A1A;
					box-sizing: border-box;
					color: #1A1A1A;
				}

				.active {
					font-size: 36rpx;
					color: #999999;
					border-color: #999999;
				}

				._start_read_book {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 328rpx;
					height: 100rpx;
					border-radius: 10rpx;
					color: #fff;
					background: linear-gradient(to left, #FF728F, #FF4D71);
				}
			}
		}
	}
</style>