3573 lines
98 KiB
Vue
3573 lines
98 KiB
Vue
<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
|
||
<!-- 重要事项：
|
||
1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
|
||
如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
|
||
2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
|
||
3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
|
||
-->
|
||
<template>
|
||
<view style="height: 100%;">
|
||
<!-- 菜单层包含返回按钮的上半部分 -->
|
||
<view class="menu-top" :style="{ height: `${statusBarHeight}px` }">
|
||
<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>
|
||
<!-- 仿真翻页1 -->
|
||
<view v-show="isSimulation" class="flipbook-viewport" :rect="rect"
|
||
:change:rect="updateRenderData"
|
||
:SimulationText="SimulationText" :change:SimulationText="updateSimulationText" @touchend="openEnd"
|
||
@touchstart="openStart">
|
||
<view class="container across">
|
||
<view class="flipbook" id="flipbook">
|
||
<view style="background-color: #fff;" v-for="(item, index) in SimulationText" :key="index">
|
||
<view class="chapter">{{ curPage.chapterName }}</view>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- end -->
|
||
<!-- 模拟页面背景 -->
|
||
<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;"></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;"></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';
|
||
|
||
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
|
||
},
|
||
scrollTop1: 0,
|
||
bookName: '我是书名',
|
||
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, //定时器清除
|
||
|
||
}
|
||
},
|
||
|
||
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: {
|
||
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
|
||
} 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
|
||
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 = 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.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
|
||
}, 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
|
||
} else {
|
||
this.music.play()
|
||
this.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
|
||
},
|
||
|
||
/**
|
||
* 计算上一章页数,并翻页（如果有）
|
||
**/
|
||
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()
|
||
},
|
||
|
||
/**
|
||
* 加大字体
|
||
**/
|
||
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'
|
||
})
|
||
}
|
||
},
|
||
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: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.onTurn();
|
||
},
|
||
methods: {
|
||
updateRenderData(newVal, oldVal) {
|
||
let {
|
||
width,
|
||
height
|
||
} = newVal;
|
||
this.width = width;
|
||
this.height = height;
|
||
},
|
||
updateSimulationText(newVal, oldVal) {
|
||
//this.onTurn();
|
||
this.SimulationText = newVal
|
||
console.log('更新数组', newVal)
|
||
if (newVal.length > 0) this.onTurn();
|
||
},
|
||
onTurn() {
|
||
$("#flipbook").turn({
|
||
autoCenter: true,
|
||
display: 'single',
|
||
height: this.height,
|
||
width: this.width,
|
||
elevation: 50,
|
||
gradients: true,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import url("@/pages/yRead/iconfont.css");
|
||
|
||
#flipbook {
|
||
view {
|
||
p {
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-top {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
// background-color: #333;
|
||
transition: top .3s;
|
||
|
||
// .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: 0px 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>
|