<template>
	<view class="novelReading_content">
		<!-- 	<u-navbar :title="navbarTitle" @rightClick="rightClick" :autoBack="true" :fixed="true" :bgColor="mainBodyBg"
			:titleStyle="{ color: navigationBarTitleTextColor }" :leftIconColor="navigationBarTitleTextBackColor"
			:shadow="true" :safeAreaInsetTop="true" :placeholder="true" /> -->
		<!-- @tap="handelShowStepUp" -->
		<view class="novelReading_body" :style="`background:${bodyReadingBg}`">
			<!--  -->
			<view class="novelReading_main_con">
				<yingbing-ReadPage style="height: 100%;" ref="yingbingReadPage" :footerShow="true"
					:page-type="charactersPageType" :font-size="newCharactersSize" :enableClick="true"
					:line-height="defaultCharactersLineHeight" :color="novelContentColor" :bg-color="bodyReadingBg"
					:slide="20" :enablePreload="false" @loadmore="loadmoreContent" @preload="preloadContent"
					@change="currentChange" @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher"
					@clickTo="handelShowStepUp" :clickOption="{width:200,height: 400,left:'auto',top:'auto'}">
				</yingbing-ReadPage>
			</view>
		</view>
		<view class="u_popup_all">
			<u-popup :show="tabBarPopupShow" mode="bottom" :overlay="false" zIndex="6" :bgColor="bodyReadingBg">
				<view class="my_tabBar_Reading" :style="`background:${bodyReadingBg}`">
					<view class="tabBar_Reading_item">
						<view class="reading_item_icon" @tap="handelDirectoryPopup">
							<image class="is_images" :src="barPopupIcon[novelMainTypeColor].directory_icon"></image>
						</view>
						<view class="reading_item_name" :style="`color:${tabBarTextColor}`">目录</view>
					</view>
					<view class="tabBar_Reading_item">
						<view class="reading_item_icon" @tap="toBookshelf">
							<image class="is_images" :src="barPopupIcon[novelMainTypeColor].bookshelf_icon"></image>
						</view>
						<view class="reading_item_name" :style="`color:${tabBarTextColor}`">书城</view>
					</view>
					<view class="tabBar_Reading_item" @tap="handelSteUpPopup">
						<view class="reading_item_icon">
							<image class="is_images" :src="barPopupIcon[novelMainTypeColor].step_up_icon"></image>
						</view>
						<view class="reading_item_name" :style="`color:${tabBarTextColor}`">设置</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent">
				<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
					<view class="reading_schedule_body">
						<view class="_previous_chapter"
							:style="`color:${previousChapterBbuttonTextColor};background:${previousChapterBbuttonBg}`"
							@tap="previousChapter">
							上一章
						</view>
						<view class="_next_chapter"
							:style="`color:${nextChapterBbuttonTextColor};background:${nextChapterBbuttonBg}`"
							@tap="nextChapter">下一章
						</view>
					</view>
					<view style="height: 140rpx" />
				</view>
			</u-popup>
			<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5">
				<view class="step_up_box" :style="`background:${bodyReadingBg}`">
					<view class="step_up_box_body">
						<view class="step_up_item">
							<view class="step_up_item_name" :style="`color:${dialogTextColor}`">背景</view>
							<view :class="[`step_up_item_bg`, novelMainTypeColor == 'F3EFE9' ? 'activeBlack' : '']"
								style="background: #f3efe9" @tap="changNovelMainType('F3EFE9')"></view>
							<view :class="[`step_up_item_bg`, novelMainTypeColor == 'CCD9E2' ? 'activeBlack' : '']"
								style="background: #ccd9e2" @tap="changNovelMainType('CCD9E2')"></view>
							<view :class="[`step_up_item_bg`, novelMainTypeColor == '333333' ? 'activeWhite' : '']"
								@tap="changNovelMainType('333333')">
								<image class="is_images" :src="setUpModeBlack" />
							</view>
						</view>
						<view class="step_up_item mt40rpx">
							<view class="step_up_item_name" :style="`color:${dialogTextColor}`">字号</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="reduceCharactersSize">
								A-</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="addCharactersSize">A+
							</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="handelCharactersSize">
								默认</view>
						</view>
					</view>
					<view style="height: 140rpx" />
				</view>
			</u-popup>
			<u-popup :show="directoryPopupShow" @close="directoryPopupClose" mode="right" :safeAreaInsetTop="true">
				<view class="directory_popup_box">
					<scroll-view scroll-y="true" @scrolltoupper="directoryPopupUpper"
						@scrolltolower="directoryPopupLower" :show-scrollbar="false" class="directory_scroll_y">
						<view class="_popup_box_item" v-for="m in directoryList" :key="m.id" @tap="handelDirectoryItem">
							<view :class="['_item_name', readDirectoryActive == m.chapterorder ? 'active' : '']">
								{{ m.chaptername }}
							</view>
							<view v-if="m.isvip" class="_item_chapter_lock">
								<image class="is_images" src="/static/images/chapter_lock.png"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
			<u-popup :show="purchaseFullShow" @close="purchaseFullClose" mode="bottom" overlayStyle="top:44px">
				<view class="purchaseFull_popup_box" :style="`background:${bodyReadingBg}`">
					<view>
						<CommBookLeftRigth :bookTips="bookInfo.category_name" :bookName="bookInfo.title"
							:bookImage="bookInfo.cover" :bookIntroduction="`${readChapterInfoObj.allprice}书币`" />
					</view>
					<view class="purchaseFull_popup_btn_box">
						<view class="purchaseFull_popup_btn" @tap="handelPurchaseFull">需要全本购买</view>
					</view>
				</view>
			</u-popup>
			<u-modal :show="balanceShow" :title="balanceTitle" content='余额不足,请充值...'
				:showCancelButton="!readChapterFlag" @confirm="balanceConfirm" @cancel="balanceCancel" />
		</view>
	</view>
</template>

<script>
	import setUpReadingColorAll from './setUpReadingColorAll.js';
	import bookshelf_333 from '@/static/images/novelReading/bookshelf_333.png';
	import directory_333 from '@/static/images/novelReading/directory_333.png';
	import step_up_333 from '@/static/images/novelReading/step_up_333.png';
	import bookshelf_ccd9e2 from '@/static/images/novelReading/bookshelf_ccd9e2.png';
	import step_up_ccd9e2 from '@/static/images/novelReading/step_up_ccd9e2.png';
	import directory_ccd9e2 from '@/static/images/novelReading/directory_ccd9e2.png';
	import bookshelf_f3efe from '@/static/images/novelReading/bookshelf_f3efe.png';
	import directory_f3efe9 from '@/static/images/novelReading/directory_f3efe9.png';
	import step_up_f3efe from '@/static/images/novelReading/step_up_f3efe.png';
	import set_up_mode_black from '@/static/images/novelReading/set_up_mode_black.png';
	import recharge_empty from '@/static/images/recharge_empty.png'
	import config from '@/config/index';
	import {
		isGetSystemInfo
	} from '@/utils/systemInfo.js';
	import {
		myGetStorage,
		mySetStorage
	} from '@/utils/storage/index.js';
	import myData from './data.js';
	import CommBookLeftRigth from '@/components/commBookLeftRigth/index.vue'
	export default {
		components: {
			CommBookLeftRigth
		},
		data() {
			return {
				navbarTitle: '小说阅读页面',
				novelMainTypeColor: '',
				setUpColorAll: {},
				navigationBarTitleTextColor: '',
				mainBodyBg: '',
				navigationBarTitleTextBackColor: '',
				previousChapterBbuttonBg: '',
				previousChapterBbuttonTextColor: '',
				nextChapterBbuttonBg: '',
				nextChapterBbuttonTextColor: '',
				bodyReadingHeight: 0,
				scrollReadingHeight: 0,
				// 内容背景
				bodyReadingBg: '',
				// 底部安全区
				// bottomSecureHeight: 0,
				tabBarPopupShow: false,
				readingPopupshow: false,
				stepUpPopupShow: false,
				purchaseFullShow: false,
				balanceShow: false,
				balanceTitle: '下一章，付费章节',
				// bar 的icon
				barPopupIcon: {},
				dialogTextColor: '',
				progressBg: '',
				progressActiveBg: '',
				setUpModeBlack: '',
				dialogATextBg: '',
				novelContentColor: '',
				// 目录信息
				booksDirectorySid: '2387',
				bookInfo: {},
				booksDirectoryPage: 1,
				newBooksDirectoryPage: [],
				directoryList: [],
				// directoryPopupHeight: 0,
				directoryPopupShow: false,
				// 小说信息
				novelReadingContentText: [],
				charactersPageType: 'real',
				defaultCharactersSize: 28,
				newCharactersSize: 28,
				defaultCharactersLineHeight: 20,
				readDirectoryActive: '',
				computeRichText: '',
				computeRichTextWidth: 0,
				refresherTriggered: false,
				readChapterid: '',
				readChapterFlag: false,
				readChapterInfoObj: {},
				readChapterLastid: '',
				readChapterNextid: '',
				refresherEnabled: true,
			};
		},
		onLoad(options) {
			this.booksDirectorySid = options.sid;
			this.navbarTitle = options.n;
			this.readChapterid = options.id;
		},
		onShow() {
			const bookSid = this.booksDirectorySid;
			const data = {
				sid: bookSid,
			}
			uni.$u.http.post('/bookdetails', data).then((res) => {
				uni.hideLoading();
				if (res.status == 1) {
					const info = res.data.info;
					const cover = info.cover.includes('http') ? info.cover : `${config.baseUrl}${info.cover}`;
					this.bookInfo = {
						...info,
						cover
					};
				}
			}).catch((err) => {
				uni.hideLoading();
			})
			this.isGetUserRead();
		},
		methods: {
			async isGetUserRead() {
				const booksDirectorySid = this.booksDirectorySid;
				const booksDirectoryPage = this.booksDirectoryPage;
				const readChapterid = this.readChapterid ? this.readChapterid : '';
				// this.readDirectoryActive = '3';
				// await this.isGetDirectory(booksDirectorySid, booksDirectoryPage);
				const readChapterInfoObj = await this.isGetBookInfo(readChapterid, '', true);
				this.novelReadingContentText = [readChapterInfoObj];
				this.readDirectoryActive = readChapterInfoObj.chapterorder;
				this.readChapterLastid = readChapterInfoObj.lastid;
				this.readChapterNextid = readChapterInfoObj.nextid;
				this.$refs.yingbingReadPage.init({
					contents: [readChapterInfoObj],
					start: 0,
					currentChapter: readChapterInfoObj.chapterorder
				})
			},
			isGetBookInfo(chapterId, statusType, isShowLoading = false) {
				return new Promise((resolve) => {
					const booksDirectorySid = this.booksDirectorySid;
					const novelReadingContentText = this.novelReadingContentText;
					if (isShowLoading) {
						uni.showLoading({
							title: '加载中...'
						});
					}
					const data = {
						sid: booksDirectorySid,
					};
					if (chapterId) {
						data.id = chapterId;
					}
					uni.$u.http.post('/read', data).then((res) => {
						uni.hideLoading();
						if (res.status == 1) {
							const resData = res.data;
							const is_novel_content = resData.novel_content.replace(/<\/p>/g, '\n')
							const readChapterInfoObj = {
								...resData,
								content: is_novel_content.replace(/<p>/g, ''),
								isStart: resData.lastid == '' ? true : false,
								isEnd: resData.nextid == '' ? true : false,
								chapter: resData.chapterorder,
								title: resData.chaptername,
								isTtitle: resData.title
								// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
								// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
							};
							this.readChapterInfoObj = readChapterInfoObj;
							if (readChapterInfoObj.chackpay == 1) {
								resolve(readChapterInfoObj);
							} else if (readChapterInfoObj.chackpay == 2) {
								this.balanceShow = true;
								this.balanceTitle = '下一章，付费章节';
								if (isShowLoading) {
									this.readChapterFlag = true;
								}
							} else if (readChapterInfoObj.chackpay == 3) {
								this.purchaseFullShow = true;
								if (isShowLoading) {
									this.readChapterFlag = true;
								}
							}
						}
					}).catch((err) => {
						uni.hideLoading();
						console.log(err, '========');
					});
				})

			},
			async loadmoreContent(chapter, callback) {
				console.log(chapter, "*****************")
				const newReadDirectoryActive = this.readDirectoryActive;
				const newReadChapterLastid = this.readChapterLastid;
				const newNovelReadingContentText = this.novelReadingContentText;
				const newReadChapterNextid = this.readChapterNextid;
				console.log(newNovelReadingContentText,"newNovelReadingContentText")
				// const itemTemp = newNovelReadingContentText.filter((m) => m.chapter == parseInt(chapter + 1));
				// console.log(itemTemp,itemTemp[0].lastid, "itemTempitemTempitemTemp")
				if (newReadDirectoryActive != 1) {
					if (chapter < newReadDirectoryActive) {
						// const readChapterInfoObj = await this.isGetBookInfo(itemTemp[0].lastid);
						const readChapterInfoObj = await this.isGetBookInfo(newReadChapterLastid);
						console.log(readChapterInfoObj, "上一章")
						this.novelReadingContentText = [...newNovelReadingContentText, readChapterInfoObj];
						this.readDirectoryActive = chapter;
						// this.readChapterLastid = readChapterInfoObj.lastid;
						// this.readChapterNextid = readChapterInfoObj.nextid;
						callback('success', readChapterInfoObj)
					}
					if (chapter > newReadDirectoryActive) {
						// const readChapterInfoObj = await this.isGetBookInfo(itemTemp[0].nextid);
						const readChapterInfoObj = await this.isGetBookInfo(newReadChapterNextid);
						console.log(readChapterInfoObj, "下一章")
						this.novelReadingContentText = [readChapterInfoObj, ...newNovelReadingContentText];
						this.readDirectoryActive = chapter;
						// this.readChapterLastid = readChapterInfoObj.lastid;
						// this.readChapterNextid = readChapterInfoObj.nextid;
						callback('success', readChapterInfoObj)
					}
				}
			},
			currentChange(pageInfo) {
				const novelReadingContentText = this.novelReadingContentText;
				const chapter = pageInfo.chapter;
				const itemTemp = novelReadingContentText.filter((m) => m.chapter == chapter);
				this.readChapterLastid = itemTemp[0].lastid;
				this.readChapterNextid = itemTemp[0].nextid;
			},
			previousChapter() {
				const readChapterLastid = this.readChapterLastid
				if (!readChapterLastid) {
					uni.showToast({
						icon: 'none',
						title: "已经是第一章了"
					})
					return
				}
				this.isGetBookInfo(readChapterLastid, 'previousChapter');
			},
			nextChapter() {
				const readChapterNextid = this.readChapterNextid;
				if (!readChapterNextid) {
					uni.showToast({
						icon: 'none',
						title: "已经是最后一章了~"
					})
					return
				}
				this.isGetBookInfo(readChapterNextid, 'nextChapter');
			},
			handelDirectoryItem(row) {},
			handelShowStepUp() {
				this.tabBarPopupShow = !this.tabBarPopupShow;
				this.readingPopupshow = !this.readingPopupshow;
				this.stepUpPopupShow = false;
			},
			handelDirectoryPopup() {
				// this.directoryPopupShow = true;
				const readChapterInfoObj = this.readChapterInfoObj;
				const readDirectoryActive = this.readDirectoryActive;
				uni.navigateTo({
					url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readDirectoryActive}`
				})
			},
			directoryPopupClose() {
				// this.directoryPopupShow = false;
				// const readChapterInfoObj = this.readChapterInfoObj;
				// uni.navigateTo({
				// 	url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readChapterInfoObj.chapterorder}`
				// })
			},
			purchaseFullClose() {
				const readChapterFlag = this.readChapterFlag;
				if (readChapterFlag) {
					return;
				}
				this.purchaseFullShow = false;
			},
			handelSteUpPopup() {
				this.stepUpPopupShow = true;
			},
			balanceConfirm() {
				uni.navigateTo({
					url: `/pages/voucherCenter/index`
				})
			},
			balanceCancel() {
				this.balanceShow = false;
			},
			handelPurchaseFull() {
				const readChapterInfoObj = this.readChapterInfoObj;
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid: readChapterInfoObj.sid,
					id: readChapterInfoObj.id,
					allprice: readChapterInfoObj.allprice,
				};
				uni.$u.http.post('/buyall', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						if (res.data.status == 2) {
							this.balanceShow = true;
							this.balanceTitle = '';
						}
					}
				}).catch((err) => {
					uni.hideLoading();
				});
			},
			// 切换页面颜色
			changNovelMainType(type) {

				this.novelMainTypeColor = type;
				this.initPage(type);
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					novelMainTypeColor: type,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 字体减小
			reduceCharactersSize() {
				const newCharactersSize = this.newCharactersSize;
				this.newCharactersSize = newCharactersSize - 2;
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					charactersSize: newCharactersSize - 2,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 字体加大
			addCharactersSize() {
				const newCharactersSize = this.newCharactersSize;
				this.newCharactersSize = newCharactersSize + 2;
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					charactersSize: newCharactersSize + 2,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 恢复默认字体大小
			handelCharactersSize() {
				const defaultCharactersSize = this.defaultCharactersSize;
				this.newCharactersSize = defaultCharactersSize;
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					charactersSize: defaultCharactersSize,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 目录划到了最上边
			directoryPopupUpper() {
				const isBooksDirectoryPage = this.booksDirectoryPage;
				const newBooksDirectoryPage = this.newBooksDirectoryPage;
				if (isBooksDirectoryPage > 1 && newBooksDirectoryPage.indexOf(isBooksDirectoryPage) == -1) {
					const booksDirectorySid = this.booksDirectorySid;
					const booksDirectoryPage = isBooksDirectoryPage - 1;
					this.booksDirectoryPage = booksDirectoryPage;
					this.isGetDirectory(booksDirectorySid, booksDirectoryPage, 'upper');
				}
			},
			// 目录划到了最下边
			directoryPopupLower() {
				const isBooksDirectoryPage = this.booksDirectoryPage;
				const booksDirectorySid = this.booksDirectorySid;
				const booksDirectoryPage = isBooksDirectoryPage + 1;
				const newBooksDirectoryPage = [...this.newBooksDirectoryPage, booksDirectoryPage];
				this.newBooksDirectoryPage = newBooksDirectoryPage;
				this.booksDirectoryPage = booksDirectoryPage;
				this.isGetDirectory(booksDirectorySid, booksDirectoryPage, 'lower');
			},
			isGetDirectory(sid, page, type) {
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid,
					page
				};
				uni.$u.http.post('/getDirectory', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const directory = res.data.directory;
						let columnsLabel = '';
						if (type == 'upper') {
							this.directoryList = [...directory, ...this.directoryList];
						} else if (type == 'lower') {
							this.directoryList = [...this.directoryList, ...directory];
						} else {
							this.directoryList = directory;
						}
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, '========');
				});
			},
			initPage(novelMainTypeColor) {
				const mainBodyBg = setUpReadingColorAll[novelMainTypeColor].mainBodyBg;
				this.navigationBarTitleTextColor = setUpReadingColorAll[novelMainTypeColor].navigationBarTitleTextColor;
				this.mainBodyBg = mainBodyBg;
				this.bodyReadingBg = mainBodyBg;
				this.dialogTextColor = setUpReadingColorAll[novelMainTypeColor].dialogTextColor;
				this.progressBg = setUpReadingColorAll[novelMainTypeColor].progressBg;
				this.progressActiveBg = setUpReadingColorAll[novelMainTypeColor].progressActiveBg;
				this.setUpModeBlack = set_up_mode_black;
				this.dialogATextBg = setUpReadingColorAll[novelMainTypeColor].dialogATextBg;
				this.tabBarTextColor = setUpReadingColorAll[novelMainTypeColor].tabBarTextColor;
				this.novelContentColor = setUpReadingColorAll[novelMainTypeColor].novelContentColor;
				this.navigationBarTitleTextBackColor = setUpReadingColorAll[novelMainTypeColor]
					.navigationBarTitleTextBackColor;
				this.previousChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].previousChapterBbuttonBg;
				this.previousChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor]
					.previousChapterBbuttonTextColor;
				this.nextChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonBg;
				this.nextChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonTextColor;
			},
			rightClick() {
				uni.navigateBack();
			},
			toBookshelf() {
				uni.reLaunch({
					url: `/pages/bookCity/bookCity/index`
				})
			}
		},
		onPullDownRefresh() {
			// const isReadDirectoryActive = this.readDirectoryActive;
			// if(isReadDirectoryActive == 0) {
			// 	uni.showToast({
			// 		icon:'none',
			// 		title:"已经是第一章了"
			// 	})
			// 	uni.stopPullDownRefresh()
			// 	return
			// }
			// const readDirectoryActive = isReadDirectoryActive- 1;
			// const novelReadingContentText = this.myData[readDirectoryActive];
			// this.novelReadingContentText = [novelReadingContentText, ...this.novelReadingContentText];
			// // setTimeout(() => {
			// this.computeRichText = this.myData[readDirectoryActive].content;
			// // this.readDirectoryActive = readDirectoryActive;
			// const query = uni.createSelectorQuery().in(this);
			// this.$nextTick(() => {
			// 	query.select(`#compute_rich_text`).boundingClientRect((data) => {
			// 		this.isScrollTop = parseInt(data.height) - 30;
			// 	}).exec();
			// });
			// uni.stopPullDownRefresh()
		},
		created() {
			const novelMainObj = myGetStorage('novelMainObj') || '{}';
			const novelMainTypeColor = JSON.parse(novelMainObj).novelMainTypeColor || 'F3EFE9';
			const {
				screenHeight = 0, statusBarHeight = 0, windowHeight = 0, devicePixelRatio, windowBottom, windowWidth,
					screenWidth
			} = isGetSystemInfo();
			// this.myData = myData;
			this.computeRichTextWidth = windowWidth;
			this.novelMainTypeColor = novelMainTypeColor;
			this.newCharactersSize = JSON.parse(novelMainObj).charactersSize || 28;
			this.bodyReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
			// 不需要
			// this.scrollReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 38;
			// this.scrollReadingHeight = windowHeight - (screenWidth / 375) * 54;
			// // #ifdef APP-PLUS
			// this.directoryPopupHeight = screenHeight - statusBarHeight;
			// // #endif
			// // #ifdef H5 || MP-WEIXIN
			// this.directoryPopupHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
			// // #endif

			// this.bottomSecureHeight = screenHeight - windowHeight;
			this.setUpColorAll = setUpReadingColorAll;
			this.barPopupIcon = {
				'F3EFE9': {
					bookshelf_icon: bookshelf_f3efe,
					directory_icon: directory_f3efe9,
					step_up_icon: step_up_f3efe
				},
				'CCD9E2': {
					bookshelf_icon: bookshelf_ccd9e2,
					directory_icon: directory_ccd9e2,
					step_up_icon: step_up_ccd9e2
				},
				'333333': {
					bookshelf_icon: bookshelf_333,
					directory_icon: directory_333,
					step_up_icon: step_up_333
				}
			};
			this.initPage(novelMainTypeColor);
		},
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.is_images {
		display: block;
		width: 100%;
		height: 100%;
	}

	.mt40rpx {
		margin-top: 40rpx;
	}

	.novelReading_content::v-deep.u-navbar__content__title {
		font-size: 30rpx;
	}

	.novelReading_content::v-deep.u-navbar--fixed {
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
	}

	.novelReading_content::v-deep.z-paging-content {
		position: relative;
	}

	#compute_rich_text {
		position: fixed;
		top: 1500px;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.novelReading_content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.novelReading_body {
			flex: 1;
			width: 100%;

			.novelReading_main_con {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				// // padding: 32rpx 32rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				/* 兼容 iOS 设备 */
				padding-bottom: env(safe-area-inset-bottom);
				/* 兼容 iPhone X 及以上设备 */
				padding-top: var(--status-bar-height);
				/* 兼容 iOS 设备 */
				// padding-top:var(–status-bar-height);
				box-sizing: border-box;

				.novelReading_main {
					flex: 1;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					position: relative;

					.novelReading_characters_scroll {
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						box-sizing: border-box;

						.read_chapter {
							padding: 40rpx 0;
						}

						.novelReading_characters_main {
							width: 100%;
						}
					}
				}

				.reading_schedule_box {
					width: 100%;
					height: 82rpx;
					// padding: 40rpx;
					// box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
					border-radius: 40rpx;
					box-sizing: border-box;
				}
			}
		}

		.u_popup_all {
			flex: 0;
		}
	}

	.my_tabBar_Reading {
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #d6d2ce;
		// padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
		// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */

		.tabBar_Reading_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.reading_item_icon {
				width: 34rpx;
				height: 34rpx;
			}

			.reading_item_name {
				font-size: 30rpx;
				line-height: 1;
				margin-top: 10rpx;
			}
		}
	}

	.reading_schedule_box {
		width: 100%;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;

		.reading_schedule_body {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			background: transparent;

			._previous_chapter {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 192rpx;
				height: 82rpx;
				font-size: 34rpx;
				line-height: 1;
				border-radius: 12rpx;
			}

			._next_chapter {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 442rpx;
				height: 82rpx;
				font-size: 34rpx;
				line-height: 1;
				border-radius: 12rpx;
			}
		}
	}

	.step_up_box {
		width: 100%;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;

		.step_up_box_body {
			width: 100%;
			padding: 40rpx 24rpx;
			box-sizing: border-box;
			background: transparent;

			.step_up_item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.step_up_item_name {
					line-height: 1;
					font-size: 30rpx;
				}

				.step_up_item_bg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 188rpx;
					height: 74rpx;
					border-radius: 37rpx;
					box-sizing: border-box;
					border: 2rpx solid transparent;
				}

				.step_up_item_text_bg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 188rpx;
					height: 74rpx;
					border-radius: 37rpx;
					box-sizing: border-box;
				}

				.step_up_item_bg.activeBlack {
					border-color: #1a1a1a;
				}

				.step_up_item_bg.activeWhite {
					border-color: #fff;
				}
			}
		}
	}

	.reading_schedule_slider::v-deep.uni-slider-handle-wrapper {
		height: 60rpx;
		border-radius: 30rpx;

		.uni-slider-track {
			border-radius: 30rpx;
		}
	}

	.directory_popup_box {
		position: relative;
		width: 560rpx;
		height: 100%;
		box-sizing: border-box;

		.directory_scroll_y {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容 iPhone X 及以上设备 */

			._popup_box_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 120rpx;
				border-bottom: 1rpx solid #f2f2f2;

				._item_name {
					font-size: 32rpx;
					color: #333333;
					line-height: 1;
				}

				._item_name.active {
					color: #ff728f;
				}

				._item_chapter_lock {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

	}

	.purchaseFull_popup_box {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx 32rpx;

		.purchaseFull_popup_btn_box {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			.purchaseFull_popup_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 640rpx;
				height: 84rpx;
				font-size: 30rpx;
				color: #fff;
				background: linear-gradient(to top, #FBA676, #E95E32);
				border-radius: 24rpx;
			}
		}
	}
</style>