From 9f63a8a98910bcf4c9b1b6d7c17a2b3bd2b9b60e Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Tue, 4 Apr 2023 17:25:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E9=A1=B5=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manifest.json                                 |    2 +-
 pages/bookShop/commodityDetail.vue            |    3 +-
 pages/peanut/home.vue                         |    2 +-
 .../angbook - 修改阅读器缓存页面.vue | 3787 ++++++++++++++++
 pages/yRead/angbook 背景颜色未实现.vue | 3771 ++++++++++++++++
 pages/yRead/angbook.vue                       |  297 +-
 pages/yRead/angbook可用.vue                 | 3821 +++++++++++++++++
 新建 文本文档.txt                       |   44 +
 8 files changed, 11608 insertions(+), 119 deletions(-)
 create mode 100644 pages/yRead/angbook - 修改阅读器缓存页面.vue
 create mode 100644 pages/yRead/angbook 背景颜色未实现.vue
 create mode 100644 pages/yRead/angbook可用.vue
 create mode 100644 新建 文本文档.txt

diff --git a/manifest.json b/manifest.json
index 0f610ae..8eada04 100644
--- a/manifest.json
+++ b/manifest.json
@@ -19,7 +19,7 @@
             "prompt" : "template",
             "template" : {
                 "title" : "用户协议和隐私政策",
-                "message" : "请你务必审慎阅读、充分理解“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href='https://www.twin-ui.com'>《用户协议》</a>和<a href='https://www.twin-ui.com'>《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
+                "message" : "请你务必审慎阅读、充分理解“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href='https://main.nuttyreading.com/agreement.html'>《用户协议》</a>和<a href='https://main.nuttyreading.com/privacy.html'>《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
                 "buttonAccept" : "同意",
                 "buttonRefuse" : "暂不同意"
             }
diff --git a/pages/bookShop/commodityDetail.vue b/pages/bookShop/commodityDetail.vue
index a6a07a7..d9c78d1 100644
--- a/pages/bookShop/commodityDetail.vue
+++ b/pages/bookShop/commodityDetail.vue
@@ -310,8 +310,9 @@ formatRichText (html) { //控制小程序中图片大小
 </script>
 <style lang="scss" scoped>
 	.xiangqing {
-		overflow: hidden;
+		overflow: hidden; overflow-x: hidden;
 		img{display: block; max-width: 100%;}
+		p{max-width: 100%;}
 	}
 	.goods_nav {
 		z-index: 1;
diff --git a/pages/peanut/home.vue b/pages/peanut/home.vue
index 08a49c2..a8ddca7 100644
--- a/pages/peanut/home.vue
+++ b/pages/peanut/home.vue
@@ -195,7 +195,7 @@
 			return {
 				scrollTop: 0,
 				list3: [
-					'../../static/icon/home_ban_1.jpg',
+					// '../../static/icon/home_ban_1.jpg',
 					'../../static/icon/home_ban_2.jpg',
 					'../../static/icon/home_ban_3.jpg',
 				],
diff --git a/pages/yRead/angbook - 修改阅读器缓存页面.vue b/pages/yRead/angbook - 修改阅读器缓存页面.vue
new file mode 100644
index 0000000..a7d73b0
--- /dev/null
+++ b/pages/yRead/angbook - 修改阅读器缓存页面.vue	
@@ -0,0 +1,3787 @@
+<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
+<!-- 重要事项：
+	1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
+	  如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
+	2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
+	3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
+ -->
+<template>
+	<view style="height: 100%;">
+		<!-- 菜单层包含返回按钮的上半部分1 -->
+		<view class="menu-top" >
+			<view class="back">
+				<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
+			</view>
+		</view>
+		<!-- 仅用于计算（结构和样式请和阅读页一致）1 -->
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view id="content" class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view class="book-inner" id="preChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.picAndWord"></p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view class="book-inner" id="curChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p v-for="(item, index) in curChapter.text" :key="index" v-html="item.picAndWord">
+						</p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view id="nextChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p class="book-inner" v-for="(item, index) in nextChapter.text" :key="index"
+							v-html="item.picAndWord"></p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<!-- 垂直翻页 -->
+		<!-- @click="showMenu" -->
+		
+
+		<!-- 横向翻页 -->
+		<view class="across" >
+			<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
+			<view class="chantong" style="display: none;">
+				<!-- 上一页 -->
+				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
+					:style="{
+					zIndex: turnType == 0 && pageBackRef.before ? 100: 102,
+					transform: turnType == 0 && pageBackRef.before ? 'translate(0, 0)' : `translate${prePage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}">
+					<!-- 章节名 -->
+					<view class="chapter">{{ prePage.chapterName }}</view>
+
+					<!-- 外层class="content"用于计算阅读部分的高度 -->
+					<view class="content">
+						<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
+							<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
+							<view class="book-inner">
+								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
+									:class="highlight === item.paragraph ? 'highlight' : ''"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ prePage.pageNum + 1 }}/{{ prePage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+				</view>
+
+				<!-- 本页 -->
+				<view ref="curPageRef" class="container mypages"
+					:class="{ container0: background === 1, container1: background === 2 }" :style="{
+					zIndex: 101,
+					transform: `translate${curPage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" @touchcancel="touchcancel">
+					<!-- 章节名 -->
+					<view class="chapter">{{ curPage.chapterName }}
+						<uni-icons v-if="newchapterImgList && newchapterImgList.length > 0" id="showImgs"
+							@click="showImgHandle" color="#6aa84f" class="showImgs" type="images" size="20"></uni-icons>
+					</view>
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
+							<view class="book-inner">
+								<!-- <pre>
+							{{curPage.text}}
+							</pre> -->
+								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
+									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
+								@touchend.stop="buyBook">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ curPage.pageNum + 1 }}/{{ curPage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+
+
+				</view>
+
+				<!-- 下一页-->
+				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
+					:style="{
+					zIndex: 100,
+					transform: `translate${nextPage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}">
+					<!-- 章节名 -->
+					<view class="chapter">{{ nextPage.chapterName }}</view>
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="nextPage.canRead">
+							<view class="book-inner">
+								<p v-for="(item, index) in nextPage.text" v-html="item.list" :key="index"
+									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ nextPage.pageNum + 1 }}/{{ nextPage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 仿真翻页 -->
+			<view v-if="isSimulation" class="flipbook-viewport" 
+			:rect="rect" 
+			:change:rect="updateRenderData"	
+			:readerSet = "readerSet"
+			:change:readerSet="updateReaderSet"
+			:musicItem="musicItem"
+			:change:musicItem="updateMusic"
+			:oldReadSpeed="oldReadSpeed"
+			:change:oldReadSpeed="updateReadPercent"
+			:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
+			 @touchend="turnjs.onClick"
+			>
+			<!-- <view class="container across"  @touchend="openEnd" @touchstart="openStart"> -->
+				<view class="container across"  >
+					<view class="flipbook" id="flipbook" >
+						<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; ">->点击两侧开启阅读<-</p> </div></div>						
+						<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
+							<div class="chapter">{{ curPage.chapterName }}</div>
+							<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
+								:class="{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
+								:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+							</p>							
+						</div> -->
+					</view>
+				</view>
+			</view>			
+			<!-- 模拟页面背景 -->
+			<view class v-if='turnType == 0 && !pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
+					width: `${pageBackRef.width}`,right: `${pageBackRef.right}`  }]" class="pageback_container">
+				<view class="pageback"></view>
+			</view>
+			<view class v-if='turnType == 0 && pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
+					width: `${pageBackRef.width}`,left: `${pageBackRef.left}`  }]" class="pageback_container">
+				<view class="pageback"></view>
+			</view>
+		</view>
+
+		<!-- 听书按钮 -->
+		<view class="listenbook" v-if="musicManuShow">
+			<view class="listenitem" @click="listenHandle">听</view>
+		</view>
+		<!-- 暂停按钮 -->
+		<view class="audio_menu" v-if="isAudioMenu">
+			<view class="pause audioSymbol" v-if="!isPause" @click="audioPause()">
+				<u-icon name="pause" color="#fff" size="28"></u-icon>
+			</view>
+			<view class="right audioSymbol" v-else @click="audioPause()">
+				<u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
+			</view>
+			<view class="audioSymbol" @click="offAudio">
+				<u-icon name="close" color="#fff" size="28"></u-icon>
+			</view>
+		</view>
+
+		<!-- 菜单层 -->
+		<view class="menu" :style="{ height: `100%`, width: `${windowWidth}px` }" v-if="menuShow" @touchend="closeMenu">
+			<!-- 菜单层包含返回按钮的上半部分 -->
+			<view class="menu-top" :style="{ height: `${statusBarHeight + 40}px`, top: itemShow ? 0 : `-100%` }"
+				@touchend.stop>
+				<view :style="{ height: `${statusBarHeight}px` }"></view>
+				<view class="head">
+					<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
+				</view>
+			</view>
+			<!-- 菜单主体 -->
+			<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }" @touchend.stop>
+				<!-- 用于显示章节进度 -->
+				<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}</view>
+				<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
+
+				<!-- 章节进度条 -->
+				<view class="progress-box">
+					<text style="" @click="goPreChapter">上一章</text>
+					<view
+						style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
+						<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
+							:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
+					</view>
+					<text @click="goNextChapter">下一章</text>
+				</view>
+				<view class="items-box">
+					<view class="item-box" @click="openDirectory">
+						<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
+						<text style="font-size: 13px;">目录</text>
+					</view>
+					<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
+						<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
+						<text style="font-size: 13px;">夜间</text>
+					</view>
+					<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
+						<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
+						<text style="font-size: 13px;">日间</text>
+					</view>
+					<view class="item-box" @click="openSetting">
+						<text class="iconfont" style="font-size: 25px;">A</text>
+						<text style="font-size: 13px;">设置</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }" @touchend.stop>
+				<view class="item">
+					<view class="item-name">字号</view>
+					<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
+					<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
+					<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
+					<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
+				</view>
+				<view class="item">
+					<view class="item-name">排版</view>
+					<view class="type-setting" :class="{ active: lineHeight === 1 }" @click="changeLineHeight(1)">
+						<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i"></view>
+					</view>
+					<view class="type-setting" :class="{ active: lineHeight === 1.5 }" @click="changeLineHeight(1.5)">
+						<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i"></view>
+					</view>
+					<view class="type-setting" :class="{ active: lineHeight === 2 }" @click="changeLineHeight(2)">
+						<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i"></view>
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">背景</view>
+					<view class="icon" style="" :class="{ active: background === 1 }" @click="changeBackground(1)">
+					</view>
+					<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
+						@click="changeBackground(2)"></view>
+				</view>
+			</view>
+		</view>
+		<!-- 目录层 -->
+		<u-popup class="directory" mode="left" v-if="directoryShowBefore" :show="directoryShowBefore"  @close="directoryShowBefore=false">
+			<view class="tanchu"  style="padding-right: 10px; width: 500rpx;">
+				<view class="bookname">{{ bookName }}</view>
+				<!--  :size="40"——每一栏高度为40px  :scrollHeight="windowHeight - 60"——书名的高度为60px -->
+				<virtual-list :items="directoryList" :size="40" :remain="16" :active="curChapter.chapterIndex"
+					:scrollHeight="windowHeight - 60">
+					<template v-slot="{ item, active }">
+						<view class="directory-listItem" :class="{ active: item.index == active }"
+							@click="goToChapter(item)">{{ item.name }}</view>
+					</template>
+				</virtual-list>
+			</view>
+		</u-popup>
+		<!-- 图片弹窗 -->
+		<u-popup :show="imgsShow" :round="10" @close="imgsShow=false">
+			<view class="tanchu" v-if="newchapterImgList">
+				<text class="chapterImgTitle">当前章节共 {{newchapterImgList.length}} 张图片</text>
+				<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="toRight">
+					<view v-for="(item,index) in newchapterImgList" class="scroll-view-item_H">
+						<view class="imgBox">
+							<view style="height:90%" @click="clickImg(newchapterImgList,index)">
+								<img :src="item" alt="" height="100%">
+							</view>
+							<text style="font-size: 24rpx; color: #666;">第 {{index + 1}} 张</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</u-popup>
+
+		<u-popup :show="setShow" :round="10" @close="setShow = false">
+			<view class="setMenu">
+				<u-grid :border="false" col="3" @click="clickSet">
+					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
+						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="30"></u-icon>
+						<text class="grid-text" style="color: #666;">{{baseListItem.title}}</text>
+					</u-grid-item>
+				</u-grid>
+				<view class="menu">
+
+					<!-- 菜单主体 -->
+					<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }">
+						<!-- 用于显示章节进度 -->
+						<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}
+						</view>
+						<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
+
+						<!-- 章节进度条 -->
+						<view class="progress-box">
+							<text style="" @click="goPreChapter">上一章</text>
+							<view
+								style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
+								<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
+									:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
+							</view>
+							<text @click="goNextChapter">下一章</text>
+						</view>
+						<view class="items-box">
+							<view class="item-box" @click="openDirectory">
+								<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
+								<text style="font-size: 13px;">目录</text>
+							</view>
+							<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
+								<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
+								<text style="font-size: 13px;">夜间</text>
+							</view>
+							<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
+								<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
+								<text style="font-size: 13px;">日间</text>
+							</view>
+							<view class="item-box" @click="openSetting">
+								<text class="iconfont" style="font-size: 25px;">A</text>
+								<text style="font-size: 13px;">设置</text>
+							</view>
+						</view>
+					</view>
+
+					<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }">
+						<view class="item">
+							<view class="item-name">字号</view>
+							<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
+							<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
+							<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
+							<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
+						</view>
+						<view class="item">
+							<view class="item-name">排版</view>
+							<view class="type-setting" :class="{ active: lineHeight === 1 }"
+								@click="changeLineHeight(1)">
+								<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i">
+								</view>
+							</view>
+							<view class="type-setting" :class="{ active: lineHeight === 1.5 }"
+								@click="changeLineHeight(1.5)">
+								<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i">
+								</view>
+							</view>
+							<view class="type-setting" :class="{ active: lineHeight === 2 }"
+								@click="changeLineHeight(2)">
+								<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i">
+								</view>
+							</view>
+						</view>
+						<!-- <view class="item">
+							<view class="item-name">背景</view>
+							<view class="icon" style="" :class="{ active: background === 1 }"
+								@click="changeBackground(1)">
+							</view>
+							<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
+								@click="changeBackground(2)"></view>
+						</view> -->
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import battery from '../../components/battery/battery.vue'
+	import virtualList from '../../components/virtualList/virtualList.vue'
+	// 引入翻页效果动画
+	import $ from 'jquery'
+
+	import {
+		dateToStr
+	} from '../../utils/utils.js'
+	import {
+		mapState
+	} from 'vuex';
+	import $http from '../../config/requestConfig';
+import { nextTick } from "vue";
+
+	let copyBookText = []
+	let preText = []
+	let nextText = []
+	let imglist = []
+
+	// var music = uni.createInnerAudioContext();
+	export default {
+		components: {
+			battery,
+			virtualList
+		},
+		data() {
+			return {
+				baseList: [{
+						name: 'photo',
+						title: '章节图片'
+					},
+					{
+						name: 'list-dot',
+						title: '目 录'
+					},
+					{
+						name: 'play-circle',
+						title: '听 书'
+					}
+				],
+				imgsShow: false,
+				nothingShow: false,
+				// 本章图片列表
+				chapterImgList: [],
+				newchapterImgList: [],
+				preChapterTotal: null,
+				nextChapterTotal: null,
+				// preBookText = []
+				oldReadSpeed: { // 本地初始阅读进度
+					precent: null,
+					updateReadId: null,
+					readPage:0
+				},
+				scrollTop1: 0,
+				bookName: '我是书名',
+				bookFengMian:'', // 书籍封面
+				bookId: 1,
+				bookId_mark: '',
+				history: { //本书历史记录
+					chapterIndex: 0,
+					progress: 0
+				},
+
+				directoryList: [], //目录列表
+				currentPage: 0, //当前页
+				read: 0,
+
+				innerHeight: 0, //截取至整行的最大高度
+
+				preChapter: { //上一章数据
+					ready: false, //是否准备完毕
+					chapterIndex: '',
+					chapterName: '', //章节名称
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				curChapter: { //本一章数据
+					chapterIndex: '',
+					chapterName: '',
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				nextChapter: { //下一章数据
+					ready: false, //是否准备完毕
+					chapterIndex: '',
+					chapterName: '',
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				tmpChapter: { //暂存章节内容
+					text: [],
+					canRead: true
+				},
+
+				cover: { //封面的状态
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+				},
+
+				prePage: { //上一页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: 1,
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true,
+					isPre: false
+				},
+
+				curPage: { //本页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: 1,
+					totalPage: 1,
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true,
+				},
+
+				nextPage: { //下一页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: '',
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true
+				},
+
+				verticalData: {
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: '',
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true
+				},
+
+				next: false, //用户是否正在翻下一页
+				pre: false, //用户是否正在翻上一页
+
+				waitForNext: false, //是否正在等待下一页准备完毕后跳转
+				waitForPre: false, //是否正在等待上一页准备完毕后跳转
+				waitForNextChapter: false, //是否正在等待下一章准备完毕后跳转
+				waitForPreChapter: false, //是否正在等待上一章准备完毕后跳转
+
+				showAnimation: false, //是否开启动画
+				showShadow: false, //是否显示页面阴影
+
+				isVertical: false, // 是否开启垂直阅读
+				down: false, // 用于scroll事件请求数据判断
+
+				windowWidth: 0, //可用屏幕宽度
+				windowHeight: 0, //可用屏幕高度
+				contentHeight: 0, //阅读区域高度
+
+				scrollTop: 0, // 垂直阅读 scrolltop
+
+				platform: '', //设备
+				batteryState: '', //电池状态
+				batteryLevel: 100, //电量
+				systemTime: '', //系统时间
+				systemTimeStr: '', //系统时间字符串
+				statusBarHeight: 0, //状态栏高度
+				pixelRatio: '', //设备像素比
+
+				touchStartX: 0, // 触屏起始点x
+				touchX: 0, // 瞬时触屏点x
+				delta: 0, // 手指瞬时位移
+
+				isTouch: false, // 是否处于触屏状态
+				curPageTranslate: 0, // 本页的移动位置
+				touchStartY: 0, // 触屏起始点y
+				touchY: 0, // 瞬时触屏点y
+				sliderValue: 0, // scroll事件赋值
+
+				menuShow: false, //菜单栏box是否渲染
+				itemShow: false, // 菜单栏动画控制
+				settingShow: false, //设置栏动画控制
+				directoryShow: false, //目录动画控制
+				directoryShowBefore: false, // 目录渲染
+				turnPageTime: .5, //翻页动画时间
+
+				biaodian: ['，', ':', '、', ';', '。', '.'], //匹配的标点
+				maxFontSize: 30, //最大字体大小，px
+				minFontSize: 14, //最小字体大小，px
+				turnType: 4, //翻页方式
+				NumCol: '', // 一章多少行
+				colSize: '', // 一行多少字
+				fontSize: '', //字体大小，
+				simplified: '', //是否简体
+				lineHeight: '', //行高，注意是fontSize的倍数
+				background: '', //背景
+				colorList: ['#000', '#666'], //与背景对应的字体颜色
+				highlight: "null", // 字体高亮
+				fhighlight: false, // 左右的高亮
+				chapterProgress: 0, //‘章节进度条’的参数
+				progressTouched: false, //是否正在点击‘章节进度条’
+				highlightTimer: '', // 高亮定时器名字
+				domList: [], // dom列表
+				domIndex: 0, // dom下标
+				music: null, // 创建audio
+				musicManuShow: false, // 听书按钮是否显示
+				isPause: false, // 是否暂停
+				isAudioMenu: false, // 是否展示听书菜单
+				oldType: null,
+				detail: {
+					title: "",
+					data: [],
+					freeChapterCount: 0,
+					isBuy: 0,
+					isVip: 0,
+					chapterNum:null, // 阅读章节数
+				},
+				isVerticalHua: false,
+				speedTrue: false, //判断是否更新进度
+				speedData: {
+					bookId: 0,
+					chapter_id: 0,
+					chapter_name: '',
+					precent: '',
+					content_id: 0
+				},
+				updateReadId: 0,
+				newData: [],
+				pageBackRef: {
+					transition: "unset",
+					left: 0,
+					right: 0,
+					width: 0,
+					before: false
+				},
+				topChange: 0,
+				scroll_end: false,
+				musicPlaying: false, // 正在播放音频
+				// 仿真翻页参数
+				width: uni.getSystemInfoSync().windowWidth,
+				height: '800px',
+				text: 'hello',
+				isSimulation: true, // 仿真翻页模式				
+				SimulationTextObj : {    // 仿真翻页内容
+				'SimulationText' : [],
+				'fontSize' : '',
+				'lineHeight':''
+				},
+				hasSimulationText: false,
+				setShow: false, // 设置显示？
+				clientlast: null, //开始位置
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除				
+				musicItem:{
+					// 听书相关内容
+					musicIndexDom:0,
+					highlight: 'null',
+					musicPlaying:false,
+				},
+				readerSet:{
+					fontSize:'',  // 字体大小，
+					lineHeight:'' ,// 行高，注意是fontSize的倍数
+					page:0,	
+					background:''
+				}
+			}
+		},
+
+		onLoad(option) {
+			this.bookId_mark = option.Id
+			this.getSystemInfo()
+			this.bookMessage()
+			this.setStorage()
+		},
+		onUnload() {
+
+			// #ifdef APP-PLUS
+			// 退出全屏
+			plus.navigator.setFullscreen(false)
+			// #endif
+
+			this.setStorage()
+		},
+		onReady() {
+			// console.log('------------------------------')			
+			// 单页禁止测滑返回
+			// #ifdef APP-PLUS
+			let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
+			currentWebview.setStyle({
+				popGesture: 'none'
+			})
+			// #endif
+		},
+		onHide() {
+			this.setStorage()
+		},
+		mounted() {
+			this.initPage()
+		},
+		computed: {
+			progress() { //章节的阅读进度
+				if (this.curChapter.totalPage === 1) {
+					return 0
+				}
+				return this.currentPage / (this.curChapter.totalPage - 1)
+			},
+			...mapState(['userInfo']),
+			rect() {
+				return {					
+					width: this.width,
+					height: this.height
+				}
+
+			}
+			
+		},		
+		methods: {
+			_changeReaderSeting(){				
+				this.readerSet.fontSize = this.fontSize,  //字体大小，
+				this.readerSet.lineHeight = this.lineHeight //行高，注意是fontSize的倍数
+				
+			},
+			changeMusicItem(){
+					this.musicItem.highlight = this.highlight,
+					this.musicItem.musicIndexDom = this.domIndex,
+					this.musicItem.musicPlaying = this.musicPlaying				
+			},
+			openStart(e) {
+				//记录位置
+				this.clientlast = e.changedTouches[0];
+			},
+			openEnd(e) {
+					
+				this.touchNum++
+				if (this.touchNum == 0) {} else {
+					if (this.touchNum > 1) {
+						clearTimeout(this.touchTime)
+						//单击事件
+						this.touchTime = setTimeout(() => {
+							this.touchNum = 0
+						}, 250)
+						console.log('双击')
+						this.setShow = true
+						// this.createAudio()
+					} else {
+						clearTimeout(this.touchTime)
+						this.touchTime = setTimeout(() => {
+							//双击或则多次点击事件
+							this.touchNum = 0
+						}, 250)
+						//console.log('单击')
+					}
+				
+				}
+			},
+			clickImg(item, index) {
+				// 点击图片
+				let imgarr = this.newchapterImgList.map(item => item)
+				// console.log(imgarr, 'imgarr')
+				this.imgsShow = false
+				uni.previewImage({
+					current: index,
+					urls: imgarr
+				})
+			},
+			clickSet(name) {
+				// 点击图片	
+				if (name == 0) {
+					// 章节图片
+					this.imgsShow = true
+				} else if (name == 1) {
+					// 目录
+					//this.openDirectory()					
+					this.directoryShowBefore = true
+					this.directoryShow = true
+					this.$nextTick(function() {
+						console.log(4545,this.directoryShow)
+						})
+				} else if (name == 2) {
+					// 听书
+					this.listenHandle()
+				}
+
+				this.setShow = false
+				// this.$refs.uToast.success(`点击了第${name}个`)			
+				// console.log(name,'imgarr')
+
+			},
+			toRight() {
+				this.nothingShow = true
+			},
+			showImgHandle() {
+				this.imgsShow = true
+			},
+			bookMessage() {
+				this.$http
+					.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
+					.then(res => {
+						this.bookName = res.book.name,
+						this.bookFengMian = res.book.images,
+						this.detail.freeChapterCount = res.book.freeChapterCount,
+						this.detail.isBuy = res.book.isBuy,
+						this.detail.isVip =  res.book.isVip,
+						this.detail.chapterNum = res.book.chapterNum // 阅读章节数
+						//console.log('获取电子书详情', res)
+					});
+
+
+			},
+			counlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.forGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			mpcounlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.mpforGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			nextmpcounlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.nextmpforGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			// 拆分数据
+			forGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				this.chapterImgList = []
+				copyBookText.map((res, index) => {
+					res.content = '' + res.content
+					// console.log(res.picAndWord)
+					if (res.content.length > colSize - 2) {
+						//colSize - 2  段落首行空格
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+					let picAndWord = res.otherContent
+					// let reg = new RegExp('(?<=(img src="))[^"]*?(?=")/gi)')
+					//let RegEx = /(?<=(img src="))[^"]*?(?=")/gims
+					// let imgArr = picAndWord.match(reg)
+					let imgArr = picAndWord
+					// let imgArr = picAndWord.match(/src*?\/g)
+
+					this.chapterImgList[index] = imgArr
+
+				})
+				// 过滤图片数据
+				let arr3 = []
+				this.chapterImgList.map((item, index) => {
+
+					if (item != null && item != '') {
+						// console.log(item,'item')
+						arr3.push(item)
+					}
+				})
+				this.newchapterImgList = arr3
+				// console.log(this.newchapterImgList, 'newchapterImgList')
+				copyBookText = arr
+				// console.log(this.SimulationText,'SimulationText')
+				this.getSizePage(NumCol)
+			},
+			mpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				preText.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				preText = arr
+				// console.log(copyBookText,'copyBookText')
+				// this.getSizePage(NumCol)
+			},
+			nextmpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				nextText.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				nextText = arr
+				// console.log(copyBookText,'copyBookText')
+				// this.getSizePage(NumCol)
+			},
+			//获取后面的字符，再去计算能放几行
+			aginForget(text, arr, colSize, index) {
+				let that = this;
+				let strBR = "</br>"
+				if (text.length > colSize) {
+					let nextString = text.substr(colSize, 1)
+					let haveBiao = 0
+					for (var i = 0; i < this.biaodian.length; i++) {
+						if (nextString == this.biaodian[i]) {
+							haveBiao = 1
+						}
+					}
+					arr.push({
+						'paragraph': index,
+						'list': text.substr(0, colSize - haveBiao),
+						'level': 0,
+						class: ''
+					})
+
+					let newText = text.substr(colSize - haveBiao)
+					that.aginForget(newText, arr, colSize, index)
+				} else {
+					arr.push({
+						'paragraph': index,
+						'list': text.substr(0, colSize),
+						'level': 0,
+						class: ''
+					})
+					// arr.push(strBR)					
+				}
+			},
+			tmpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				this.tmpChapter.text.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				this.tmpChapter.text = arr
+				// console.log(copyBookText,'copyBookText')
+				this.getSizePage(NumCol)
+			},
+			// 计算章节页数
+			getSizePage(NumCol) {
+				let that = this;
+				let arr = [],
+					newArr = []
+				copyBookText = copyBookText.filter((item, index) => {
+
+					if (item == '' || item == '  ' || item == '   ') {
+
+					} else {
+						return item
+					}
+				})
+				for (let i = 0; i < copyBookText.length; i++) {
+					newArr.push(copyBookText[i])
+					if (newArr.length < NumCol) {
+
+					} else {
+						arr.push(newArr)
+						newArr = []
+					}
+				}
+				arr.push(newArr)
+				copyBookText = arr // 每一页显示的内容
+				this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = { 
+				SimulationText : arr,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				// background:this.background
+				}
+				this.hasSimulationText = true
+				console.log(this.SimulationText, 'SimulationText')
+			},
+
+			setStorage() {
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					history = []
+				}
+				let have = false
+				history.forEach((value) => {
+					if (value.bookId === this.bookId) {
+						have = true
+						value.chapterIndex = this.curChapter.chapterIndex
+						value.progress = this.progress
+					}
+				})
+				console.log(history, '缓存')
+				if (!have) {
+					// 设备内没有当前的缓存数据时
+					history.push({
+						bookId: this.bookId,
+						chapterIndex: this.curChapter.chapterIndex,
+						progress: this.progress
+					})
+					// 将进度存到数据库
+					this.saveReadRateUl()
+					//this.updateReadRateUl()   // 更新进度
+				}
+				// oldReadSpeed:{      // 本地初始阅读进度
+				//    chapterIndex: null,
+				// 	updateReadId: null  
+				// },				
+				if ((this.oldReadSpeed.precent / 10) < this.progress) {
+
+					this.speedData.precent = this.progress
+					this.speedData.bookId = this.bookId_mark;
+					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
+					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
+					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
+					//console.log('符合更新条件')
+					// 阅读进度大于原进度时
+					this.updateReadRateUl()
+				}
+				uni.setStorageSync('history', history)
+			},
+
+			/**
+			 * 返回上一页面
+			 **/
+			back() {
+				uni.navigateBack()
+			},
+
+			/**
+			 * 获取设备信息
+			 **/
+			getSystemInfo() {
+				const {
+					windowWidth,
+					windowHeight,
+					statusBarHeight,
+					platform,
+					pixelRatio
+				} = uni.getSystemInfoSync()
+				//获取一些必要的设备参数
+				this.statusBarHeight = statusBarHeight
+				this.windowWidth = windowWidth
+				this.windowHeight = windowHeight
+				this.pixelRatio = pixelRatio
+				this.platform = platform
+				// #ifdef APP-PLUS
+				// 全屏
+				plus.navigator.setFullscreen(true)
+				// 取消ios左滑返回
+				let page = this.$mp.page.$getAppWebview()
+				page.setStyle({
+					popGesture: 'none'
+				})
+
+				if (this.platform === 'ios') {
+					// 获取ios电量
+					let UIDevice = plus.ios.import("UIDevice")
+					let dev = UIDevice.currentDevice()
+					if (!dev.isBatteryMonitoringEnabled()) {
+						dev.setBatteryMonitoringEnabled(true)
+					}
+					setInterval(() => {
+						this.batteryState = dev.batteryState()
+						this.batteryLevel = dev.batteryLevel() * 100
+					}, 1000)
+
+				} else {
+					// 获取安卓电量
+					let main = plus.android.runtimeMainActivity();
+					let Intent = plus.android.importClass('android.content.Intent');
+					let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
+						onReceive: (context, intent) => {
+							let action = intent.getAction();
+							if (action == Intent.ACTION_BATTERY_CHANGED) {
+								this.batteryState = intent.getIntExtra("status", 0); //电池状态
+								this.batteryLevel = intent.getIntExtra("level", 0); //电量
+							}
+						}
+					});
+					let IntentFilter = plus.android.importClass('android.content.IntentFilter');
+					let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
+					main.registerReceiver(recevier, filter);
+				}
+
+				// #endif
+				// 设置时间
+				let date = new Date();
+				this.systemTime = Date.parse(date);
+				this.systemTimeStr = dateToStr(this.systemTime);
+				setInterval(() => {
+					this.systemTime += 60000;
+					this.systemTimeStr = dateToStr(this.systemTime);
+				}, 60000)
+
+
+				// 获取字体、排版等信息
+
+				//可能缓存在前端可能从后端拿，如果是异步注意同步处理
+				this.fontSize = uni.getStorageSync('fontSize')
+				if (typeof this.fontSize !== 'number') {
+					this.fontSize = 18
+				}
+				this.simplified = uni.getStorageSync('simplified')
+				if (typeof this.simplified !== 'number') {
+					this.simplified = 1
+				}
+				this.lineHeight = uni.getStorageSync('lineHeight')
+				if (typeof this.lineHeight !== 'number') {
+					this.lineHeight = 1.5
+				}
+				this.background = uni.getStorageSync('background')
+				if (typeof this.background !== 'number') {
+					this.background = 1
+				}
+				this.readerSet.background = this.background
+				this.turnType = uni.getStorageSync('turnType')
+				if (this.turnType == 2) {
+					this.isVertical = true;
+				}
+				if (this.turnType == 3) {
+					this.isVerticalHua = true;
+				}
+				if (typeof this.turnType !== 'number') {
+					this.turnType = 0
+				}
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					history = []
+				}
+				history.forEach((value) => {
+					if (value.bookId === this.bookId) {
+						this.history = value
+					}
+				})
+				this.$nextTick(()=>{
+					this._changeReaderSeting()
+				})
+				/*****************************************/
+				/*****************************************/
+				/*****************************************/
+				
+			},
+
+			/**
+			 * 获取数据并计算页面
+			 **/
+			async initPage() {
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
+				this.cover.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				await this.calcHeight()
+				await this.getDirectoryList()
+				await this.getReadRateUl()
+
+				if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
+					this.history.chapterIndex = 0
+				}
+				await this.getThreeChapter(this.history.chapterIndex)
+				// this.counlSystemInfo()
+				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
+				this.oldReadSpeed.readPage = page
+				this.goToPage(page)
+				uni.hideLoading()
+			},
+
+			/**
+			 * 计算innerHeight，用于截取至整行
+			 **/
+			calcHeight() {
+				if (this.contentHeight) {
+					let lineHeight = this.fontSize * this.lineHeight;
+					// #ifdef APP-PLUS || MP-WEIXIN
+					lineHeight = Math.floor(lineHeight * this.pixelRatio) / this.pixelRatio
+					// #endif
+					let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize) / 2)) /
+						lineHeight)
+					this.innerHeight = lineNum * lineHeight
+				} else {
+					return new Promise((resolve, reject) => {
+						this.$nextTick(() => {
+							const query = uni.createSelectorQuery().in(this);
+							query.select('#content').boundingClientRect(data => {
+								let height = data.height;
+								this.contentHeight = height;
+								let lineHeight = this.fontSize * this.lineHeight;
+
+								// #ifdef APP-PLUS || MP-WEIXIN
+								lineHeight = Math.floor(lineHeight * this.pixelRatio) / this
+									.pixelRatio
+								// #endif
+								let lineNum = Math.floor((height + Math.floor((lineHeight - this
+									.fontSize) / 2)) / lineHeight)
+								this.innerHeight = lineNum * lineHeight
+								resolve()
+							}).exec();
+						})
+
+					})
+				}
+
+			},
+
+			/**
+			 * 计算本章页数
+			 **/
+			calcCurChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#curChapter').boundingClientRect(data => {
+							let height = data.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif
+							// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
+							this.curChapter.totalPage = copyBookText.length
+							this.curChapter.ready = true //章节准备完毕
+							resolve()
+						}).exec();
+					}, 100)
+
+				})
+			},
+			/**
+			 * 顶部 计算上一章 （如果有）
+			 **/
+			scrolltoupper(e) {
+				if (this.isAudioMenu == false && e.detail.direction == "top" && e.type == "scrolltoupper" && !this.down) {
+					if (this.curChapter.chapterIndex > 0) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex - 1)
+							uni.hideLoading()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已经在最开头了'
+						})
+					}
+				}
+			},
+			/**
+			 * 底部 加载下一章 （如果有）
+			 **/
+			async scrolltolower(e) {
+				if (e.detail.direction == "bottom" && e.type == "scrolltolower") {
+
+					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							this.scrollTop = 0
+							uni.hideLoading()
+							this.down = true
+						}, 300)
+						setTimeout(() => {
+							this.clearDown()
+						}, 500)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已加载全部1'
+						})
+					}
+				}
+			},
+			/**
+			 * 还原 this.down
+			 **/
+			clearDown() {
+				setTimeout(() => {
+					this.down = false
+				}, 300)
+			},
+			/**
+			 * 听书事件
+			 **/
+			listenHandle() {
+				// this.changeTurnType(2)
+				const query = uni.createSelectorQuery().in(this);
+				// console.log(query)
+				query.selectAll('.book-inner').boundingClientRect(data => {
+					// console.log('this.domList',this.domList);
+					//console.log('data',data);					
+					data = data.filter((item, index) => {
+						return item.id == ""
+					})
+					if (this.domList.length > 0) {
+						console.log('读取到数据，继续执行');
+					} else {
+						console.log('读取到的数据为空，进行赋值');
+						this.domList = data;
+					}
+					this.getNowReadIndex()
+					// this.$nextTick(()=>{
+					// 	this.createAudio()
+					// })					
+				}).exec();
+			},
+
+			getNowReadIndex() {
+				let progress = this.progress //记录阅读进度用于调整字体后跳转
+				// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				let page = 0
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					page = 0
+				} else {
+					page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				}
+				// console.log(this.curChapter.totalPage, 'curChapter')
+				// 通过page 判断当前读到了哪里
+				// console.log(page+1, '当前页')
+
+				let nowRead = copyBookText[page][0].list
+				console.log(nowRead, '顶部第一句话')
+				//let nowReadIndex = 0
+				//console.log(page,'page')
+				if (page == 0) {
+					// return this.scrollTop = 0
+					this.domIndex = 0
+					this.createAudio()
+					this.musicManuShow = false
+					this.isAudioMenu = true					
+				} else {
+					let found = false
+					this.verticalData.text.forEach((item, itemIndex) => {
+						// console.log(copyBookText[page][0][0],'copyBookText')
+						//console.log(item.content,'item')				
+						if (item.content.indexOf(nowRead) != -1) {
+							// 找到了
+							console.log(item.number, '找到了')
+							found = true
+							this.domIndex = itemIndex
+							this.createAudio()
+							this.musicManuShow = false
+							this.isAudioMenu = true							
+							return
+						}
+					})
+					if (!found) {
+						uni.showToast({
+							title: '未找到音频',
+							icon: 'none',
+							duration: 2000
+						})
+					}
+				}
+			},
+
+			// 创建音频
+			createAudio() {
+				console.log('读到的位置', this.domIndex);
+				this.music = uni.createInnerAudioContext()
+				this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
+				console.log(this.verticalData.text, '文本')
+				// 找到符合条件的dom
+				console.log('domList', this.domList)
+				// 给对应dom高亮				
+				this.highlight = this.domIndex
+				this.fhighlight = true
+				console.log('highlight', this.highlight);
+				console.log('domIndex', this.domIndex);
+				// 判断是否有src
+				if (this.music.src) {
+					setTimeout(() => {
+						this.music.play(); //执行播放
+						this.musicPlaying = true
+						this.musicItem.musicPlaying = true
+						this.changeMusicItem()
+					}, 150)
+				}
+				// 音频播放结束
+				this.music.onEnded(() => {
+					this.musicPlaying = false
+					if (this.domIndex == this.domList.length - 1) {
+						console.log('全部音频播放完毕');
+
+					} else {
+						console.log('音频播放结束2');
+						this.addDomIndex()
+					}
+				});
+			},
+			// 加载下一条音频
+			addDomIndex() {
+				this.domIndex += 1
+				//console.log(this.domIndex, '下一条domIndex')	
+				//console.log(this.curPage.text, '最大值')	
+				setTimeout(() => {
+					this.createAudio()
+					let paragraphindex = 0
+					//if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
+					this.curPage.text.map((item, index) => {
+						if (index == this.curPage.text.length - 1) {
+							paragraphindex = item.paragraph
+							return
+						}
+					})
+					//return 
+					if (this.domIndex > paragraphindex) {
+						this.goNextPage()
+					}
+
+				}, 1000)
+
+			},
+			// 暂停事件
+			audioPause() {
+				this.isPause = !this.isPause
+				if (this.isPause) {
+					this.music.pause()					
+					this.musicPlaying = false
+					this.musicItem.musicPlaying = false
+				} else {
+					this.music.play()
+					this.musicPlaying = true
+					this.musicItem.musicPlaying = true
+				}
+			},
+			//  关闭听书
+			offAudio() {
+				this.music.stop();
+				// this.domIndex = 0;
+				this.highlight = "null";
+				this.fhighlight = false
+				this.isAudioMenu = false;
+				this.isPause = false;
+				this.music = null;
+				this.musicPlaying = false
+				this.changeMusicItem()
+			},
+
+			/**
+			 * 计算上一章页数,并翻页（如果有）
+			 **/
+			calcPreChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#preChapter').boundingClientRect(data => {
+							let height = data.height;
+							// let height = copyBookText.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif						
+							// this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1
+							this.preChapter.totalPage = this.preChapterTotal
+							this.preChapter.ready = true //章节准备完毕
+							if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
+								uni.hideLoading() //把loading关掉
+								this.waitForPre = false;
+								//页面准备完毕
+								this.goPrePage()
+							}
+							if (this.waitForPreChapter) {
+								uni.hideLoading()
+								this.waitForPreChapter = false
+								this.goPreChapter()
+							}
+							resolve()
+						}).exec();
+
+					}, 100)
+
+				})
+
+			},
+
+			/**
+			 * 计算下一章页数,并翻页（如果有）
+			 **/
+			calcNextChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#nextChapter').boundingClientRect(data => {
+							let height = data.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif
+							//this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
+							this.nextChapter.totalPage = this.nextChapterTotal
+							this.nextChapter.ready = true //章节准备完毕
+							if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
+								uni.hideLoading() //把loading关掉
+								this.waitForNext = false;
+								//页面准备完毕
+								this.goNextPage()
+							}
+							if (this.waitForNextChapter) {
+								uni.hideLoading()
+								this.waitForNextChapter = false
+								this.goNextChapter()
+							}
+							resolve()
+						}).exec();
+					}, 100)
+
+				})
+
+			},
+
+			/**
+			 * 触摸开始
+			 **/
+			touchStart(e) {
+				this.showAnimation = false
+				this.isTouch = true
+				this.touchX = e.touches[0].clientX;
+				this.touchStartX = e.touches[0].clientX;
+				this.touchY = e.touches[0].clientY;
+				this.touchStartY = e.touches[0].clientY;
+				// console.log(touchStartY, '触摸开始')
+
+				if (this.turnType === 0) {
+					// this.$refs.pageBackRef.$el.style.transition = 'unset'
+					// this.$refs.pageBackRef.$el.style.right = 0
+					// this.$refs.pageBackRef.$el.style.width = 0
+					this.pageBackRef.transition = 'unset'
+					this.pageBackRef.right = 0
+					this.pageBackRef.left = 0
+					this.pageBackRef.width = 0
+					this.pageBackRef.before = true
+				}
+			},
+
+			/**
+			 * 触摸
+			 **/
+			touchMove(e) {
+				this.showShadow = true;
+				let delta = 0
+
+				if (this.turnType === 0 || this.turnType === 1) { // 翻页方式为‘覆盖’ 或 ‘左右平移’
+					delta = e.touches[0].clientX - this.touchStartX;
+
+					this.pageBackRef.before = delta > 0 ? true : false
+					if (this.turnType === 0 && !this.pageBackRef.before) {
+						// this.$refs.pageBackRef.$el.style.right = `${-delta}px`
+						// this.$refs.pageBackRef.$el.style.width = `${-delta * 0.5}px`
+						this.pageBackRef.right = `${-delta}px`
+						this.pageBackRef.width = `${-delta * 0.5}px`
+					} else if (this.turnType === 0 && this.pageBackRef.before) {
+						this.pageBackRef.left = `${delta}px`
+						this.pageBackRef.width = `${-delta * 0.5}px`
+					}
+					if (delta > this.windowWidth) {
+						delta = this.windowWidth
+					}
+					if (delta < -this.windowWidth) {
+						delta = -this.windowWidth
+					}
+
+
+					this.delta = e.touches[0].clientX - this.touchX;
+					this.touchX = e.touches[0].clientX;
+
+				} else { //翻页方式为‘上下平移’
+					delta = e.touches[0].clientY - this.touchStartY;
+
+					// 限制边界
+					if (delta > this.windowHeight) {
+						delta = this.windowHeight
+					}
+					if (delta < -this.windowHeight) {
+						delta = -this.windowHeight
+					}
+
+					this.delta = e.touches[0].clientY - this.touchY;
+					this.touchY = e.touches[0].clientY;
+					// console.log(this.delta, 'delta')					
+				}
+				if (this.next && this.nextPage.ready) { //首次翻下一页之后
+					if (this.nextPage.isEnd) {
+						return
+					}
+					// 限制边界
+					if (delta > 0) {
+						delta = 0
+					}
+
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth+delta}px,0)`,
+						`(0,${-this.windowHeight+delta}px)`
+					]
+
+					this.curPage.pageTranslate = [
+						`(${delta}px,0)`,
+						`(${delta}px,0)`,
+						`(0,${delta}px)`
+					]
+
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth+delta}px,0)`,
+						`(0,${this.windowHeight+delta}px)`
+					]
+				}
+				if (!this.pre && !this.next && delta < 0) { //首次翻下一页
+					this.next = true
+					if (this.nextPage.ready) { //页面准备好了
+						if (this.nextPage.isEnd) {
+
+							uni.showToast({
+								title: '跳转推荐页',
+								icon: 'none'
+							})
+							/*****************************************/
+							/*****************************************/
+							/*****************************************/
+
+
+						} else {
+							this.prePage.pageTranslate = [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth+delta}px,0)`,
+								`(0,${-this.windowHeight+delta}px)`
+							]
+							this.curPage.pageTranslate = [
+								`(${delta}px,0)`,
+								`(${delta}px,0)`,
+								`(0,${delta}px)`
+							]
+
+							this.nextPage.pageTranslate = [
+								`(0,0)`,
+								`(${this.windowWidth+delta}px,0)`,
+								`(0,${this.windowHeight+delta}px)`
+							]
+						}
+					} else if (this.nextChapter.ready) { //下一章已经准备好了
+						this.nextPage = {
+							ready: this.nextChapter.ready,
+							chapterName: this.nextChapter.chapterName,
+							text: copyBookText,
+							pageNum: 0,
+							totalPage: this.nextChapter.totalPage,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							],
+							canRead: this.nextChapter.canRead
+						}
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(${delta}px,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth+delta}px,0)`,
+							`(0,${this.windowHeight+delta}px)`
+						]
+					}
+				}
+				if (this.pre && this.prePage.ready) { //首次翻上一页之后
+
+					// 限制边界
+					if (delta < 0) {
+						delta = 0
+					}
+
+					if (this.prePage.isCover) { //上一页是封面
+						this.cover.pageTranslate = [
+							`(${-this.windowWidth+delta}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+					} else {
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth+delta}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth+delta}px,0)`,
+							`(0,${this.windowHeight+delta}px)`
+						]
+					}
+				}
+				if (!this.prePage.isCover) {
+
+					if (!this.pre && !this.next && delta > 0) { //首次翻上一页
+						this.pre = true
+						if (this.prePage.ready) { //页面准备好了
+							if (this.prePage.isCover) { //上一页是封面
+								this.cover.pageTranslate = [
+									`(${-this.windowWidth+delta}px,0)`,
+									`(${-this.windowWidth+delta}px,0)`,
+									`(0,${-this.windowHeight+delta}px)`
+								]
+								this.curPage.pageTranslate = [
+									`(0,0)`,
+									`(${delta}px,0)`,
+									`(0,${delta}px)`
+								]
+
+							} else {
+								this.prePage.pageTranslate = [
+									`(${-this.windowWidth+delta}px,0)`,
+									`(${-this.windowWidth+delta}px,0)`,
+									`(0,${-this.windowHeight+delta}px)`
+								]
+								this.curPage.pageTranslate = [
+									`(0,0)`,
+									`(${delta}px,0)`,
+									`(0,${delta}px)`
+								]
+
+								this.nextPage.pageTranslate = [
+									`(0,0)`,
+									`(${this.windowWidth+delta}px,0)`,
+									`(0,${this.windowHeight+delta}px)`
+								]
+							}
+						} else if (this.preChapter.ready) { //上一章已经准备好了							
+							this.prePage = {
+								ready: this.preChapter.ready,
+								chapterName: this.preChapter.chapterName,
+								text: copyBookText,
+								pageNum: this.preChapter.totalPage - 1,
+								totalPage: this.preChapter.totalPage,
+								pageTranslate: [
+									`(${-this.windowWidth}px,0)`,
+									`(${-this.windowWidth}px,0)`,
+									`(0,${-this.windowHeight}px)`
+								],
+								canRead: this.preChapter.canRead
+							}
+							this.prePage.pageTranslate = [
+								`(${-this.windowWidth+delta}px,0)`,
+								`(${-this.windowWidth+delta}px,0)`,
+								`(0,${-this.windowHeight+delta}px)`
+							]
+							this.curPage.pageTranslate = [
+								`(0,0)`,
+								`(${delta}px,0)`,
+								`(0,${delta}px)`
+							]
+
+							this.nextPage.pageTranslate = [
+								`(0,0)`,
+								`(${this.windowWidth+delta}px,0)`,
+								`(0,${this.windowHeight+delta}px)`,
+							]
+						}
+					}
+				}
+
+
+			},
+
+			/**
+			 * 触摸结束
+			 **/
+			touchEnd(e) {
+				console.log(e, 'e')
+				this.isTouch = false
+				this.showAnimation = true
+				this.showShadow = false
+				let delta = 0
+				let that = this
+				if (this.turnType === 0 || this.turnType === 1) {
+					delta = e.changedTouches[0].clientX - this.touchStartX;
+				} else {
+					delta = e.changedTouches[0].clientY - this.touchStartY;
+					this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
+					console.log(this.page, 'page')
+					//this.getNowReadIndex()
+				}
+
+				if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
+					if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
+						if (!this.prePage.isCover) {
+							this.goPrePage()
+						}
+					} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
+						//if(e.changedTouches[0].clientY > 100){ // 显示弹窗
+						e.changedTouches[0].clientY > 100 ? this.goNextPage() : ''
+						//}
+					} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=
+						this
+						.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
+						this.showMenu()
+					}
+				} else {
+					if (this.next && this.delta <= 0) { //下一页
+						this.goNextPage()
+					} else if (this.next && this.delta > 0) { //取消翻页
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						]
+
+						if (this.turnType == 0) {
+							this.pageBackRef.transition = 'right .5s ease'
+							this.pageBackRef.right = 0
+							this.pageBackRef.width = 0
+						}
+					} else if (this.pre && this.delta >= 0) { //上一页
+						this.goPrePage()
+					} else if (this.pre && this.delta < 0) { //取消翻页
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						]
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						]
+						this.cover.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+
+						if (this.turnType == 0) {
+							this.pageBackRef.transition = 'left .5s ease'
+							this.pageBackRef.left = 0
+							this.pageBackRef.width = 0
+						}
+					}
+				}
+				this.next = false
+				this.pre = false
+				// setTimeout(()=>{
+				// 	this.pageBackRef.width = '0px'
+				// },450)
+			},
+
+			/**
+			 * 取消触摸
+			 **/
+			touchcancel() {
+
+				//取消翻页,重置页面
+				this.showAnimation = false
+				this.showShadow = false
+				this.prePage.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.curPage.pageTranslate = [
+					`(0,0)`,
+					`(0,0)`,
+					`(0,0)`
+				]
+				this.nextPage.pageTranslate = [
+					`(0,0)`,
+					`(${this.windowWidth}px,0)`,
+					`(0,${this.windowHeight}px)`
+				]
+				this.cover.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.next = false
+				this.pre = false
+
+			},
+
+			/**
+			 * 呼出菜单
+			 **/
+			showMenu() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(false);
+				// #endif
+				this.menuShow = true;
+				if (this.music == null && !this.isVerticalHua) {
+					this.musicManuShow = true;
+				} else {
+					this.musicManuShow = false;
+				}
+				setTimeout(() => {
+					this.itemShow = true
+				}, 100)
+			},
+
+			/**
+			 * 关闭菜单
+			 **/
+			closeMenu() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(true);
+				// #endif
+				this.itemShow = false
+				this.settingShow = false
+				this.directoryShow = false
+				setTimeout(() => {
+					this.directoryShowBefore = false
+					this.menuShow = false
+					this.musicManuShow = false;
+				}, 300)
+			},
+
+			/**
+			 * 关闭菜单栏，呼出设置栏
+			 **/
+			openSetting() {
+
+				this.itemShow = false
+				setTimeout(() => {
+					this.settingShow = true
+				}, 300)
+			},
+
+			/**
+			 * 关闭菜单栏，呼出目录栏
+			 **/
+			openDirectory() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(true);
+				// #endif
+				this.itemShow = false
+				this.directoryShowBefore = true
+				setTimeout(() => {
+					this.directoryShow = true
+					console.log(this.directoryShow)
+				}, 300)
+				
+			},
+
+			/**
+			 * 拖动进度条
+			 **/
+			slideChanging(e) {
+				this.progressTouched = true
+				this.chapterProgress = e.detail.value
+			},
+
+			/**
+			 * 结束拖动进度条
+			 **/
+			async slideChange(e) {
+
+				this.chapterProgress = e.detail.value
+				uni.showLoading({
+					title: '加载中'
+				})
+				await this.getThreeChapter(e.detail.value)
+				this.counlSystemInfo()
+				this.progressTouched = false
+				this.goToPage(0)
+				uni.hideLoading()
+
+			},
+
+			/**
+			 * 上一页,页面轮换
+			 **/
+			goPrePage() {
+				if (this.prePage.isCover) { //如果是首页
+					this.cover.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+					return
+				}
+				if (!this.prePage.ready && !this.preChapter.ready) {
+					this.waitForPre = true
+					uni.showLoading({
+						title: '正在准备上一章',
+						mask: true
+					})
+					return
+				}
+				let showChapter = false
+				this.currentPage -= 1
+				if (this.currentPage === -1) { //翻至上一章了
+					showChapter = true
+					this.currentPage = this.preChapter.totalPage - 1
+					this.chapterRotate('pre')
+				}
+				console.log(copyBookText, 'goPrePage////////////////////////////////')
+				let cur = [].concat(this.curPage.pageTranslate)
+				let pre = [].concat(this.prePage.pageTranslate)
+				this.goToPage(this.currentPage)
+				//  当前scrollTop的值
+				//、 this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
+				// console.log(this.scrollTop,'翻页后的scrollTop')
+				// this.getDomIndex()
+
+				this.prePage.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.curPage.pageTranslate = pre
+				this.nextPage.pageTranslate = cur
+				if (this.turnType === 0) {
+
+					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
+					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
+					// this.$refs.pageBackRef.$el.style.width = `100px`
+					this.pageBackRef.before = true
+					this.pageBackRef.transition = 'left .5s ease'
+					this.pageBackRef.left = `${this.windowWidth}px`
+					this.pageBackRef.right = 0
+					this.pageBackRef.width = `100px`
+				}
+
+				setTimeout(() => {
+					if (showChapter) {
+						uni.showToast({
+							title: this.curChapter.chapterName,
+							icon: 'none'
+						})
+					}
+					this.showAnimation = true
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth}px,0)`,
+						`(0,${-this.windowHeight}px)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+				}, 50)
+			},
+
+
+			/**
+			 * 下一页,页面轮换
+			 **/
+			goNextPage() {
+				if (this.nextPage.isEnd) { //如果翻至本书末尾
+					alery('到头了')
+					uni.showToast({
+						title: '跳转推荐页',
+						icon: 'none'
+					})
+					/*****************************************/
+					/*****************************************/
+					/*****************************************/
+					return
+				}
+				if (!this.nextPage.ready && !this.nextChapter.ready) {
+					this.waitForNext = true
+					uni.showLoading({
+						title: '正在准备下一章',
+						mask: true
+					})
+					return
+				}
+				this.currentPage += 1
+				let showChapter = false
+				console.log(this.currentPage, this.curChapter.totalPage)
+				if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
+					showChapter = true
+					this.currentPage = 0
+					this.chapterRotate('next')
+					this.speedData.bookId = this.bookId_mark;
+					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
+					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
+					this.speedData.precent = this.curChapter.chapterIndex;
+					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
+					if (this.speedTrue) {
+						this.updateReadRateUl()
+					} else {
+						this.saveReadRateUl()
+					}
+
+				}
+				let cur = [].concat(this.curPage.pageTranslate)
+				let next = [].concat(this.nextPage.pageTranslate)
+				this.goToPage(this.currentPage)
+				//  当前scrollTop的值
+				// this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
+				// console.log(this.scrollTop,'翻页后的scrollTop')
+
+				this.prePage.pageTranslate = cur
+				this.curPage.pageTranslate = next
+				this.nextPage.pageTranslate = [
+					`(0,0)`,
+					`(${this.windowWidth}px,0)`,
+					`(0,${this.windowHeight}px)`
+				]
+
+				if (this.turnType === 0) {
+					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
+					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
+					// this.$refs.pageBackRef.$el.style.width = `100px`
+					this.pageBackRef.before = false
+					this.pageBackRef.transition = 'right .5s ease .15s'
+					this.pageBackRef.right = `${this.windowWidth}px`
+					this.pageBackRef.left = 0
+					this.pageBackRef.width = `100px`
+				}
+				setTimeout(() => {
+					if (showChapter) {
+						uni.showToast({
+							title: this.curChapter.chapterName,
+							icon: 'none'
+						})
+					}
+					this.showAnimation = true
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth}px,0)`,
+						`(0,${-this.windowHeight}px)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+
+				}, 100)
+			},
+
+			/**
+			 * 章节轮换
+			 **/
+			async chapterRotate(type) {
+				/*
+					1:在切换上下章时调用请求数据方
+					2:调用截取数据方法 this.counlSystemInfo()
+				*/
+				if (type === 'next') {
+					this.preChapter = Object.assign({}, this.curChapter)
+					this.curChapter = Object.assign({}, this.nextChapter)
+					console.log(this.curChapter.chapterIndex, 'chapterIndex')
+					copyBookText = this.curChapter.text;
+
+					this.counlSystemInfo()
+					console.log(copyBookText, 1111111111)
+					if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
+						this.nextChapter = {
+							ready: false,
+							chapterIndex: this.curChapter.chapterIndex + 1,
+							chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
+						}
+						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
+						this.$set(this.nextChapter, 'text', this.tmpChapter.text)
+						this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
+						this.calcNextChapter()
+					} else {
+						this.nextChapter = {
+							ready: true,
+							isEnd: true
+						}
+					}
+					this.getThreeChapter(this.curChapter.chapterIndex)
+
+				}
+				if (type === 'pre') {
+					this.nextChapter = Object.assign({}, this.curChapter)
+					this.curChapter = Object.assign({}, this.preChapter)
+					copyBookText = this.curChapter.text;
+					this.counlSystemInfo()
+					console.log(copyBookText, '跳转到上一章')
+					// this.preChapter.text = 
+					if (this.curChapter.chapterIndex !== 0) {
+						this.preChapter = {
+							ready: false,
+							chapterIndex: this.curChapter.chapterIndex - 1,
+							chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
+						}
+						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
+						this.$set(this.preChapter, 'text', this.tmpChapter.text)
+						this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
+						this.calcPreChapter()
+					} else {
+						this.preChapter = {
+							ready: true,
+							isCover: true
+						}
+
+					}
+					this.getThreeChapter(this.curChapter.chapterIndex)
+				}
+			},
+
+
+			/**
+			 * 跳转下一章
+			 **/
+			goNextChapter() {
+				if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
+					uni.showToast({
+						title: '已经是最后一章了',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.waitForNext || this.waitForPre) {
+					return
+				}
+
+				if (this.isVertical) {
+					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							uni.hideLoading()
+							this.down = true
+							this.clearDown()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已加载全部'
+						})
+					}
+				} else {
+					if (this.nextChapter.ready) {
+						this.chapterRotate('next')
+						this.goToPage(0)
+					} else {
+						uni.showLoading({
+							title: '正在准备下一章'
+						})
+						this.waitForNextChapter = true
+					}
+
+				}
+
+			},
+
+			/**
+			 * 跳转上一章
+			 **/
+			goPreChapter(page) {
+				if (this.curChapter.chapterIndex === 0) {
+					uni.showToast({
+						title: '这是第一章',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.isVertical) {
+					if (this.curChapter.chapterIndex > 0) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex - 1)
+							// this.counlSystemInfo()
+							console.log(copyBookText, '翻页后//////////////')
+							uni.hideLoading()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已经在最开头了'
+						})
+					}
+				} else {
+					if (this.waitForNext || this.waitForPre) {
+						return
+					}
+					if (this.preChapter.ready) {
+						this.chapterRotate('pre')
+						this.goToPage(0)
+
+					} else {
+						uni.showLoading({
+							title: '正在准备上一章'
+						})
+						this.waitForPreChapter = true
+					}
+				}
+			},
+
+
+			/**
+			 * 根据页码跳转
+			 **/
+			goToPage(page) {
+				this.currentPage = page
+				this.showAnimation = false
+				console.log(page, '======>')
+				// console.log(copyBookText[page],'当前页')
+				this.$nextTick(function() {
+					this.curPage = {
+						ready: this.curChapter.ready,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page],
+						pageNum: this.currentPage,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						],
+						canRead: this.curChapter.canRead
+					}
+				})
+				// console.log(copyBookText[page][0],'顶部第一句话')
+				let nowRead = copyBookText[page][0]
+				let nowReadIndex = 0
+				this.domIndex = nowReadIndex
+				this.setStorage() // 设置缓存
+				if (this.currentPage === 0) {
+					if (this.preChapter.ready && this.preChapter.isCover) { //翻至封面了
+						this.prePage = {
+							ready: true,
+							isCover: true,
+							pageTranslate: [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth}px,0)`,
+								`(0,${-this.windowHeight}px)`
+							]
+						}
+					} else {
+						this.prePage = {
+							ready: this.preChapter.ready,
+							chapterName: this.preChapter.chapterName,
+							// text: this.preChapter.text,
+							text: this.preChapter.text.map(function(obj, index) {
+								return obj.picAndWord
+							}),
+							pageNum: this.preChapter.totalPage - 1,
+							totalPage: this.preChapter.totalPage,
+							pageTranslate: [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth}px,0)`,
+								`(0,${-this.windowHeight}px)`
+							],
+							canRead: this.preChapter.canRead
+						}
+					}
+				} else {
+					this.prePage = {
+						ready: true,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page - 1],
+						pageNum: this.currentPage - 1,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						],
+						canRead: this.curChapter.canRead
+					}
+				}
+				if (this.currentPage > this.curChapter.totalPage - 1) {
+					if (this.nextChapter.ready && this.nextChapter.isEnd) { //翻至最后一章了
+						this.nextPage = {
+							ready: true,
+							isEnd: true,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							]
+						}
+					} else {
+						this.nextPage = {
+							ready: this.nextChapter.ready,
+							chapterName: this.nextChapter.chapterName,
+							text: this.nextChapter.text.map(function(obj, index) {
+								return obj.picAndWord
+							}),
+							pageNum: 0,
+							totalPage: this.nextChapter.totalPage,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							],
+							canRead: this.nextChapter.canRead
+						}
+					}
+
+				} else {
+					this.nextPage = {
+						ready: true,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page + 1],
+						pageNum: this.currentPage + 1,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						],
+						canRead: this.curChapter.canRead
+					}
+
+					console.log(this.domIndex, 'domIndex')
+
+				}
+			},
+
+
+			/**
+			 * 跳转到指定章节
+			 **/
+			async goToChapter(index) {
+				this.progressTouched = false
+				this.closeMenu()
+				uni.showLoading({
+					title: '加载中'
+				})
+				await this.getThreeChapter(index.id)
+				//this.counlSystemInfo()
+				this.goToPage(0)
+				this.scrollTop = 0
+				// this.domIndex = 1
+				uni.hideLoading()
+				// setTimeout(() => {
+				// 	this.$router.go(0)
+				// }, 500)
+			},
+
+			/**
+			 * 加大字体
+			 **/
+			async bigSize() {
+				let progress = this.progress //记录阅读进度用于调整字体后跳转
+				this.fontSize += 2
+				uni.setStorageSync('fontSize', this.fontSize)
+				this.calcHeight()
+				copyBookText = this.curChapter.text;				
+				this.counlSystemInfo()
+				await this.calcCurChapter()				
+				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.goToPage(page)
+				if (this.preChapter.ready && !this.preChapter.isCover) {
+					this.preChapter.ready = false
+					await this.calcPreChapter()
+				}
+				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+					this.nextChapter.ready = false
+					await this.calcNextChapter()
+				}				
+			},
+
+			/**
+			 * 缩小字体
+			 **/
+			async smallSize() {
+				let progress = this.progress
+				this.fontSize -= 2
+				uni.setStorageSync('fontSize', this.fontSize)
+				this.calcHeight()
+				copyBookText = this.curChapter.text;				
+				this.counlSystemInfo()
+				await this.calcCurChapter()
+				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.goToPage(page)
+				if (this.preChapter.ready && !this.preChapter.isCover) {
+					this.preChapter.ready = false
+					await this.calcPreChapter()
+				}
+				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+					this.nextChapter.ready = false
+					await this.calcNextChapter()
+				}
+				
+			},
+
+			/**
+			 * 改变行距
+			 **/
+			async changeLineHeight(lineHeight) {
+				let progress = this.progress
+				if (lineHeight === this.lineHeight) {
+					return
+				} else {
+					this.lineHeight = lineHeight;
+					uni.setStorageSync('lineHeight', this.lineHeight)
+					this.calcHeight()
+					copyBookText = this.curChapter.text;					
+					this.counlSystemInfo()
+					await this.calcCurChapter()
+					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+					this.readerSet = {
+						lineHeight : this.lineHeight,
+						page : page
+					}
+					this.goToPage(page)
+					if (this.preChapter.ready && !this.preChapter.isCover) {
+						this.preChapter.ready = false
+						await this.calcPreChapter()
+					}
+					if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+						this.nextChapter.ready = false
+						await this.calcNextChapter()
+					}
+				}
+				
+			},
+
+
+			/**
+			 * 改变翻页方式
+			 **/
+			changeTurnType(turnType) {
+				if (turnType === this.turnType) {
+					return
+				} else {
+					this.showAnimation = false
+					this.turnType = turnType;
+					uni.setStorageSync('turnType', this.turnType)
+				}
+				if (turnType == 4) {
+					// 逼真翻页方式
+					this.isSimulation = true
+				} else {
+					this.isSimulation = false
+				}
+				if (turnType == 3) {
+					this.isVerticalHua = true
+					// 如果正在播放音频 则暂停掉
+					if (this.musicPlaying) {
+						//console.log('正在播放音频')
+						this.music.pause()
+						this.highlight = "null";
+						this.isAudioMenu = false
+
+					}
+					uni.showModal({
+						title: '提示',
+						showCancel: false,
+						content: '当前阅读模式下，无听书功能，如想体验听书功能，请切换其他模式，并且阅读进度与其他模式不共享。',
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							}
+						}
+					})
+				} else {
+					this.isVerticalHua = false
+				}
+			},
+
+			/**
+			 * 改变背景
+			 **/
+			changeBackground(background) {
+				if (background === this.background) {
+					return
+				} else {
+					
+					this.background = background;
+					uni.setStorageSync('background', this.background)
+					// this.readerSet.background = background  // 修改阅读器背景
+					// this.SimulationTextObj = {
+					// 	SimulationText : this.SimulationTextObj.SimulationText,
+					// 	fontSize : this.SimulationText.fontSize,
+					// 	lineHeight : this.SimulationText.lineHeight,
+					// 	background: this.background,
+					// 	page: 5
+					// }				
+				}
+			},
+
+			/**
+			 * 获取目录
+			 **/
+			getDirectoryList(showLoading) {
+
+				if (showLoading) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+				}
+				return this.$http
+					.post('book/book/getBookCatalogue', {
+						'bookid': this.bookId_mark
+					})
+					.then(res => {
+						let vipnum = 0
+						if (this.detail.isBuy == 1) {
+							vipnum = 1
+						}
+						for (let i in res.bookCatalogue) {
+							this.directoryList.push({
+								"id": i,
+								"chapterId": res.bookCatalogue[i].chapterId,
+								"name": res.bookCatalogue[i].chapterName,
+							})
+						}
+					})
+					.catch(() => {
+						// 此处是网络连接失败的逻辑
+						uni.hideLoading()
+						return new Promise((resolve, reject) => {
+							uni.showModal({
+								title: '连接失败',
+								content: '请检查您的网络状态',
+								confirmText: '重试',
+								success: async (res) => {
+									if (res.confirm) {
+										//用户点击了重试
+										await this.getDirectoryList(true)
+										resolve()
+									} else if (res.cancel) {
+										//用户点击取消
+										this.back()
+									}
+								}
+							})
+						})
+					})
+
+				// /*****************************************/
+				// /*****************************************/
+				// /*****************************************/
+			},
+
+
+			/**
+			 * 获取一章数据
+			 **/
+			getOneChapter(chapterId, showLoading) {
+				if (showLoading) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+				}
+				// 检查是否已经购买	
+				// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0			
+				return this.$http
+					.post('book/bookchaptercontent/appGetBookChapterContent', {
+						'userId': this.userInfo.id,
+						'bookid': this.bookId_mark,
+						'chapterid': chapterId
+					})
+					.then(res => {						
+						this.tmpChapter.text = res.bookCatalogue
+						// console.log(this.tmpChapter.text,'tmpChapter')
+						
+					})
+					.catch(() => {						
+						// 此处是网络连接失败的逻辑						
+						uni.hideLoading()						
+						return new Promise((resolve, reject) => {
+							uni.showModal({
+								title: '连接失败',
+								content: '请检查您的网络状态',
+								confirmText: '重试',
+								success: async (res) => {
+									if (res.confirm) {
+										//用户点击了重试
+										await this.getOneChapter(chapterId, true)
+										resolve()
+									} else if (res.cancel) {
+										//用户点击取消
+										this.back()
+									}
+								}
+							})
+						})						
+					})				
+				/*****************************************/
+				/*****************************************/
+				/*****************************************/
+			},
+
+
+			/**
+			 * 获取三章数据
+			 **/
+			async getThreeChapter(index) {
+				await this.getOneChapter(this.directoryList[Number(index)].chapterId)
+				this.curChapter = {
+					chapterIndex: Number(index),
+					chapterName: this.directoryList[Number(index)].name,
+					text: this.tmpChapter.text,
+					canRead: this.tmpChapter.canRead
+				}
+				this.verticalData = {
+					chapterIndex: Number(index),
+					chapterName: this.directoryList[Number(index)].name,
+					text: this.tmpChapter.text,
+					canRead: this.tmpChapter.canRead
+				}
+				copyBookText = this.curChapter.text;
+				this.counlSystemInfo()
+				this.domIndex = 0;
+				if (this.curChapter.chapterIndex !== 0) {
+					await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
+					//this.mpcounlSystemInfo
+					this.preChapter = {
+						chapterIndex: Number(index) - 1,
+						chapterName: this.directoryList[Number(index) - 1].name,
+						text: this.tmpChapter.text,
+						canRead: this.tmpChapter.canRead
+					}
+					preText = this.tmpChapter.text
+					this.mpcounlSystemInfo()
+					this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1
+					// console.log(this.preChapterTotal,'上一章内容页数')			
+					// 处理数据
+
+					// 
+				} else {
+					this.preChapter = {
+						ready: true,
+						isCover: true
+					}
+				}
+
+				if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
+
+					await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
+					this.nextChapter = {
+						chapterIndex: Number(index) + 1,
+						chapterName: this.directoryList[Number(index) + 1].name,
+						text: this.tmpChapter.text,
+						canRead: this.tmpChapter.canRead
+					}
+					nextText = this.tmpChapter.text
+					this.nextmpcounlSystemInfo()
+					this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1
+					// console.log(this.nextChapterTotal,'下一章内容页数')
+				} else {
+					this.nextChapter = {
+						ready: true,
+						isEnd: true
+					}
+				}
+				await this.calcCurChapter()
+				await this.calcPreChapter()
+				await this.calcNextChapter()
+			},
+			/*
+			获取进度
+			*/
+			getReadRateUl() {
+				let data = {
+					bookId: this.bookId_mark,
+					userId: this.userInfo.id,
+				}
+
+				$http.request({
+					url: "book/bookreadrate/getReadRate",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("获取", res)
+					if (res.readRate === null) {
+						this.speedTrue = false
+					} else {
+						this.speedTrue = true;
+						this.curChapter.chapterIndex = res.readRate.chapterId
+						this.updateReadId = res.readRate.id
+						this.oldReadSpeed.precent = res.readRate.precent
+						this.oldReadSpeed.updateReadId = res.readRate.id						
+						this.getThreeChapter(this.curChapter.chapterIndex)
+					}
+				})
+			},
+
+			/*
+			保存更新进度
+			*/
+			saveReadRateUl() {
+				console.log("保存数据", this.speedData)
+				let data = {
+					bookId: this.speedData.bookId,
+					chapterId: this.speedData.chapter_id,
+					chapterName: this.speedData.chapter_name,
+					precent: this.progress,
+					contentId: this.speedData.content_id,
+					userId: this.userInfo.id,
+				}
+
+				$http.request({
+					url: "book/bookreadrate/save",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("保存成功", res)
+				})
+			},
+			/*
+				更新进度
+				*/
+			updateReadRateUl() {
+				console.log("更新数据", this.speedData)
+				let data = {
+					bookId: this.speedData.bookId,
+					chapterId: this.speedData.chapter_id,
+					chapterName: this.speedData.chapter_name,
+					precent: this.speedData.precent,
+					contentId: this.speedData.content_id,
+					userId: this.userInfo.id,
+					id: this.updateReadId
+				}
+
+				$http.request({
+					url: "book/bookreadrate/update",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("更新", res)
+				})
+			},
+			/**
+			 * 购买书籍接口
+			 **/
+			buyBook() {
+				//在回调中调用this.initPage()刷新本页1
+				uni.showToast({
+					title: '跳转至购买页面，如果未登陆则跳转登陆',
+					icon: 'none'
+				})
+			},
+			// 接收renderjs发回的数据
+			onViewClick(options) {
+			     // console.log('renderjsCall回调');
+			     // console.log(options);
+				  if(options.chapterid == 'next'){ // 下一章
+				  this.goNextChapter()
+				  }else if(options.chapterid == 'prev'){ // 上一章
+				  this.goPreChapter()
+				  }else{ // 单纯的跳页
+					  this.page = options.curpage
+					  this.goToPage(this.page)
+				  }
+			    },
+				showMenuCall(options){
+					this.setShow = true
+				}
+			
+		},
+		beforeDestroy() {
+			if (this.musicPlaying) {
+				this.music.pause()
+			}
+		},
+		onHide() {
+			if (this.musicPlaying) {
+				this.music.pause()
+			}
+		},		
+	}
+</script>
+<script lang="renderjs" module="turnjs">
+	import '@/utils/jquery.min.1.7.js';
+	import turn from '@/utils/turn.js';
+	export default {
+		data() {
+			return {
+				width: '',
+				height: '',
+				SimulationText: [],
+				length:0,
+				hasContent: false,
+				curPage:1,	
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除
+				lastPage:false,
+				musicIndexDom:0,
+				highlight:'null',
+				musicPlaying:false,
+				fontSize:'',
+				lineHeight:'',
+				containerStyle: ''
+			}
+		},		
+		mounted() {	
+			this.onTurn();			
+		},
+		methods: {
+			updateReaderSet(newVal, oldVal){
+				// 阅读器设置更新					
+				$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
+			console.log(newVal,'阅读器设置更新')	
+			// if(newVal.page > 0){
+			// 	$("#flipbook").turn('page',newVal.page+1)
+			// }
+			// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+			// $(".myPage p").css({backgroundColor:this.containerStyle})
+			},			
+			updateMusic(newVal, oldVal){ //听书
+				this.highlight = newVal.highlight
+				this.musicIndexDom = newVal.musicIndexDom
+				this.musicPlaying = newVal.musicPlaying
+				console.log(newVal,'听书配置项有变化')
+				let page = 1
+				page = $("#flipbook").turn('page')						
+				if(newVal.musicPlaying){
+					// 开启听书
+					$("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"})
+										
+				}else{
+					// 关闭听书
+					$("#flipbook .paragraph").css({color:"#333"})
+				}
+			},			
+			updateReadPercent(newVal, oldVal){
+				// 获取阅读进度
+				this.curPage = newVal.readPage
+				// console.log('获取到了阅读的进度page',newVal,this.curPage)-
+				//$("#flipbook").turn('page', this.curPage+1)
+			},
+			updateRenderData(newVal, oldVal) {
+				let {
+					width,					
+					height					
+				} = newVal;
+				this.width = width;
+				this.height = height;		
+				
+			},
+			updateSimulationText(newVal, oldVal) {
+				$("#flipbook").turn('pages',1)     // 内容变化时，保留1页
+				$("#flipbook").turn('pages',newVal.SimulationText.length)
+				// this.onTurn();				
+				// this.SimulationText = newVal
+				console.log('更新数组', newVal)				
+				//newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+				//$(".myPage p").css({backgroundColor:this.containerStyle})
+				for (var i=0; i<newVal.SimulationText.length;i++) {
+					var tagHtml = "";
+					var conntentHtml = "";	
+					for (var j=0; j<newVal.SimulationText[i].length; j++) {
+						var classname = ''
+						var styleconteent = ''
+						newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : ''
+						newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = `"text-indent:2em ;font-size:${newVal.fontSize}px; color: #5d5d5d"` : styleconteent = "'font-size:"+newVal.fontSize+"px ; line-height:"+newVal.lineHeight*newVal.fontSize+"px;  color: #5d5d5d'"
+						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[i][j].list + "</p>"
+					}
+					var page1 = i+1
+					var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
+					var tagHtml = "<div style='padding:0 18px; height:"+this.height+"px'>"+ conntentHtml +"<div style='text-align:center; color:#777' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
+					// $("#flipbook").append(tagHtml);
+					if (!$("#flipbook").turn('hasPage', i+2)) {
+					        // Create an element for this page
+					        var element = $('<div />').html('');
+					        // Add the page
+					        $("#flipbook").turn('addPage', element, i+2);
+					        element.html(tagHtml);
+					}
+				}
+			$("#flipbook").turn('page', 14)
+				
+			},			
+			onClick(event, ownerInstance) {
+				if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
+					//console.log('点击了左侧')
+					if($("#flipbook").turn('page') == 1){ //第一页
+					// console.log('切换到下一章节')
+						//console.log('第一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'prev'
+						})						
+					}else{
+						// 不是第一页
+					$("#flipbook").turn("previous")
+					ownerInstance.callMethod('onViewClick', {
+						curpage: $("#flipbook").turn('page')-1,
+						chapterid : ''
+					})
+					}
+				}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
+					//	console.log('点击了右侧')								
+					if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页
+						// console.log('切换到下一章节')
+						// console.log('最后一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'next'
+						})						
+					}else{
+						// 不是最后一页						
+						$("#flipbook").turn("next")	
+						ownerInstance.callMethod('onViewClick', {
+							curpage: $("#flipbook").turn('page')-1,
+							chapterid: '',
+						})
+						
+					}
+					} else{
+						// console.log('点击了中间')
+						// 双击
+						this.touchNum++
+						if (this.touchNum == 0) {} else {
+							if (this.touchNum > 1) {
+								clearTimeout(this.touchTime)
+								//单击事件
+								this.touchTime = setTimeout(() => {
+									this.touchNum = 0
+								}, 250)
+								console.log('双击')
+								ownerInstance.callMethod('showMenuCall', {
+									menuShow:true
+								})								
+							} else {
+								clearTimeout(this.touchTime)
+								this.touchTime = setTimeout(() => {
+									//双击或则多次点击事件
+									this.touchNum = 0
+								}, 250)
+								//console.log('单击')
+							}
+						
+						}
+						// end
+						
+					}	
+				
+				},				
+			onTurn() {
+				$("#flipbook").turn({
+					autoCenter: true,
+					display: 'single',
+					height: this.height,
+					width: this.width,
+					elevation: 50,
+					duration:500,
+					gradients: true,
+					when: {
+							turning: function(event, page, pageObject) {
+								// 翻页时
+							// this.curPage = page
+							// console.log(event, page, pageObject,this.curPage)
+						},	}
+				});				
+			}
+			
+		}		
+	}
+</script>
+<style>
+	/* .container1{background-color: #000;} */
+	.buts{width: 100%; display:flex; }
+	.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
+</style>
+<style lang="scss" scoped>	
+	@import url("@/pages/yRead/iconfont.css");
+	// turnjs
+	/// .shouhang{text-indent: 2em;color: red;}
+	.flipbook-viewport{overflow:hidden;width:100%;height:100%;
+		.container{display: flex;justify-content: center;align-items: center;margin: 0 auto;}.flipbook ::v-deep .page{background-color: white;background-repeat: no-repeat;background-size: 100% 100%;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);img {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;}}.shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;}
+	}
+	// end
+	.page-wrapper{background-color: #fff;}
+	#flipbook {
+		view {
+			p {
+				padding: 0 10px;
+			}
+		}
+	}
+
+	.menu-top {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		overflow: hidden;
+		background-color: #fff;
+		// transition: top .3s;
+		display: flex;
+		align-items: center;
+		height: 66rpx;
+		// .head {
+		// 	position: relative;
+		// 	display: flex;
+		// 	height: 40px;
+		// 	width: 100%; margin-top:0rpx;
+		// 	line-height: 10px;
+		// 	color: #fff;
+		// }
+
+		.back {
+			width: 100%;
+
+			// background-color: #333;
+			.backiconfont {
+				margin-top: 1px;
+			}
+		}
+	}
+
+	.setMenu {
+		text-align: center;
+		padding: 20px 10px
+	}
+
+	.showImgs {
+		float: right;
+		padding-right: 3px;
+		margin-right: 10px;
+		width: 30px;
+		font-size: 15px;
+		border: 1px solid #6aa84f;
+		height: 30px;
+		line-height: 30px;
+		/* color: red; */
+		border-radius: 15px;
+	}
+
+
+	.chapterImgTitle {
+		display: block;
+		;
+		color: #636363;
+		text-align: center;
+		font-size: 30rpx;
+		margin: 10px 0;
+	}
+
+	.scroll-view_H {
+		white-space: nowrap;
+		width: 100%;
+
+		.scroll-view-item_H {
+			display: inline-block;
+			width: 100%;
+			//height: 300rpx;
+			//line-height: 300rpx;
+			text-align: center;
+			font-size: 36rpx;
+		}
+
+		.imgBox {
+			height: 500rpx;
+			overflow: hidden;
+			padding: 10px;
+			// img{height: 300rpx !important; width: unset;}
+		}
+	}
+
+	.scroll-Y {
+		height: 600px;
+	}
+
+	page {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		opacity: 0;
+	}
+
+	.action {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+
+		.item {
+			flex: 1;
+			height: 100%;
+		}
+	}
+
+	.nothingShow {
+		display: block;
+		font-size: 24rpx;
+		color: #666;
+		margin: 10px 0;
+		text-align: center;
+	}
+
+	.listenitem {
+		width: 150rpx;
+		height: 150rpx;
+		color: #fff;
+		background-color: #636363;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 150rpx;
+		font-size: 30px;
+		font-weight: 700;
+		position: fixed;
+		right: 30rpx;
+		bottom: 280rpx;
+		z-index: 9999;
+	}
+
+	.audio_menu {
+		width: 200rpx;
+		height: 100rpx;
+		position: fixed;
+		bottom: 280rpx;
+		background-color: #636363;
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-radius: 50rpx;
+
+		.audioSymbol {
+			padding: 0 20rpx;
+		}
+	}
+
+	.verticalbox {
+		position: fixed;
+		top: 20rpx;
+		left: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		padding: 0px 20px;
+		height: 100%;
+		width: 100%;
+		background-color: #fff;
+		overflow: hidden;
+
+		.chapter {
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+			line-height: 30px;
+		}
+
+		.bottom-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+		}
+
+		.content {
+			flex: 1 1 auto;
+
+			.inner-box {
+				.book-inner {}
+
+
+			}
+		}
+	}
+
+	.highlight {
+		color: #e5d6a0 !important;
+		// padding: 10rpx 20rpx;
+		// border-radius: 10rpx;
+		// background-color: #cbcbcb;
+	}
+
+	.fhighlight {}
+
+	.container {
+		position: fixed;
+		top: 64rpx;
+		left: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		height: 96%;
+		width: 100%;
+		background-color: #f7faf9;
+		overflow: hidden;
+
+		.chapter {
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+			line-height: 30px;
+			padding-left: 48rpx;
+		}
+
+		.bottom-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+		}
+
+		.bottom-bar1 {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 55px;
+			width: 324px;
+		}
+
+		.content {
+			flex: 1 1 auto;
+			overflow: hidden;
+
+			.inner-box {
+				overflow: hidden;
+
+				.book-inner {
+					// display:block;
+					// text-indent:32rpx;
+				}
+
+			}
+		}
+
+	}
+
+	.container0 {
+		background-color: #f7faf9;
+		background-size: 100% 100%;
+		position: fixed;
+	}
+
+	.container1 {
+		background-color: #000;
+	}
+.directory {
+			position: fixed;
+			top: 0;
+			display: flex;
+			flex-flow: column;
+			width: 600rpx;
+			height: 100%; padding-right: 10rpx;
+			transition: left .1s;
+
+			.bookname {
+				padding: 90rpx 0 70rpx 20rpx;
+				height: 60rpx;
+				font-size: 40rpx;
+				font-weight: bold;
+			}
+
+			.directory-listItem {
+				display: flex;
+				align-items: center;
+				padding-left: 20rpx;
+				height: 90rpx;
+				font-size: 35rpx;
+				border-bottom: #eee solid 1rpx;
+			}
+
+			.active {
+				color: red
+			}
+		}
+	.menu {
+		// position: fixed;
+		// top: 0;
+		// left: 0;
+		// z-index: 300;
+		// width: 100%;
+		// transition: all .3s;
+		.menu-bottom {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			background-color: #333;
+			transition: bottom .3s;
+			color: #fff;
+
+			.show-chapter {
+				position: absolute;
+				left: 50%;
+				top: 0;
+				transform: translate(-50%, -110%);
+				padding: 5px 10px;
+				line-height: 20px;
+				border-radius: 10rpx;
+				font-size: 13px;
+				background-color: #333;
+			}
+
+			.progress-box {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 20px;
+				height: 50px;
+				width: 100%;
+				font-size: 15px;
+			}
+
+			.items-box {
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				height: 80px;
+				width: 100%;
+
+				.item-box {
+					display: flex;
+					flex-flow: column;
+					justify-content: center;
+					align-items: center;
+					height: 100%;
+				}
+			}
+		}
+
+		.setting {
+			// position: absolute;
+			left: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			padding: 10px 20px;
+			width: 100%;
+			// color: #fff;
+			// background-color: #333;
+			transition: bottom .3s;
+
+			.item {
+				display: flex;
+				align-items: center;
+				height: 70px;
+
+				.item-name {
+					padding: 10px;
+					color: #333;
+					font-size: 12px;
+				}
+
+				.icon {
+					margin-right: 10px;
+					padding: 5px 20px;
+					font-size: 15px;
+					height: 32px;
+					line-height: 20px;
+					width: auto;
+					text-align: center;
+					border-radius: 20px;
+					border: #333 solid 1px;
+				}
+
+				.type-setting {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+					align-items: center;
+					margin-right: 10px;
+					padding: 5px;
+					height: 30px;
+					width: 30px;
+					border-radius: 5px;
+					border: #333 solid 1px;
+
+					.line {
+						width: 100%;
+						border-bottom: #333 solid 1px;
+					}
+
+					.lineActive {
+						width: 100%;
+						border-bottom: #FF9900 solid 1px;
+					}
+				}
+
+				.active {
+					color: #FF9900;
+					border: #FF9900 solid 1px;
+				}
+			}
+		}
+	}
+
+	.cover {
+		image {
+			height: 400rpx;
+			width: 300rpx;
+			background-color: #eee;
+		}
+	}
+
+	.pageback_container {
+		z-index: 103;
+		position: fixed;
+		right: 2%;
+		top: 66rpx;
+		height: 96%;
+		max-width: 50vw;
+		// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+		filter: drop-shadow(5px 0px 8px rgba(0, 0, 0, 0.3));
+
+		.pageback {
+			clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
+			width: 100%;
+			height: 100%;
+			background-image: linear-gradient(to right, #fcfcfc 0, #141414 90%);
+			background-size: 350% 100%;
+		}
+	}
+
+	.page-section-spacing {
+		margin-top: 60rpx;
+	}
+
+	.scroll-view_H {
+		white-space: nowrap;
+	}
+
+	.scroll-view-item {
+		height: 300rpx;
+	}
+
+	.backiconfont {
+		width: 20px;
+		margin-left: 10px;
+		margin-top: 10px;
+		height: 20px;
+		background-color: rgba(255, 255, 255, .8);
+		border-radius: 100%;
+	}
+
+	.scroll-view-item_H {
+		display: inline-block;
+		width: 100%;
+		height: 300rpx;
+	}
+
+	.jushou {
+		text-indent: 2em;
+	}
+
+	.item_wrap {
+		flex-wrap: wrap;
+	}
+</style>
diff --git a/pages/yRead/angbook 背景颜色未实现.vue b/pages/yRead/angbook 背景颜色未实现.vue
new file mode 100644
index 0000000..b2b6891
--- /dev/null
+++ b/pages/yRead/angbook 背景颜色未实现.vue	
@@ -0,0 +1,3771 @@
+<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
+<!-- 重要事项：
+	1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
+	  如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
+	2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
+	3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
+ -->
+<template>
+	<view style="height: 100%;">
+		<!-- 菜单层包含返回按钮的上半部分1 -->
+		<view class="menu-top" >
+			<view class="back">
+				<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
+			</view>
+		</view>
+		<!-- 仅用于计算（结构和样式请和阅读页一致）1 -->
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view id="content" class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view class="book-inner" id="preChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.picAndWord"></p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view class="book-inner" id="curChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p v-for="(item, index) in curChapter.text" :key="index" v-html="item.picAndWord">
+						</p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view id="nextChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p class="book-inner" v-for="(item, index) in nextChapter.text" :key="index"
+							v-html="item.picAndWord"></p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<!-- 垂直翻页 -->
+		<!-- @click="showMenu" -->
+		<view class="vertical" v-if="isVerticalHua">
+			<view class="verticalbox" :class="{ container0: background === 1, container1: background === 2 }"
+				@click="showMenu">
+				<!-- 章节名 -->
+				<view class="chapter">
+					{{ verticalData.chapterName }}
+				</view>
+				<scroll-view :scroll-anchoring="true" scroll-y="true" :scroll-top="scrollTop"
+					scroll-with-animation="true" style="height: 600px; " @scrolltoupper="scrolltoupper"
+					@scrolltolower="scrolltolower" @scroll="scroll">
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="verticalData.canRead">
+							<view style="text-indent: 2em;" v-for="(item, index) in verticalData.text" :key="index"
+								:class="highlight === index ? 'highlight' : ''">
+								<p class="book-inner" v-html="item.content" :style="{
+										fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
+										fontSize: `${fontSize}px`,
+										lineHeight: `${lineHeight * fontSize}px`,
+										color: `${colorList[background - 1]}`
+									}"></p>
+								<img style="max-width: 90%;" v-if="item.otherContent != '' && item.otherContent != null"
+									:src="item.otherContent">
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
+								@touchend.stop="buyBook">去购买</view>
+						</view>
+					</view>
+				</scroll-view>
+				<view class="bottom-bar">
+					<!-- 时间 -->
+					<view>{{ systemTimeStr }}</view>
+					<!-- 电量 -->
+					<view>
+						<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 横向翻页 -->
+		<view class="across" v-else>
+			<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
+			<view class="chantong" v-show="!isSimulation">
+				<!-- 上一页 -->
+				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
+					:style="{
+					zIndex: turnType == 0 && pageBackRef.before ? 100: 102,
+					transform: turnType == 0 && pageBackRef.before ? 'translate(0, 0)' : `translate${prePage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}">
+					<!-- 章节名 -->
+					<view class="chapter">{{ prePage.chapterName }}</view>
+
+					<!-- 外层class="content"用于计算阅读部分的高度 -->
+					<view class="content">
+						<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
+							<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
+							<view class="book-inner">
+								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
+									:class="highlight === item.paragraph ? 'highlight' : ''"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ prePage.pageNum + 1 }}/{{ prePage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+				</view>
+
+				<!-- 本页 -->
+				<view ref="curPageRef" class="container mypages"
+					:class="{ container0: background === 1, container1: background === 2 }" :style="{
+					zIndex: 101,
+					transform: `translate${curPage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" @touchcancel="touchcancel">
+					<!-- 章节名 -->
+					<view class="chapter">{{ curPage.chapterName }}
+						<uni-icons v-if="newchapterImgList && newchapterImgList.length > 0" id="showImgs"
+							@click="showImgHandle" color="#6aa84f" class="showImgs" type="images" size="20"></uni-icons>
+					</view>
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
+							<view class="book-inner">
+								<!-- <pre>
+							{{curPage.text}}
+							</pre> -->
+								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
+									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
+								@touchend.stop="buyBook">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ curPage.pageNum + 1 }}/{{ curPage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+
+
+				</view>
+
+				<!-- 下一页-->
+				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
+					:style="{
+					zIndex: 100,
+					transform: `translate${nextPage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}">
+					<!-- 章节名 -->
+					<view class="chapter">{{ nextPage.chapterName }}</view>
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="nextPage.canRead">
+							<view class="book-inner">
+								<p v-for="(item, index) in nextPage.text" v-html="item.list" :key="index"
+									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ nextPage.pageNum + 1 }}/{{ nextPage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 仿真翻页 -->
+			<view v-show="isSimulation" class="flipbook-viewport" 
+			:rect="rect" 
+			:change:rect="updateRenderData"
+			:musicItem="musicItem"
+			:change:musicItem="updateMusic"
+			:oldReadSpeed="oldReadSpeed"
+			:change:oldReadSpeed="updateReadPercent"
+			:SimulationText="SimulationText" :change:SimulationText="updateSimulationText"
+			 @touchend="turnjs.onClick"
+			>
+			<!-- <view class="container across"  @touchend="openEnd" @touchstart="openStart"> -->
+				<view class="container across"  >
+					<view class="flipbook" id="flipbook" >
+						<div class="hard"><img style="max-width: 100%;" :src="bookFengMian"></div>						
+						<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
+							<div class="chapter">{{ curPage.chapterName }}</div>
+							<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
+								:class="{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
+								:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+							</p>							
+						</div> -->
+					</view>
+				</view>
+			</view>			
+			<!-- 模拟页面背景 -->
+			<view class v-if='turnType == 0 && !pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
+					width: `${pageBackRef.width}`,right: `${pageBackRef.right}`  }]" class="pageback_container">
+				<view class="pageback"></view>
+			</view>
+			<view class v-if='turnType == 0 && pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
+					width: `${pageBackRef.width}`,left: `${pageBackRef.left}`  }]" class="pageback_container">
+				<view class="pageback"></view>
+			</view>
+		</view>
+
+		<!-- 听书按钮 -->
+		<view class="listenbook" v-if="musicManuShow">
+			<view class="listenitem" @click="listenHandle">听</view>
+		</view>
+		<!-- 暂停按钮 -->
+		<view class="audio_menu" v-if="isAudioMenu">
+			<view class="pause audioSymbol" v-if="!isPause" @click="audioPause()">
+				<u-icon name="pause" color="#fff" size="28"></u-icon>
+			</view>
+			<view class="right audioSymbol" v-else @click="audioPause()">
+				<u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
+			</view>
+			<view class="audioSymbol" @click="offAudio">
+				<u-icon name="close" color="#fff" size="28"></u-icon>
+			</view>
+		</view>
+
+		<!-- 菜单层 -->
+		<view class="menu" :style="{ height: `100%`, width: `${windowWidth}px` }" v-if="menuShow" @touchend="closeMenu">
+			<!-- 菜单层包含返回按钮的上半部分 -->
+			<view class="menu-top" :style="{ height: `${statusBarHeight + 40}px`, top: itemShow ? 0 : `-100%` }"
+				@touchend.stop>
+				<view :style="{ height: `${statusBarHeight}px` }"></view>
+				<view class="head">
+					<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
+				</view>
+			</view>
+			<!-- 菜单主体 -->
+			<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }" @touchend.stop>
+				<!-- 用于显示章节进度 -->
+				<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}</view>
+				<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
+
+				<!-- 章节进度条 -->
+				<view class="progress-box">
+					<text style="" @click="goPreChapter">上一章</text>
+					<view
+						style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
+						<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
+							:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
+					</view>
+					<text @click="goNextChapter">下一章</text>
+				</view>
+				<view class="items-box">
+					<view class="item-box" @click="openDirectory">
+						<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
+						<text style="font-size: 13px;">目录</text>
+					</view>
+					<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
+						<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
+						<text style="font-size: 13px;">夜间</text>
+					</view>
+					<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
+						<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
+						<text style="font-size: 13px;">日间</text>
+					</view>
+					<view class="item-box" @click="openSetting">
+						<text class="iconfont" style="font-size: 25px;">A</text>
+						<text style="font-size: 13px;">设置</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }" @touchend.stop>
+				<view class="item">
+					<view class="item-name">字号</view>
+					<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
+					<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
+					<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
+					<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
+				</view>
+				<view class="item">
+					<view class="item-name">排版</view>
+					<view class="type-setting" :class="{ active: lineHeight === 1 }" @click="changeLineHeight(1)">
+						<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i"></view>
+					</view>
+					<view class="type-setting" :class="{ active: lineHeight === 1.5 }" @click="changeLineHeight(1.5)">
+						<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i"></view>
+					</view>
+					<view class="type-setting" :class="{ active: lineHeight === 2 }" @click="changeLineHeight(2)">
+						<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i"></view>
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">背景</view>
+					<view class="icon" style="" :class="{ active: background === 1 }" @click="changeBackground(1)">
+					</view>
+					<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
+						@click="changeBackground(2)"></view>
+				</view>
+			</view>
+		</view>
+		<!-- 目录层 -->
+		<u-popup class="directory" mode="left" v-if="directoryShowBefore" :show="directoryShowBefore"  @close="directoryShowBefore=false">
+			<view class="tanchu"  style="padding-right: 10px; width: 500rpx;">
+				<view class="bookname">{{ bookName }}</view>
+				<!--  :size="40"——每一栏高度为40px  :scrollHeight="windowHeight - 60"——书名的高度为60px -->
+				<virtual-list :items="directoryList" :size="40" :remain="16" :active="curChapter.chapterIndex"
+					:scrollHeight="windowHeight - 60">
+					<template v-slot="{ item, active }">
+						<view class="directory-listItem" :class="{ active: item.index == active }"
+							@click="goToChapter(item)">{{ item.name }}</view>
+					</template>
+				</virtual-list>
+			</view>
+		</u-popup>
+		<!-- 图片弹窗 -->
+		<u-popup :show="imgsShow" :round="10" @close="imgsShow=false">
+			<view class="tanchu" v-if="newchapterImgList">
+				<text class="chapterImgTitle">当前章节共 {{newchapterImgList.length}} 张图片</text>
+				<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="toRight">
+					<view v-for="(item,index) in newchapterImgList" class="scroll-view-item_H">
+						<view class="imgBox">
+							<view style="height:90%" @click="clickImg(newchapterImgList,index)">
+								<img :src="item" alt="" height="100%">
+							</view>
+							<text style="font-size: 24rpx; color: #666;">第 {{index + 1}} 张</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</u-popup>
+
+		<u-popup :show="setShow" :round="10" @close="setShow = false">
+			<view class="setMenu">
+				<u-grid :border="false" col="3" @click="clickSet">
+					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
+						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="30"></u-icon>
+						<text class="grid-text" style="color: #666;">{{baseListItem.title}}</text>
+					</u-grid-item>
+				</u-grid>
+				<view class="menu">
+
+					<!-- 菜单主体 -->
+					<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }">
+						<!-- 用于显示章节进度 -->
+						<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}
+						</view>
+						<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
+
+						<!-- 章节进度条 -->
+						<view class="progress-box">
+							<text style="" @click="goPreChapter">上一章</text>
+							<view
+								style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
+								<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
+									:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
+							</view>
+							<text @click="goNextChapter">下一章</text>
+						</view>
+						<view class="items-box">
+							<view class="item-box" @click="openDirectory">
+								<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
+								<text style="font-size: 13px;">目录</text>
+							</view>
+							<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
+								<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
+								<text style="font-size: 13px;">夜间</text>
+							</view>
+							<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
+								<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
+								<text style="font-size: 13px;">日间</text>
+							</view>
+							<view class="item-box" @click="openSetting">
+								<text class="iconfont" style="font-size: 25px;">A</text>
+								<text style="font-size: 13px;">设置</text>
+							</view>
+						</view>
+					</view>
+
+					<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }">
+						<view class="item">
+							<view class="item-name">字号</view>
+							<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
+							<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
+							<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
+							<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
+						</view>
+						<view class="item">
+							<view class="item-name">排版</view>
+							<view class="type-setting" :class="{ active: lineHeight === 1 }"
+								@click="changeLineHeight(1)">
+								<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i">
+								</view>
+							</view>
+							<view class="type-setting" :class="{ active: lineHeight === 1.5 }"
+								@click="changeLineHeight(1.5)">
+								<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i">
+								</view>
+							</view>
+							<view class="type-setting" :class="{ active: lineHeight === 2 }"
+								@click="changeLineHeight(2)">
+								<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i">
+								</view>
+							</view>
+						</view>
+						<view class="item">
+							<view class="item-name">背景</view>
+							<view class="icon" style="" :class="{ active: background === 1 }"
+								@click="changeBackground(1)">
+							</view>
+							<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
+								@click="changeBackground(2)"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import battery from '../../components/battery/battery.vue'
+	import virtualList from '../../components/virtualList/virtualList.vue'
+	// 引入翻页效果动画
+	import $ from 'jquery'
+
+	import {
+		dateToStr
+	} from '../../utils/utils.js'
+	import {
+		mapState
+	} from 'vuex';
+	import $http from '../../config/requestConfig';
+import { nextTick } from "vue";
+
+	let copyBookText = []
+	let preText = []
+	let nextText = []
+	let imglist = []
+
+	// var music = uni.createInnerAudioContext();
+	export default {
+		components: {
+			battery,
+			virtualList
+		},
+		data() {
+			return {
+				baseList: [{
+						name: 'photo',
+						title: '章节图片'
+					},
+					{
+						name: 'list-dot',
+						title: '目 录'
+					},
+					{
+						name: 'play-circle',
+						title: '听 书'
+					}
+				],
+				imgsShow: false,
+				nothingShow: false,
+				// 本章图片列表
+				chapterImgList: [],
+				newchapterImgList: [],
+				preChapterTotal: null,
+				nextChapterTotal: null,
+				// preBookText = []
+				oldReadSpeed: { // 本地初始阅读进度
+					precent: null,
+					updateReadId: null,
+					readPage:0
+				},
+				scrollTop1: 0,
+				bookName: '我是书名',
+				bookFengMian:'', // 书籍封面
+				bookId: 1,
+				bookId_mark: '',
+				history: { //本书历史记录
+					chapterIndex: 0,
+					progress: 0
+				},
+
+				directoryList: [], //目录列表
+				currentPage: 0, //当前页
+				read: 0,
+
+				innerHeight: 0, //截取至整行的最大高度
+
+				preChapter: { //上一章数据
+					ready: false, //是否准备完毕
+					chapterIndex: '',
+					chapterName: '', //章节名称
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				curChapter: { //本一章数据
+					chapterIndex: '',
+					chapterName: '',
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				nextChapter: { //下一章数据
+					ready: false, //是否准备完毕
+					chapterIndex: '',
+					chapterName: '',
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				tmpChapter: { //暂存章节内容
+					text: [],
+					canRead: true
+				},
+
+				cover: { //封面的状态
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+				},
+
+				prePage: { //上一页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: 1,
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true,
+					isPre: false
+				},
+
+				curPage: { //本页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: 1,
+					totalPage: 1,
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true,
+				},
+
+				nextPage: { //下一页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: '',
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true
+				},
+
+				verticalData: {
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: '',
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true
+				},
+
+				next: false, //用户是否正在翻下一页
+				pre: false, //用户是否正在翻上一页
+
+				waitForNext: false, //是否正在等待下一页准备完毕后跳转
+				waitForPre: false, //是否正在等待上一页准备完毕后跳转
+				waitForNextChapter: false, //是否正在等待下一章准备完毕后跳转
+				waitForPreChapter: false, //是否正在等待上一章准备完毕后跳转
+
+				showAnimation: false, //是否开启动画
+				showShadow: false, //是否显示页面阴影
+
+				isVertical: false, // 是否开启垂直阅读
+				down: false, // 用于scroll事件请求数据判断
+
+				windowWidth: 0, //可用屏幕宽度
+				windowHeight: 0, //可用屏幕高度
+				contentHeight: 0, //阅读区域高度
+
+				scrollTop: 0, // 垂直阅读 scrolltop
+
+				platform: '', //设备
+				batteryState: '', //电池状态
+				batteryLevel: 100, //电量
+				systemTime: '', //系统时间
+				systemTimeStr: '', //系统时间字符串
+				statusBarHeight: 0, //状态栏高度
+				pixelRatio: '', //设备像素比
+
+				touchStartX: 0, // 触屏起始点x
+				touchX: 0, // 瞬时触屏点x
+				delta: 0, // 手指瞬时位移
+
+				isTouch: false, // 是否处于触屏状态
+				curPageTranslate: 0, // 本页的移动位置
+				touchStartY: 0, // 触屏起始点y
+				touchY: 0, // 瞬时触屏点y
+				sliderValue: 0, // scroll事件赋值
+
+				menuShow: false, //菜单栏box是否渲染
+				itemShow: false, // 菜单栏动画控制
+				settingShow: false, //设置栏动画控制
+				directoryShow: false, //目录动画控制
+				directoryShowBefore: false, // 目录渲染
+				turnPageTime: .5, //翻页动画时间
+
+				biaodian: ['，', ':', '、', ';', '。', '.'], //匹配的标点
+				maxFontSize: 30, //最大字体大小，px
+				minFontSize: 14, //最小字体大小，px
+				turnType: 4, //翻页方式
+				NumCol: '', // 一章多少行
+				colSize: '', // 一行多少字
+				fontSize: '', //字体大小，
+				simplified: '', //是否简体
+				lineHeight: '', //行高，注意是fontSize的倍数
+				background: '', //背景
+				colorList: ['#000', '#666'], //与背景对应的字体颜色
+				highlight: "null", // 字体高亮
+				fhighlight: false, // 左右的高亮
+				chapterProgress: 0, //‘章节进度条’的参数
+				progressTouched: false, //是否正在点击‘章节进度条’
+				highlightTimer: '', // 高亮定时器名字
+				domList: [], // dom列表
+				domIndex: 0, // dom下标
+				music: null, // 创建audio
+				musicManuShow: false, // 听书按钮是否显示
+				isPause: false, // 是否暂停
+				isAudioMenu: false, // 是否展示听书菜单
+				oldType: null,
+				detail: {
+					title: "",
+					data: [],
+					freeChapterCount: 0,
+					isBuy: 0,
+					isVip: 0,
+				},
+				isVerticalHua: false,
+				speedTrue: false, //判断是否更新进度
+				speedData: {
+					bookId: 0,
+					chapter_id: 0,
+					chapter_name: '',
+					precent: '',
+					content_id: 0
+				},
+				updateReadId: 0,
+				newData: [],
+				pageBackRef: {
+					transition: "unset",
+					left: 0,
+					right: 0,
+					width: 0,
+					before: false
+				},
+				topChange: 0,
+				scroll_end: false,
+				musicPlaying: false, // 正在播放音频
+				// 仿真翻页参数
+				width: uni.getSystemInfoSync().windowWidth,
+				height: '800px',
+				text: 'hello',
+				isSimulation: true, // 仿真翻页模式
+				SimulationText: [], // 仿真翻页内容数组
+				hasSimulationText: false,
+				setShow: true, // 设置显示？
+				clientlast: null, //开始位置
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除				
+				musicItem:{
+					// 听书相关内容
+					musicIndexDom:0,
+					highlight: 'null',
+					musicPlaying:false,
+				},
+				readerSet:{
+					fontSize:'',  //字体大小，
+					lineHeight:'' //行高，注意是fontSize的倍数
+				}
+			}
+		},
+
+		onLoad(option) {
+			this.bookId_mark = option.Id
+			this.getSystemInfo()
+			this.bookMessage()
+			this.setStorage()
+		},
+		onUnload() {
+
+			// #ifdef APP-PLUS
+			// 退出全屏
+			plus.navigator.setFullscreen(false)
+			// #endif
+
+			this.setStorage()
+		},
+		onReady() {
+			// console.log('------------------------------')			
+			// 单页禁止测滑返回
+			// #ifdef APP-PLUS
+			let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
+			currentWebview.setStyle({
+				popGesture: 'none'
+			})
+			// #endif
+		},
+		onHide() {
+			this.setStorage()
+		},
+		mounted() {
+			this.initPage()
+		},
+		computed: {
+			progress() { //章节的阅读进度
+				if (this.curChapter.totalPage === 1) {
+					return 0
+				}
+				return this.currentPage / (this.curChapter.totalPage - 1)
+			},
+			...mapState(['userInfo']),
+			rect() {
+				return {					
+					width: this.width,
+					height: this.height
+				}
+
+			}
+			
+		},		
+		methods: {
+			changeMusicItem(){
+					this.musicItem.highlight = this.highlight,
+					this.musicItem.musicIndexDom = this.domIndex,
+					this.musicItem.musicPlaying = this.musicPlaying				
+			},
+			openStart(e) {
+				//记录位置
+				this.clientlast = e.changedTouches[0];
+			},
+			openEnd(e) {
+					
+				this.touchNum++
+				if (this.touchNum == 0) {} else {
+					if (this.touchNum > 1) {
+						clearTimeout(this.touchTime)
+						//单击事件
+						this.touchTime = setTimeout(() => {
+							this.touchNum = 0
+						}, 250)
+						console.log('双击')
+						this.setShow = true
+						// this.createAudio()
+					} else {
+						clearTimeout(this.touchTime)
+						this.touchTime = setTimeout(() => {
+							//双击或则多次点击事件
+							this.touchNum = 0
+						}, 250)
+						//console.log('单击')
+					}
+				
+				}
+			},
+			clickImg(item, index) {
+				// 点击图片
+				let imgarr = this.newchapterImgList.map(item => item)
+				console.log(imgarr, 'imgarr')
+				this.imgsShow = false
+				uni.previewImage({
+					current: index,
+					urls: imgarr
+				})
+			},
+			clickSet(name) {
+				// 点击图片	
+				if (name == 0) {
+					// 章节图片
+					this.imgsShow = true
+				} else if (name == 1) {
+					// 目录
+					//this.openDirectory()					
+					this.directoryShowBefore = true
+					this.directoryShow = true
+					this.$nextTick(function() {
+						console.log(4545,this.directoryShow)
+						})
+				} else if (name == 2) {
+					// 听书
+					this.listenHandle()
+				}
+
+				this.setShow = false
+				// this.$refs.uToast.success(`点击了第${name}个`)			
+				// console.log(name,'imgarr')
+
+			},
+			toRight() {
+				this.nothingShow = true
+			},
+			showImgHandle() {
+				this.imgsShow = true
+			},
+			bookMessage() {
+				this.$http
+					.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
+					.then(res => {
+						this.bookName = res.book.name,
+						this.bookFengMian = res.book.images
+						console.log('获取电子书详情', res)
+					});
+
+
+			},
+			counlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.forGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			mpcounlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.mpforGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			nextmpcounlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.nextmpforGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			// 拆分数据
+			forGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				this.chapterImgList = []
+				copyBookText.map((res, index) => {
+					res.content = '' + res.content
+					// console.log(res.picAndWord)
+					if (res.content.length > colSize - 2) {
+						//colSize - 2  段落首行空格
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+					let picAndWord = res.otherContent
+					// let reg = new RegExp('(?<=(img src="))[^"]*?(?=")/gi)')
+					//let RegEx = /(?<=(img src="))[^"]*?(?=")/gims
+					// let imgArr = picAndWord.match(reg)
+					let imgArr = picAndWord
+					// let imgArr = picAndWord.match(/src*?\/g)
+
+					this.chapterImgList[index] = imgArr
+
+				})
+				// 过滤图片数据
+				let arr3 = []
+				this.chapterImgList.map((item, index) => {
+
+					if (item != null && item != '') {
+						// console.log(item,'item')
+						arr3.push(item)
+					}
+				})
+				this.newchapterImgList = arr3
+				// console.log(this.newchapterImgList, 'newchapterImgList')
+				copyBookText = arr
+				// console.log(this.SimulationText,'SimulationText')
+				this.getSizePage(NumCol)
+			},
+			mpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				preText.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				preText = arr
+				// console.log(copyBookText,'copyBookText')
+				// this.getSizePage(NumCol)
+			},
+			nextmpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				nextText.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				nextText = arr
+				// console.log(copyBookText,'copyBookText')
+				// this.getSizePage(NumCol)
+			},
+			//获取后面的字符，再去计算能放几行
+			aginForget(text, arr, colSize, index) {
+				let that = this;
+				let strBR = "</br>"
+				if (text.length > colSize) {
+					let nextString = text.substr(colSize, 1)
+					let haveBiao = 0
+					for (var i = 0; i < this.biaodian.length; i++) {
+						if (nextString == this.biaodian[i]) {
+							haveBiao = 1
+						}
+					}
+					arr.push({
+						'paragraph': index,
+						'list': text.substr(0, colSize - haveBiao),
+						'level': 0,
+						class: ''
+					})
+
+					let newText = text.substr(colSize - haveBiao)
+					that.aginForget(newText, arr, colSize, index)
+				} else {
+					arr.push({
+						'paragraph': index,
+						'list': text.substr(0, colSize),
+						'level': 0,
+						class: ''
+					})
+					// arr.push(strBR)					
+				}
+			},
+			tmpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				this.tmpChapter.text.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				this.tmpChapter.text = arr
+				// console.log(copyBookText,'copyBookText')
+				this.getSizePage(NumCol)
+			},
+			// 计算章节页数
+			getSizePage(NumCol) {
+				let that = this;
+				let arr = [],
+					newArr = []
+				copyBookText = copyBookText.filter((item, index) => {
+
+					if (item == '' || item == '  ' || item == '   ') {
+
+					} else {
+						return item
+					}
+				})
+				for (let i = 0; i < copyBookText.length; i++) {
+					newArr.push(copyBookText[i])
+					if (newArr.length < NumCol) {
+
+					} else {
+						arr.push(newArr)
+						newArr = []
+					}
+				}
+				arr.push(newArr)
+				copyBookText = arr // 每一页显示的内容
+				this.SimulationText = []
+				this.SimulationText = arr
+				this.hasSimulationText = true
+				console.log(this.SimulationText, 'SimulationText')
+			},
+
+			setStorage() {
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					history = []
+				}
+				let have = false
+				history.forEach((value) => {
+					if (value.bookId === this.bookId) {
+						have = true
+						value.chapterIndex = this.curChapter.chapterIndex
+						value.progress = this.progress
+					}
+				})
+				console.log(history, '缓存')
+				if (!have) {
+					// 设备内没有当前的缓存数据时
+					history.push({
+						bookId: this.bookId,
+						chapterIndex: this.curChapter.chapterIndex,
+						progress: this.progress
+					})
+					// 将进度存到数据库
+					this.saveReadRateUl()
+					//this.updateReadRateUl()   // 更新进度
+				}
+				// oldReadSpeed:{      // 本地初始阅读进度
+				//    chapterIndex: null,
+				// 	updateReadId: null  
+				// },				
+				if ((this.oldReadSpeed.precent / 10) < this.progress) {
+
+					this.speedData.precent = this.progress
+					this.speedData.bookId = this.bookId_mark;
+					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
+					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
+					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
+					//console.log('符合更新条件')
+					// 阅读进度大于原进度时
+					this.updateReadRateUl()
+				}
+				uni.setStorageSync('history', history)
+			},
+
+			/**
+			 * 返回上一页面
+			 **/
+			back() {
+				uni.navigateBack()
+			},
+
+			/**
+			 * 获取设备信息
+			 **/
+			getSystemInfo() {
+				const {
+					windowWidth,
+					windowHeight,
+					statusBarHeight,
+					platform,
+					pixelRatio
+				} = uni.getSystemInfoSync()
+				//获取一些必要的设备参数
+				this.statusBarHeight = statusBarHeight
+				this.windowWidth = windowWidth
+				this.windowHeight = windowHeight
+				this.pixelRatio = pixelRatio
+				this.platform = platform
+				// #ifdef APP-PLUS
+				// 全屏
+				plus.navigator.setFullscreen(true)
+				// 取消ios左滑返回
+				let page = this.$mp.page.$getAppWebview()
+				page.setStyle({
+					popGesture: 'none'
+				})
+
+				if (this.platform === 'ios') {
+					// 获取ios电量
+					let UIDevice = plus.ios.import("UIDevice")
+					let dev = UIDevice.currentDevice()
+					if (!dev.isBatteryMonitoringEnabled()) {
+						dev.setBatteryMonitoringEnabled(true)
+					}
+					setInterval(() => {
+						this.batteryState = dev.batteryState()
+						this.batteryLevel = dev.batteryLevel() * 100
+					}, 1000)
+
+				} else {
+					// 获取安卓电量
+					let main = plus.android.runtimeMainActivity();
+					let Intent = plus.android.importClass('android.content.Intent');
+					let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
+						onReceive: (context, intent) => {
+							let action = intent.getAction();
+							if (action == Intent.ACTION_BATTERY_CHANGED) {
+								this.batteryState = intent.getIntExtra("status", 0); //电池状态
+								this.batteryLevel = intent.getIntExtra("level", 0); //电量
+							}
+						}
+					});
+					let IntentFilter = plus.android.importClass('android.content.IntentFilter');
+					let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
+					main.registerReceiver(recevier, filter);
+				}
+
+				// #endif
+				// 设置时间
+				let date = new Date();
+				this.systemTime = Date.parse(date);
+				this.systemTimeStr = dateToStr(this.systemTime);
+				setInterval(() => {
+					this.systemTime += 60000;
+					this.systemTimeStr = dateToStr(this.systemTime);
+				}, 60000)
+
+
+				// 获取字体、排版等信息
+
+				//可能缓存在前端可能从后端拿，如果是异步注意同步处理
+				this.fontSize = uni.getStorageSync('fontSize')
+				if (typeof this.fontSize !== 'number') {
+					this.fontSize = 18
+				}
+				this.simplified = uni.getStorageSync('simplified')
+				if (typeof this.simplified !== 'number') {
+					this.simplified = 1
+				}
+				this.lineHeight = uni.getStorageSync('lineHeight')
+				if (typeof this.lineHeight !== 'number') {
+					this.lineHeight = 1.5
+				}
+				this.background = uni.getStorageSync('background')
+				if (typeof this.background !== 'number') {
+					this.background = 1
+				}
+				this.turnType = uni.getStorageSync('turnType')
+				if (this.turnType == 2) {
+					this.isVertical = true;
+				}
+				if (this.turnType == 3) {
+					this.isVerticalHua = true;
+				}
+				if (typeof this.turnType !== 'number') {
+					this.turnType = 0
+				}
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					history = []
+				}
+				history.forEach((value) => {
+					if (value.bookId === this.bookId) {
+						this.history = value
+					}
+				})
+
+				/*****************************************/
+				/*****************************************/
+				/*****************************************/
+
+			},
+
+			/**
+			 * 获取数据并计算页面
+			 **/
+			async initPage() {
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
+				this.cover.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				await this.calcHeight()
+				await this.getDirectoryList()
+				await this.getReadRateUl()
+
+				if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
+					this.history.chapterIndex = 0
+				}
+				await this.getThreeChapter(this.history.chapterIndex)
+				// this.counlSystemInfo()
+				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
+				this.oldReadSpeed.readPage = page
+				this.goToPage(page)
+				uni.hideLoading()
+			},
+
+			/**
+			 * 计算innerHeight，用于截取至整行
+			 **/
+			calcHeight() {
+				if (this.contentHeight) {
+					let lineHeight = this.fontSize * this.lineHeight;
+					// #ifdef APP-PLUS || MP-WEIXIN
+					lineHeight = Math.floor(lineHeight * this.pixelRatio) / this.pixelRatio
+					// #endif
+					let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize) / 2)) /
+						lineHeight)
+					this.innerHeight = lineNum * lineHeight
+				} else {
+					return new Promise((resolve, reject) => {
+						this.$nextTick(() => {
+							const query = uni.createSelectorQuery().in(this);
+							query.select('#content').boundingClientRect(data => {
+								let height = data.height;
+								this.contentHeight = height;
+								let lineHeight = this.fontSize * this.lineHeight;
+
+								// #ifdef APP-PLUS || MP-WEIXIN
+								lineHeight = Math.floor(lineHeight * this.pixelRatio) / this
+									.pixelRatio
+								// #endif
+								let lineNum = Math.floor((height + Math.floor((lineHeight - this
+									.fontSize) / 2)) / lineHeight)
+								this.innerHeight = lineNum * lineHeight
+								resolve()
+							}).exec();
+						})
+
+					})
+				}
+
+			},
+
+			/**
+			 * 计算本章页数
+			 **/
+			calcCurChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#curChapter').boundingClientRect(data => {
+							let height = data.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif
+							// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
+							this.curChapter.totalPage = copyBookText.length
+							this.curChapter.ready = true //章节准备完毕
+							resolve()
+						}).exec();
+					}, 100)
+
+				})
+			},
+			/**
+			 * 顶部 计算上一章 （如果有）
+			 **/
+			scrolltoupper(e) {
+				if (this.isAudioMenu == false && e.detail.direction == "top" && e.type == "scrolltoupper" && !this.down) {
+					if (this.curChapter.chapterIndex > 0) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex - 1)
+							uni.hideLoading()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已经在最开头了'
+						})
+					}
+				}
+			},
+			/**
+			 * 底部 加载下一章 （如果有）
+			 **/
+			async scrolltolower(e) {
+				if (e.detail.direction == "bottom" && e.type == "scrolltolower") {
+
+					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							this.scrollTop = 0
+							uni.hideLoading()
+							this.down = true
+						}, 300)
+						setTimeout(() => {
+							this.clearDown()
+						}, 500)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已加载全部1'
+						})
+					}
+				}
+			},
+			/**
+			 * 还原 this.down
+			 **/
+			clearDown() {
+				setTimeout(() => {
+					this.down = false
+				}, 300)
+			},
+			/**
+			 * 听书事件
+			 **/
+			listenHandle() {
+				// this.changeTurnType(2)
+				const query = uni.createSelectorQuery().in(this);
+				// console.log(query)
+				query.selectAll('.book-inner').boundingClientRect(data => {
+					// console.log('this.domList',this.domList);
+					//console.log('data',data);					
+					data = data.filter((item, index) => {
+						return item.id == ""
+					})
+					if (this.domList.length > 0) {
+						console.log('读取到数据，继续执行');
+					} else {
+						console.log('读取到的数据为空，进行赋值');
+						this.domList = data;
+					}
+					this.getNowReadIndex()
+					// this.$nextTick(()=>{
+					// 	this.createAudio()
+					// })					
+				}).exec();
+			},
+
+			getNowReadIndex() {
+				let progress = this.progress //记录阅读进度用于调整字体后跳转
+				// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				let page = 0
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					page = 0
+				} else {
+					page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				}
+				// console.log(this.curChapter.totalPage, 'curChapter')
+				// 通过page 判断当前读到了哪里
+				// console.log(page+1, '当前页')
+
+				let nowRead = copyBookText[page][0].list
+				console.log(nowRead, '顶部第一句话')
+				//let nowReadIndex = 0
+				//console.log(page,'page')
+				if (page == 0) {
+					// return this.scrollTop = 0
+					this.domIndex = 0
+					this.createAudio()
+					this.musicManuShow = false
+					this.isAudioMenu = true					
+				} else {
+					let found = false
+					this.verticalData.text.forEach((item, itemIndex) => {
+						// console.log(copyBookText[page][0][0],'copyBookText')
+						//console.log(item.content,'item')				
+						if (item.content.indexOf(nowRead) != -1) {
+							// 找到了
+							console.log(item.number, '找到了')
+							found = true
+							this.domIndex = itemIndex
+							this.createAudio()
+							this.musicManuShow = false
+							this.isAudioMenu = true							
+							return
+						}
+					})
+					if (!found) {
+						uni.showToast({
+							title: '未找到音频',
+							icon: 'none',
+							duration: 2000
+						})
+					}
+				}
+			},
+
+			// 创建音频
+			createAudio() {
+				console.log('读到的位置', this.domIndex);
+				this.music = uni.createInnerAudioContext()
+				this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
+				console.log(this.verticalData.text, '文本')
+				// 找到符合条件的dom
+				console.log('domList', this.domList)
+				// 给对应dom高亮				
+				this.highlight = this.domIndex
+				this.fhighlight = true
+				console.log('highlight', this.highlight);
+				console.log('domIndex', this.domIndex);
+				// 判断是否有src
+				if (this.music.src) {
+					setTimeout(() => {
+						this.music.play(); //执行播放
+						this.musicPlaying = true
+						this.musicItem.musicPlaying = true
+						this.changeMusicItem()
+					}, 150)
+				}
+				// 音频播放结束
+				this.music.onEnded(() => {
+					this.musicPlaying = false
+					if (this.domIndex == this.domList.length - 1) {
+						console.log('全部音频播放完毕');
+
+					} else {
+						console.log('音频播放结束2');
+						this.addDomIndex()
+					}
+				});
+			},
+			// 加载下一条音频
+			addDomIndex() {
+				this.domIndex += 1
+				//console.log(this.domIndex, '下一条domIndex')	
+				//console.log(this.curPage.text, '最大值')	
+				setTimeout(() => {
+					this.createAudio()
+					let paragraphindex = 0
+					//if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
+					this.curPage.text.map((item, index) => {
+						if (index == this.curPage.text.length - 1) {
+							paragraphindex = item.paragraph
+							return
+						}
+					})
+					//return 
+					if (this.domIndex > paragraphindex) {
+						this.goNextPage()
+					}
+
+				}, 1000)
+
+			},
+			// 暂停事件
+			audioPause() {
+				this.isPause = !this.isPause
+				if (this.isPause) {
+					this.music.pause()					
+					this.musicPlaying = false
+					this.musicItem.musicPlaying = false
+				} else {
+					this.music.play()
+					this.musicPlaying = true
+					this.musicItem.musicPlaying = true
+				}
+			},
+			//  关闭听书
+			offAudio() {
+				this.music.stop();
+				// this.domIndex = 0;
+				this.highlight = "null";
+				this.fhighlight = false
+				this.isAudioMenu = false;
+				this.isPause = false;
+				this.music = null;
+				this.musicPlaying = false
+				this.changeMusicItem()
+			},
+
+			/**
+			 * 计算上一章页数,并翻页（如果有）
+			 **/
+			calcPreChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#preChapter').boundingClientRect(data => {
+							let height = data.height;
+							// let height = copyBookText.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif						
+							// this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1
+							this.preChapter.totalPage = this.preChapterTotal
+							this.preChapter.ready = true //章节准备完毕
+							if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
+								uni.hideLoading() //把loading关掉
+								this.waitForPre = false;
+								//页面准备完毕
+								this.goPrePage()
+							}
+							if (this.waitForPreChapter) {
+								uni.hideLoading()
+								this.waitForPreChapter = false
+								this.goPreChapter()
+							}
+							resolve()
+						}).exec();
+
+					}, 100)
+
+				})
+
+			},
+
+			/**
+			 * 计算下一章页数,并翻页（如果有）
+			 **/
+			calcNextChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#nextChapter').boundingClientRect(data => {
+							let height = data.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif
+							//this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
+							this.nextChapter.totalPage = this.nextChapterTotal
+							this.nextChapter.ready = true //章节准备完毕
+							if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
+								uni.hideLoading() //把loading关掉
+								this.waitForNext = false;
+								//页面准备完毕
+								this.goNextPage()
+							}
+							if (this.waitForNextChapter) {
+								uni.hideLoading()
+								this.waitForNextChapter = false
+								this.goNextChapter()
+							}
+							resolve()
+						}).exec();
+					}, 100)
+
+				})
+
+			},
+
+			/**
+			 * 触摸开始
+			 **/
+			touchStart(e) {
+				this.showAnimation = false
+				this.isTouch = true
+				this.touchX = e.touches[0].clientX;
+				this.touchStartX = e.touches[0].clientX;
+				this.touchY = e.touches[0].clientY;
+				this.touchStartY = e.touches[0].clientY;
+				// console.log(touchStartY, '触摸开始')
+
+				if (this.turnType === 0) {
+					// this.$refs.pageBackRef.$el.style.transition = 'unset'
+					// this.$refs.pageBackRef.$el.style.right = 0
+					// this.$refs.pageBackRef.$el.style.width = 0
+					this.pageBackRef.transition = 'unset'
+					this.pageBackRef.right = 0
+					this.pageBackRef.left = 0
+					this.pageBackRef.width = 0
+					this.pageBackRef.before = true
+				}
+			},
+
+			/**
+			 * 触摸
+			 **/
+			touchMove(e) {
+				this.showShadow = true;
+				let delta = 0
+
+				if (this.turnType === 0 || this.turnType === 1) { // 翻页方式为‘覆盖’ 或 ‘左右平移’
+					delta = e.touches[0].clientX - this.touchStartX;
+
+					this.pageBackRef.before = delta > 0 ? true : false
+					if (this.turnType === 0 && !this.pageBackRef.before) {
+						// this.$refs.pageBackRef.$el.style.right = `${-delta}px`
+						// this.$refs.pageBackRef.$el.style.width = `${-delta * 0.5}px`
+						this.pageBackRef.right = `${-delta}px`
+						this.pageBackRef.width = `${-delta * 0.5}px`
+					} else if (this.turnType === 0 && this.pageBackRef.before) {
+						this.pageBackRef.left = `${delta}px`
+						this.pageBackRef.width = `${-delta * 0.5}px`
+					}
+					if (delta > this.windowWidth) {
+						delta = this.windowWidth
+					}
+					if (delta < -this.windowWidth) {
+						delta = -this.windowWidth
+					}
+
+
+					this.delta = e.touches[0].clientX - this.touchX;
+					this.touchX = e.touches[0].clientX;
+
+				} else { //翻页方式为‘上下平移’
+					delta = e.touches[0].clientY - this.touchStartY;
+
+					// 限制边界
+					if (delta > this.windowHeight) {
+						delta = this.windowHeight
+					}
+					if (delta < -this.windowHeight) {
+						delta = -this.windowHeight
+					}
+
+					this.delta = e.touches[0].clientY - this.touchY;
+					this.touchY = e.touches[0].clientY;
+					// console.log(this.delta, 'delta')					
+				}
+				if (this.next && this.nextPage.ready) { //首次翻下一页之后
+					if (this.nextPage.isEnd) {
+						return
+					}
+					// 限制边界
+					if (delta > 0) {
+						delta = 0
+					}
+
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth+delta}px,0)`,
+						`(0,${-this.windowHeight+delta}px)`
+					]
+
+					this.curPage.pageTranslate = [
+						`(${delta}px,0)`,
+						`(${delta}px,0)`,
+						`(0,${delta}px)`
+					]
+
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth+delta}px,0)`,
+						`(0,${this.windowHeight+delta}px)`
+					]
+				}
+				if (!this.pre && !this.next && delta < 0) { //首次翻下一页
+					this.next = true
+					if (this.nextPage.ready) { //页面准备好了
+						if (this.nextPage.isEnd) {
+
+							uni.showToast({
+								title: '跳转推荐页',
+								icon: 'none'
+							})
+							/*****************************************/
+							/*****************************************/
+							/*****************************************/
+
+
+						} else {
+							this.prePage.pageTranslate = [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth+delta}px,0)`,
+								`(0,${-this.windowHeight+delta}px)`
+							]
+							this.curPage.pageTranslate = [
+								`(${delta}px,0)`,
+								`(${delta}px,0)`,
+								`(0,${delta}px)`
+							]
+
+							this.nextPage.pageTranslate = [
+								`(0,0)`,
+								`(${this.windowWidth+delta}px,0)`,
+								`(0,${this.windowHeight+delta}px)`
+							]
+						}
+					} else if (this.nextChapter.ready) { //下一章已经准备好了
+						this.nextPage = {
+							ready: this.nextChapter.ready,
+							chapterName: this.nextChapter.chapterName,
+							text: copyBookText,
+							pageNum: 0,
+							totalPage: this.nextChapter.totalPage,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							],
+							canRead: this.nextChapter.canRead
+						}
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(${delta}px,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth+delta}px,0)`,
+							`(0,${this.windowHeight+delta}px)`
+						]
+					}
+				}
+				if (this.pre && this.prePage.ready) { //首次翻上一页之后
+
+					// 限制边界
+					if (delta < 0) {
+						delta = 0
+					}
+
+					if (this.prePage.isCover) { //上一页是封面
+						this.cover.pageTranslate = [
+							`(${-this.windowWidth+delta}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+					} else {
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth+delta}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth+delta}px,0)`,
+							`(0,${this.windowHeight+delta}px)`
+						]
+					}
+				}
+				if (!this.prePage.isCover) {
+
+					if (!this.pre && !this.next && delta > 0) { //首次翻上一页
+						this.pre = true
+						if (this.prePage.ready) { //页面准备好了
+							if (this.prePage.isCover) { //上一页是封面
+								this.cover.pageTranslate = [
+									`(${-this.windowWidth+delta}px,0)`,
+									`(${-this.windowWidth+delta}px,0)`,
+									`(0,${-this.windowHeight+delta}px)`
+								]
+								this.curPage.pageTranslate = [
+									`(0,0)`,
+									`(${delta}px,0)`,
+									`(0,${delta}px)`
+								]
+
+							} else {
+								this.prePage.pageTranslate = [
+									`(${-this.windowWidth+delta}px,0)`,
+									`(${-this.windowWidth+delta}px,0)`,
+									`(0,${-this.windowHeight+delta}px)`
+								]
+								this.curPage.pageTranslate = [
+									`(0,0)`,
+									`(${delta}px,0)`,
+									`(0,${delta}px)`
+								]
+
+								this.nextPage.pageTranslate = [
+									`(0,0)`,
+									`(${this.windowWidth+delta}px,0)`,
+									`(0,${this.windowHeight+delta}px)`
+								]
+							}
+						} else if (this.preChapter.ready) { //上一章已经准备好了							
+							this.prePage = {
+								ready: this.preChapter.ready,
+								chapterName: this.preChapter.chapterName,
+								text: copyBookText,
+								pageNum: this.preChapter.totalPage - 1,
+								totalPage: this.preChapter.totalPage,
+								pageTranslate: [
+									`(${-this.windowWidth}px,0)`,
+									`(${-this.windowWidth}px,0)`,
+									`(0,${-this.windowHeight}px)`
+								],
+								canRead: this.preChapter.canRead
+							}
+							this.prePage.pageTranslate = [
+								`(${-this.windowWidth+delta}px,0)`,
+								`(${-this.windowWidth+delta}px,0)`,
+								`(0,${-this.windowHeight+delta}px)`
+							]
+							this.curPage.pageTranslate = [
+								`(0,0)`,
+								`(${delta}px,0)`,
+								`(0,${delta}px)`
+							]
+
+							this.nextPage.pageTranslate = [
+								`(0,0)`,
+								`(${this.windowWidth+delta}px,0)`,
+								`(0,${this.windowHeight+delta}px)`,
+							]
+						}
+					}
+				}
+
+
+			},
+
+			/**
+			 * 触摸结束
+			 **/
+			touchEnd(e) {
+				console.log(e, 'e')
+				this.isTouch = false
+				this.showAnimation = true
+				this.showShadow = false
+				let delta = 0
+				let that = this
+				if (this.turnType === 0 || this.turnType === 1) {
+					delta = e.changedTouches[0].clientX - this.touchStartX;
+				} else {
+					delta = e.changedTouches[0].clientY - this.touchStartY;
+					this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
+					console.log(this.page, 'page')
+					//this.getNowReadIndex()
+				}
+
+				if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
+					if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
+						if (!this.prePage.isCover) {
+							this.goPrePage()
+						}
+					} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
+						//if(e.changedTouches[0].clientY > 100){ // 显示弹窗
+						e.changedTouches[0].clientY > 100 ? this.goNextPage() : ''
+						//}
+					} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=
+						this
+						.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
+						this.showMenu()
+					}
+				} else {
+					if (this.next && this.delta <= 0) { //下一页
+						this.goNextPage()
+					} else if (this.next && this.delta > 0) { //取消翻页
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						]
+
+						if (this.turnType == 0) {
+							this.pageBackRef.transition = 'right .5s ease'
+							this.pageBackRef.right = 0
+							this.pageBackRef.width = 0
+						}
+					} else if (this.pre && this.delta >= 0) { //上一页
+						this.goPrePage()
+					} else if (this.pre && this.delta < 0) { //取消翻页
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						]
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						]
+						this.cover.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+
+						if (this.turnType == 0) {
+							this.pageBackRef.transition = 'left .5s ease'
+							this.pageBackRef.left = 0
+							this.pageBackRef.width = 0
+						}
+					}
+				}
+				this.next = false
+				this.pre = false
+				// setTimeout(()=>{
+				// 	this.pageBackRef.width = '0px'
+				// },450)
+			},
+
+			/**
+			 * 取消触摸
+			 **/
+			touchcancel() {
+
+				//取消翻页,重置页面
+				this.showAnimation = false
+				this.showShadow = false
+				this.prePage.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.curPage.pageTranslate = [
+					`(0,0)`,
+					`(0,0)`,
+					`(0,0)`
+				]
+				this.nextPage.pageTranslate = [
+					`(0,0)`,
+					`(${this.windowWidth}px,0)`,
+					`(0,${this.windowHeight}px)`
+				]
+				this.cover.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.next = false
+				this.pre = false
+
+			},
+
+			/**
+			 * 呼出菜单
+			 **/
+			showMenu() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(false);
+				// #endif
+				this.menuShow = true;
+				if (this.music == null && !this.isVerticalHua) {
+					this.musicManuShow = true;
+				} else {
+					this.musicManuShow = false;
+				}
+				setTimeout(() => {
+					this.itemShow = true
+				}, 100)
+			},
+
+			/**
+			 * 关闭菜单
+			 **/
+			closeMenu() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(true);
+				// #endif
+				this.itemShow = false
+				this.settingShow = false
+				this.directoryShow = false
+				setTimeout(() => {
+					this.directoryShowBefore = false
+					this.menuShow = false
+					this.musicManuShow = false;
+				}, 300)
+			},
+
+			/**
+			 * 关闭菜单栏，呼出设置栏
+			 **/
+			openSetting() {
+
+				this.itemShow = false
+				setTimeout(() => {
+					this.settingShow = true
+				}, 300)
+			},
+
+			/**
+			 * 关闭菜单栏，呼出目录栏
+			 **/
+			openDirectory() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(true);
+				// #endif
+				this.itemShow = false
+				this.directoryShowBefore = true
+				setTimeout(() => {
+					this.directoryShow = true
+					console.log(this.directoryShow)
+				}, 300)
+				
+			},
+
+			/**
+			 * 拖动进度条
+			 **/
+			slideChanging(e) {
+				this.progressTouched = true
+				this.chapterProgress = e.detail.value
+			},
+
+			/**
+			 * 结束拖动进度条
+			 **/
+			async slideChange(e) {
+
+				this.chapterProgress = e.detail.value
+				uni.showLoading({
+					title: '加载中'
+				})
+				await this.getThreeChapter(e.detail.value)
+				this.counlSystemInfo()
+				this.progressTouched = false
+				this.goToPage(0)
+				uni.hideLoading()
+
+			},
+
+			/**
+			 * 上一页,页面轮换
+			 **/
+			goPrePage() {
+				if (this.prePage.isCover) { //如果是首页
+					this.cover.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+					return
+				}
+				if (!this.prePage.ready && !this.preChapter.ready) {
+					this.waitForPre = true
+					uni.showLoading({
+						title: '正在准备上一章',
+						mask: true
+					})
+					return
+				}
+				let showChapter = false
+				this.currentPage -= 1
+				if (this.currentPage === -1) { //翻至上一章了
+					showChapter = true
+					this.currentPage = this.preChapter.totalPage - 1
+					this.chapterRotate('pre')
+				}
+				console.log(copyBookText, 'goPrePage////////////////////////////////')
+				let cur = [].concat(this.curPage.pageTranslate)
+				let pre = [].concat(this.prePage.pageTranslate)
+				this.goToPage(this.currentPage)
+				//  当前scrollTop的值
+				//、 this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
+				// console.log(this.scrollTop,'翻页后的scrollTop')
+				// this.getDomIndex()
+
+				this.prePage.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.curPage.pageTranslate = pre
+				this.nextPage.pageTranslate = cur
+				if (this.turnType === 0) {
+
+					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
+					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
+					// this.$refs.pageBackRef.$el.style.width = `100px`
+					this.pageBackRef.before = true
+					this.pageBackRef.transition = 'left .5s ease'
+					this.pageBackRef.left = `${this.windowWidth}px`
+					this.pageBackRef.right = 0
+					this.pageBackRef.width = `100px`
+				}
+
+				setTimeout(() => {
+					if (showChapter) {
+						uni.showToast({
+							title: this.curChapter.chapterName,
+							icon: 'none'
+						})
+					}
+					this.showAnimation = true
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth}px,0)`,
+						`(0,${-this.windowHeight}px)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+				}, 50)
+			},
+
+
+			/**
+			 * 下一页,页面轮换
+			 **/
+			goNextPage() {
+				if (this.nextPage.isEnd) { //如果翻至本书末尾
+					alery('到头了')
+					uni.showToast({
+						title: '跳转推荐页',
+						icon: 'none'
+					})
+					/*****************************************/
+					/*****************************************/
+					/*****************************************/
+					return
+				}
+				if (!this.nextPage.ready && !this.nextChapter.ready) {
+					this.waitForNext = true
+					uni.showLoading({
+						title: '正在准备下一章',
+						mask: true
+					})
+					return
+				}
+				this.currentPage += 1
+				let showChapter = false
+				console.log(this.currentPage, this.curChapter.totalPage)
+				if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
+					showChapter = true
+					this.currentPage = 0
+					this.chapterRotate('next')
+					this.speedData.bookId = this.bookId_mark;
+					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
+					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
+					this.speedData.precent = this.curChapter.chapterIndex;
+					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
+					if (this.speedTrue) {
+						this.updateReadRateUl()
+					} else {
+						this.saveReadRateUl()
+					}
+
+				}
+				let cur = [].concat(this.curPage.pageTranslate)
+				let next = [].concat(this.nextPage.pageTranslate)
+				this.goToPage(this.currentPage)
+				//  当前scrollTop的值
+				// this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
+				// console.log(this.scrollTop,'翻页后的scrollTop')
+
+				this.prePage.pageTranslate = cur
+				this.curPage.pageTranslate = next
+				this.nextPage.pageTranslate = [
+					`(0,0)`,
+					`(${this.windowWidth}px,0)`,
+					`(0,${this.windowHeight}px)`
+				]
+
+				if (this.turnType === 0) {
+					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
+					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
+					// this.$refs.pageBackRef.$el.style.width = `100px`
+					this.pageBackRef.before = false
+					this.pageBackRef.transition = 'right .5s ease .15s'
+					this.pageBackRef.right = `${this.windowWidth}px`
+					this.pageBackRef.left = 0
+					this.pageBackRef.width = `100px`
+				}
+				setTimeout(() => {
+					if (showChapter) {
+						uni.showToast({
+							title: this.curChapter.chapterName,
+							icon: 'none'
+						})
+					}
+					this.showAnimation = true
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth}px,0)`,
+						`(0,${-this.windowHeight}px)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+
+				}, 100)
+			},
+
+			/**
+			 * 章节轮换
+			 **/
+			async chapterRotate(type) {
+				/*
+					1:在切换上下章时调用请求数据方
+					2:调用截取数据方法 this.counlSystemInfo()
+				*/
+				if (type === 'next') {
+					this.preChapter = Object.assign({}, this.curChapter)
+					this.curChapter = Object.assign({}, this.nextChapter)
+					console.log(this.curChapter.chapterIndex, 'chapterIndex')
+					copyBookText = this.curChapter.text;
+
+					this.counlSystemInfo()
+					console.log(copyBookText, 1111111111)
+					if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
+						this.nextChapter = {
+							ready: false,
+							chapterIndex: this.curChapter.chapterIndex + 1,
+							chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
+						}
+						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
+						this.$set(this.nextChapter, 'text', this.tmpChapter.text)
+						this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
+						this.calcNextChapter()
+					} else {
+						this.nextChapter = {
+							ready: true,
+							isEnd: true
+						}
+					}
+					this.getThreeChapter(this.curChapter.chapterIndex)
+
+				}
+				if (type === 'pre') {
+					this.nextChapter = Object.assign({}, this.curChapter)
+					this.curChapter = Object.assign({}, this.preChapter)
+					copyBookText = this.curChapter.text;
+					this.counlSystemInfo()
+					console.log(copyBookText, '跳转到上一章')
+					// this.preChapter.text = 
+					if (this.curChapter.chapterIndex !== 0) {
+						this.preChapter = {
+							ready: false,
+							chapterIndex: this.curChapter.chapterIndex - 1,
+							chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
+						}
+						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
+						this.$set(this.preChapter, 'text', this.tmpChapter.text)
+						this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
+						this.calcPreChapter()
+					} else {
+						this.preChapter = {
+							ready: true,
+							isCover: true
+						}
+
+					}
+					this.getThreeChapter(this.curChapter.chapterIndex)
+				}
+			},
+
+
+			/**
+			 * 跳转下一章
+			 **/
+			goNextChapter() {
+				if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
+					uni.showToast({
+						title: '已经是最后一章了',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.waitForNext || this.waitForPre) {
+					return
+				}
+
+				if (this.isVertical) {
+					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							uni.hideLoading()
+							this.down = true
+							this.clearDown()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已加载全部'
+						})
+					}
+				} else {
+					if (this.nextChapter.ready) {
+						this.chapterRotate('next')
+						this.goToPage(0)
+					} else {
+						uni.showLoading({
+							title: '正在准备下一章'
+						})
+						this.waitForNextChapter = true
+					}
+
+				}
+
+			},
+
+			/**
+			 * 跳转上一章
+			 **/
+			goPreChapter(page) {
+				if (this.curChapter.chapterIndex === 0) {
+					uni.showToast({
+						title: '这是第一章',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.isVertical) {
+					if (this.curChapter.chapterIndex > 0) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex - 1)
+							// this.counlSystemInfo()
+							console.log(copyBookText, '翻页后//////////////')
+							uni.hideLoading()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已经在最开头了'
+						})
+					}
+				} else {
+					if (this.waitForNext || this.waitForPre) {
+						return
+					}
+					if (this.preChapter.ready) {
+						this.chapterRotate('pre')
+						this.goToPage(0)
+
+					} else {
+						uni.showLoading({
+							title: '正在准备上一章'
+						})
+						this.waitForPreChapter = true
+					}
+				}
+			},
+
+
+			/**
+			 * 根据页码跳转
+			 **/
+			goToPage(page) {
+				this.currentPage = page
+				this.showAnimation = false
+				console.log(page, '======>')
+				// console.log(copyBookText[page],'当前页')
+				this.$nextTick(function() {
+					this.curPage = {
+						ready: this.curChapter.ready,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page],
+						pageNum: this.currentPage,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						],
+						canRead: this.curChapter.canRead
+					}
+				})
+				// console.log(copyBookText[page][0],'顶部第一句话')
+				let nowRead = copyBookText[page][0]
+				let nowReadIndex = 0
+				this.domIndex = nowReadIndex
+				this.setStorage() // 设置缓存
+				if (this.currentPage === 0) {
+					if (this.preChapter.ready && this.preChapter.isCover) { //翻至封面了
+						this.prePage = {
+							ready: true,
+							isCover: true,
+							pageTranslate: [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth}px,0)`,
+								`(0,${-this.windowHeight}px)`
+							]
+						}
+					} else {
+						this.prePage = {
+							ready: this.preChapter.ready,
+							chapterName: this.preChapter.chapterName,
+							// text: this.preChapter.text,
+							text: this.preChapter.text.map(function(obj, index) {
+								return obj.picAndWord
+							}),
+							pageNum: this.preChapter.totalPage - 1,
+							totalPage: this.preChapter.totalPage,
+							pageTranslate: [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth}px,0)`,
+								`(0,${-this.windowHeight}px)`
+							],
+							canRead: this.preChapter.canRead
+						}
+					}
+				} else {
+					this.prePage = {
+						ready: true,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page - 1],
+						pageNum: this.currentPage - 1,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						],
+						canRead: this.curChapter.canRead
+					}
+				}
+				if (this.currentPage > this.curChapter.totalPage - 1) {
+					if (this.nextChapter.ready && this.nextChapter.isEnd) { //翻至最后一章了
+						this.nextPage = {
+							ready: true,
+							isEnd: true,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							]
+						}
+					} else {
+						this.nextPage = {
+							ready: this.nextChapter.ready,
+							chapterName: this.nextChapter.chapterName,
+							text: this.nextChapter.text.map(function(obj, index) {
+								return obj.picAndWord
+							}),
+							pageNum: 0,
+							totalPage: this.nextChapter.totalPage,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							],
+							canRead: this.nextChapter.canRead
+						}
+					}
+
+				} else {
+					this.nextPage = {
+						ready: true,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page + 1],
+						pageNum: this.currentPage + 1,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						],
+						canRead: this.curChapter.canRead
+					}
+
+					console.log(this.domIndex, 'domIndex')
+
+				}
+			},
+
+
+			/**
+			 * 跳转到指定章节
+			 **/
+			async goToChapter(index) {
+				this.progressTouched = false
+				this.closeMenu()
+				uni.showLoading({
+					title: '加载中'
+				})
+				await this.getThreeChapter(index.id)
+				//this.counlSystemInfo()
+				this.goToPage(0)
+				this.scrollTop = 0
+				// this.domIndex = 1
+				uni.hideLoading()
+				// setTimeout(() => {
+				// 	this.$router.go(0)
+				// }, 500)
+			},
+
+			/**
+			 * 加大字体
+			 **/
+			async bigSize() {
+				let progress = this.progress //记录阅读进度用于调整字体后跳转
+				this.fontSize += 2
+				uni.setStorageSync('fontSize', this.fontSize)
+				this.calcHeight()
+				copyBookText = this.curChapter.text;
+				this.counlSystemInfo()
+				await this.calcCurChapter()
+				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.goToPage(page)
+				if (this.preChapter.ready && !this.preChapter.isCover) {
+					this.preChapter.ready = false
+					await this.calcPreChapter()
+				}
+				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+					this.nextChapter.ready = false
+					await this.calcNextChapter()
+				}
+			},
+
+			/**
+			 * 缩小字体
+			 **/
+			async smallSize() {
+				let progress = this.progress
+				this.fontSize -= 2
+				uni.setStorageSync('fontSize', this.fontSize)
+				this.calcHeight()
+				copyBookText = this.curChapter.text;
+				this.counlSystemInfo()
+				await this.calcCurChapter()
+				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.goToPage(page)
+				if (this.preChapter.ready && !this.preChapter.isCover) {
+					this.preChapter.ready = false
+					await this.calcPreChapter()
+				}
+				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+					this.nextChapter.ready = false
+					await this.calcNextChapter()
+				}
+			},
+
+			/**
+			 * 改变行距
+			 **/
+			async changeLineHeight(lineHeight) {
+				let progress = this.progress
+				if (lineHeight === this.lineHeight) {
+					return
+				} else {
+					this.lineHeight = lineHeight;
+					uni.setStorageSync('lineHeight', this.lineHeight)
+					this.calcHeight()
+					copyBookText = this.curChapter.text;
+					this.counlSystemInfo()
+					await this.calcCurChapter()
+					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+					this.goToPage(page)
+					if (this.preChapter.ready && !this.preChapter.isCover) {
+						this.preChapter.ready = false
+						await this.calcPreChapter()
+					}
+					if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+						this.nextChapter.ready = false
+						await this.calcNextChapter()
+					}
+				}
+			},
+
+
+			/**
+			 * 改变翻页方式
+			 **/
+			changeTurnType(turnType) {
+				if (turnType === this.turnType) {
+					return
+				} else {
+					this.showAnimation = false
+					this.turnType = turnType;
+					uni.setStorageSync('turnType', this.turnType)
+				}
+				if (turnType == 4) {
+					// 逼真翻页方式
+					this.isSimulation = true
+				} else {
+					this.isSimulation = false
+				}
+				if (turnType == 3) {
+					this.isVerticalHua = true
+					// 如果正在播放音频 则暂停掉
+					if (this.musicPlaying) {
+						//console.log('正在播放音频')
+						this.music.pause()
+						this.highlight = "null";
+						this.isAudioMenu = false
+
+					}
+					uni.showModal({
+						title: '提示',
+						showCancel: false,
+						content: '当前阅读模式下，无听书功能，如想体验听书功能，请切换其他模式，并且阅读进度与其他模式不共享。',
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							}
+						}
+					})
+				} else {
+					this.isVerticalHua = false
+				}
+			},
+
+			/**
+			 * 改变背景
+			 **/
+			changeBackground(background) {
+				if (background === this.background) {
+					return
+				} else {
+					this.background = background;
+					uni.setStorageSync('background', this.background)
+				}
+			},
+
+			/**
+			 * 获取目录
+			 **/
+			getDirectoryList(showLoading) {
+
+				if (showLoading) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+				}
+				return this.$http
+					.post('book/book/getBookCatalogue', {
+						'bookid': this.bookId_mark
+					})
+					.then(res => {
+						let vipnum = 0
+						if (this.detail.isBuy == 1) {
+							vipnum = 1
+						}
+						for (let i in res.bookCatalogue) {
+							this.directoryList.push({
+								"id": i,
+								"chapterId": res.bookCatalogue[i].chapterId,
+								"name": res.bookCatalogue[i].chapterName,
+							})
+						}
+					})
+					.catch(() => {
+						// 此处是网络连接失败的逻辑
+						uni.hideLoading()
+						return new Promise((resolve, reject) => {
+							uni.showModal({
+								title: '连接失败',
+								content: '请检查您的网络状态',
+								confirmText: '重试',
+								success: async (res) => {
+									if (res.confirm) {
+										//用户点击了重试
+										await this.getDirectoryList(true)
+										resolve()
+									} else if (res.cancel) {
+										//用户点击取消
+										this.back()
+									}
+								}
+							})
+						})
+					})
+
+				// /*****************************************/
+				// /*****************************************/
+				// /*****************************************/
+			},
+
+
+			/**
+			 * 获取一章数据
+			 **/
+			getOneChapter(chapterId, showLoading) {
+
+				if (showLoading) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+				}
+
+				return this.$http
+					.post('book/bookchaptercontent/appGetBookChapterContent', {
+						'userId': this.userInfo.id,
+						'bookid': this.bookId_mark,
+						'chapterid': chapterId
+					})
+					.then(res => {
+						this.tmpChapter.text = res.bookCatalogue
+						// console.log(this.tmpChapter.text,'tmpChapter')
+					})
+					.catch(() => {
+						// 此处是网络连接失败的逻辑
+						uni.hideLoading()
+						return new Promise((resolve, reject) => {
+							uni.showModal({
+								title: '连接失败',
+								content: '请检查您的网络状态',
+								confirmText: '重试',
+								success: async (res) => {
+									if (res.confirm) {
+										//用户点击了重试
+										await this.getOneChapter(chapterId, true)
+										resolve()
+									} else if (res.cancel) {
+										//用户点击取消
+										this.back()
+									}
+								}
+							})
+						})
+					})
+				/*****************************************/
+				/*****************************************/
+				/*****************************************/
+			},
+
+
+			/**
+			 * 获取三章数据
+			 **/
+			async getThreeChapter(index) {
+				await this.getOneChapter(this.directoryList[Number(index)].chapterId)
+				this.curChapter = {
+					chapterIndex: Number(index),
+					chapterName: this.directoryList[Number(index)].name,
+					text: this.tmpChapter.text,
+					canRead: this.tmpChapter.canRead
+				}
+				this.verticalData = {
+					chapterIndex: Number(index),
+					chapterName: this.directoryList[Number(index)].name,
+					text: this.tmpChapter.text,
+					canRead: this.tmpChapter.canRead
+				}
+				copyBookText = this.curChapter.text;
+				this.counlSystemInfo()
+				this.domIndex = 0;
+				if (this.curChapter.chapterIndex !== 0) {
+					await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
+					//this.mpcounlSystemInfo
+					this.preChapter = {
+						chapterIndex: Number(index) - 1,
+						chapterName: this.directoryList[Number(index) - 1].name,
+						text: this.tmpChapter.text,
+						canRead: this.tmpChapter.canRead
+					}
+					preText = this.tmpChapter.text
+					this.mpcounlSystemInfo()
+					this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1
+					// console.log(this.preChapterTotal,'上一章内容页数')			
+					// 处理数据
+
+					// 
+				} else {
+					this.preChapter = {
+						ready: true,
+						isCover: true
+					}
+				}
+
+				if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
+
+					await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
+					this.nextChapter = {
+						chapterIndex: Number(index) + 1,
+						chapterName: this.directoryList[Number(index) + 1].name,
+						text: this.tmpChapter.text,
+						canRead: this.tmpChapter.canRead
+					}
+					nextText = this.tmpChapter.text
+					this.nextmpcounlSystemInfo()
+					this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1
+					// console.log(this.nextChapterTotal,'下一章内容页数')
+				} else {
+					this.nextChapter = {
+						ready: true,
+						isEnd: true
+					}
+				}
+				await this.calcCurChapter()
+				await this.calcPreChapter()
+				await this.calcNextChapter()
+			},
+			/*
+			获取进度
+			*/
+			getReadRateUl() {
+				let data = {
+					bookId: this.bookId_mark,
+					userId: this.userInfo.id,
+				}
+
+				$http.request({
+					url: "book/bookreadrate/getReadRate",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("获取", res)
+					if (res.readRate === null) {
+						this.speedTrue = false
+					} else {
+						this.speedTrue = true;
+						this.curChapter.chapterIndex = res.readRate.chapterId
+						this.updateReadId = res.readRate.id
+						this.oldReadSpeed.precent = res.readRate.precent
+						this.oldReadSpeed.updateReadId = res.readRate.id						
+						this.getThreeChapter(this.curChapter.chapterIndex)
+					}
+				})
+			},
+
+			/*
+			保存更新进度
+			*/
+			saveReadRateUl() {
+				console.log("保存数据", this.speedData)
+				let data = {
+					bookId: this.speedData.bookId,
+					chapterId: this.speedData.chapter_id,
+					chapterName: this.speedData.chapter_name,
+					precent: this.progress,
+					contentId: this.speedData.content_id,
+					userId: this.userInfo.id,
+				}
+
+				$http.request({
+					url: "book/bookreadrate/save",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("保存成功", res)
+				})
+			},
+			/*
+				更新进度
+				*/
+			updateReadRateUl() {
+				console.log("更新数据", this.speedData)
+				let data = {
+					bookId: this.speedData.bookId,
+					chapterId: this.speedData.chapter_id,
+					chapterName: this.speedData.chapter_name,
+					precent: this.speedData.precent,
+					contentId: this.speedData.content_id,
+					userId: this.userInfo.id,
+					id: this.updateReadId
+				}
+
+				$http.request({
+					url: "book/bookreadrate/update",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("更新", res)
+				})
+			},
+			/**
+			 * 购买书籍接口
+			 **/
+			buyBook() {
+				//在回调中调用this.initPage()刷新本页1
+				uni.showToast({
+					title: '跳转至购买页面，如果未登陆则跳转登陆',
+					icon: 'none'
+				})
+			},
+			// 接收renderjs发回的数据
+			onViewClick(options) {
+			      console.log('renderjsCall回调');
+			      console.log(options);
+				  if(options.chapterid == 'next'){ // 下一章
+				  this.goNextChapter()
+				  }else if(options.chapterid == 'prev'){ // 上一章
+				  this.goPreChapter()
+				  }else{ // 单纯的跳页
+					  this.page = options.curpage
+					  this.goToPage(this.page)
+				  }
+			    },
+				showMenuCall(options){
+					this.setShow = true
+				}
+			
+		},
+		beforeDestroy() {
+			if (this.musicPlaying) {
+				this.music.pause()
+			}
+		},
+		onHide() {
+			if (this.musicPlaying) {
+				this.music.pause()
+			}
+		},		
+	}
+</script>
+<script lang="renderjs" module="turnjs">
+	import '@/utils/jquery.min.1.7.js';
+	import turn from '@/utils/turn.js';
+	export default {
+		data() {
+			return {
+				width: '',
+				height: '',
+				SimulationText: [],
+				length:0,
+				hasContent: false,
+				curPage:1,	
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除
+				lastPage:false,
+				musicIndexDom:0,
+				highlight:'null',
+				musicPlaying:false
+			}
+		},		
+		mounted() {	
+			this.onTurn();			
+		},
+		methods: {
+			updateMusic(newVal, oldVal){
+				this.highlight = newVal.highlight
+				this.musicIndexDom = newVal.musicIndexDom
+				this.musicPlaying = newVal.musicPlaying
+				console.log(newVal,'听书配置项有变化')
+				let page = 1
+				page = $("#flipbook").turn('page')
+				if(newVal.musicPlaying){
+					// 开启听书
+					$("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"})
+										
+				}else{
+					// 关闭听书
+					$("#flipbook .paragraph").css({color:"#333"})
+				}
+			},			
+			updateReadPercent(newVal, oldVal){
+				// 获取阅读进度
+				this.curPage = newVal.readPage
+				console.log('获取到了阅读的进度page',newVal,this.curPage)
+			$("#flipbook").turn('page', this.curPage+1)
+			},
+			updateRenderData(newVal, oldVal) {
+				let {
+					width,					
+					height					
+				} = newVal;
+				this.width = width;
+				this.height = height;		
+				
+			},
+			updateSimulationText(newVal, oldVal) {
+				$("#flipbook").turn('pages',1)     // 内容变化时，值保留
+				$("#flipbook").turn('pages',newVal.length)
+				// this.onTurn();				
+				// this.SimulationText = newVal
+				console.log('更新数组', $("#flipbook").turn("resize"))				
+				for (var i=0; i<newVal.length;i++) {
+					var tagHtml = "";
+					var conntentHtml = "";	
+					for (var j=0; j<newVal[i].length; j++) {
+						var classname = ''
+						var styleconteent = ''
+						newVal[i][j].class == 'jushou' ? classname = 'shouhang' : ''
+						newVal[i][j].class == 'jushou' ? styleconteent = 'text-indent:2em' : ''
+						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal[i][j].paragraph +"' style="+styleconteent+">" + newVal[i][j].list + "</p>"
+					}
+					var page1 = i+1
+					var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
+					var tagHtml = "<div style='background-color:#fff; padding: 0 12px; font-size:18px; line-height:28px'>"+ conntentHtml +"<div style='text-align:center; color:#777'>"+page1+"/"+ newVal.length +"</div></div>";
+					// $("#flipbook").append(tagHtml);
+					if (!$("#flipbook").turn('hasPage', i+2)) {
+					        // Create an element for this page
+					        var element = $('<div />').html('');
+					        // Add the page
+					        $("#flipbook").turn('addPage', element, i+2);
+					        element.html(tagHtml);
+					}
+				}
+				
+			},
+			toprev(){
+				console.log('点击了')
+			},
+			onClick(event, ownerInstance) {
+				if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
+					//console.log('点击了左侧')
+					if($("#flipbook").turn('page') == 1){ //第一页
+					// console.log('切换到下一章节')
+						//console.log('第一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'prev'
+						})						
+					}else{
+						// 不是第一页
+					$("#flipbook").turn("previous")
+					ownerInstance.callMethod('onViewClick', {
+						curpage: $("#flipbook").turn('page')-1,
+						chapterid : ''
+					})
+					}
+				}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
+					//	console.log('点击了右侧')								
+					if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页
+						// console.log('切换到下一章节')
+						// console.log('最后一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'next'
+						})						
+					}else{
+						// 不是最后一页						
+						$("#flipbook").turn("next")	
+						ownerInstance.callMethod('onViewClick', {
+							curpage: $("#flipbook").turn('page')-1,
+							chapterid: '',
+						})
+						
+					}
+					} else{
+						// console.log('点击了中间')
+						// 双击
+						this.touchNum++
+						if (this.touchNum == 0) {} else {
+							if (this.touchNum > 1) {
+								clearTimeout(this.touchTime)
+								//单击事件
+								this.touchTime = setTimeout(() => {
+									this.touchNum = 0
+								}, 250)
+								console.log('双击')
+								ownerInstance.callMethod('showMenuCall', {
+									menuShow:true
+								})								
+							} else {
+								clearTimeout(this.touchTime)
+								this.touchTime = setTimeout(() => {
+									//双击或则多次点击事件
+									this.touchNum = 0
+								}, 250)
+								//console.log('单击')
+							}
+						
+						}
+						// end
+						
+					}	
+				
+				},				
+			onTurn() {
+				$("#flipbook").turn({
+					autoCenter: true,
+					display: 'single',
+					height: this.height,
+					width: this.width,
+					elevation: 50,
+					duration:1000,
+					gradients: true,
+					when: {
+							turning: function(event, page, pageObject) {
+								// 翻页时
+							// console.log(event, page, pageObject,this.curPage)					
+					},
+					
+					}
+				});
+				// $("#flipbook").bind("last", function(event) {
+				// 	console.log("You are at the end of the flipbook");
+				// 	this.lastPage = true
+					
+				// });
+			}
+		}
+	}
+</script>
+<style>
+	.buts{width: 100%; display:flex; }
+	.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
+</style>
+<style lang="scss" scoped>
+	
+	@import url("@/pages/yRead/iconfont.css");
+	// turnjs
+	/// .shouhang{text-indent: 2em;color: red;}
+	.flipbook-viewport{overflow:hidden;width:100%;height:100%;
+		.container{display: flex;justify-content: center;align-items: center;margin: 0 auto;}.flipbook ::v-deep .page{background-color: white;background-repeat: no-repeat;background-size: 100% 100%;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);img {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;}}.shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;}
+	}
+	// end
+	.page-wrapper{background-color: #fff;}
+	#flipbook {
+		view {
+			p {
+				padding: 0 10px;
+			}
+		}
+	}
+
+	.menu-top {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		overflow: hidden;
+		background-color: #fff;
+		// transition: top .3s;
+		display: flex;
+		align-items: center;
+		height: 66rpx;
+		// .head {
+		// 	position: relative;
+		// 	display: flex;
+		// 	height: 40px;
+		// 	width: 100%; margin-top:0rpx;
+		// 	line-height: 10px;
+		// 	color: #fff;
+		// }
+
+		.back {
+			width: 100%;
+
+			// background-color: #333;
+			.backiconfont {
+				margin-top: 1px;
+			}
+		}
+	}
+
+	.setMenu {
+		text-align: center;
+		padding: 20px 10px
+	}
+
+	.showImgs {
+		float: right;
+		padding-right: 3px;
+		margin-right: 10px;
+		width: 30px;
+		font-size: 15px;
+		border: 1px solid #6aa84f;
+		height: 30px;
+		line-height: 30px;
+		/* color: red; */
+		border-radius: 15px;
+	}
+
+
+	.chapterImgTitle {
+		display: block;
+		;
+		color: #636363;
+		text-align: center;
+		font-size: 30rpx;
+		margin: 10px 0;
+	}
+
+	.scroll-view_H {
+		white-space: nowrap;
+		width: 100%;
+
+		.scroll-view-item_H {
+			display: inline-block;
+			width: 100%;
+			//height: 300rpx;
+			//line-height: 300rpx;
+			text-align: center;
+			font-size: 36rpx;
+		}
+
+		.imgBox {
+			height: 500rpx;
+			overflow: hidden;
+			padding: 10px;
+			// img{height: 300rpx !important; width: unset;}
+		}
+	}
+
+	.scroll-Y {
+		height: 600px;
+	}
+
+	page {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		opacity: 0;
+	}
+
+	.action {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+
+		.item {
+			flex: 1;
+			height: 100%;
+		}
+	}
+
+	.nothingShow {
+		display: block;
+		font-size: 24rpx;
+		color: #666;
+		margin: 10px 0;
+		text-align: center;
+	}
+
+	.listenitem {
+		width: 150rpx;
+		height: 150rpx;
+		color: #fff;
+		background-color: #636363;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 150rpx;
+		font-size: 30px;
+		font-weight: 700;
+		position: fixed;
+		right: 30rpx;
+		bottom: 280rpx;
+		z-index: 9999;
+	}
+
+	.audio_menu {
+		width: 200rpx;
+		height: 100rpx;
+		position: fixed;
+		bottom: 280rpx;
+		background-color: #636363;
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-radius: 50rpx;
+
+		.audioSymbol {
+			padding: 0 20rpx;
+		}
+	}
+
+	.verticalbox {
+		position: fixed;
+		top: 20rpx;
+		left: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		padding: 0px 20px;
+		height: 100%;
+		width: 100%;
+		background-color: #fff;
+		overflow: hidden;
+
+		.chapter {
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+			line-height: 30px;
+		}
+
+		.bottom-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+		}
+
+		.content {
+			flex: 1 1 auto;
+
+			.inner-box {
+				.book-inner {}
+
+
+			}
+		}
+	}
+
+	.highlight {
+		color: #e5d6a0 !important;
+		// padding: 10rpx 20rpx;
+		// border-radius: 10rpx;
+		// background-color: #cbcbcb;
+	}
+
+	.fhighlight {}
+
+	.container {
+		position: fixed;
+		top: 64rpx;
+		left: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		height: 96%;
+		width: 100%;
+		background-color: #f7faf9;
+		overflow: hidden;
+
+		.chapter {
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+			line-height: 30px;
+			padding-left: 48rpx;
+		}
+
+		.bottom-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+		}
+
+		.bottom-bar1 {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 55px;
+			width: 324px;
+		}
+
+		.content {
+			flex: 1 1 auto;
+			overflow: hidden;
+
+			.inner-box {
+				overflow: hidden;
+
+				.book-inner {
+					// display:block;
+					// text-indent:32rpx;
+				}
+
+			}
+		}
+
+	}
+
+	.container0 {
+		background-color: #f7faf9;
+		background-size: 100% 100%;
+		position: fixed;
+	}
+
+	.container1 {
+		background-color: #000;
+	}
+.directory {
+			position: fixed;
+			top: 0;
+			display: flex;
+			flex-flow: column;
+			width: 600rpx;
+			height: 100%; padding-right: 10rpx;
+			transition: left .1s;
+
+			.bookname {
+				padding: 90rpx 0 70rpx 20rpx;
+				height: 60rpx;
+				font-size: 40rpx;
+				font-weight: bold;
+			}
+
+			.directory-listItem {
+				display: flex;
+				align-items: center;
+				padding-left: 20rpx;
+				height: 90rpx;
+				font-size: 35rpx;
+				border-bottom: #eee solid 1rpx;
+			}
+
+			.active {
+				color: red
+			}
+		}
+	.menu {
+		// position: fixed;
+		// top: 0;
+		// left: 0;
+		// z-index: 300;
+		// width: 100%;
+		// transition: all .3s;
+		.menu-bottom {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			background-color: #333;
+			transition: bottom .3s;
+			color: #fff;
+
+			.show-chapter {
+				position: absolute;
+				left: 50%;
+				top: 0;
+				transform: translate(-50%, -110%);
+				padding: 5px 10px;
+				line-height: 20px;
+				border-radius: 10rpx;
+				font-size: 13px;
+				background-color: #333;
+			}
+
+			.progress-box {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 20px;
+				height: 50px;
+				width: 100%;
+				font-size: 15px;
+			}
+
+			.items-box {
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				height: 80px;
+				width: 100%;
+
+				.item-box {
+					display: flex;
+					flex-flow: column;
+					justify-content: center;
+					align-items: center;
+					height: 100%;
+				}
+			}
+		}
+
+		.setting {
+			// position: absolute;
+			left: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			padding: 10px 20px;
+			width: 100%;
+			// color: #fff;
+			// background-color: #333;
+			transition: bottom .3s;
+
+			.item {
+				display: flex;
+				align-items: center;
+				height: 70px;
+
+				.item-name {
+					padding: 10px;
+					color: #333;
+					font-size: 12px;
+				}
+
+				.icon {
+					margin-right: 10px;
+					padding: 5px 20px;
+					font-size: 15px;
+					height: 32px;
+					line-height: 20px;
+					width: auto;
+					text-align: center;
+					border-radius: 20px;
+					border: #333 solid 1px;
+				}
+
+				.type-setting {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+					align-items: center;
+					margin-right: 10px;
+					padding: 5px;
+					height: 30px;
+					width: 30px;
+					border-radius: 5px;
+					border: #333 solid 1px;
+
+					.line {
+						width: 100%;
+						border-bottom: #333 solid 1px;
+					}
+
+					.lineActive {
+						width: 100%;
+						border-bottom: #FF9900 solid 1px;
+					}
+				}
+
+				.active {
+					color: #FF9900;
+					border: #FF9900 solid 1px;
+				}
+			}
+		}
+	}
+
+	.cover {
+		image {
+			height: 400rpx;
+			width: 300rpx;
+			background-color: #eee;
+		}
+	}
+
+	.pageback_container {
+		z-index: 103;
+		position: fixed;
+		right: 2%;
+		top: 66rpx;
+		height: 96%;
+		max-width: 50vw;
+		// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+		filter: drop-shadow(5px 0px 8px rgba(0, 0, 0, 0.3));
+
+		.pageback {
+			clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
+			width: 100%;
+			height: 100%;
+			background-image: linear-gradient(to right, #fcfcfc 0, #141414 90%);
+			background-size: 350% 100%;
+		}
+	}
+
+	.page-section-spacing {
+		margin-top: 60rpx;
+	}
+
+	.scroll-view_H {
+		white-space: nowrap;
+	}
+
+	.scroll-view-item {
+		height: 300rpx;
+	}
+
+	.backiconfont {
+		width: 20px;
+		margin-left: 10px;
+		margin-top: 10px;
+		height: 20px;
+		background-color: rgba(255, 255, 255, .8);
+		border-radius: 100%;
+	}
+
+	.scroll-view-item_H {
+		display: inline-block;
+		width: 100%;
+		height: 300rpx;
+	}
+
+	.jushou {
+		text-indent: 2em;
+	}
+
+	.item_wrap {
+		flex-wrap: wrap;
+	}
+</style>
diff --git a/pages/yRead/angbook.vue b/pages/yRead/angbook.vue
index 4298535..bda21c5 100644
--- a/pages/yRead/angbook.vue
+++ b/pages/yRead/angbook.vue
@@ -56,55 +56,12 @@
 		</view>
 
 		<!-- 垂直翻页 -->
-		<!-- @click="showMenu" -->
-		<view class="vertical" v-if="isVerticalHua">
-			<view class="verticalbox" :class="{ container0: background === 1, container1: background === 2 }"
-				@click="showMenu">
-				<!-- 章节名 -->
-				<view class="chapter">
-					{{ verticalData.chapterName }}
-				</view>
-				<scroll-view :scroll-anchoring="true" scroll-y="true" :scroll-top="scrollTop"
-					scroll-with-animation="true" style="height: 600px; " @scrolltoupper="scrolltoupper"
-					@scrolltolower="scrolltolower" @scroll="scroll">
-					<view class="content">
-						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="verticalData.canRead">
-							<view style="text-indent: 2em;" v-for="(item, index) in verticalData.text" :key="index"
-								:class="highlight === index ? 'highlight' : ''">
-								<p class="book-inner" v-html="item.content" :style="{
-										fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
-										fontSize: `${fontSize}px`,
-										lineHeight: `${lineHeight * fontSize}px`,
-										color: `${colorList[background - 1]}`
-									}"></p>
-								<img style="max-width: 90%;" v-if="item.otherContent != '' && item.otherContent != null"
-									:src="item.otherContent">
-							</view>
-						</view>
-						<view
-							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
-							v-else>
-							付费章节
-							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
-								@touchend.stop="buyBook">去购买</view>
-						</view>
-					</view>
-				</scroll-view>
-				<view class="bottom-bar">
-					<!-- 时间 -->
-					<view>{{ systemTimeStr }}</view>
-					<!-- 电量 -->
-					<view>
-						<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
-					</view>
-				</view>
-			</view>
-		</view>
+		<!-- @click="showMenu" -->	
 
 		<!-- 横向翻页 -->
-		<view class="across" v-else>
+		<view class="across" >
 			<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
-			<view class="chantong" v-show="!isSimulation">
+			<view class="chantong" style="display: none;">
 				<!-- 上一页 -->
 				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
 					:style="{
@@ -190,8 +147,6 @@
 							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
 						</view>
 					</view>
-
-
 				</view>
 
 				<!-- 下一页-->
@@ -234,20 +189,22 @@
 				</view>
 			</view>
 			<!-- 仿真翻页 -->
-			<view v-show="isSimulation" class="flipbook-viewport" 
+			<view v-if="isSimulation" class="flipbook-viewport" 
 			:rect="rect" 
-			:change:rect="updateRenderData"
+			:change:rect="updateRenderData"	
+			:readerSet = "readerSet"
+			:change:readerSet="updateReaderSet"
 			:musicItem="musicItem"
 			:change:musicItem="updateMusic"
 			:oldReadSpeed="oldReadSpeed"
 			:change:oldReadSpeed="updateReadPercent"
-			:SimulationText="SimulationText" :change:SimulationText="updateSimulationText"
+			:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
 			 @touchend="turnjs.onClick"
 			>
 			<!-- <view class="container across"  @touchend="openEnd" @touchstart="openStart"> -->
 				<view class="container across"  >
 					<view class="flipbook" id="flipbook" >
-						<div class="hard"><img style="max-width: 100%;" :src="bookFengMian"></div>						
+						<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; color: #666; ">->点击两侧开启阅读<-</p> </div></div>						
 						<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
 							<div class="chapter">{{ curPage.chapterName }}</div>
 							<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
@@ -700,6 +657,7 @@ import { nextTick } from "vue";
 					freeChapterCount: 0,
 					isBuy: 0,
 					isVip: 0,
+					chapterNum:null, // 阅读章节数
 				},
 				isVerticalHua: false,
 				speedTrue: false, //判断是否更新进度
@@ -726,10 +684,14 @@ import { nextTick } from "vue";
 				width: uni.getSystemInfoSync().windowWidth,
 				height: '800px',
 				text: 'hello',
-				isSimulation: true, // 仿真翻页模式
-				SimulationText: [], // 仿真翻页内容数组
-				hasSimulationText: false,
-				setShow: true, // 设置显示？
+				isSimulation: true, // 仿真翻页模式				
+				SimulationTextObj : {    // 仿真翻页内容
+				'SimulationText' : [],
+				'fontSize' : '',
+				'lineHeight':'',
+				'oldReadPage':0
+				},				
+				setShow: false, // 设置显示？
 				clientlast: null, //开始位置
 				touchNum: 0, //点击次数
 				touchTime: null, //定时器清除				
@@ -738,6 +700,12 @@ import { nextTick } from "vue";
 					musicIndexDom:0,
 					highlight: 'null',
 					musicPlaying:false,
+				},
+				readerSet:{
+					fontSize:'',  // 字体大小，
+					lineHeight:'' ,// 行高，注意是fontSize的倍数
+					page:0,	
+					background:''
 				}
 			}
 		},
@@ -789,8 +757,22 @@ import { nextTick } from "vue";
 
 			}
 			
-		},		
+		},	
+		// watch: {
+		// 	    changeBackground: {    // 深度监听
+		// 	        handler(newName, oldName) {
+		// 	            console.log(newName)
+		// 	        },
+		// 	        immediate: true,
+		// 	        deep: true
+		// 	    }
+		// 	},	
 		methods: {
+			_changeReaderSeting(){				
+				this.readerSet.fontSize = this.fontSize,  //字体大小，
+				this.readerSet.lineHeight = this.lineHeight //行高，注意是fontSize的倍数
+				
+			},
 			changeMusicItem(){
 					this.musicItem.highlight = this.highlight,
 					this.musicItem.musicIndexDom = this.domIndex,
@@ -827,7 +809,7 @@ import { nextTick } from "vue";
 			clickImg(item, index) {
 				// 点击图片
 				let imgarr = this.newchapterImgList.map(item => item)
-				console.log(imgarr, 'imgarr')
+				// console.log(imgarr, 'imgarr')
 				this.imgsShow = false
 				uni.previewImage({
 					current: index,
@@ -868,8 +850,12 @@ import { nextTick } from "vue";
 					.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
 					.then(res => {
 						this.bookName = res.book.name,
-						this.bookFengMian = res.book.images
-						console.log('获取电子书详情', res)
+						this.bookFengMian = res.book.images,
+						this.detail.freeChapterCount = res.book.freeChapterCount,
+						this.detail.isBuy = res.book.isBuy,
+						this.detail.isVip =  res.book.isVip,
+						this.detail.chapterNum = res.book.chapterNum // 阅读章节数
+						//console.log('获取电子书详情', res)
 					});
 
 
@@ -1015,8 +1001,7 @@ import { nextTick } from "vue";
 					}
 				})
 				preText = arr
-				// console.log(copyBookText,'copyBookText')
-				// this.getSizePage(NumCol)
+				// console.log(copyBookText,'copyBookText')				
 			},
 			nextmpforGet(colSize, NumCol) {
 				let that = this
@@ -1150,10 +1135,15 @@ import { nextTick } from "vue";
 					}
 				}
 				arr.push(newArr)
-				copyBookText = arr // 每一页显示的内容
-				this.SimulationText = []
-				this.SimulationText = arr
-				this.hasSimulationText = true
+				copyBookText = arr // 每一页显示的内容				
+				this.SimulationTextObj = { 
+				SimulationText : arr,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: 0,
+				background:this.background
+				}
+				// this.hasSimulationText = true
 				console.log(this.SimulationText, 'SimulationText')
 			},
 
@@ -1293,6 +1283,8 @@ import { nextTick } from "vue";
 				if (typeof this.background !== 'number') {
 					this.background = 1
 				}
+				// this.readerSet.background = this.background
+				
 				this.turnType = uni.getStorageSync('turnType')
 				if (this.turnType == 2) {
 					this.isVertical = true;
@@ -1312,11 +1304,13 @@ import { nextTick } from "vue";
 						this.history = value
 					}
 				})
-
+				this.$nextTick(()=>{
+					this._changeReaderSeting()
+				})
 				/*****************************************/
 				/*****************************************/
 				/*****************************************/
-
+				
 			},
 
 			/**
@@ -1344,7 +1338,16 @@ import { nextTick } from "vue";
 				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
 				this.oldReadSpeed.readPage = page
 				this.goToPage(page)
+				this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = {
+				SimulationText : copyBookText,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: this.oldReadSpeed.readPage,
+				background:this.background
+				}
 				uni.hideLoading()
+				
 			},
 
 			/**
@@ -2448,10 +2451,18 @@ import { nextTick } from "vue";
 						})
 						setTimeout(() => {
 							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							// this.SimulationTextObj = {
+							// SimulationText : copyBookText,
+							// fontSize : this.fontSize,
+							// lineHeight : this.lineHeight,
+							// oldReadPage: 0
+							// // background:this.background
+							// }
 							uni.hideLoading()
 							this.down = true
 							this.clearDown()
 						}, 300)
+						
 					} else {
 						uni.showToast({
 							icon: 'none',
@@ -2526,6 +2537,7 @@ import { nextTick } from "vue";
 				this.currentPage = page
 				this.showAnimation = false
 				console.log(page, '======>')
+				
 				// console.log(copyBookText[page],'当前页')
 				this.$nextTick(function() {
 					this.curPage = {
@@ -2651,6 +2663,14 @@ import { nextTick } from "vue";
 					title: '加载中'
 				})
 				await this.getThreeChapter(index.id)
+				//this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = {
+				SimulationText : copyBookText,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: 0,
+				background:this.background
+				}
 				//this.counlSystemInfo()
 				this.goToPage(0)
 				this.scrollTop = 0
@@ -2669,10 +2689,15 @@ import { nextTick } from "vue";
 				this.fontSize += 2
 				uni.setStorageSync('fontSize', this.fontSize)
 				this.calcHeight()
-				copyBookText = this.curChapter.text;
+				copyBookText = this.curChapter.text;				
 				this.counlSystemInfo()
-				await this.calcCurChapter()
+				await this.calcCurChapter()				
 				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.oldReadSpeed.readPage = page
 				this.goToPage(page)
 				if (this.preChapter.ready && !this.preChapter.isCover) {
 					this.preChapter.ready = false
@@ -2681,7 +2706,7 @@ import { nextTick } from "vue";
 				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
 					this.nextChapter.ready = false
 					await this.calcNextChapter()
-				}
+				}				
 			},
 
 			/**
@@ -2692,10 +2717,15 @@ import { nextTick } from "vue";
 				this.fontSize -= 2
 				uni.setStorageSync('fontSize', this.fontSize)
 				this.calcHeight()
-				copyBookText = this.curChapter.text;
+				copyBookText = this.curChapter.text;				
 				this.counlSystemInfo()
 				await this.calcCurChapter()
 				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.oldReadSpeed.readPage = page
 				this.goToPage(page)
 				if (this.preChapter.ready && !this.preChapter.isCover) {
 					this.preChapter.ready = false
@@ -2705,6 +2735,7 @@ import { nextTick } from "vue";
 					this.nextChapter.ready = false
 					await this.calcNextChapter()
 				}
+				
 			},
 
 			/**
@@ -2718,10 +2749,15 @@ import { nextTick } from "vue";
 					this.lineHeight = lineHeight;
 					uni.setStorageSync('lineHeight', this.lineHeight)
 					this.calcHeight()
-					copyBookText = this.curChapter.text;
+					copyBookText = this.curChapter.text;					
 					this.counlSystemInfo()
 					await this.calcCurChapter()
 					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+					this.readerSet = {
+						lineHeight : this.lineHeight,
+						page : page
+					}
+					this.oldReadSpeed.readPage = page
 					this.goToPage(page)
 					if (this.preChapter.ready && !this.preChapter.isCover) {
 						this.preChapter.ready = false
@@ -2732,6 +2768,7 @@ import { nextTick } from "vue";
 						await this.calcNextChapter()
 					}
 				}
+				
 			},
 
 
@@ -2784,8 +2821,20 @@ import { nextTick } from "vue";
 				if (background === this.background) {
 					return
 				} else {
+					
 					this.background = background;
 					uni.setStorageSync('background', this.background)
+					// this.readerSet.background = background  // 修改阅读器背景
+					this.SimulationTextObj.background = this.background
+					this.SimulationTextObj.oldReadPage = this.curPage.pageNum			
+					console.log('改变页面背景',this.curPage.pageNum)
+					// this.SimulationTextObj = {
+					// 	SimulationText : this.SimulationTextObj.SimulationText,
+					// 	fontSize : this.SimulationText.fontSize,
+					// 	lineHeight : this.SimulationText.lineHeight,
+					// 	background: this.background,
+					// 	page: this.oldReadSpeed.readPage
+					// }				
 				}
 			},
 
@@ -2849,27 +2898,28 @@ import { nextTick } from "vue";
 			 * 获取一章数据
 			 **/
 			getOneChapter(chapterId, showLoading) {
-
 				if (showLoading) {
 					uni.showLoading({
 						title: '加载中',
 						mask: true
 					})
 				}
-
+				// 检查是否已经购买	
+				// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0			
 				return this.$http
 					.post('book/bookchaptercontent/appGetBookChapterContent', {
 						'userId': this.userInfo.id,
 						'bookid': this.bookId_mark,
 						'chapterid': chapterId
 					})
-					.then(res => {
+					.then(res => {						
 						this.tmpChapter.text = res.bookCatalogue
 						// console.log(this.tmpChapter.text,'tmpChapter')
+						
 					})
-					.catch(() => {
-						// 此处是网络连接失败的逻辑
-						uni.hideLoading()
+					.catch(() => {						
+						// 此处是网络连接失败的逻辑						
+						uni.hideLoading()						
 						return new Promise((resolve, reject) => {
 							uni.showModal({
 								title: '连接失败',
@@ -2886,8 +2936,8 @@ import { nextTick } from "vue";
 									}
 								}
 							})
-						})
-					})
+						})						
+					})				
 				/*****************************************/
 				/*****************************************/
 				/*****************************************/
@@ -3054,8 +3104,8 @@ import { nextTick } from "vue";
 			},
 			// 接收renderjs发回的数据
 			onViewClick(options) {
-			      console.log('renderjsCall回调');
-			      console.log(options);
+			     console.log('renderjsCall回调');
+			     console.log(options);
 				  if(options.chapterid == 'next'){ // 下一章
 				  this.goNextChapter()
 				  }else if(options.chapterid == 'prev'){ // 上一章
@@ -3079,7 +3129,7 @@ import { nextTick } from "vue";
 			if (this.musicPlaying) {
 				this.music.pause()
 			}
-		},		
+		},			
 	}
 </script>
 <script lang="renderjs" module="turnjs">
@@ -3099,20 +3149,33 @@ import { nextTick } from "vue";
 				lastPage:false,
 				musicIndexDom:0,
 				highlight:'null',
-				musicPlaying:false
+				musicPlaying:false,
+				fontSize:'',
+				lineHeight:'',
+				containerStyle: ''
 			}
 		},		
 		mounted() {	
 			this.onTurn();			
 		},
 		methods: {
-			updateMusic(newVal, oldVal){
+			updateReaderSet(newVal, oldVal){
+				// 阅读器设置更新					
+				$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
+			console.log(newVal,'阅读器设置更新')	
+			if(newVal.page > 0 && newVal.fontSize !== this.fontSize || newVal.page > 0 && newVal.lineHeight !== this.lineHeight){
+				$("#flipbook").turn('page',newVal.page+1)
+			}
+			// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+			// $(".myPage p").css({backgroundColor:this.containerStyle})
+			},			
+			updateMusic(newVal, oldVal){ //听书
 				this.highlight = newVal.highlight
 				this.musicIndexDom = newVal.musicIndexDom
 				this.musicPlaying = newVal.musicPlaying
 				console.log(newVal,'听书配置项有变化')
 				let page = 1
-				page = $("#flipbook").turn('page')
+				page = $("#flipbook").turn('page')						
 				if(newVal.musicPlaying){
 					// 开启听书
 					$("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"})
@@ -3125,8 +3188,8 @@ import { nextTick } from "vue";
 			updateReadPercent(newVal, oldVal){
 				// 获取阅读进度
 				this.curPage = newVal.readPage
-				console.log('获取到了阅读的进度page',newVal,this.curPage)
-			$("#flipbook").turn('page', this.curPage+1)
+				// console.log('获取到了阅读的进度page',newVal,this.curPage)-
+				//$("#flipbook").turn('page', this.curPage+1)
 			},
 			updateRenderData(newVal, oldVal) {
 				let {
@@ -3138,24 +3201,28 @@ import { nextTick } from "vue";
 				
 			},
 			updateSimulationText(newVal, oldVal) {
-				$("#flipbook").turn('pages',1)     // 内容变化时，值保留
-				$("#flipbook").turn('pages',newVal.length)
+				$("#flipbook").turn('pages',1)     // 内容变化时，保留1页
+				$("#flipbook").turn('pages',newVal.SimulationText.length)
 				// this.onTurn();				
 				// this.SimulationText = newVal
-				console.log('更新数组', $("#flipbook").turn("resize"))				
-				for (var i=0; i<newVal.length;i++) {
+				console.log('更新数组', newVal)
+				this.fontSize = newVal.fontSize
+				this.lineHeight = newVal.lineHeight
+				newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+				//$(".myPage p").css({backgroundColor:this.containerStyle})
+				for (var i=0; i<newVal.SimulationText.length;i++) {
 					var tagHtml = "";
 					var conntentHtml = "";	
-					for (var j=0; j<newVal[i].length; j++) {
+					for (var j=0; j<newVal.SimulationText[i].length; j++) {
 						var classname = ''
 						var styleconteent = ''
-						newVal[i][j].class == 'jushou' ? classname = 'shouhang' : ''
-						newVal[i][j].class == 'jushou' ? styleconteent = 'text-indent:2em' : ''
-						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal[i][j].paragraph +"' style="+styleconteent+">" + newVal[i][j].list + "</p>"
+						newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : ''
+						newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = `"text-indent:2em ;font-size:${newVal.fontSize}px; color: #5d5d5d"` : styleconteent = "'font-size:"+newVal.fontSize+"px ; line-height:"+newVal.lineHeight*newVal.fontSize+"px;  color: #5d5d5d'"
+						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[i][j].list + "</p>"
 					}
 					var page1 = i+1
 					var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
-					var tagHtml = "<div style='background-color:#fff; padding: 0 12px; font-size:18px; line-height:28px'>"+ conntentHtml +"<div style='text-align:center; color:#777'>"+page1+"/"+ newVal.length +"</div></div>";
+					var tagHtml = "<div style='padding:0 18px; position:relative;  background-color:"+this.containerStyle+"; height:inherit'>"+ conntentHtml +"<div style='text-align:center; color:#777 ; position: absolute;bottom: 5px; left: 0;text-align: center; width: 100%;' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
 					// $("#flipbook").append(tagHtml);
 					if (!$("#flipbook").turn('hasPage', i+2)) {
 					        // Create an element for this page
@@ -3165,11 +3232,14 @@ import { nextTick } from "vue";
 					        element.html(tagHtml);
 					}
 				}
+				// 如果有阅读缓存
+				if(newVal.oldReadPage>0){
+					$("#flipbook").turn('page', newVal.oldReadPage+1)
+				}else{
+					$("#flipbook").turn('page', 2)
+				}
 				
-			},
-			toprev(){
-				console.log('点击了')
-			},
+			},			
 			onClick(event, ownerInstance) {
 				if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
 					//console.log('点击了左侧')
@@ -3243,31 +3313,26 @@ import { nextTick } from "vue";
 					height: this.height,
 					width: this.width,
 					elevation: 50,
-					duration:1000,
+					duration:500,
 					gradients: true,
 					when: {
 							turning: function(event, page, pageObject) {
 								// 翻页时
-							// console.log(event, page, pageObject,this.curPage)					
-					},
-					
-					}
-				});
-				// $("#flipbook").bind("last", function(event) {
-				// 	console.log("You are at the end of the flipbook");
-				// 	this.lastPage = true
-					
-				// });
+							// this.curPage = page
+							// console.log(event, page, pageObject,this.curPage)
+						},	}
+				});				
 			}
-		}
+			
+		}		
 	}
 </script>
 <style>
+	/* .container1{background-color: #000;} */
 	.buts{width: 100%; display:flex; }
 	.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
 </style>
-<style lang="scss" scoped>
-	
+<style lang="scss" scoped>	
 	@import url("@/pages/yRead/iconfont.css");
 	// turnjs
 	/// .shouhang{text-indent: 2em;color: red;}
diff --git a/pages/yRead/angbook可用.vue b/pages/yRead/angbook可用.vue
new file mode 100644
index 0000000..4023c7e
--- /dev/null
+++ b/pages/yRead/angbook可用.vue
@@ -0,0 +1,3821 @@
+<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
+<!-- 重要事项：
+	1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
+	  如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
+	2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
+	3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
+	***********************************
+	不可设置阅读背景
+ -->
+<template>
+	<view style="height: 100%;">
+		<!-- 菜单层包含返回按钮的上半部分1 -->
+		<view class="menu-top" >
+			<view class="back">
+				<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
+			</view>
+		</view>
+		<!-- 仅用于计算（结构和样式请和阅读页一致）1 -->
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view id="content" class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view class="book-inner" id="preChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.picAndWord"></p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view class="book-inner" id="curChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p v-for="(item, index) in curChapter.text" :key="index" v-html="item.picAndWord">
+						</p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<view class="container hidden">
+			<view class="chapter">章节名</view>
+			<view class="content">
+				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
+					<view id="nextChapter"
+						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
+						<p class="book-inner" v-for="(item, index) in nextChapter.text" :key="index"
+							v-html="item.picAndWord"></p>
+					</view>
+				</view>
+			</view>
+			<view class="bottom-bar">显示电量、页码</view>
+		</view>
+
+		<!-- 垂直翻页 -->
+		<!-- @click="showMenu" -->
+		
+
+		<!-- 横向翻页 -->
+		<view class="across" >
+			<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
+			<view class="chantong" style="display: none;">
+				<!-- 上一页 -->
+				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
+					:style="{
+					zIndex: turnType == 0 && pageBackRef.before ? 100: 102,
+					transform: turnType == 0 && pageBackRef.before ? 'translate(0, 0)' : `translate${prePage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}">
+					<!-- 章节名 -->
+					<view class="chapter">{{ prePage.chapterName }}</view>
+
+					<!-- 外层class="content"用于计算阅读部分的高度 -->
+					<view class="content">
+						<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
+							<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
+							<view class="book-inner">
+								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
+									:class="highlight === item.paragraph ? 'highlight' : ''"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ prePage.pageNum + 1 }}/{{ prePage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+				</view>
+
+				<!-- 本页 -->
+				<view ref="curPageRef" class="container mypages"
+					:class="{ container0: background === 1, container1: background === 2 }" :style="{
+					zIndex: 101,
+					transform: `translate${curPage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" @touchcancel="touchcancel">
+					<!-- 章节名 -->
+					<view class="chapter">{{ curPage.chapterName }}
+						<uni-icons v-if="newchapterImgList && newchapterImgList.length > 0" id="showImgs"
+							@click="showImgHandle" color="#6aa84f" class="showImgs" type="images" size="20"></uni-icons>
+					</view>
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
+							<view class="book-inner">
+								<!-- <pre>
+							{{curPage.text}}
+							</pre> -->
+								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
+									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
+								@touchend.stop="buyBook">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ curPage.pageNum + 1 }}/{{ curPage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+
+
+				</view>
+
+				<!-- 下一页-->
+				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
+					:style="{
+					zIndex: 100,
+					transform: `translate${nextPage.pageTranslate[turnType]}`,
+					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
+					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
+				}">
+					<!-- 章节名 -->
+					<view class="chapter">{{ nextPage.chapterName }}</view>
+					<view class="content">
+						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="nextPage.canRead">
+							<view class="book-inner">
+								<p v-for="(item, index) in nextPage.text" v-html="item.list" :key="index"
+									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
+									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+								</p>
+
+							</view>
+						</view>
+						<view
+							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
+							v-else>
+							付费章节
+							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
+						</view>
+					</view>
+					<view class="bottom-bar1">
+						<!-- 时间 -->
+						<view>{{ systemTimeStr }}</view>
+						<!-- 页码 -->
+						<view>{{ nextPage.pageNum + 1 }}/{{ nextPage.totalPage }}</view>
+						<!-- 电量 -->
+						<view>
+							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 仿真翻页 -->
+			<view v-if="isSimulation" class="flipbook-viewport" 
+			:rect="rect" 
+			:change:rect="updateRenderData"	
+			:readerSet = "readerSet"
+			:change:readerSet="updateReaderSet"
+			:musicItem="musicItem"
+			:change:musicItem="updateMusic"
+			:oldReadSpeed="oldReadSpeed"
+			:change:oldReadSpeed="updateReadPercent"
+			:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
+			 @touchend="turnjs.onClick"
+			>
+			<!-- <view class="container across"  @touchend="openEnd" @touchstart="openStart"> -->
+				<view class="container across"  >
+					<view class="flipbook" id="flipbook" >
+						<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; ">->点击两侧开启阅读<-</p> </div></div>						
+						<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
+							<div class="chapter">{{ curPage.chapterName }}</div>
+							<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
+								:class="{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
+								:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
+							</p>							
+						</div> -->
+					</view>
+				</view>
+			</view>			
+			<!-- 模拟页面背景 -->
+			<view class v-if='turnType == 0 && !pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
+					width: `${pageBackRef.width}`,right: `${pageBackRef.right}`  }]" class="pageback_container">
+				<view class="pageback"></view>
+			</view>
+			<view class v-if='turnType == 0 && pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
+					width: `${pageBackRef.width}`,left: `${pageBackRef.left}`  }]" class="pageback_container">
+				<view class="pageback"></view>
+			</view>
+		</view>
+
+		<!-- 听书按钮 -->
+		<view class="listenbook" v-if="musicManuShow">
+			<view class="listenitem" @click="listenHandle">听</view>
+		</view>
+		<!-- 暂停按钮 -->
+		<view class="audio_menu" v-if="isAudioMenu">
+			<view class="pause audioSymbol" v-if="!isPause" @click="audioPause()">
+				<u-icon name="pause" color="#fff" size="28"></u-icon>
+			</view>
+			<view class="right audioSymbol" v-else @click="audioPause()">
+				<u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
+			</view>
+			<view class="audioSymbol" @click="offAudio">
+				<u-icon name="close" color="#fff" size="28"></u-icon>
+			</view>
+		</view>
+
+		<!-- 菜单层 -->
+		<view class="menu" :style="{ height: `100%`, width: `${windowWidth}px` }" v-if="menuShow" @touchend="closeMenu">
+			<!-- 菜单层包含返回按钮的上半部分 -->
+			<view class="menu-top" :style="{ height: `${statusBarHeight + 40}px`, top: itemShow ? 0 : `-100%` }"
+				@touchend.stop>
+				<view :style="{ height: `${statusBarHeight}px` }"></view>
+				<view class="head">
+					<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
+				</view>
+			</view>
+			<!-- 菜单主体 -->
+			<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }" @touchend.stop>
+				<!-- 用于显示章节进度 -->
+				<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}</view>
+				<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
+
+				<!-- 章节进度条 -->
+				<view class="progress-box">
+					<text style="" @click="goPreChapter">上一章</text>
+					<view
+						style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
+						<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
+							:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
+					</view>
+					<text @click="goNextChapter">下一章</text>
+				</view>
+				<view class="items-box">
+					<view class="item-box" @click="openDirectory">
+						<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
+						<text style="font-size: 13px;">目录</text>
+					</view>
+					<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
+						<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
+						<text style="font-size: 13px;">夜间</text>
+					</view>
+					<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
+						<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
+						<text style="font-size: 13px;">日间</text>
+					</view>
+					<view class="item-box" @click="openSetting">
+						<text class="iconfont" style="font-size: 25px;">A</text>
+						<text style="font-size: 13px;">设置</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }" @touchend.stop>
+				<view class="item">
+					<view class="item-name">字号</view>
+					<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
+					<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
+					<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
+					<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
+				</view>
+				<view class="item">
+					<view class="item-name">排版</view>
+					<view class="type-setting" :class="{ active: lineHeight === 1 }" @click="changeLineHeight(1)">
+						<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i"></view>
+					</view>
+					<view class="type-setting" :class="{ active: lineHeight === 1.5 }" @click="changeLineHeight(1.5)">
+						<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i"></view>
+					</view>
+					<view class="type-setting" :class="{ active: lineHeight === 2 }" @click="changeLineHeight(2)">
+						<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i"></view>
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">背景</view>
+					<view class="icon" style="" :class="{ active: background === 1 }" @click="changeBackground(1)">
+					</view>
+					<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
+						@click="changeBackground(2)"></view>
+				</view>
+			</view>
+		</view>
+		<!-- 目录层 -->
+		<u-popup class="directory" mode="left" v-if="directoryShowBefore" :show="directoryShowBefore"  @close="directoryShowBefore=false">
+			<view class="tanchu"  style="padding-right: 10px; width: 500rpx;">
+				<view class="bookname">{{ bookName }}</view>
+				<!--  :size="40"——每一栏高度为40px  :scrollHeight="windowHeight - 60"——书名的高度为60px -->
+				<virtual-list :items="directoryList" :size="40" :remain="16" :active="curChapter.chapterIndex"
+					:scrollHeight="windowHeight - 60">
+					<template v-slot="{ item, active }">
+						<view class="directory-listItem" :class="{ active: item.index == active }"
+							@click="goToChapter(item)">{{ item.name }}</view>
+					</template>
+				</virtual-list>
+			</view>
+		</u-popup>
+		<!-- 图片弹窗 -->
+		<u-popup :show="imgsShow" :round="10" @close="imgsShow=false">
+			<view class="tanchu" v-if="newchapterImgList">
+				<text class="chapterImgTitle">当前章节共 {{newchapterImgList.length}} 张图片</text>
+				<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="toRight">
+					<view v-for="(item,index) in newchapterImgList" class="scroll-view-item_H">
+						<view class="imgBox">
+							<view style="height:90%" @click="clickImg(newchapterImgList,index)">
+								<img :src="item" alt="" height="100%">
+							</view>
+							<text style="font-size: 24rpx; color: #666;">第 {{index + 1}} 张</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</u-popup>
+
+		<u-popup :show="setShow" :round="10" @close="setShow = false">
+			<view class="setMenu">
+				<u-grid :border="false" col="3" @click="clickSet">
+					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
+						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="30"></u-icon>
+						<text class="grid-text" style="color: #666;">{{baseListItem.title}}</text>
+					</u-grid-item>
+				</u-grid>
+				<view class="menu">
+
+					<!-- 菜单主体 -->
+					<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }">
+						<!-- 用于显示章节进度 -->
+						<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}
+						</view>
+						<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
+
+						<!-- 章节进度条 -->
+						<view class="progress-box">
+							<text style="" @click="goPreChapter">上一章</text>
+							<view
+								style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
+								<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
+									:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
+							</view>
+							<text @click="goNextChapter">下一章</text>
+						</view>
+						<view class="items-box">
+							<view class="item-box" @click="openDirectory">
+								<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
+								<text style="font-size: 13px;">目录</text>
+							</view>
+							<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
+								<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
+								<text style="font-size: 13px;">夜间</text>
+							</view>
+							<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
+								<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
+								<text style="font-size: 13px;">日间</text>
+							</view>
+							<view class="item-box" @click="openSetting">
+								<text class="iconfont" style="font-size: 25px;">A</text>
+								<text style="font-size: 13px;">设置</text>
+							</view>
+						</view>
+					</view>
+
+					<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }">
+						<view class="item">
+							<view class="item-name">字号</view>
+							<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
+							<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
+							<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
+							<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
+						</view>
+						<view class="item">
+							<view class="item-name">排版</view>
+							<view class="type-setting" :class="{ active: lineHeight === 1 }"
+								@click="changeLineHeight(1)">
+								<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i">
+								</view>
+							</view>
+							<view class="type-setting" :class="{ active: lineHeight === 1.5 }"
+								@click="changeLineHeight(1.5)">
+								<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i">
+								</view>
+							</view>
+							<view class="type-setting" :class="{ active: lineHeight === 2 }"
+								@click="changeLineHeight(2)">
+								<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i">
+								</view>
+							</view>
+						</view>
+						<!-- <view class="item">
+							<view class="item-name">背景</view>
+							<view class="icon" style="" :class="{ active: background === 1 }"
+								@click="changeBackground(1)">
+							</view>
+							<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
+								@click="changeBackground(2)"></view>
+						</view> -->
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import battery from '../../components/battery/battery.vue'
+	import virtualList from '../../components/virtualList/virtualList.vue'
+	// 引入翻页效果动画
+	import $ from 'jquery'
+
+	import {
+		dateToStr
+	} from '../../utils/utils.js'
+	import {
+		mapState
+	} from 'vuex';
+	import $http from '../../config/requestConfig';
+import { nextTick } from "vue";
+
+	let copyBookText = []
+	let preText = []
+	let nextText = []
+	let imglist = []
+
+	// var music = uni.createInnerAudioContext();
+	export default {
+		components: {
+			battery,
+			virtualList
+		},
+		data() {
+			return {
+				baseList: [{
+						name: 'photo',
+						title: '章节图片'
+					},
+					{
+						name: 'list-dot',
+						title: '目 录'
+					},
+					{
+						name: 'play-circle',
+						title: '听 书'
+					}
+				],
+				imgsShow: false,
+				nothingShow: false,
+				// 本章图片列表
+				chapterImgList: [],
+				newchapterImgList: [],
+				preChapterTotal: null,
+				nextChapterTotal: null,
+				// preBookText = []
+				oldReadSpeed: { // 本地初始阅读进度
+					precent: null,
+					updateReadId: null,
+					readPage:0
+				},
+				scrollTop1: 0,
+				bookName: '我是书名',
+				bookFengMian:'', // 书籍封面
+				bookId: 1,
+				bookId_mark: '',
+				history: { //本书历史记录
+					chapterIndex: 0,
+					progress: 0
+				},
+
+				directoryList: [], //目录列表
+				currentPage: 0, //当前页
+				read: 0,
+
+				innerHeight: 0, //截取至整行的最大高度
+
+				preChapter: { //上一章数据
+					ready: false, //是否准备完毕
+					chapterIndex: '',
+					chapterName: '', //章节名称
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				curChapter: { //本一章数据
+					chapterIndex: '',
+					chapterName: '',
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				nextChapter: { //下一章数据
+					ready: false, //是否准备完毕
+					chapterIndex: '',
+					chapterName: '',
+					text: '',
+					totalPage: '',
+					canRead: true
+				},
+
+				tmpChapter: { //暂存章节内容
+					text: [],
+					canRead: true
+				},
+
+				cover: { //封面的状态
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+				},
+
+				prePage: { //上一页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: 1,
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true,
+					isPre: false
+				},
+
+				curPage: { //本页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: 1,
+					totalPage: 1,
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true,
+				},
+
+				nextPage: { //下一页数据
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: '',
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true
+				},
+
+				verticalData: {
+					ready: false, //是否准备完毕
+					chapterName: '',
+					text: '',
+					pageNum: '',
+					totalPage: '',
+					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
+					canRead: true
+				},
+
+				next: false, //用户是否正在翻下一页
+				pre: false, //用户是否正在翻上一页
+
+				waitForNext: false, //是否正在等待下一页准备完毕后跳转
+				waitForPre: false, //是否正在等待上一页准备完毕后跳转
+				waitForNextChapter: false, //是否正在等待下一章准备完毕后跳转
+				waitForPreChapter: false, //是否正在等待上一章准备完毕后跳转
+
+				showAnimation: false, //是否开启动画
+				showShadow: false, //是否显示页面阴影
+
+				isVertical: false, // 是否开启垂直阅读
+				down: false, // 用于scroll事件请求数据判断
+
+				windowWidth: 0, //可用屏幕宽度
+				windowHeight: 0, //可用屏幕高度
+				contentHeight: 0, //阅读区域高度
+
+				scrollTop: 0, // 垂直阅读 scrolltop
+
+				platform: '', //设备
+				batteryState: '', //电池状态
+				batteryLevel: 100, //电量
+				systemTime: '', //系统时间
+				systemTimeStr: '', //系统时间字符串
+				statusBarHeight: 0, //状态栏高度
+				pixelRatio: '', //设备像素比
+
+				touchStartX: 0, // 触屏起始点x
+				touchX: 0, // 瞬时触屏点x
+				delta: 0, // 手指瞬时位移
+
+				isTouch: false, // 是否处于触屏状态
+				curPageTranslate: 0, // 本页的移动位置
+				touchStartY: 0, // 触屏起始点y
+				touchY: 0, // 瞬时触屏点y
+				sliderValue: 0, // scroll事件赋值
+
+				menuShow: false, //菜单栏box是否渲染
+				itemShow: false, // 菜单栏动画控制
+				settingShow: false, //设置栏动画控制
+				directoryShow: false, //目录动画控制
+				directoryShowBefore: false, // 目录渲染
+				turnPageTime: .5, //翻页动画时间
+
+				biaodian: ['，', ':', '、', ';', '。', '.'], //匹配的标点
+				maxFontSize: 30, //最大字体大小，px
+				minFontSize: 14, //最小字体大小，px
+				turnType: 4, //翻页方式
+				NumCol: '', // 一章多少行
+				colSize: '', // 一行多少字
+				fontSize: '', //字体大小，
+				simplified: '', //是否简体
+				lineHeight: '', //行高，注意是fontSize的倍数
+				background: '', //背景
+				colorList: ['#000', '#666'], //与背景对应的字体颜色
+				highlight: "null", // 字体高亮
+				fhighlight: false, // 左右的高亮
+				chapterProgress: 0, //‘章节进度条’的参数
+				progressTouched: false, //是否正在点击‘章节进度条’
+				highlightTimer: '', // 高亮定时器名字
+				domList: [], // dom列表
+				domIndex: 0, // dom下标
+				music: null, // 创建audio
+				musicManuShow: false, // 听书按钮是否显示
+				isPause: false, // 是否暂停
+				isAudioMenu: false, // 是否展示听书菜单
+				oldType: null,
+				detail: {
+					title: "",
+					data: [],
+					freeChapterCount: 0,
+					isBuy: 0,
+					isVip: 0,
+					chapterNum:null, // 阅读章节数
+				},
+				isVerticalHua: false,
+				speedTrue: false, //判断是否更新进度
+				speedData: {
+					bookId: 0,
+					chapter_id: 0,
+					chapter_name: '',
+					precent: '',
+					content_id: 0
+				},
+				updateReadId: 0,
+				newData: [],
+				pageBackRef: {
+					transition: "unset",
+					left: 0,
+					right: 0,
+					width: 0,
+					before: false
+				},
+				topChange: 0,
+				scroll_end: false,
+				musicPlaying: false, // 正在播放音频
+				// 仿真翻页参数
+				width: uni.getSystemInfoSync().windowWidth,
+				height: '800px',
+				text: 'hello',
+				isSimulation: true, // 仿真翻页模式				
+				SimulationTextObj : {    // 仿真翻页内容
+				'SimulationText' : [],
+				'fontSize' : '',
+				'lineHeight':'',
+				'oldReadPage':0
+				},				
+				setShow: false, // 设置显示？
+				clientlast: null, //开始位置
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除				
+				musicItem:{
+					// 听书相关内容
+					musicIndexDom:0,
+					highlight: 'null',
+					musicPlaying:false,
+				},
+				readerSet:{
+					fontSize:'',  // 字体大小，
+					lineHeight:'' ,// 行高，注意是fontSize的倍数
+					page:0,	
+					background:''
+				}
+			}
+		},
+
+		onLoad(option) {
+			this.bookId_mark = option.Id
+			this.getSystemInfo()
+			this.bookMessage()
+			this.setStorage()
+		},
+		onUnload() {
+
+			// #ifdef APP-PLUS
+			// 退出全屏
+			plus.navigator.setFullscreen(false)
+			// #endif
+
+			this.setStorage()
+		},
+		onReady() {
+			// console.log('------------------------------')			
+			// 单页禁止测滑返回
+			// #ifdef APP-PLUS
+			let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
+			currentWebview.setStyle({
+				popGesture: 'none'
+			})
+			// #endif
+		},
+		onHide() {
+			this.setStorage()
+		},
+		mounted() {
+			this.initPage()
+		},
+		computed: {
+			progress() { //章节的阅读进度
+				if (this.curChapter.totalPage === 1) {
+					return 0
+				}
+				return this.currentPage / (this.curChapter.totalPage - 1)
+			},
+			...mapState(['userInfo']),
+			rect() {
+				return {					
+					width: this.width,
+					height: this.height
+				}
+
+			}
+			
+		},		
+		methods: {
+			_changeReaderSeting(){				
+				this.readerSet.fontSize = this.fontSize,  //字体大小，
+				this.readerSet.lineHeight = this.lineHeight //行高，注意是fontSize的倍数
+				
+			},
+			changeMusicItem(){
+					this.musicItem.highlight = this.highlight,
+					this.musicItem.musicIndexDom = this.domIndex,
+					this.musicItem.musicPlaying = this.musicPlaying				
+			},
+			openStart(e) {
+				//记录位置
+				this.clientlast = e.changedTouches[0];
+			},
+			openEnd(e) {
+					
+				this.touchNum++
+				if (this.touchNum == 0) {} else {
+					if (this.touchNum > 1) {
+						clearTimeout(this.touchTime)
+						//单击事件
+						this.touchTime = setTimeout(() => {
+							this.touchNum = 0
+						}, 250)
+						console.log('双击')
+						this.setShow = true
+						// this.createAudio()
+					} else {
+						clearTimeout(this.touchTime)
+						this.touchTime = setTimeout(() => {
+							//双击或则多次点击事件
+							this.touchNum = 0
+						}, 250)
+						//console.log('单击')
+					}
+				
+				}
+			},
+			clickImg(item, index) {
+				// 点击图片
+				let imgarr = this.newchapterImgList.map(item => item)
+				// console.log(imgarr, 'imgarr')
+				this.imgsShow = false
+				uni.previewImage({
+					current: index,
+					urls: imgarr
+				})
+			},
+			clickSet(name) {
+				// 点击图片	
+				if (name == 0) {
+					// 章节图片
+					this.imgsShow = true
+				} else if (name == 1) {
+					// 目录
+					//this.openDirectory()					
+					this.directoryShowBefore = true
+					this.directoryShow = true
+					this.$nextTick(function() {
+						console.log(4545,this.directoryShow)
+						})
+				} else if (name == 2) {
+					// 听书
+					this.listenHandle()
+				}
+
+				this.setShow = false
+				// this.$refs.uToast.success(`点击了第${name}个`)			
+				// console.log(name,'imgarr')
+
+			},
+			toRight() {
+				this.nothingShow = true
+			},
+			showImgHandle() {
+				this.imgsShow = true
+			},
+			bookMessage() {
+				this.$http
+					.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
+					.then(res => {
+						this.bookName = res.book.name,
+						this.bookFengMian = res.book.images,
+						this.detail.freeChapterCount = res.book.freeChapterCount,
+						this.detail.isBuy = res.book.isBuy,
+						this.detail.isVip =  res.book.isVip,
+						this.detail.chapterNum = res.book.chapterNum // 阅读章节数
+						//console.log('获取电子书详情', res)
+					});
+
+
+			},
+			counlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.forGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			mpcounlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.mpforGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			nextmpcounlSystemInfo() {
+				let that = this;
+				uni.getSystemInfo({
+					success: async function(res) {
+						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
+						let screenWidth = res.screenWidth;
+						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
+							.lineHeight)) - 1 //一屏总行 30为panding值
+						console.log('一屏总行', that.NumCol)
+						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
+						await that.nextmpforGet(that.colSize - 1, that.NumCol)
+					}
+				})
+			},
+			// 拆分数据
+			forGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				this.chapterImgList = []
+				copyBookText.map((res, index) => {
+					res.content = '' + res.content
+					// console.log(res.picAndWord)
+					if (res.content.length > colSize - 2) {
+						//colSize - 2  段落首行空格
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+					let picAndWord = res.otherContent
+					// let reg = new RegExp('(?<=(img src="))[^"]*?(?=")/gi)')
+					//let RegEx = /(?<=(img src="))[^"]*?(?=")/gims
+					// let imgArr = picAndWord.match(reg)
+					let imgArr = picAndWord
+					// let imgArr = picAndWord.match(/src*?\/g)
+
+					this.chapterImgList[index] = imgArr
+
+				})
+				// 过滤图片数据
+				let arr3 = []
+				this.chapterImgList.map((item, index) => {
+
+					if (item != null && item != '') {
+						// console.log(item,'item')
+						arr3.push(item)
+					}
+				})
+				this.newchapterImgList = arr3
+				// console.log(this.newchapterImgList, 'newchapterImgList')
+				copyBookText = arr
+				// console.log(this.SimulationText,'SimulationText')
+				this.getSizePage(NumCol)
+			},
+			mpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				preText.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				preText = arr
+				// console.log(copyBookText,'copyBookText')
+				// this.getSizePage(NumCol)
+			},
+			nextmpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				nextText.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				nextText = arr
+				// console.log(copyBookText,'copyBookText')
+				// this.getSizePage(NumCol)
+			},
+			//获取后面的字符，再去计算能放几行
+			aginForget(text, arr, colSize, index) {
+				let that = this;
+				let strBR = "</br>"
+				if (text.length > colSize) {
+					let nextString = text.substr(colSize, 1)
+					let haveBiao = 0
+					for (var i = 0; i < this.biaodian.length; i++) {
+						if (nextString == this.biaodian[i]) {
+							haveBiao = 1
+						}
+					}
+					arr.push({
+						'paragraph': index,
+						'list': text.substr(0, colSize - haveBiao),
+						'level': 0,
+						class: ''
+					})
+
+					let newText = text.substr(colSize - haveBiao)
+					that.aginForget(newText, arr, colSize, index)
+				} else {
+					arr.push({
+						'paragraph': index,
+						'list': text.substr(0, colSize),
+						'level': 0,
+						class: ''
+					})
+					// arr.push(strBR)					
+				}
+			},
+			tmpforGet(colSize, NumCol) {
+				let that = this
+				let arr = [] //数组每一项代表一行	
+				// console.log(copyBookText,'拆分前')
+				let isbiaodian = false
+				this.tmpChapter.text.map((res, index) => {
+					res.content = '' + res.content
+					if (res.content.length > colSize - 2) {
+						// 判断是否下一行以标点开始
+						let nextString = res.content.substr(colSize - 2, 1)
+						let haveBiao = 0
+						for (var i = 0; i < this.biaodian.length; i++) {
+							if (nextString == this.biaodian[i]) {
+								haveBiao = 1
+							}
+						}
+						//console.log(haveBiao, nextString, 'isbiaodian')
+						arr.push({
+							'paragraph': index,
+							'list': res.content.substr(0, colSize - 2 - haveBiao),
+							'level': 0,
+							class: 'jushou'
+						})
+						let text = res.content.substr(colSize - 2 - haveBiao)
+						that.aginForget(text, arr, colSize, index)
+
+					} else {
+						arr.push({
+							'paragraph': index,
+							list: res.content.substr(0, colSize - 2),
+							'level': 0,
+							class: 'jushou'
+						})
+					}
+				})
+				this.tmpChapter.text = arr
+				// console.log(copyBookText,'copyBookText')
+				this.getSizePage(NumCol)
+			},
+			// 计算章节页数
+			getSizePage(NumCol) {
+				let that = this;
+				let arr = [],
+					newArr = []
+				copyBookText = copyBookText.filter((item, index) => {
+
+					if (item == '' || item == '  ' || item == '   ') {
+
+					} else {
+						return item
+					}
+				})
+				for (let i = 0; i < copyBookText.length; i++) {
+					newArr.push(copyBookText[i])
+					if (newArr.length < NumCol) {
+
+					} else {
+						arr.push(newArr)
+						newArr = []
+					}
+				}
+				arr.push(newArr)
+				copyBookText = arr // 每一页显示的内容				
+				this.SimulationTextObj = { 
+				SimulationText : arr,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: 0
+				// background:this.background
+				}
+				// this.hasSimulationText = true
+				console.log(this.SimulationText, 'SimulationText')
+			},
+
+			setStorage() {
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					history = []
+				}
+				let have = false
+				history.forEach((value) => {
+					if (value.bookId === this.bookId) {
+						have = true
+						value.chapterIndex = this.curChapter.chapterIndex
+						value.progress = this.progress
+					}
+				})
+				console.log(history, '缓存')
+				if (!have) {
+					// 设备内没有当前的缓存数据时
+					history.push({
+						bookId: this.bookId,
+						chapterIndex: this.curChapter.chapterIndex,
+						progress: this.progress
+					})
+					// 将进度存到数据库
+					this.saveReadRateUl()
+					//this.updateReadRateUl()   // 更新进度
+				}
+				// oldReadSpeed:{      // 本地初始阅读进度
+				//    chapterIndex: null,
+				// 	updateReadId: null  
+				// },				
+				if ((this.oldReadSpeed.precent / 10) < this.progress) {
+
+					this.speedData.precent = this.progress
+					this.speedData.bookId = this.bookId_mark;
+					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
+					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
+					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
+					//console.log('符合更新条件')
+					// 阅读进度大于原进度时
+					this.updateReadRateUl()
+				}
+				uni.setStorageSync('history', history)
+			},
+
+			/**
+			 * 返回上一页面
+			 **/
+			back() {
+				uni.navigateBack()
+			},
+
+			/**
+			 * 获取设备信息
+			 **/
+			getSystemInfo() {
+				const {
+					windowWidth,
+					windowHeight,
+					statusBarHeight,
+					platform,
+					pixelRatio
+				} = uni.getSystemInfoSync()
+				//获取一些必要的设备参数
+				this.statusBarHeight = statusBarHeight
+				this.windowWidth = windowWidth
+				this.windowHeight = windowHeight
+				this.pixelRatio = pixelRatio
+				this.platform = platform
+				// #ifdef APP-PLUS
+				// 全屏
+				plus.navigator.setFullscreen(true)
+				// 取消ios左滑返回
+				let page = this.$mp.page.$getAppWebview()
+				page.setStyle({
+					popGesture: 'none'
+				})
+
+				if (this.platform === 'ios') {
+					// 获取ios电量
+					let UIDevice = plus.ios.import("UIDevice")
+					let dev = UIDevice.currentDevice()
+					if (!dev.isBatteryMonitoringEnabled()) {
+						dev.setBatteryMonitoringEnabled(true)
+					}
+					setInterval(() => {
+						this.batteryState = dev.batteryState()
+						this.batteryLevel = dev.batteryLevel() * 100
+					}, 1000)
+
+				} else {
+					// 获取安卓电量
+					let main = plus.android.runtimeMainActivity();
+					let Intent = plus.android.importClass('android.content.Intent');
+					let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
+						onReceive: (context, intent) => {
+							let action = intent.getAction();
+							if (action == Intent.ACTION_BATTERY_CHANGED) {
+								this.batteryState = intent.getIntExtra("status", 0); //电池状态
+								this.batteryLevel = intent.getIntExtra("level", 0); //电量
+							}
+						}
+					});
+					let IntentFilter = plus.android.importClass('android.content.IntentFilter');
+					let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
+					main.registerReceiver(recevier, filter);
+				}
+
+				// #endif
+				// 设置时间
+				let date = new Date();
+				this.systemTime = Date.parse(date);
+				this.systemTimeStr = dateToStr(this.systemTime);
+				setInterval(() => {
+					this.systemTime += 60000;
+					this.systemTimeStr = dateToStr(this.systemTime);
+				}, 60000)
+
+
+				// 获取字体、排版等信息
+
+				//可能缓存在前端可能从后端拿，如果是异步注意同步处理
+				this.fontSize = uni.getStorageSync('fontSize')
+				if (typeof this.fontSize !== 'number') {
+					this.fontSize = 18
+				}
+				this.simplified = uni.getStorageSync('simplified')
+				if (typeof this.simplified !== 'number') {
+					this.simplified = 1
+				}
+				this.lineHeight = uni.getStorageSync('lineHeight')
+				if (typeof this.lineHeight !== 'number') {
+					this.lineHeight = 1.5
+				}
+				this.background = uni.getStorageSync('background')
+				if (typeof this.background !== 'number') {
+					this.background = 1
+				}
+				this.readerSet.background = this.background
+				this.turnType = uni.getStorageSync('turnType')
+				if (this.turnType == 2) {
+					this.isVertical = true;
+				}
+				if (this.turnType == 3) {
+					this.isVerticalHua = true;
+				}
+				if (typeof this.turnType !== 'number') {
+					this.turnType = 0
+				}
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					history = []
+				}
+				history.forEach((value) => {
+					if (value.bookId === this.bookId) {
+						this.history = value
+					}
+				})
+				this.$nextTick(()=>{
+					this._changeReaderSeting()
+				})
+				/*****************************************/
+				/*****************************************/
+				/*****************************************/
+				
+			},
+
+			/**
+			 * 获取数据并计算页面
+			 **/
+			async initPage() {
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
+				this.cover.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				await this.calcHeight()
+				await this.getDirectoryList()
+				await this.getReadRateUl()
+
+				if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
+					this.history.chapterIndex = 0
+				}
+				await this.getThreeChapter(this.history.chapterIndex)
+				// this.counlSystemInfo()
+				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
+				this.oldReadSpeed.readPage = page
+				this.goToPage(page)
+				this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = {
+				SimulationText : copyBookText,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: this.oldReadSpeed.readPage
+				// background:this.background
+				}
+				uni.hideLoading()
+				
+			},
+
+			/**
+			 * 计算innerHeight，用于截取至整行
+			 **/
+			calcHeight() {
+				if (this.contentHeight) {
+					let lineHeight = this.fontSize * this.lineHeight;
+					// #ifdef APP-PLUS || MP-WEIXIN
+					lineHeight = Math.floor(lineHeight * this.pixelRatio) / this.pixelRatio
+					// #endif
+					let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize) / 2)) /
+						lineHeight)
+					this.innerHeight = lineNum * lineHeight
+				} else {
+					return new Promise((resolve, reject) => {
+						this.$nextTick(() => {
+							const query = uni.createSelectorQuery().in(this);
+							query.select('#content').boundingClientRect(data => {
+								let height = data.height;
+								this.contentHeight = height;
+								let lineHeight = this.fontSize * this.lineHeight;
+
+								// #ifdef APP-PLUS || MP-WEIXIN
+								lineHeight = Math.floor(lineHeight * this.pixelRatio) / this
+									.pixelRatio
+								// #endif
+								let lineNum = Math.floor((height + Math.floor((lineHeight - this
+									.fontSize) / 2)) / lineHeight)
+								this.innerHeight = lineNum * lineHeight
+								resolve()
+							}).exec();
+						})
+
+					})
+				}
+
+			},
+
+			/**
+			 * 计算本章页数
+			 **/
+			calcCurChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#curChapter').boundingClientRect(data => {
+							let height = data.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif
+							// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
+							this.curChapter.totalPage = copyBookText.length
+							this.curChapter.ready = true //章节准备完毕
+							resolve()
+						}).exec();
+					}, 100)
+
+				})
+			},
+			/**
+			 * 顶部 计算上一章 （如果有）
+			 **/
+			scrolltoupper(e) {
+				if (this.isAudioMenu == false && e.detail.direction == "top" && e.type == "scrolltoupper" && !this.down) {
+					if (this.curChapter.chapterIndex > 0) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex - 1)
+							uni.hideLoading()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已经在最开头了'
+						})
+					}
+				}
+			},
+			/**
+			 * 底部 加载下一章 （如果有）
+			 **/
+			async scrolltolower(e) {
+				if (e.detail.direction == "bottom" && e.type == "scrolltolower") {
+
+					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							this.scrollTop = 0
+							uni.hideLoading()
+							this.down = true
+						}, 300)
+						setTimeout(() => {
+							this.clearDown()
+						}, 500)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已加载全部1'
+						})
+					}
+				}
+			},
+			/**
+			 * 还原 this.down
+			 **/
+			clearDown() {
+				setTimeout(() => {
+					this.down = false
+				}, 300)
+			},
+			/**
+			 * 听书事件
+			 **/
+			listenHandle() {
+				// this.changeTurnType(2)
+				const query = uni.createSelectorQuery().in(this);
+				// console.log(query)
+				query.selectAll('.book-inner').boundingClientRect(data => {
+					// console.log('this.domList',this.domList);
+					//console.log('data',data);					
+					data = data.filter((item, index) => {
+						return item.id == ""
+					})
+					if (this.domList.length > 0) {
+						console.log('读取到数据，继续执行');
+					} else {
+						console.log('读取到的数据为空，进行赋值');
+						this.domList = data;
+					}
+					this.getNowReadIndex()
+					// this.$nextTick(()=>{
+					// 	this.createAudio()
+					// })					
+				}).exec();
+			},
+
+			getNowReadIndex() {
+				let progress = this.progress //记录阅读进度用于调整字体后跳转
+				// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				let page = 0
+				let history = uni.getStorageSync('history')
+				if (typeof history !== 'object') {
+					page = 0
+				} else {
+					page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				}
+				// console.log(this.curChapter.totalPage, 'curChapter')
+				// 通过page 判断当前读到了哪里
+				// console.log(page+1, '当前页')
+
+				let nowRead = copyBookText[page][0].list
+				console.log(nowRead, '顶部第一句话')
+				//let nowReadIndex = 0
+				//console.log(page,'page')
+				if (page == 0) {
+					// return this.scrollTop = 0
+					this.domIndex = 0
+					this.createAudio()
+					this.musicManuShow = false
+					this.isAudioMenu = true					
+				} else {
+					let found = false
+					this.verticalData.text.forEach((item, itemIndex) => {
+						// console.log(copyBookText[page][0][0],'copyBookText')
+						//console.log(item.content,'item')				
+						if (item.content.indexOf(nowRead) != -1) {
+							// 找到了
+							console.log(item.number, '找到了')
+							found = true
+							this.domIndex = itemIndex
+							this.createAudio()
+							this.musicManuShow = false
+							this.isAudioMenu = true							
+							return
+						}
+					})
+					if (!found) {
+						uni.showToast({
+							title: '未找到音频',
+							icon: 'none',
+							duration: 2000
+						})
+					}
+				}
+			},
+
+			// 创建音频
+			createAudio() {
+				console.log('读到的位置', this.domIndex);
+				this.music = uni.createInnerAudioContext()
+				this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
+				console.log(this.verticalData.text, '文本')
+				// 找到符合条件的dom
+				console.log('domList', this.domList)
+				// 给对应dom高亮				
+				this.highlight = this.domIndex
+				this.fhighlight = true
+				console.log('highlight', this.highlight);
+				console.log('domIndex', this.domIndex);
+				// 判断是否有src
+				if (this.music.src) {
+					setTimeout(() => {
+						this.music.play(); //执行播放
+						this.musicPlaying = true
+						this.musicItem.musicPlaying = true
+						this.changeMusicItem()
+					}, 150)
+				}
+				// 音频播放结束
+				this.music.onEnded(() => {
+					this.musicPlaying = false
+					if (this.domIndex == this.domList.length - 1) {
+						console.log('全部音频播放完毕');
+
+					} else {
+						console.log('音频播放结束2');
+						this.addDomIndex()
+					}
+				});
+			},
+			// 加载下一条音频
+			addDomIndex() {
+				this.domIndex += 1
+				//console.log(this.domIndex, '下一条domIndex')	
+				//console.log(this.curPage.text, '最大值')	
+				setTimeout(() => {
+					this.createAudio()
+					let paragraphindex = 0
+					//if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
+					this.curPage.text.map((item, index) => {
+						if (index == this.curPage.text.length - 1) {
+							paragraphindex = item.paragraph
+							return
+						}
+					})
+					//return 
+					if (this.domIndex > paragraphindex) {
+						this.goNextPage()
+					}
+
+				}, 1000)
+
+			},
+			// 暂停事件
+			audioPause() {
+				this.isPause = !this.isPause
+				if (this.isPause) {
+					this.music.pause()					
+					this.musicPlaying = false
+					this.musicItem.musicPlaying = false
+				} else {
+					this.music.play()
+					this.musicPlaying = true
+					this.musicItem.musicPlaying = true
+				}
+			},
+			//  关闭听书
+			offAudio() {
+				this.music.stop();
+				// this.domIndex = 0;
+				this.highlight = "null";
+				this.fhighlight = false
+				this.isAudioMenu = false;
+				this.isPause = false;
+				this.music = null;
+				this.musicPlaying = false
+				this.changeMusicItem()
+			},
+
+			/**
+			 * 计算上一章页数,并翻页（如果有）
+			 **/
+			calcPreChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#preChapter').boundingClientRect(data => {
+							let height = data.height;
+							// let height = copyBookText.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif						
+							// this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1
+							this.preChapter.totalPage = this.preChapterTotal
+							this.preChapter.ready = true //章节准备完毕
+							if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
+								uni.hideLoading() //把loading关掉
+								this.waitForPre = false;
+								//页面准备完毕
+								this.goPrePage()
+							}
+							if (this.waitForPreChapter) {
+								uni.hideLoading()
+								this.waitForPreChapter = false
+								this.goPreChapter()
+							}
+							resolve()
+						}).exec();
+
+					}, 100)
+
+				})
+
+			},
+
+			/**
+			 * 计算下一章页数,并翻页（如果有）
+			 **/
+			calcNextChapter() {
+				return new Promise((resolve, reject) => {
+					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
+					setTimeout(() => {
+						const query = uni.createSelectorQuery().in(this);
+						query.select('#nextChapter').boundingClientRect(data => {
+							let height = data.height;
+							// #ifdef APP-PLUS || MP-WEIXIN
+							height = Math.round(height * this.pixelRatio) / this.pixelRatio
+							// #endif
+							//this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
+							this.nextChapter.totalPage = this.nextChapterTotal
+							this.nextChapter.ready = true //章节准备完毕
+							if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
+								uni.hideLoading() //把loading关掉
+								this.waitForNext = false;
+								//页面准备完毕
+								this.goNextPage()
+							}
+							if (this.waitForNextChapter) {
+								uni.hideLoading()
+								this.waitForNextChapter = false
+								this.goNextChapter()
+							}
+							resolve()
+						}).exec();
+					}, 100)
+
+				})
+
+			},
+
+			/**
+			 * 触摸开始
+			 **/
+			touchStart(e) {
+				this.showAnimation = false
+				this.isTouch = true
+				this.touchX = e.touches[0].clientX;
+				this.touchStartX = e.touches[0].clientX;
+				this.touchY = e.touches[0].clientY;
+				this.touchStartY = e.touches[0].clientY;
+				// console.log(touchStartY, '触摸开始')
+
+				if (this.turnType === 0) {
+					// this.$refs.pageBackRef.$el.style.transition = 'unset'
+					// this.$refs.pageBackRef.$el.style.right = 0
+					// this.$refs.pageBackRef.$el.style.width = 0
+					this.pageBackRef.transition = 'unset'
+					this.pageBackRef.right = 0
+					this.pageBackRef.left = 0
+					this.pageBackRef.width = 0
+					this.pageBackRef.before = true
+				}
+			},
+
+			/**
+			 * 触摸
+			 **/
+			touchMove(e) {
+				this.showShadow = true;
+				let delta = 0
+
+				if (this.turnType === 0 || this.turnType === 1) { // 翻页方式为‘覆盖’ 或 ‘左右平移’
+					delta = e.touches[0].clientX - this.touchStartX;
+
+					this.pageBackRef.before = delta > 0 ? true : false
+					if (this.turnType === 0 && !this.pageBackRef.before) {
+						// this.$refs.pageBackRef.$el.style.right = `${-delta}px`
+						// this.$refs.pageBackRef.$el.style.width = `${-delta * 0.5}px`
+						this.pageBackRef.right = `${-delta}px`
+						this.pageBackRef.width = `${-delta * 0.5}px`
+					} else if (this.turnType === 0 && this.pageBackRef.before) {
+						this.pageBackRef.left = `${delta}px`
+						this.pageBackRef.width = `${-delta * 0.5}px`
+					}
+					if (delta > this.windowWidth) {
+						delta = this.windowWidth
+					}
+					if (delta < -this.windowWidth) {
+						delta = -this.windowWidth
+					}
+
+
+					this.delta = e.touches[0].clientX - this.touchX;
+					this.touchX = e.touches[0].clientX;
+
+				} else { //翻页方式为‘上下平移’
+					delta = e.touches[0].clientY - this.touchStartY;
+
+					// 限制边界
+					if (delta > this.windowHeight) {
+						delta = this.windowHeight
+					}
+					if (delta < -this.windowHeight) {
+						delta = -this.windowHeight
+					}
+
+					this.delta = e.touches[0].clientY - this.touchY;
+					this.touchY = e.touches[0].clientY;
+					// console.log(this.delta, 'delta')					
+				}
+				if (this.next && this.nextPage.ready) { //首次翻下一页之后
+					if (this.nextPage.isEnd) {
+						return
+					}
+					// 限制边界
+					if (delta > 0) {
+						delta = 0
+					}
+
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth+delta}px,0)`,
+						`(0,${-this.windowHeight+delta}px)`
+					]
+
+					this.curPage.pageTranslate = [
+						`(${delta}px,0)`,
+						`(${delta}px,0)`,
+						`(0,${delta}px)`
+					]
+
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth+delta}px,0)`,
+						`(0,${this.windowHeight+delta}px)`
+					]
+				}
+				if (!this.pre && !this.next && delta < 0) { //首次翻下一页
+					this.next = true
+					if (this.nextPage.ready) { //页面准备好了
+						if (this.nextPage.isEnd) {
+
+							uni.showToast({
+								title: '跳转推荐页',
+								icon: 'none'
+							})
+							/*****************************************/
+							/*****************************************/
+							/*****************************************/
+
+
+						} else {
+							this.prePage.pageTranslate = [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth+delta}px,0)`,
+								`(0,${-this.windowHeight+delta}px)`
+							]
+							this.curPage.pageTranslate = [
+								`(${delta}px,0)`,
+								`(${delta}px,0)`,
+								`(0,${delta}px)`
+							]
+
+							this.nextPage.pageTranslate = [
+								`(0,0)`,
+								`(${this.windowWidth+delta}px,0)`,
+								`(0,${this.windowHeight+delta}px)`
+							]
+						}
+					} else if (this.nextChapter.ready) { //下一章已经准备好了
+						this.nextPage = {
+							ready: this.nextChapter.ready,
+							chapterName: this.nextChapter.chapterName,
+							text: copyBookText,
+							pageNum: 0,
+							totalPage: this.nextChapter.totalPage,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							],
+							canRead: this.nextChapter.canRead
+						}
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(${delta}px,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth+delta}px,0)`,
+							`(0,${this.windowHeight+delta}px)`
+						]
+					}
+				}
+				if (this.pre && this.prePage.ready) { //首次翻上一页之后
+
+					// 限制边界
+					if (delta < 0) {
+						delta = 0
+					}
+
+					if (this.prePage.isCover) { //上一页是封面
+						this.cover.pageTranslate = [
+							`(${-this.windowWidth+delta}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+					} else {
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth+delta}px,0)`,
+							`(${-this.windowWidth+delta}px,0)`,
+							`(0,${-this.windowHeight+delta}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(${delta}px,0)`,
+							`(0,${delta}px)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth+delta}px,0)`,
+							`(0,${this.windowHeight+delta}px)`
+						]
+					}
+				}
+				if (!this.prePage.isCover) {
+
+					if (!this.pre && !this.next && delta > 0) { //首次翻上一页
+						this.pre = true
+						if (this.prePage.ready) { //页面准备好了
+							if (this.prePage.isCover) { //上一页是封面
+								this.cover.pageTranslate = [
+									`(${-this.windowWidth+delta}px,0)`,
+									`(${-this.windowWidth+delta}px,0)`,
+									`(0,${-this.windowHeight+delta}px)`
+								]
+								this.curPage.pageTranslate = [
+									`(0,0)`,
+									`(${delta}px,0)`,
+									`(0,${delta}px)`
+								]
+
+							} else {
+								this.prePage.pageTranslate = [
+									`(${-this.windowWidth+delta}px,0)`,
+									`(${-this.windowWidth+delta}px,0)`,
+									`(0,${-this.windowHeight+delta}px)`
+								]
+								this.curPage.pageTranslate = [
+									`(0,0)`,
+									`(${delta}px,0)`,
+									`(0,${delta}px)`
+								]
+
+								this.nextPage.pageTranslate = [
+									`(0,0)`,
+									`(${this.windowWidth+delta}px,0)`,
+									`(0,${this.windowHeight+delta}px)`
+								]
+							}
+						} else if (this.preChapter.ready) { //上一章已经准备好了							
+							this.prePage = {
+								ready: this.preChapter.ready,
+								chapterName: this.preChapter.chapterName,
+								text: copyBookText,
+								pageNum: this.preChapter.totalPage - 1,
+								totalPage: this.preChapter.totalPage,
+								pageTranslate: [
+									`(${-this.windowWidth}px,0)`,
+									`(${-this.windowWidth}px,0)`,
+									`(0,${-this.windowHeight}px)`
+								],
+								canRead: this.preChapter.canRead
+							}
+							this.prePage.pageTranslate = [
+								`(${-this.windowWidth+delta}px,0)`,
+								`(${-this.windowWidth+delta}px,0)`,
+								`(0,${-this.windowHeight+delta}px)`
+							]
+							this.curPage.pageTranslate = [
+								`(0,0)`,
+								`(${delta}px,0)`,
+								`(0,${delta}px)`
+							]
+
+							this.nextPage.pageTranslate = [
+								`(0,0)`,
+								`(${this.windowWidth+delta}px,0)`,
+								`(0,${this.windowHeight+delta}px)`,
+							]
+						}
+					}
+				}
+
+
+			},
+
+			/**
+			 * 触摸结束
+			 **/
+			touchEnd(e) {
+				console.log(e, 'e')
+				this.isTouch = false
+				this.showAnimation = true
+				this.showShadow = false
+				let delta = 0
+				let that = this
+				if (this.turnType === 0 || this.turnType === 1) {
+					delta = e.changedTouches[0].clientX - this.touchStartX;
+				} else {
+					delta = e.changedTouches[0].clientY - this.touchStartY;
+					this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
+					console.log(this.page, 'page')
+					//this.getNowReadIndex()
+				}
+
+				if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
+					if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
+						if (!this.prePage.isCover) {
+							this.goPrePage()
+						}
+					} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
+						//if(e.changedTouches[0].clientY > 100){ // 显示弹窗
+						e.changedTouches[0].clientY > 100 ? this.goNextPage() : ''
+						//}
+					} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=
+						this
+						.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
+						this.showMenu()
+					}
+				} else {
+					if (this.next && this.delta <= 0) { //下一页
+						this.goNextPage()
+					} else if (this.next && this.delta > 0) { //取消翻页
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						]
+
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						]
+
+						if (this.turnType == 0) {
+							this.pageBackRef.transition = 'right .5s ease'
+							this.pageBackRef.right = 0
+							this.pageBackRef.width = 0
+						}
+					} else if (this.pre && this.delta >= 0) { //上一页
+						this.goPrePage()
+					} else if (this.pre && this.delta < 0) { //取消翻页
+						this.prePage.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+						this.curPage.pageTranslate = [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						]
+						this.nextPage.pageTranslate = [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						]
+						this.cover.pageTranslate = [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						]
+
+						if (this.turnType == 0) {
+							this.pageBackRef.transition = 'left .5s ease'
+							this.pageBackRef.left = 0
+							this.pageBackRef.width = 0
+						}
+					}
+				}
+				this.next = false
+				this.pre = false
+				// setTimeout(()=>{
+				// 	this.pageBackRef.width = '0px'
+				// },450)
+			},
+
+			/**
+			 * 取消触摸
+			 **/
+			touchcancel() {
+
+				//取消翻页,重置页面
+				this.showAnimation = false
+				this.showShadow = false
+				this.prePage.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.curPage.pageTranslate = [
+					`(0,0)`,
+					`(0,0)`,
+					`(0,0)`
+				]
+				this.nextPage.pageTranslate = [
+					`(0,0)`,
+					`(${this.windowWidth}px,0)`,
+					`(0,${this.windowHeight}px)`
+				]
+				this.cover.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.next = false
+				this.pre = false
+
+			},
+
+			/**
+			 * 呼出菜单
+			 **/
+			showMenu() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(false);
+				// #endif
+				this.menuShow = true;
+				if (this.music == null && !this.isVerticalHua) {
+					this.musicManuShow = true;
+				} else {
+					this.musicManuShow = false;
+				}
+				setTimeout(() => {
+					this.itemShow = true
+				}, 100)
+			},
+
+			/**
+			 * 关闭菜单
+			 **/
+			closeMenu() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(true);
+				// #endif
+				this.itemShow = false
+				this.settingShow = false
+				this.directoryShow = false
+				setTimeout(() => {
+					this.directoryShowBefore = false
+					this.menuShow = false
+					this.musicManuShow = false;
+				}, 300)
+			},
+
+			/**
+			 * 关闭菜单栏，呼出设置栏
+			 **/
+			openSetting() {
+
+				this.itemShow = false
+				setTimeout(() => {
+					this.settingShow = true
+				}, 300)
+			},
+
+			/**
+			 * 关闭菜单栏，呼出目录栏
+			 **/
+			openDirectory() {
+				// #ifdef APP-PLUS
+				plus.navigator.setFullscreen(true);
+				// #endif
+				this.itemShow = false
+				this.directoryShowBefore = true
+				setTimeout(() => {
+					this.directoryShow = true
+					console.log(this.directoryShow)
+				}, 300)
+				
+			},
+
+			/**
+			 * 拖动进度条
+			 **/
+			slideChanging(e) {
+				this.progressTouched = true
+				this.chapterProgress = e.detail.value
+			},
+
+			/**
+			 * 结束拖动进度条
+			 **/
+			async slideChange(e) {
+
+				this.chapterProgress = e.detail.value
+				uni.showLoading({
+					title: '加载中'
+				})
+				await this.getThreeChapter(e.detail.value)
+				this.counlSystemInfo()
+				this.progressTouched = false
+				this.goToPage(0)
+				uni.hideLoading()
+
+			},
+
+			/**
+			 * 上一页,页面轮换
+			 **/
+			goPrePage() {
+				if (this.prePage.isCover) { //如果是首页
+					this.cover.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+					return
+				}
+				if (!this.prePage.ready && !this.preChapter.ready) {
+					this.waitForPre = true
+					uni.showLoading({
+						title: '正在准备上一章',
+						mask: true
+					})
+					return
+				}
+				let showChapter = false
+				this.currentPage -= 1
+				if (this.currentPage === -1) { //翻至上一章了
+					showChapter = true
+					this.currentPage = this.preChapter.totalPage - 1
+					this.chapterRotate('pre')
+				}
+				console.log(copyBookText, 'goPrePage////////////////////////////////')
+				let cur = [].concat(this.curPage.pageTranslate)
+				let pre = [].concat(this.prePage.pageTranslate)
+				this.goToPage(this.currentPage)
+				//  当前scrollTop的值
+				//、 this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
+				// console.log(this.scrollTop,'翻页后的scrollTop')
+				// this.getDomIndex()
+
+				this.prePage.pageTranslate = [
+					`(${-this.windowWidth}px,0)`,
+					`(${-this.windowWidth}px,0)`,
+					`(0,${-this.windowHeight}px)`
+				]
+				this.curPage.pageTranslate = pre
+				this.nextPage.pageTranslate = cur
+				if (this.turnType === 0) {
+
+					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
+					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
+					// this.$refs.pageBackRef.$el.style.width = `100px`
+					this.pageBackRef.before = true
+					this.pageBackRef.transition = 'left .5s ease'
+					this.pageBackRef.left = `${this.windowWidth}px`
+					this.pageBackRef.right = 0
+					this.pageBackRef.width = `100px`
+				}
+
+				setTimeout(() => {
+					if (showChapter) {
+						uni.showToast({
+							title: this.curChapter.chapterName,
+							icon: 'none'
+						})
+					}
+					this.showAnimation = true
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth}px,0)`,
+						`(0,${-this.windowHeight}px)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+				}, 50)
+			},
+
+
+			/**
+			 * 下一页,页面轮换
+			 **/
+			goNextPage() {
+				if (this.nextPage.isEnd) { //如果翻至本书末尾
+					alery('到头了')
+					uni.showToast({
+						title: '跳转推荐页',
+						icon: 'none'
+					})
+					/*****************************************/
+					/*****************************************/
+					/*****************************************/
+					return
+				}
+				if (!this.nextPage.ready && !this.nextChapter.ready) {
+					this.waitForNext = true
+					uni.showLoading({
+						title: '正在准备下一章',
+						mask: true
+					})
+					return
+				}
+				this.currentPage += 1
+				let showChapter = false
+				console.log(this.currentPage, this.curChapter.totalPage)
+				if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
+					showChapter = true
+					this.currentPage = 0
+					this.chapterRotate('next')
+					this.speedData.bookId = this.bookId_mark;
+					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
+					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
+					this.speedData.precent = this.curChapter.chapterIndex;
+					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
+					if (this.speedTrue) {
+						this.updateReadRateUl()
+					} else {
+						this.saveReadRateUl()
+					}
+
+				}
+				let cur = [].concat(this.curPage.pageTranslate)
+				let next = [].concat(this.nextPage.pageTranslate)
+				this.goToPage(this.currentPage)
+				//  当前scrollTop的值
+				// this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
+				// console.log(this.scrollTop,'翻页后的scrollTop')
+
+				this.prePage.pageTranslate = cur
+				this.curPage.pageTranslate = next
+				this.nextPage.pageTranslate = [
+					`(0,0)`,
+					`(${this.windowWidth}px,0)`,
+					`(0,${this.windowHeight}px)`
+				]
+
+				if (this.turnType === 0) {
+					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
+					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
+					// this.$refs.pageBackRef.$el.style.width = `100px`
+					this.pageBackRef.before = false
+					this.pageBackRef.transition = 'right .5s ease .15s'
+					this.pageBackRef.right = `${this.windowWidth}px`
+					this.pageBackRef.left = 0
+					this.pageBackRef.width = `100px`
+				}
+				setTimeout(() => {
+					if (showChapter) {
+						uni.showToast({
+							title: this.curChapter.chapterName,
+							icon: 'none'
+						})
+					}
+					this.showAnimation = true
+					this.prePage.pageTranslate = [
+						`(${-this.windowWidth}px,0)`,
+						`(${-this.windowWidth}px,0)`,
+						`(0,${-this.windowHeight}px)`
+					]
+					this.curPage.pageTranslate = [
+						`(0,0)`,
+						`(0,0)`,
+						`(0,0)`
+					]
+					this.nextPage.pageTranslate = [
+						`(0,0)`,
+						`(${this.windowWidth}px,0)`,
+						`(0,${this.windowHeight}px)`
+					]
+
+				}, 100)
+			},
+
+			/**
+			 * 章节轮换
+			 **/
+			async chapterRotate(type) {
+				/*
+					1:在切换上下章时调用请求数据方
+					2:调用截取数据方法 this.counlSystemInfo()
+				*/
+				if (type === 'next') {
+					this.preChapter = Object.assign({}, this.curChapter)
+					this.curChapter = Object.assign({}, this.nextChapter)
+					console.log(this.curChapter.chapterIndex, 'chapterIndex')
+					copyBookText = this.curChapter.text;
+
+					this.counlSystemInfo()
+					console.log(copyBookText, 1111111111)
+					if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
+						this.nextChapter = {
+							ready: false,
+							chapterIndex: this.curChapter.chapterIndex + 1,
+							chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
+						}
+						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
+						this.$set(this.nextChapter, 'text', this.tmpChapter.text)
+						this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
+						this.calcNextChapter()
+					} else {
+						this.nextChapter = {
+							ready: true,
+							isEnd: true
+						}
+					}
+					this.getThreeChapter(this.curChapter.chapterIndex)
+
+				}
+				if (type === 'pre') {
+					this.nextChapter = Object.assign({}, this.curChapter)
+					this.curChapter = Object.assign({}, this.preChapter)
+					copyBookText = this.curChapter.text;
+					this.counlSystemInfo()
+					console.log(copyBookText, '跳转到上一章')
+					// this.preChapter.text = 
+					if (this.curChapter.chapterIndex !== 0) {
+						this.preChapter = {
+							ready: false,
+							chapterIndex: this.curChapter.chapterIndex - 1,
+							chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
+						}
+						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
+						this.$set(this.preChapter, 'text', this.tmpChapter.text)
+						this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
+						this.calcPreChapter()
+					} else {
+						this.preChapter = {
+							ready: true,
+							isCover: true
+						}
+
+					}
+					this.getThreeChapter(this.curChapter.chapterIndex)
+				}
+			},
+
+
+			/**
+			 * 跳转下一章
+			 **/
+			goNextChapter() {
+				if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
+					uni.showToast({
+						title: '已经是最后一章了',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.waitForNext || this.waitForPre) {
+					return
+				}
+
+				if (this.isVertical) {
+					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							// this.SimulationTextObj = {
+							// SimulationText : copyBookText,
+							// fontSize : this.fontSize,
+							// lineHeight : this.lineHeight,
+							// oldReadPage: 0
+							// // background:this.background
+							// }
+							uni.hideLoading()
+							this.down = true
+							this.clearDown()
+						}, 300)
+						
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已加载全部'
+						})
+					}
+				} else {
+					if (this.nextChapter.ready) {
+						this.chapterRotate('next')
+						this.goToPage(0)
+					} else {
+						uni.showLoading({
+							title: '正在准备下一章'
+						})
+						this.waitForNextChapter = true
+					}
+
+				}
+
+			},
+
+			/**
+			 * 跳转上一章
+			 **/
+			goPreChapter(page) {
+				if (this.curChapter.chapterIndex === 0) {
+					uni.showToast({
+						title: '这是第一章',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.isVertical) {
+					if (this.curChapter.chapterIndex > 0) {
+						uni.showLoading({
+							title: '请稍等...'
+						})
+						setTimeout(() => {
+							this.getThreeChapter(this.curChapter.chapterIndex - 1)
+							// this.counlSystemInfo()
+							console.log(copyBookText, '翻页后//////////////')
+							uni.hideLoading()
+						}, 300)
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: '已经在最开头了'
+						})
+					}
+				} else {
+					if (this.waitForNext || this.waitForPre) {
+						return
+					}
+					if (this.preChapter.ready) {
+						this.chapterRotate('pre')
+						this.goToPage(0)
+
+					} else {
+						uni.showLoading({
+							title: '正在准备上一章'
+						})
+						this.waitForPreChapter = true
+					}
+				}
+			},
+
+
+			/**
+			 * 根据页码跳转
+			 **/
+			goToPage(page) {
+				this.currentPage = page
+				this.showAnimation = false
+				console.log(page, '======>')
+				// console.log(copyBookText[page],'当前页')
+				this.$nextTick(function() {
+					this.curPage = {
+						ready: this.curChapter.ready,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page],
+						pageNum: this.currentPage,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(0,0)`,
+							`(0,0)`,
+							`(0,0)`
+						],
+						canRead: this.curChapter.canRead
+					}
+				})
+				// console.log(copyBookText[page][0],'顶部第一句话')
+				let nowRead = copyBookText[page][0]
+				let nowReadIndex = 0
+				this.domIndex = nowReadIndex
+				this.setStorage() // 设置缓存
+				if (this.currentPage === 0) {
+					if (this.preChapter.ready && this.preChapter.isCover) { //翻至封面了
+						this.prePage = {
+							ready: true,
+							isCover: true,
+							pageTranslate: [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth}px,0)`,
+								`(0,${-this.windowHeight}px)`
+							]
+						}
+					} else {
+						this.prePage = {
+							ready: this.preChapter.ready,
+							chapterName: this.preChapter.chapterName,
+							// text: this.preChapter.text,
+							text: this.preChapter.text.map(function(obj, index) {
+								return obj.picAndWord
+							}),
+							pageNum: this.preChapter.totalPage - 1,
+							totalPage: this.preChapter.totalPage,
+							pageTranslate: [
+								`(${-this.windowWidth}px,0)`,
+								`(${-this.windowWidth}px,0)`,
+								`(0,${-this.windowHeight}px)`
+							],
+							canRead: this.preChapter.canRead
+						}
+					}
+				} else {
+					this.prePage = {
+						ready: true,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page - 1],
+						pageNum: this.currentPage - 1,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(${-this.windowWidth}px,0)`,
+							`(${-this.windowWidth}px,0)`,
+							`(0,${-this.windowHeight}px)`
+						],
+						canRead: this.curChapter.canRead
+					}
+				}
+				if (this.currentPage > this.curChapter.totalPage - 1) {
+					if (this.nextChapter.ready && this.nextChapter.isEnd) { //翻至最后一章了
+						this.nextPage = {
+							ready: true,
+							isEnd: true,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							]
+						}
+					} else {
+						this.nextPage = {
+							ready: this.nextChapter.ready,
+							chapterName: this.nextChapter.chapterName,
+							text: this.nextChapter.text.map(function(obj, index) {
+								return obj.picAndWord
+							}),
+							pageNum: 0,
+							totalPage: this.nextChapter.totalPage,
+							pageTranslate: [
+								`(0,0)`,
+								`(${this.windowWidth}px,0)`,
+								`(0,${this.windowHeight}px)`
+							],
+							canRead: this.nextChapter.canRead
+						}
+					}
+
+				} else {
+					this.nextPage = {
+						ready: true,
+						chapterName: this.curChapter.chapterName,
+						text: copyBookText[page + 1],
+						pageNum: this.currentPage + 1,
+						totalPage: this.curChapter.totalPage,
+						pageTranslate: [
+							`(0,0)`,
+							`(${this.windowWidth}px,0)`,
+							`(0,${this.windowHeight}px)`
+						],
+						canRead: this.curChapter.canRead
+					}
+
+					console.log(this.domIndex, 'domIndex')
+
+				}
+			},
+
+
+			/**
+			 * 跳转到指定章节
+			 **/
+			async goToChapter(index) {
+				this.progressTouched = false
+				this.closeMenu()
+				uni.showLoading({
+					title: '加载中'
+				})
+				await this.getThreeChapter(index.id)
+				//this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = {
+				SimulationText : copyBookText,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: 0
+				// background:this.background
+				}
+				//this.counlSystemInfo()
+				this.goToPage(0)
+				this.scrollTop = 0
+				// this.domIndex = 1
+				uni.hideLoading()
+				// setTimeout(() => {
+				// 	this.$router.go(0)
+				// }, 500)
+			},
+
+			/**
+			 * 加大字体
+			 **/
+			async bigSize() {
+				let progress = this.progress //记录阅读进度用于调整字体后跳转
+				this.fontSize += 2
+				uni.setStorageSync('fontSize', this.fontSize)
+				this.calcHeight()
+				copyBookText = this.curChapter.text;				
+				this.counlSystemInfo()
+				await this.calcCurChapter()				
+				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.goToPage(page)
+				if (this.preChapter.ready && !this.preChapter.isCover) {
+					this.preChapter.ready = false
+					await this.calcPreChapter()
+				}
+				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+					this.nextChapter.ready = false
+					await this.calcNextChapter()
+				}				
+			},
+
+			/**
+			 * 缩小字体
+			 **/
+			async smallSize() {
+				let progress = this.progress
+				this.fontSize -= 2
+				uni.setStorageSync('fontSize', this.fontSize)
+				this.calcHeight()
+				copyBookText = this.curChapter.text;				
+				this.counlSystemInfo()
+				await this.calcCurChapter()
+				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.goToPage(page)
+				if (this.preChapter.ready && !this.preChapter.isCover) {
+					this.preChapter.ready = false
+					await this.calcPreChapter()
+				}
+				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+					this.nextChapter.ready = false
+					await this.calcNextChapter()
+				}
+				
+			},
+
+			/**
+			 * 改变行距
+			 **/
+			async changeLineHeight(lineHeight) {
+				let progress = this.progress
+				if (lineHeight === this.lineHeight) {
+					return
+				} else {
+					this.lineHeight = lineHeight;
+					uni.setStorageSync('lineHeight', this.lineHeight)
+					this.calcHeight()
+					copyBookText = this.curChapter.text;					
+					this.counlSystemInfo()
+					await this.calcCurChapter()
+					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+					this.readerSet = {
+						lineHeight : this.lineHeight,
+						page : page
+					}
+					this.goToPage(page)
+					if (this.preChapter.ready && !this.preChapter.isCover) {
+						this.preChapter.ready = false
+						await this.calcPreChapter()
+					}
+					if (this.nextChapter.ready && !this.nextChapter.isEnd) {
+						this.nextChapter.ready = false
+						await this.calcNextChapter()
+					}
+				}
+				
+			},
+
+
+			/**
+			 * 改变翻页方式
+			 **/
+			changeTurnType(turnType) {
+				if (turnType === this.turnType) {
+					return
+				} else {
+					this.showAnimation = false
+					this.turnType = turnType;
+					uni.setStorageSync('turnType', this.turnType)
+				}
+				if (turnType == 4) {
+					// 逼真翻页方式
+					this.isSimulation = true
+				} else {
+					this.isSimulation = false
+				}
+				if (turnType == 3) {
+					this.isVerticalHua = true
+					// 如果正在播放音频 则暂停掉
+					if (this.musicPlaying) {
+						//console.log('正在播放音频')
+						this.music.pause()
+						this.highlight = "null";
+						this.isAudioMenu = false
+
+					}
+					uni.showModal({
+						title: '提示',
+						showCancel: false,
+						content: '当前阅读模式下，无听书功能，如想体验听书功能，请切换其他模式，并且阅读进度与其他模式不共享。',
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							}
+						}
+					})
+				} else {
+					this.isVerticalHua = false
+				}
+			},
+
+			/**
+			 * 改变背景
+			 **/
+			changeBackground(background) {
+				if (background === this.background) {
+					return
+				} else {
+					
+					this.background = background;
+					uni.setStorageSync('background', this.background)
+					// this.readerSet.background = background  // 修改阅读器背景
+					// this.SimulationTextObj = {
+					// 	SimulationText : this.SimulationTextObj.SimulationText,
+					// 	fontSize : this.SimulationText.fontSize,
+					// 	lineHeight : this.SimulationText.lineHeight,
+					// 	background: this.background,
+					// 	page: 5
+					// }				
+				}
+			},
+
+			/**
+			 * 获取目录
+			 **/
+			getDirectoryList(showLoading) {
+
+				if (showLoading) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+				}
+				return this.$http
+					.post('book/book/getBookCatalogue', {
+						'bookid': this.bookId_mark
+					})
+					.then(res => {
+						let vipnum = 0
+						if (this.detail.isBuy == 1) {
+							vipnum = 1
+						}
+						for (let i in res.bookCatalogue) {
+							this.directoryList.push({
+								"id": i,
+								"chapterId": res.bookCatalogue[i].chapterId,
+								"name": res.bookCatalogue[i].chapterName,
+							})
+						}
+					})
+					.catch(() => {
+						// 此处是网络连接失败的逻辑
+						uni.hideLoading()
+						return new Promise((resolve, reject) => {
+							uni.showModal({
+								title: '连接失败',
+								content: '请检查您的网络状态',
+								confirmText: '重试',
+								success: async (res) => {
+									if (res.confirm) {
+										//用户点击了重试
+										await this.getDirectoryList(true)
+										resolve()
+									} else if (res.cancel) {
+										//用户点击取消
+										this.back()
+									}
+								}
+							})
+						})
+					})
+
+				// /*****************************************/
+				// /*****************************************/
+				// /*****************************************/
+			},
+
+
+			/**
+			 * 获取一章数据
+			 **/
+			getOneChapter(chapterId, showLoading) {
+				if (showLoading) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+				}
+				// 检查是否已经购买	
+				// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0			
+				return this.$http
+					.post('book/bookchaptercontent/appGetBookChapterContent', {
+						'userId': this.userInfo.id,
+						'bookid': this.bookId_mark,
+						'chapterid': chapterId
+					})
+					.then(res => {						
+						this.tmpChapter.text = res.bookCatalogue
+						// console.log(this.tmpChapter.text,'tmpChapter')
+						
+					})
+					.catch(() => {						
+						// 此处是网络连接失败的逻辑						
+						uni.hideLoading()						
+						return new Promise((resolve, reject) => {
+							uni.showModal({
+								title: '连接失败',
+								content: '请检查您的网络状态',
+								confirmText: '重试',
+								success: async (res) => {
+									if (res.confirm) {
+										//用户点击了重试
+										await this.getOneChapter(chapterId, true)
+										resolve()
+									} else if (res.cancel) {
+										//用户点击取消
+										this.back()
+									}
+								}
+							})
+						})						
+					})				
+				/*****************************************/
+				/*****************************************/
+				/*****************************************/
+			},
+
+
+			/**
+			 * 获取三章数据
+			 **/
+			async getThreeChapter(index) {
+				await this.getOneChapter(this.directoryList[Number(index)].chapterId)
+				this.curChapter = {
+					chapterIndex: Number(index),
+					chapterName: this.directoryList[Number(index)].name,
+					text: this.tmpChapter.text,
+					canRead: this.tmpChapter.canRead
+				}
+				this.verticalData = {
+					chapterIndex: Number(index),
+					chapterName: this.directoryList[Number(index)].name,
+					text: this.tmpChapter.text,
+					canRead: this.tmpChapter.canRead
+				}
+				copyBookText = this.curChapter.text;
+				this.counlSystemInfo()
+				this.domIndex = 0;
+				if (this.curChapter.chapterIndex !== 0) {
+					await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
+					//this.mpcounlSystemInfo
+					this.preChapter = {
+						chapterIndex: Number(index) - 1,
+						chapterName: this.directoryList[Number(index) - 1].name,
+						text: this.tmpChapter.text,
+						canRead: this.tmpChapter.canRead
+					}
+					preText = this.tmpChapter.text
+					this.mpcounlSystemInfo()
+					this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1
+					// console.log(this.preChapterTotal,'上一章内容页数')			
+					// 处理数据
+
+					// 
+				} else {
+					this.preChapter = {
+						ready: true,
+						isCover: true
+					}
+				}
+
+				if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
+
+					await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
+					this.nextChapter = {
+						chapterIndex: Number(index) + 1,
+						chapterName: this.directoryList[Number(index) + 1].name,
+						text: this.tmpChapter.text,
+						canRead: this.tmpChapter.canRead
+					}
+					nextText = this.tmpChapter.text
+					this.nextmpcounlSystemInfo()
+					this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1
+					// console.log(this.nextChapterTotal,'下一章内容页数')
+				} else {
+					this.nextChapter = {
+						ready: true,
+						isEnd: true
+					}
+				}
+				await this.calcCurChapter()
+				await this.calcPreChapter()
+				await this.calcNextChapter()
+			},
+			/*
+			获取进度
+			*/
+			getReadRateUl() {
+				let data = {
+					bookId: this.bookId_mark,
+					userId: this.userInfo.id,
+				}
+
+				$http.request({
+					url: "book/bookreadrate/getReadRate",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("获取", res)
+					if (res.readRate === null) {
+						this.speedTrue = false
+					} else {
+						this.speedTrue = true;
+						this.curChapter.chapterIndex = res.readRate.chapterId
+						this.updateReadId = res.readRate.id
+						this.oldReadSpeed.precent = res.readRate.precent
+						this.oldReadSpeed.updateReadId = res.readRate.id						
+						this.getThreeChapter(this.curChapter.chapterIndex)
+					}
+				})
+			},
+
+			/*
+			保存更新进度
+			*/
+			saveReadRateUl() {
+				console.log("保存数据", this.speedData)
+				let data = {
+					bookId: this.speedData.bookId,
+					chapterId: this.speedData.chapter_id,
+					chapterName: this.speedData.chapter_name,
+					precent: this.progress,
+					contentId: this.speedData.content_id,
+					userId: this.userInfo.id,
+				}
+
+				$http.request({
+					url: "book/bookreadrate/save",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("保存成功", res)
+				})
+			},
+			/*
+				更新进度
+				*/
+			updateReadRateUl() {
+				console.log("更新数据", this.speedData)
+				let data = {
+					bookId: this.speedData.bookId,
+					chapterId: this.speedData.chapter_id,
+					chapterName: this.speedData.chapter_name,
+					precent: this.speedData.precent,
+					contentId: this.speedData.content_id,
+					userId: this.userInfo.id,
+					id: this.updateReadId
+				}
+
+				$http.request({
+					url: "book/bookreadrate/update",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log("更新", res)
+				})
+			},
+			/**
+			 * 购买书籍接口
+			 **/
+			buyBook() {
+				//在回调中调用this.initPage()刷新本页1
+				uni.showToast({
+					title: '跳转至购买页面，如果未登陆则跳转登陆',
+					icon: 'none'
+				})
+			},
+			// 接收renderjs发回的数据
+			onViewClick(options) {
+			     console.log('renderjsCall回调');
+			     console.log(options);
+				  if(options.chapterid == 'next'){ // 下一章
+				  this.goNextChapter()
+				  }else if(options.chapterid == 'prev'){ // 上一章
+				  this.goPreChapter()
+				  }else{ // 单纯的跳页
+					  this.page = options.curpage
+					  this.goToPage(this.page)
+				  }
+			    },
+				showMenuCall(options){
+					this.setShow = true
+				}
+			
+		},
+		beforeDestroy() {
+			if (this.musicPlaying) {
+				this.music.pause()
+			}
+		},
+		onHide() {
+			if (this.musicPlaying) {
+				this.music.pause()
+			}
+		},		
+	}
+</script>
+<script lang="renderjs" module="turnjs">
+	import '@/utils/jquery.min.1.7.js';
+	import turn from '@/utils/turn.js';
+	export default {
+		data() {
+			return {
+				width: '',
+				height: '',
+				SimulationText: [],
+				length:0,
+				hasContent: false,
+				curPage:1,	
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除
+				lastPage:false,
+				musicIndexDom:0,
+				highlight:'null',
+				musicPlaying:false,
+				fontSize:'',
+				lineHeight:'',
+				containerStyle: ''
+			}
+		},		
+		mounted() {	
+			this.onTurn();			
+		},
+		methods: {
+			updateReaderSet(newVal, oldVal){
+				// 阅读器设置更新					
+				$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
+			console.log(newVal,'阅读器设置更新')	
+			if(newVal.page > 0 && newVal.fontSize !== this.fontSize || newVal.page > 0 && newVal.lineHeight !== this.lineHeight){
+				$("#flipbook").turn('page',newVal.page+1)
+			}
+			// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+			// $(".myPage p").css({backgroundColor:this.containerStyle})
+			},			
+			updateMusic(newVal, oldVal){ //听书
+				this.highlight = newVal.highlight
+				this.musicIndexDom = newVal.musicIndexDom
+				this.musicPlaying = newVal.musicPlaying
+				console.log(newVal,'听书配置项有变化')
+				let page = 1
+				page = $("#flipbook").turn('page')						
+				if(newVal.musicPlaying){
+					// 开启听书
+					$("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"})
+										
+				}else{
+					// 关闭听书
+					$("#flipbook .paragraph").css({color:"#333"})
+				}
+			},			
+			updateReadPercent(newVal, oldVal){
+				// 获取阅读进度
+				this.curPage = newVal.readPage
+				// console.log('获取到了阅读的进度page',newVal,this.curPage)-
+				//$("#flipbook").turn('page', this.curPage+1)
+			},
+			updateRenderData(newVal, oldVal) {
+				let {
+					width,					
+					height					
+				} = newVal;
+				this.width = width;
+				this.height = height;		
+				
+			},
+			updateSimulationText(newVal, oldVal) {
+				$("#flipbook").turn('pages',1)     // 内容变化时，保留1页
+				$("#flipbook").turn('pages',newVal.SimulationText.length)
+				// this.onTurn();				
+				// this.SimulationText = newVal
+				console.log('更新数组', newVal)
+				this.fontSize = newVal.fontSize
+				this.lineHeight = newVal.lineHeight
+				//newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+				//$(".myPage p").css({backgroundColor:this.containerStyle})
+				for (var i=0; i<newVal.SimulationText.length;i++) {
+					var tagHtml = "";
+					var conntentHtml = "";	
+					for (var j=0; j<newVal.SimulationText[i].length; j++) {
+						var classname = ''
+						var styleconteent = ''
+						newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : ''
+						newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = `"text-indent:2em ;font-size:${newVal.fontSize}px; color: #5d5d5d"` : styleconteent = "'font-size:"+newVal.fontSize+"px ; line-height:"+newVal.lineHeight*newVal.fontSize+"px;  color: #5d5d5d'"
+						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[i][j].list + "</p>"
+					}
+					var page1 = i+1
+					var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
+					var tagHtml = "<div style='padding:0 18px; height:"+this.height+"px'>"+ conntentHtml +"<div style='text-align:center; color:#777' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
+					// $("#flipbook").append(tagHtml);
+					if (!$("#flipbook").turn('hasPage', i+2)) {
+					        // Create an element for this page
+					        var element = $('<div />').html('');
+					        // Add the page
+					        $("#flipbook").turn('addPage', element, i+2);
+					        element.html(tagHtml);
+					}
+				}
+				// 如果有阅读缓存
+				if(newVal.oldReadPage>0){
+					$("#flipbook").turn('page', newVal.oldReadPage+1)
+				}else{
+					$("#flipbook").turn('page', 2)
+				}
+				
+			},			
+			onClick(event, ownerInstance) {
+				if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
+					//console.log('点击了左侧')
+					if($("#flipbook").turn('page') == 1){ //第一页
+					// console.log('切换到下一章节')
+						//console.log('第一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'prev'
+						})						
+					}else{
+						// 不是第一页
+					$("#flipbook").turn("previous")
+					ownerInstance.callMethod('onViewClick', {
+						curpage: $("#flipbook").turn('page')-1,
+						chapterid : ''
+					})
+					}
+				}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
+					//	console.log('点击了右侧')								
+					if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页
+						// console.log('切换到下一章节')
+						// console.log('最后一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'next'
+						})						
+					}else{
+						// 不是最后一页						
+						$("#flipbook").turn("next")	
+						ownerInstance.callMethod('onViewClick', {
+							curpage: $("#flipbook").turn('page')-1,
+							chapterid: '',
+						})
+						
+					}
+					} else{
+						// console.log('点击了中间')
+						// 双击
+						this.touchNum++
+						if (this.touchNum == 0) {} else {
+							if (this.touchNum > 1) {
+								clearTimeout(this.touchTime)
+								//单击事件
+								this.touchTime = setTimeout(() => {
+									this.touchNum = 0
+								}, 250)
+								console.log('双击')
+								ownerInstance.callMethod('showMenuCall', {
+									menuShow:true
+								})								
+							} else {
+								clearTimeout(this.touchTime)
+								this.touchTime = setTimeout(() => {
+									//双击或则多次点击事件
+									this.touchNum = 0
+								}, 250)
+								//console.log('单击')
+							}
+						
+						}
+						// end
+						
+					}	
+				
+				},				
+			onTurn() {
+				$("#flipbook").turn({
+					autoCenter: true,
+					display: 'single',
+					height: this.height,
+					width: this.width,
+					elevation: 50,
+					duration:500,
+					gradients: true,
+					when: {
+							turning: function(event, page, pageObject) {
+								// 翻页时
+							// this.curPage = page
+							// console.log(event, page, pageObject,this.curPage)
+						},	}
+				});				
+			}
+			
+		}		
+	}
+</script>
+<style>
+	/* .container1{background-color: #000;} */
+	.buts{width: 100%; display:flex; }
+	.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
+</style>
+<style lang="scss" scoped>	
+	@import url("@/pages/yRead/iconfont.css");
+	// turnjs
+	/// .shouhang{text-indent: 2em;color: red;}
+	.flipbook-viewport{overflow:hidden;width:100%;height:100%;
+		.container{display: flex;justify-content: center;align-items: center;margin: 0 auto;}.flipbook ::v-deep .page{background-color: white;background-repeat: no-repeat;background-size: 100% 100%;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);img {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;}}.shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;}
+	}
+	// end
+	.page-wrapper{background-color: #fff;}
+	#flipbook {
+		view {
+			p {
+				padding: 0 10px;
+			}
+		}
+	}
+
+	.menu-top {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		overflow: hidden;
+		background-color: #fff;
+		// transition: top .3s;
+		display: flex;
+		align-items: center;
+		height: 66rpx;
+		// .head {
+		// 	position: relative;
+		// 	display: flex;
+		// 	height: 40px;
+		// 	width: 100%; margin-top:0rpx;
+		// 	line-height: 10px;
+		// 	color: #fff;
+		// }
+
+		.back {
+			width: 100%;
+
+			// background-color: #333;
+			.backiconfont {
+				margin-top: 1px;
+			}
+		}
+	}
+
+	.setMenu {
+		text-align: center;
+		padding: 20px 10px
+	}
+
+	.showImgs {
+		float: right;
+		padding-right: 3px;
+		margin-right: 10px;
+		width: 30px;
+		font-size: 15px;
+		border: 1px solid #6aa84f;
+		height: 30px;
+		line-height: 30px;
+		/* color: red; */
+		border-radius: 15px;
+	}
+
+
+	.chapterImgTitle {
+		display: block;
+		;
+		color: #636363;
+		text-align: center;
+		font-size: 30rpx;
+		margin: 10px 0;
+	}
+
+	.scroll-view_H {
+		white-space: nowrap;
+		width: 100%;
+
+		.scroll-view-item_H {
+			display: inline-block;
+			width: 100%;
+			//height: 300rpx;
+			//line-height: 300rpx;
+			text-align: center;
+			font-size: 36rpx;
+		}
+
+		.imgBox {
+			height: 500rpx;
+			overflow: hidden;
+			padding: 10px;
+			// img{height: 300rpx !important; width: unset;}
+		}
+	}
+
+	.scroll-Y {
+		height: 600px;
+	}
+
+	page {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		opacity: 0;
+	}
+
+	.action {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+
+		.item {
+			flex: 1;
+			height: 100%;
+		}
+	}
+
+	.nothingShow {
+		display: block;
+		font-size: 24rpx;
+		color: #666;
+		margin: 10px 0;
+		text-align: center;
+	}
+
+	.listenitem {
+		width: 150rpx;
+		height: 150rpx;
+		color: #fff;
+		background-color: #636363;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 150rpx;
+		font-size: 30px;
+		font-weight: 700;
+		position: fixed;
+		right: 30rpx;
+		bottom: 280rpx;
+		z-index: 9999;
+	}
+
+	.audio_menu {
+		width: 200rpx;
+		height: 100rpx;
+		position: fixed;
+		bottom: 280rpx;
+		background-color: #636363;
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-radius: 50rpx;
+
+		.audioSymbol {
+			padding: 0 20rpx;
+		}
+	}
+
+	.verticalbox {
+		position: fixed;
+		top: 20rpx;
+		left: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		padding: 0px 20px;
+		height: 100%;
+		width: 100%;
+		background-color: #fff;
+		overflow: hidden;
+
+		.chapter {
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+			line-height: 30px;
+		}
+
+		.bottom-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+		}
+
+		.content {
+			flex: 1 1 auto;
+
+			.inner-box {
+				.book-inner {}
+
+
+			}
+		}
+	}
+
+	.highlight {
+		color: #e5d6a0 !important;
+		// padding: 10rpx 20rpx;
+		// border-radius: 10rpx;
+		// background-color: #cbcbcb;
+	}
+
+	.fhighlight {}
+
+	.container {
+		position: fixed;
+		top: 64rpx;
+		left: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		height: 96%;
+		width: 100%;
+		background-color: #f7faf9;
+		overflow: hidden;
+
+		.chapter {
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+			line-height: 30px;
+			padding-left: 48rpx;
+		}
+
+		.bottom-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 30px;
+			width: 100%;
+		}
+
+		.bottom-bar1 {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 14px;
+			color: $minor-text-color;
+			height: 55px;
+			width: 324px;
+		}
+
+		.content {
+			flex: 1 1 auto;
+			overflow: hidden;
+
+			.inner-box {
+				overflow: hidden;
+
+				.book-inner {
+					// display:block;
+					// text-indent:32rpx;
+				}
+
+			}
+		}
+
+	}
+
+	.container0 {
+		background-color: #f7faf9;
+		background-size: 100% 100%;
+		position: fixed;
+	}
+
+	.container1 {
+		background-color: #000;
+	}
+.directory {
+			position: fixed;
+			top: 0;
+			display: flex;
+			flex-flow: column;
+			width: 600rpx;
+			height: 100%; padding-right: 10rpx;
+			transition: left .1s;
+
+			.bookname {
+				padding: 90rpx 0 70rpx 20rpx;
+				height: 60rpx;
+				font-size: 40rpx;
+				font-weight: bold;
+			}
+
+			.directory-listItem {
+				display: flex;
+				align-items: center;
+				padding-left: 20rpx;
+				height: 90rpx;
+				font-size: 35rpx;
+				border-bottom: #eee solid 1rpx;
+			}
+
+			.active {
+				color: red
+			}
+		}
+	.menu {
+		// position: fixed;
+		// top: 0;
+		// left: 0;
+		// z-index: 300;
+		// width: 100%;
+		// transition: all .3s;
+		.menu-bottom {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			background-color: #333;
+			transition: bottom .3s;
+			color: #fff;
+
+			.show-chapter {
+				position: absolute;
+				left: 50%;
+				top: 0;
+				transform: translate(-50%, -110%);
+				padding: 5px 10px;
+				line-height: 20px;
+				border-radius: 10rpx;
+				font-size: 13px;
+				background-color: #333;
+			}
+
+			.progress-box {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 20px;
+				height: 50px;
+				width: 100%;
+				font-size: 15px;
+			}
+
+			.items-box {
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				height: 80px;
+				width: 100%;
+
+				.item-box {
+					display: flex;
+					flex-flow: column;
+					justify-content: center;
+					align-items: center;
+					height: 100%;
+				}
+			}
+		}
+
+		.setting {
+			// position: absolute;
+			left: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			padding: 10px 20px;
+			width: 100%;
+			// color: #fff;
+			// background-color: #333;
+			transition: bottom .3s;
+
+			.item {
+				display: flex;
+				align-items: center;
+				height: 70px;
+
+				.item-name {
+					padding: 10px;
+					color: #333;
+					font-size: 12px;
+				}
+
+				.icon {
+					margin-right: 10px;
+					padding: 5px 20px;
+					font-size: 15px;
+					height: 32px;
+					line-height: 20px;
+					width: auto;
+					text-align: center;
+					border-radius: 20px;
+					border: #333 solid 1px;
+				}
+
+				.type-setting {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+					align-items: center;
+					margin-right: 10px;
+					padding: 5px;
+					height: 30px;
+					width: 30px;
+					border-radius: 5px;
+					border: #333 solid 1px;
+
+					.line {
+						width: 100%;
+						border-bottom: #333 solid 1px;
+					}
+
+					.lineActive {
+						width: 100%;
+						border-bottom: #FF9900 solid 1px;
+					}
+				}
+
+				.active {
+					color: #FF9900;
+					border: #FF9900 solid 1px;
+				}
+			}
+		}
+	}
+
+	.cover {
+		image {
+			height: 400rpx;
+			width: 300rpx;
+			background-color: #eee;
+		}
+	}
+
+	.pageback_container {
+		z-index: 103;
+		position: fixed;
+		right: 2%;
+		top: 66rpx;
+		height: 96%;
+		max-width: 50vw;
+		// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+		filter: drop-shadow(5px 0px 8px rgba(0, 0, 0, 0.3));
+
+		.pageback {
+			clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
+			width: 100%;
+			height: 100%;
+			background-image: linear-gradient(to right, #fcfcfc 0, #141414 90%);
+			background-size: 350% 100%;
+		}
+	}
+
+	.page-section-spacing {
+		margin-top: 60rpx;
+	}
+
+	.scroll-view_H {
+		white-space: nowrap;
+	}
+
+	.scroll-view-item {
+		height: 300rpx;
+	}
+
+	.backiconfont {
+		width: 20px;
+		margin-left: 10px;
+		margin-top: 10px;
+		height: 20px;
+		background-color: rgba(255, 255, 255, .8);
+		border-radius: 100%;
+	}
+
+	.scroll-view-item_H {
+		display: inline-block;
+		width: 100%;
+		height: 300rpx;
+	}
+
+	.jushou {
+		text-indent: 2em;
+	}
+
+	.item_wrap {
+		flex-wrap: wrap;
+	}
+</style>
diff --git a/新建 文本文档.txt b/新建 文本文档.txt
new file mode 100644
index 0000000..56e466b
--- /dev/null
+++ b/新建 文本文档.txt	
@@ -0,0 +1,44 @@
+app 描述：疯子读书是一款专业的中医线上读书平台。中医古籍、中医经典，各家学说，各种中医类型的电子书。疯子读书不止可以看，还可以听，APP内还具有听书功能，解放您的眼睛。
+
+简短概括：一款专业的中医线上读书软件
+
+公司名称：天津众妙之门科技有限公司
+
+
+隐私政策地址：https://main.nuttyreading.com/privacy.html
+
+各个平台账号密码：
+天津众妙之门科技有限公司【疯子阅读】
+
+1、阿里云  https://account.aliyun.com/
+      账号：众妙之门花生享阅
+      密码：FZDS1234fzds
+      手机：18526084267
+2、苹果【每年有会费688需要缴纳】
+      apple id：huashengdingyue@163.com
+      密码：HSDY1234hsdy
+      账号主体联系人：皮诺曦
+3、华为开放平台 https://id1.cloud.huawei.com/
+      账号：18526084267
+      密码：HSXY1234hsxy
+4、腾讯应用宝 https://open.qq.com/
+      huashengdingyue@163.com
+      账号：2711345245
+      密码：HSDY1234hsdy
+5、小米 
+      账号：13110039505
+      密码：HSXY1234hsxy
+      绑定邮箱：huashengdingyue@163.com
+6、百度智能云 https://cloud.baidu.com/
+     （文字转语音阅读“听书”）
+     账户：天津众妙之门
+     密码：HSDY1234hsdy
+7、快递100
+      账户名：fengzidushu
+      密码：wu751019
+8、疯子读书163邮箱
+      邮箱账号：fengzidushu@163.com
+      邮箱密码：FZDS1234fzds
+9、微信开放平台
+      账号：fengzidushu@163.com
+      密码：FZDS1234fzds
\ No newline at end of file