zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
84a2505e2aa5069849d54c87a10f8a9664fdbf98
nuttyreading-html/pages/yRead/angbook.vue
@fawn-nine fc9bca37c1 听书页面
2023-07-19 17:41:16 +08:00

3893 lines
110 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
<!-- 重要事项：
1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
-->
<template>
<view style="height: 100%;">
<!-- 菜单层包含返回按钮的上半部分1 -->
<view class="menu-top" >
<view class="back">
<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
</view>
</view>
<!-- 仅用于计算（结构和样式请和阅读页一致）1 -->
<view class="container hidden">
<view class="chapter">章节名</view>
<view id="content" class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }">
<view class="book-inner" id="preChapter"
:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.content"></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.content">
</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.content"></p>
</view>
</view>
</view>
<view class="bottom-bar">显示电量、页码</view>
</view>
<!-- 垂直翻页 -->
<!-- @click="showMenu" -->
<!-- 横向翻页 -->
<view class="across" >
<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
<view class="chantong" style="display: none;">
<!-- 上一页 -->
<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
:style="{
zIndex: turnType == 0 && pageBackRef.before ? 100: 102,
transform: turnType == 0 && pageBackRef.before ? 'translate(0, 0)' : `translate${prePage.pageTranslate[turnType]}`,
transition: `transform ${showAnimation ? turnPageTime : 0}s`,
boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
}">
<!-- 章节名 -->
<view class="chapter">{{ prePage.chapterName }}</view>
<!-- 外层class="content"用于计算阅读部分的高度 -->
<view class="content">
<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
<view class="book-inner">
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
</p>
</view>
</view>
<view
style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
v-else>
付费章节
<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
</view>
</view>
<view class="bottom-bar1">
<!-- 时间 -->
<view>{{ systemTimeStr }}</view>
<!-- 页码 -->
<view>{{ prePage.pageNum + 1 }}/{{ prePage.totalPage }}</view>
<!-- 电量 -->
<view>
<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
</view>
</view>
</view>
<!-- 本页 -->
<view ref="curPageRef" class="container mypages"
:class="{ container0: background === 1, container1: background === 2 }" :style="{
zIndex: 101,
transform: `translate${curPage.pageTranslate[turnType]}`,
transition: `transform ${showAnimation ? turnPageTime : 0}s`,
boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
}" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" @touchcancel="touchcancel">
<!-- 章节名 -->
<view class="chapter">{{ curPage.chapterName }}
<uni-icons v-if="newchapterImgList && newchapterImgList.length > 0" id="showImgs"
@click="showImgHandle" color="#6aa84f" class="showImgs" type="images" size="20"></uni-icons>
</view>
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
<view class="book-inner">
<!-- <pre>
{{curPage.text}}
</pre> -->
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
</p>
</view>
</view>
<view
style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
v-else>
付费章节
<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
@touchend.stop="buyBook">去购买</view>
</view>
</view>
<view class="bottom-bar1">
<!-- 时间 -->
<view>{{ systemTimeStr }}</view>
<!-- 页码 -->
<view>{{ curPage.pageNum + 1 }}/{{ curPage.totalPage }}</view>
<!-- 电量 -->
<view>
<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
</view>
</view>
</view>
<!-- 下一页-->
<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
:style="{
zIndex: 100,
transform: `translate${nextPage.pageTranslate[turnType]}`,
transition: `transform ${showAnimation ? turnPageTime : 0}s`,
boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
}">
<!-- 章节名 -->
<view class="chapter">{{ nextPage.chapterName }}</view>
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="nextPage.canRead">
<view class="book-inner">
<p v-for="(item, index) in nextPage.text" v-html="item.list" :key="index"
:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
</p>
</view>
</view>
<view
style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
v-else>
付费章节
<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
</view>
</view>
<view class="bottom-bar1">
<!-- 时间 -->
<view>{{ systemTimeStr }}</view>
<!-- 页码 -->
<view>{{ nextPage.pageNum + 1 }}/{{ nextPage.totalPage }}</view>
<!-- 电量 -->
<view>
<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
</view>
</view>
</view>
</view>
<!-- 仿真翻页 -->
<view v-if="isSimulation" class="flipbook-viewport"
:rect="rect"
:change:rect="updateRenderData"
:readerSet = "readerSet"
:change:readerSet="updateReaderSet"
:musicItem="musicItem"
:change:musicItem="updateMusic"
:oldReadSpeed="oldReadSpeed"
:change:oldReadSpeed="updateReadPercent"
:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
@touchend="turnjs.onClick"
>
<!-- <view class="container across" @touchend="openEnd" @touchstart="openStart"> -->
<view class="container across" >
<view class="flipbook" id="flipbook" >
<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; color: #666; ">->点击两侧开启阅读<-</p> </div></div>
<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
<div class="chapter">{{ curPage.chapterName }}</div>
<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
:class="{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
</p>
</div> -->
</view>
</view>
</view>
<!-- 模拟页面背景 -->
<view class v-if='turnType == 0 && !pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
width: `${pageBackRef.width}`,right: `${pageBackRef.right}` }]" class="pageback_container">
<view class="pageback"></view>
</view>
<view class v-if='turnType == 0 && pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
width: `${pageBackRef.width}`,left: `${pageBackRef.left}` }]" class="pageback_container">
<view class="pageback"></view>
</view>
</view>
<!-- 听书按钮 -->
<view class="listenbook" v-if="musicManuShow">
<view class="listenitem" @click="listenHandle">听</view>
</view>
<!-- 暂停按钮 -->
<view class="audio_menu" v-if="isAudioMenu">
<view class="pause audioSymbol" v-if="!isPause" @click="audioPause()">
<u-icon name="pause" color="#fff" size="28"></u-icon>
</view>
<view class="right audioSymbol" v-else @click="audioPause()">
<u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
</view>
<view class="audioSymbol" @click="offAudio">
<u-icon name="close" color="#fff" size="28"></u-icon>
</view>
</view>
<!-- 菜单层 -->
<view class="menu" :style="{ height: `100%`, width: `${windowWidth}px` }" v-if="menuShow" @touchend="closeMenu">
<!-- 菜单层包含返回按钮的上半部分 -->
<view class="menu-top" :style="{ height: `${statusBarHeight + 40}px`, top: itemShow ? 0 : `-100%` }"
@touchend.stop>
<view :style="{ height: `${statusBarHeight}px` }"></view>
<view class="head">
<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
</view>
</view>
<!-- 菜单主体 -->
<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }" @touchend.stop>
<!-- 用于显示章节进度 -->
<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}</view>
<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
<!-- 章节进度条 -->
<view class="progress-box">
<text style="" @click="goPreChapter">上一章</text>
<view
style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
</view>
<text @click="goNextChapter">下一章</text>
</view>
<view class="items-box">
<view class="item-box" @click="openDirectory">
<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
<text style="font-size: 13px;">目录</text>
</view>
<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
<text style="font-size: 13px;">夜间</text>
</view>
<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
<text style="font-size: 13px;">日间</text>
</view>
<view class="item-box" @click="openSetting">
<text class="iconfont" style="font-size: 25px;">A</text>
<text style="font-size: 13px;">设置</text>
</view>
</view>
</view>
<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }" @touchend.stop>
<view class="item">
<view class="item-name">字号</view>
<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
</view>
<view class="item">
<view class="item-name">排版</view>
<view class="type-setting" :class="{ active: lineHeight === 4 }" @click="changeLineHeight(4)">
<view class="line" :class="{ lineActive: lineHeight === 4 }" v-for="i in 5" :key="i"></view>
</view>
<view class="type-setting" :class="{ active: lineHeight === 5 }" @click="changeLineHeight(5)">
<view class="line" :class="{ lineActive: lineHeight === 5 }" v-for="i in 4" :key="i"></view>
</view>
<view class="type-setting" :class="{ active: lineHeight === 6 }" @click="changeLineHeight(6)">
<view class="line" :class="{ lineActive: lineHeight === 6 }" v-for="i in 3" :key="i"></view>
</view>
</view>
<view class="item">
<view class="item-name">背景</view>
<view class="icon" style="" :class="{ active: background === 1 }" @click="changeBackground(1)">
</view>
<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
@click="changeBackground(2)"></view>
</view>
</view>
</view>
<!-- 目录层 -->
<u-popup class="directory" mode="left" v-if="directoryShowBefore" :show="directoryShowBefore" @close="directoryShowBefore=false">
<view class="tanchu" style="padding-right: 10px; width: 500rpx;">
<view class="bookname">{{ bookName }}</view>
<!-- :size="40"——每一栏高度为40px :scrollHeight="windowHeight - 60"——书名的高度为60px -->
<virtual-list :items="directoryList" :size="40" :remain="16" :active="curChapter.chapterIndex"
:scrollHeight="windowHeight - 60">
<template v-slot="{ item, active }">
<view class="directory-listItem" :class="{ active: item.index == active }"
@click="goToChapter(item)">{{ item.name }}</view>
</template>
</virtual-list>
</view>
</u-popup>
<!-- 图片弹窗 -->
<u-popup :show="imgsShow" :round="10" @close="imgsShow=false">
<view class="tanchu" v-if="newchapterImgList">
<text class="chapterImgTitle">当前章节共 {{newchapterImgList.length}} 张图片</text>
<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="toRight">
<view v-for="(item,index) in newchapterImgList" class="scroll-view-item_H">
<view class="imgBox">
<view style="height:90%" @click="clickImg(newchapterImgList,index)">
<img :src="item" alt="" height="100%">
</view>
<text style="font-size: 24rpx; color: #666;">第 {{index + 1}} 张</text>
</view>
</view>
</scroll-view>
</view>
</u-popup>
<u-popup :show="setShow" :round="10" @close="setShow = false">
<view class="setMenu">
<u-grid :border="false" col="3" @click="clickSet">
<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="30"></u-icon>
<text class="grid-text" style="color: #666;">{{baseListItem.title}}</text>
</u-grid-item>
</u-grid>
<view class="menu">
<!-- 菜单主体 -->
<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }">
<!-- 用于显示章节进度 -->
<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}
</view>
<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>
<!-- 章节进度条 -->
<view class="progress-box">
<text style="" @click="goPreChapter">上一章</text>
<view
style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
</view>
<text @click="goNextChapter">下一章</text>
</view>
<view class="items-box">
<view class="item-box" @click="openDirectory">
<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
<text style="font-size: 13px;">目录</text>
</view>
<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
<text style="font-size: 13px;">夜间</text>
</view>
<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
<text style="font-size: 13px;">日间</text>
</view>
<view class="item-box" @click="openSetting">
<text class="iconfont" style="font-size: 25px;">A</text>
<text style="font-size: 13px;">设置</text>
</view>
</view>
</view>
<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }">
<view class="item">
<view class="item-name">字号</view>
<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
</view>
<view class="item">
<view class="item-name">排版</view>
<!-- 这个行高没有必要存在，不符合阅读条件 -->
<!-- <view class="type-setting" :class="{ active: lineHeight === 1 }"
@click="changeLineHeight(1)">
<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i">
</view>
</view> -->
<view class="type-setting" :class="{ active: lineHeight === 1.5 }"
@click="changeLineHeight(1.5)">
<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i">
</view>
</view>
<view class="type-setting" :class="{ active: lineHeight === 2 }"
@click="changeLineHeight(2)">
<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i">
</view>
</view>
</view>
<view class="item">
<view class="item-name">背景</view>
<view class="icon" style="" :class="{ active: background === 1 }"
@click="changeBackground(1)">
</view>
<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
@click="changeBackground(2)"></view>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import battery from '../../components/battery/battery.vue'
import virtualList from '../../components/virtualList/virtualList.vue'
// 引入翻页效果动画
import $ from 'jquery'
import {
dateToStr
} from '../../utils/utils.js'
import {
mapState
} from 'vuex';
import $http from '../../config/requestConfig';
import { nextTick } from "vue";
let copyBookText = []
let preText = []
let nextText = []
let imglist = []
// var music = uni.createInnerAudioContext();
export default {
components: {
battery,
virtualList
},
data() {
return {
baseList: [{
name: 'photo',
title: '章节图片'
},
{
name: 'list-dot',
title: '目 录'
},
{
name: 'play-circle',
title: '听 书'
}
],
imgsShow: false,
nothingShow: false,
// 本章图片列表
chapterImgList: [],
newchapterImgList: [],
preChapterTotal: null,
nextChapterTotal: null,
// preBookText = []
oldReadSpeed: { // 本地初始阅读进度
precent: null,
updateReadId: null,
readPage:0
},
scrollTop1: 0,
bookName: '我是书名',
bookFengMian:'', // 书籍封面
bookId: 1,
bookId_mark: '',
history: { //本书历史记录
chapterIndex: 0,
progress: 0
},
directoryList: [], //目录列表
currentPage: 0, //当前页
read: 0,
innerHeight: 0, //截取至整行的最大高度
preChapter: { //上一章数据
ready: false, //是否准备完毕
chapterIndex: '',
chapterName: '', //章节名称
text: '',
totalPage: '',
canRead: true
},
curChapter: { //本一章数据
chapterIndex: '',
chapterName: '',
text: '',
totalPage: '',
canRead: true
},
nextChapter: { //下一章数据
ready: false, //是否准备完毕
chapterIndex: '',
chapterName: '',
text: '',
totalPage: '',
canRead: true
},
tmpChapter: { //暂存章节内容
text: [],
canRead: true
},
cover: { //封面的状态
pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
},
prePage: { //上一页数据
ready: false, //是否准备完毕
chapterName: '',
text: '',
pageNum: '',
totalPage: 1,
pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
canRead: true,
isPre: false
},
curPage: { //本页数据
ready: false, //是否准备完毕
chapterName: '',
text: '',
pageNum: 1,
totalPage: 1,
pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
canRead: true,
},
nextPage: { //下一页数据
ready: false, //是否准备完毕
chapterName: '',
text: '',
pageNum: '',
totalPage: '',
pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
canRead: true
},
verticalData: {
ready: false, //是否准备完毕
chapterName: '',
text: '',
pageNum: '',
totalPage: '',
pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
canRead: true
},
next: false, //用户是否正在翻下一页
pre: false, //用户是否正在翻上一页
waitForNext: false, //是否正在等待下一页准备完毕后跳转
waitForPre: false, //是否正在等待上一页准备完毕后跳转
waitForNextChapter: false, //是否正在等待下一章准备完毕后跳转
waitForPreChapter: false, //是否正在等待上一章准备完毕后跳转
showAnimation: false, //是否开启动画
showShadow: false, //是否显示页面阴影
isVertical: false, // 是否开启垂直阅读
down: false, // 用于scroll事件请求数据判断
windowWidth: 0, //可用屏幕宽度
windowHeight: 0, //可用屏幕高度
contentHeight: 0, //阅读区域高度
scrollTop: 0, // 垂直阅读 scrolltop
platform: '', //设备
batteryState: '', //电池状态
batteryLevel: 100, //电量
systemTime: '', //系统时间
systemTimeStr: '', //系统时间字符串
statusBarHeight: 0, //状态栏高度
pixelRatio: '', //设备像素比
touchStartX: 0, // 触屏起始点x
touchX: 0, // 瞬时触屏点x
delta: 0, // 手指瞬时位移
isTouch: false, // 是否处于触屏状态
curPageTranslate: 0, // 本页的移动位置
touchStartY: 0, // 触屏起始点y
touchY: 0, // 瞬时触屏点y
sliderValue: 0, // scroll事件赋值
menuShow: false, //菜单栏box是否渲染
itemShow: false, // 菜单栏动画控制
settingShow: false, //设置栏动画控制
directoryShow: false, //目录动画控制
directoryShowBefore: false, // 目录渲染
turnPageTime: .5, //翻页动画时间
biaodian: ['，', ':', '、', ';', '。', '.','？','》','”',')','"'], //匹配的标点
maxFontSize: 30, //最大字体大小，px
minFontSize: 14, //最小字体大小，px
turnType: 4, //翻页方式
NumCol: '', // 一章多少行
colSize: '', // 一行多少字
fontSize: '', //字体大小，
simplified: '', //是否简体
lineHeight: '', //行高，注意是fontSize的倍数
background: '', //背景
colorList: ['#000', '#666'], //与背景对应的字体颜色
highlight: "null", // 字体高亮
fhighlight: false, // 左右的高亮
chapterProgress: 0, //‘章节进度条’的参数
progressTouched: false, //是否正在点击‘章节进度条’
highlightTimer: '', // 高亮定时器名字
domList: [], // dom列表
domIndex: 0, // dom下标
music: null, // 创建audio
musicManuShow: false, // 听书按钮是否显示
isPause: false, // 是否暂停
isAudioMenu: false, // 是否展示听书菜单
oldType: null,
detail: {
title: "",
data: [],
freeChapterCount: 0,
isBuy: 0,
isVip: 0,
chapterNum:null, // 阅读章节数
},
isVerticalHua: false,
speedTrue: false, //判断是否更新进度
speedData: {
bookId: 0,
chapter_id: 0,
chapter_name: '',
precent: '',
content_id: 0
},
updateReadId: 0,
newData: [],
pageBackRef: {
transition: "unset",
left: 0,
right: 0,
width: 0,
before: false
},
topChange: 0,
scroll_end: false,
musicPlaying: false, // 正在播放音频
// 仿真翻页参数
width: uni.getSystemInfoSync().windowWidth,
height: '800px',
text: 'hello',
isSimulation: true, // 仿真翻页模式
SimulationTextObj : { // 仿真翻页内容
'SimulationText' : [],
'fontSize' : '',
'lineHeight':'',
'oldReadPage':0
},
setShow: false, // 设置显示？
clientlast: null, //开始位置
touchNum: 0, //点击次数
touchTime: null, //定时器清除
musicItem:{
// 听书相关内容
musicIndexDom:0,
highlight: 'null',
musicPlaying:false,
page:0
},
readerSet:{
fontSize:'', // 字体大小，
lineHeight:'' ,// 行高，注意是fontSize的倍数
page:0,
background:''
}
}
},
onLoad(option) {
this.bookId_mark = option.Id
this.getSystemInfo()
this.bookMessage()
this.setStorage()
},
onUnload() {
// #ifdef APP-PLUS
// 退出全屏
plus.navigator.setFullscreen(false)
// #endif
this.setStorage()
},
onReady() {
// console.log('------------------------------')
// 单页禁止测滑返回
// #ifdef APP-PLUS
let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
currentWebview.setStyle({
popGesture: 'none'
})
// #endif
},
onHide() {
this.setStorage()
},
mounted() {
this.initPage()
},
computed: {
progress() { //章节的阅读进度
if (this.curChapter.totalPage === 1) {
return 0
}
return this.currentPage / (this.curChapter.totalPage - 1)
},
...mapState(['userInfo']),
rect() {
return {
width: this.width,
height: this.height
}
}
},
// watch: {
// changeBackground: { // 深度监听
// handler(newName, oldName) {
// console.log(newName)
// },
// immediate: true,
// deep: true
// }
// },
methods: {
_changeReaderSeting(){
this.readerSet.fontSize = this.fontSize, //字体大小，
this.readerSet.lineHeight = this.lineHeight //行高，注意是fontSize的倍数
},
changeMusicItem(){
this.musicItem.highlight = this.highlight,
this.musicItem.musicIndexDom = this.domIndex,
this.musicItem.musicPlaying = this.musicPlaying
},
openStart(e) {
//记录位置
this.clientlast = e.changedTouches[0];
},
openEnd(e) {
this.touchNum++
if (this.touchNum == 0) {} else {
if (this.touchNum > 1) {
clearTimeout(this.touchTime)
//单击事件
this.touchTime = setTimeout(() => {
this.touchNum = 0
}, 250)
console.log('双击')
this.setShow = true
// this.createAudio()
} else {
clearTimeout(this.touchTime)
this.touchTime = setTimeout(() => {
//双击或则多次点击事件
this.touchNum = 0
}, 250)
//console.log('单击')
}
}
},
clickImg(item, index) {
// 点击图片
let imgarr = this.newchapterImgList.map(item => item)
// console.log(imgarr, 'imgarr')
this.imgsShow = false
uni.previewImage({
current: index,
urls: imgarr
})
},
clickSet(name) {
// 点击图片
if (name == 0) {
// 章节图片
this.imgsShow = true
} else if (name == 1) {
// 目录
//this.openDirectory()
this.directoryShowBefore = true
this.directoryShow = true
this.$nextTick(function() {
console.log(4545,this.directoryShow)
})
} else if (name == 2) {
// 听书
this.listenHandle()
}
this.setShow = false
// this.$refs.uToast.success(`点击了第${name}个`)
// console.log(name,'imgarr')
},
toRight() {
this.nothingShow = true
},
showImgHandle() {
this.imgsShow = true
},
bookMessage() {
this.$http
.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
.then(res => {
this.bookName = res.book.name,
this.bookFengMian = res.book.images,
this.detail.freeChapterCount = res.book.freeChapterCount,
this.detail.isBuy = res.book.isBuy,
this.detail.isVip = res.book.isVip,
this.detail.chapterNum = res.book.chapterNum // 阅读章节数
//console.log('获取电子书详情', res)
});
},
counlSystemInfo() {
let that = this;
uni.getSystemInfo({
success: async function(res) {
let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
let screenWidth = res.screenWidth;
that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
.lineHeight)) //一屏总行 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')
},
nextmpforGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
let isbiaodian = false
nextText.map((res, index) => {
res.content = '' + res.content
if (res.content.length > colSize - 2) {
// 判断是否下一行以标点开始
let nextString = res.content.substr(colSize - 2, 1)
let haveBiao = 0
for (var i = 0; i < this.biaodian.length; i++) {
if (nextString == this.biaodian[i]) {
haveBiao = 1
}
}
//console.log(haveBiao, nextString, 'isbiaodian')
arr.push({
'paragraph': index,
'list': res.content.substr(0, colSize - 2 - haveBiao),
'level': 0,
class: 'jushou'
})
let text = res.content.substr(colSize - 2 - haveBiao)
that.aginForget(text, arr, colSize, index)
} else {
arr.push({
'paragraph': index,
list: res.content.substr(0, colSize - 2),
'level': 0,
class: 'jushou'
})
}
})
nextText = arr
// console.log(copyBookText,'copyBookText')
// this.getSizePage(NumCol)
},
//获取后面的字符，再去计算能放几行
aginForget(text, arr, colSize, index) {
let that = this;
let strBR = "</br>"
if (text.length > colSize) {
let nextString = text.substr(colSize, 1)
let haveBiao = 0
for (var i = 0; i < this.biaodian.length; i++) {
if (nextString == this.biaodian[i]) {
haveBiao = 1
}
}
arr.push({
'paragraph': index,
'list': text.substr(0, colSize - haveBiao),
'level': 0,
class: ''
})
let newText = text.substr(colSize - haveBiao)
that.aginForget(newText, arr, colSize, index)
} else {
arr.push({
'paragraph': index,
'list': text.substr(0, colSize),
'level': 0,
class: ''
})
// arr.push(strBR)
}
},
tmpforGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
let isbiaodian = false
this.tmpChapter.text.map((res, index) => {
res.content = '' + res.content
if (res.content.length > colSize - 2) {
// 判断是否下一行以标点开始
let nextString = res.content.substr(colSize - 2, 1)
let haveBiao = 0
for (var i = 0; i < this.biaodian.length; i++) {
if (nextString == this.biaodian[i]) {
haveBiao = 1
}
}
//console.log(haveBiao, nextString, 'isbiaodian')
arr.push({
'paragraph': index,
'list': res.content.substr(0, colSize - 2 - haveBiao),
'level': 0,
class: 'jushou'
})
let text = res.content.substr(colSize - 2 - haveBiao)
that.aginForget(text, arr, colSize, index)
} else {
arr.push({
'paragraph': index,
list: res.content.substr(0, colSize - 2),
'level': 0,
class: 'jushou'
})
}
})
this.tmpChapter.text = arr
// console.log(copyBookText,'copyBookText')
this.getSizePage(NumCol)
},
// 计算章节页数
getSizePage(NumCol) {
let that = this;
let arr = [],
newArr = []
copyBookText = copyBookText.filter((item, index) => {
if (item == '' || item == ' ' || item == ' ') {
} else {
return item
}
})
for (let i = 0; i < copyBookText.length; i++) {
newArr.push(copyBookText[i])
if (newArr.length < NumCol) {
} else {
arr.push(newArr)
newArr = []
}
}
arr.push(newArr)
copyBookText = arr // 每一页显示的内容
this.SimulationTextObj = {
SimulationText : arr,
fontSize : this.fontSize,
lineHeight : this.lineHeight,
oldReadPage: 0,
background:this.background
}
// this.hasSimulationText = true
console.log(this.SimulationText, 'SimulationText')
},
setStorage() {
let history = uni.getStorageSync('history')
if (typeof history !== 'object') {
history = []
}
let have = false
history.forEach((value) => {
if (value.bookId === this.bookId) {
have = true
value.chapterIndex = this.curChapter.chapterIndex
value.progress = this.progress
}
})
console.log(history, '缓存')
if (!have) {
// 设备内没有当前的缓存数据时
history.push({
bookId: this.bookId,
chapterIndex: this.curChapter.chapterIndex,
progress: this.progress
})
//this.updateReadRateUl() // 更新进度
}
// 没有阅读过
// 将进度存到数据库
this.saveReadRateUl()
console.log('执行save')
// oldReadSpeed:{ // 本地初始阅读进度
// chapterIndex: null,
// updateReadId: null
// },
if ((this.oldReadSpeed.precent / 10) < this.progress) {
this.speedData.precent = this.progress
this.speedData.bookId = this.bookId_mark;
this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
//console.log('符合更新条件')
// 阅读进度大于原进度时
this.updateReadRateUl()
}
uni.setStorageSync('history', history)
},
/**
* 返回上一页面
**/
back() {
uni.navigateBack()
},
/**
* 获取设备信息
**/
getSystemInfo() {
const {
windowWidth,
windowHeight,
statusBarHeight,
platform,
pixelRatio
} = uni.getSystemInfoSync()
//获取一些必要的设备参数
this.statusBarHeight = statusBarHeight
this.windowWidth = windowWidth
this.windowHeight = windowHeight
this.pixelRatio = pixelRatio
this.platform = platform
// #ifdef APP-PLUS
// 全屏
plus.navigator.setFullscreen(true)
// 取消ios左滑返回
let page = this.$mp.page.$getAppWebview()
page.setStyle({
popGesture: 'none'
})
if (this.platform === 'ios') {
// 获取ios电量
let UIDevice = plus.ios.import("UIDevice")
let dev = UIDevice.currentDevice()
if (!dev.isBatteryMonitoringEnabled()) {
dev.setBatteryMonitoringEnabled(true)
}
setInterval(() => {
this.batteryState = dev.batteryState()
this.batteryLevel = dev.batteryLevel() * 100
}, 1000)
} else {
// 获取安卓电量
let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass('android.content.Intent');
let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: (context, intent) => {
let action = intent.getAction();
if (action == Intent.ACTION_BATTERY_CHANGED) {
this.batteryState = intent.getIntExtra("status", 0); //电池状态
this.batteryLevel = intent.getIntExtra("level", 0); //电量
}
}
});
let IntentFilter = plus.android.importClass('android.content.IntentFilter');
let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
main.registerReceiver(recevier, filter);
}
// #endif
// 设置时间
let date = new Date();
this.systemTime = Date.parse(date);
this.systemTimeStr = dateToStr(this.systemTime);
setInterval(() => {
this.systemTime += 60000;
this.systemTimeStr = dateToStr(this.systemTime);
}, 60000)
// 获取字体、排版等信息
//可能缓存在前端可能从后端拿，如果是异步注意同步处理
this.fontSize = uni.getStorageSync('fontSize')
if (typeof this.fontSize !== 'number') {
this.fontSize = 18
}
this.simplified = uni.getStorageSync('simplified')
if (typeof this.simplified !== 'number') {
this.simplified = 1
}
this.lineHeight = uni.getStorageSync('lineHeight')
if (typeof this.lineHeight !== 'number') {
this.lineHeight = 1.5
}
this.background = uni.getStorageSync('background')
if (typeof this.background !== 'number') {
this.background = 1
}
// this.readerSet.background = this.background
this.turnType = uni.getStorageSync('turnType')
if (this.turnType == 2) {
this.isVertical = true;
}
if (this.turnType == 3) {
this.isVerticalHua = true;
}
if (typeof this.turnType !== 'number') {
this.turnType = 0
}
let history = uni.getStorageSync('history')
if (typeof history !== 'object') {
history = []
}
history.forEach((value) => {
if (value.bookId === this.bookId) {
this.history = value
}
})
this.$nextTick(()=>{
this._changeReaderSeting()
})
/*****************************************/
/*****************************************/
/*****************************************/
},
/**
* 获取数据并计算页面
**/
async initPage() {
uni.showLoading({
title: '加载中',
mask: true
})
this.cover.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
await this.calcHeight()
await this.getDirectoryList()
await this.getReadRateUl()
if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
this.history.chapterIndex = 0
}
await this.getThreeChapter(this.history.chapterIndex)
// this.counlSystemInfo()
let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
this.oldReadSpeed.readPage = page
this.goToPage(page)
this.SimulationTextObj.SimulationText = []
this.SimulationTextObj = {
SimulationText : copyBookText,
fontSize : this.fontSize,
lineHeight : this.lineHeight,
oldReadPage: this.oldReadSpeed.readPage,
background:this.background
}
uni.hideLoading()
},
/**
* 计算innerHeight，用于截取至整行
**/
calcHeight() {
if (this.contentHeight) {
let lineHeight = this.fontSize * this.lineHeight;
// #ifdef APP-PLUS || MP-WEIXIN
lineHeight = Math.floor(lineHeight * this.pixelRatio) / this.pixelRatio
// #endif
let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize) / 2)) /
lineHeight)
this.innerHeight = lineNum * lineHeight
} else {
return new Promise((resolve, reject) => {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#content').boundingClientRect(data => {
let height = data.height;
this.contentHeight = height;
let lineHeight = this.fontSize * this.lineHeight;
// #ifdef APP-PLUS || MP-WEIXIN
lineHeight = Math.floor(lineHeight * this.pixelRatio) / this
.pixelRatio
// #endif
let lineNum = Math.floor((height + Math.floor((lineHeight - this
.fontSize) / 2)) / lineHeight)
this.innerHeight = lineNum * lineHeight
resolve()
}).exec();
})
})
}
},
/**
* 计算本章页数
**/
calcCurChapter() {
return new Promise((resolve, reject) => {
// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#curChapter').boundingClientRect(data => {
let height = data.height;
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
this.curChapter.totalPage = copyBookText.length
this.curChapter.ready = true //章节准备完毕
resolve()
}).exec();
}, 100)
})
},
/**
* 顶部 计算上一章 （如果有）
**/
scrolltoupper(e) {
if (this.isAudioMenu == false && e.detail.direction == "top" && e.type == "scrolltoupper" && !this.down) {
if (this.curChapter.chapterIndex > 0) {
uni.showLoading({
title: '请稍等...'
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex - 1)
uni.hideLoading()
}, 300)
} else {
uni.showToast({
icon: 'none',
title: '已经在最开头了'
})
}
}
},
/**
* 底部 加载下一章 （如果有）
**/
async scrolltolower(e) {
if (e.detail.direction == "bottom" && e.type == "scrolltolower") {
if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
uni.showLoading({
title: '请稍等...'
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex + 1)
this.scrollTop = 0
uni.hideLoading()
this.down = true
}, 300)
setTimeout(() => {
this.clearDown()
}, 500)
} else {
uni.showToast({
icon: 'none',
title: '已加载全部1'
})
}
}
},
/**
* 还原 this.down
**/
clearDown() {
setTimeout(() => {
this.down = false
}, 300)
},
/**
* 听书事件
**/
listenHandle() {
// this.changeTurnType(2)
const query = uni.createSelectorQuery().in(this);
// console.log(query)
query.selectAll('.book-inner').boundingClientRect(data => {
// console.log('this.domList',this.domList);
//console.log('data',data);
data = data.filter((item, index) => {
return item.id == ""
})
if (this.domList.length > 0) {
console.log('读取到数据，继续执行');
} else {
console.log('读取到的数据为空，进行赋值');
this.domList = data;
}
this.getNowReadIndex()
// this.$nextTick(()=>{
// this.createAudio()
// })
}).exec();
},
getNowReadIndex() {
let progress = this.progress //记录阅读进度用于调整字体后跳转
// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
let page = 0
let history = uni.getStorageSync('history')
if (typeof history !== 'object') {
page = 0
} else {
page = Math.floor((this.curChapter.totalPage - 1) * progress)
}
// console.log(this.curChapter.totalPage, 'curChapter')
// 通过page 判断当前读到了哪里
console.log(page, '当前页')
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 {
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, '找到了')
this.domIndex = itemIndex
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
return
}
})
}
},
// 创建音频
createAudio() {
console.log('读到的位置', this.domIndex);
this.music = uni.createInnerAudioContext()
this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
// console.log(this.music.src,'this.music.src')
// 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 != null) {
setTimeout(() => {
this.music.play(); //执行播放
this.musicPlaying = true
this.musicItem.musicPlaying = true
this.changeMusicItem()
}, 150)
}else{
console.log('没找到')
// 没有音频
uni.showToast({
title: '未找到音频',
icon: 'none',
duration: 2000
})
this.offAudio()
}
// 音频播放结束
this.music.onEnded(() => {
this.musicPlaying = false
if (this.domIndex == this.verticalData.text.length - 1) {
console.log('全部音频播放完毕');
// this.musicPlaying = false
// this.musicItem.musicPlaying = false
// this.musicManuShow = true
//this.isAudioMenu = true
this.offAudio()
} else {
console.log('音频播放结束2');
console.log(this.domIndex,'------------')
this.addDomIndex()
}
});
},
// 加载下一条音频
addDomIndex() {
this.domIndex += 1
console.log(this.domIndex, '下一条domIndex')
// setTimeout(() => {
// console.log(this.curPage.text, '最大值')
this.createAudio()
let paragraphindex = 0
this.curPage.text.map((item, index) => {
if (index == this.curPage.text.length - 1) {
paragraphindex = item.paragraph
return
}
})
//return
if (this.domIndex > this.curPage.text[this.curPage.text.length - 1].paragraph) { // 是否跨页 是的话就翻页
console.log(this.currentPage,'this.currentPage')
this.musicItem ={
page:this.currentPage + 1,
musicIndexDom: this.domIndex,
musicPlaying:true
}
this.goNextPage()
}
// },5000)
},
// 暂停事件
audioPause() {
this.isPause = !this.isPause
if (this.isPause) {
this.music.pause()
this.musicPlaying = false
this.musicItem.musicPlaying = false
} else {
this.music.play()
this.musicPlaying = true
this.musicItem.musicPlaying = true
}
},
// 关闭听书
offAudio() {
this.music.stop();
// this.domIndex = 0;
this.highlight = "null";
this.fhighlight = false
this.isAudioMenu = false;
this.isPause = false;
this.music = null;
this.musicPlaying = false
this.changeMusicItem()
},
/**
* 计算上一章页数,并翻页（如果有）
**/
calcPreChapter() {
return new Promise((resolve, reject) => {
// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#preChapter').boundingClientRect(data => {
let height = data.height;
// let height = copyBookText.height;
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
// this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1
this.preChapter.totalPage = this.preChapterTotal
this.preChapter.ready = true //章节准备完毕
if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
uni.hideLoading() //把loading关掉
this.waitForPre = false;
//页面准备完毕
this.goPrePage()
}
if (this.waitForPreChapter) {
uni.hideLoading()
this.waitForPreChapter = false
this.goPreChapter()
}
resolve()
}).exec();
}, 100)
})
},
/**
* 计算下一章页数,并翻页（如果有）
**/
calcNextChapter() {
return new Promise((resolve, reject) => {
// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#nextChapter').boundingClientRect(data => {
let height = data.height;
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
//this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
this.nextChapter.totalPage = this.nextChapterTotal
this.nextChapter.ready = true //章节准备完毕
if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
uni.hideLoading() //把loading关掉
this.waitForNext = false;
//页面准备完毕
this.goNextPage()
}
if (this.waitForNextChapter) {
uni.hideLoading()
this.waitForNextChapter = false
this.goNextChapter()
}
resolve()
}).exec();
}, 100)
})
},
/**
* 触摸开始
**/
touchStart(e) {
this.showAnimation = false
this.isTouch = true
this.touchX = e.touches[0].clientX;
this.touchStartX = e.touches[0].clientX;
this.touchY = e.touches[0].clientY;
this.touchStartY = e.touches[0].clientY;
// console.log(touchStartY, '触摸开始')
if (this.turnType === 0) {
// this.$refs.pageBackRef.$el.style.transition = 'unset'
// this.$refs.pageBackRef.$el.style.right = 0
// this.$refs.pageBackRef.$el.style.width = 0
this.pageBackRef.transition = 'unset'
this.pageBackRef.right = 0
this.pageBackRef.left = 0
this.pageBackRef.width = 0
this.pageBackRef.before = true
}
},
/**
* 触摸
**/
touchMove(e) {
this.showShadow = true;
let delta = 0
if (this.turnType === 0 || this.turnType === 1) { // 翻页方式为‘覆盖’ 或 ‘左右平移’
delta = e.touches[0].clientX - this.touchStartX;
this.pageBackRef.before = delta > 0 ? true : false
if (this.turnType === 0 && !this.pageBackRef.before) {
// this.$refs.pageBackRef.$el.style.right = `${-delta}px`
// this.$refs.pageBackRef.$el.style.width = `${-delta * 0.5}px`
this.pageBackRef.right = `${-delta}px`
this.pageBackRef.width = `${-delta * 0.5}px`
} else if (this.turnType === 0 && this.pageBackRef.before) {
this.pageBackRef.left = `${delta}px`
this.pageBackRef.width = `${-delta * 0.5}px`
}
if (delta > this.windowWidth) {
delta = this.windowWidth
}
if (delta < -this.windowWidth) {
delta = -this.windowWidth
}
this.delta = e.touches[0].clientX - this.touchX;
this.touchX = e.touches[0].clientX;
} else { //翻页方式为‘上下平移’
delta = e.touches[0].clientY - this.touchStartY;
// 限制边界
if (delta > this.windowHeight) {
delta = this.windowHeight
}
if (delta < -this.windowHeight) {
delta = -this.windowHeight
}
this.delta = e.touches[0].clientY - this.touchY;
this.touchY = e.touches[0].clientY;
// console.log(this.delta, 'delta')
}
if (this.next && this.nextPage.ready) { //首次翻下一页之后
if (this.nextPage.isEnd) {
return
}
// 限制边界
if (delta > 0) {
delta = 0
}
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(${delta}px,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth+delta}px,0)`,
`(0,${this.windowHeight+delta}px)`
]
}
if (!this.pre && !this.next && delta < 0) { //首次翻下一页
this.next = true
if (this.nextPage.ready) { //页面准备好了
if (this.nextPage.isEnd) {
uni.showToast({
title: '跳转推荐页',
icon: 'none'
})
/*****************************************/
/*****************************************/
/*****************************************/
} else {
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(${delta}px,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth+delta}px,0)`,
`(0,${this.windowHeight+delta}px)`
]
}
} else if (this.nextChapter.ready) { //下一章已经准备好了
this.nextPage = {
ready: this.nextChapter.ready,
chapterName: this.nextChapter.chapterName,
text: copyBookText,
pageNum: 0,
totalPage: this.nextChapter.totalPage,
pageTranslate: [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
],
canRead: this.nextChapter.canRead
}
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(${delta}px,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth+delta}px,0)`,
`(0,${this.windowHeight+delta}px)`
]
}
}
if (this.pre && this.prePage.ready) { //首次翻上一页之后
// 限制边界
if (delta < 0) {
delta = 0
}
if (this.prePage.isCover) { //上一页是封面
this.cover.pageTranslate = [
`(${-this.windowWidth+delta}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
} else {
this.prePage.pageTranslate = [
`(${-this.windowWidth+delta}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth+delta}px,0)`,
`(0,${this.windowHeight+delta}px)`
]
}
}
if (!this.prePage.isCover) {
if (!this.pre && !this.next && delta > 0) { //首次翻上一页
this.pre = true
if (this.prePage.ready) { //页面准备好了
if (this.prePage.isCover) { //上一页是封面
this.cover.pageTranslate = [
`(${-this.windowWidth+delta}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
} else {
this.prePage.pageTranslate = [
`(${-this.windowWidth+delta}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth+delta}px,0)`,
`(0,${this.windowHeight+delta}px)`
]
}
} else if (this.preChapter.ready) { //上一章已经准备好了
this.prePage = {
ready: this.preChapter.ready,
chapterName: this.preChapter.chapterName,
text: copyBookText,
pageNum: this.preChapter.totalPage - 1,
totalPage: this.preChapter.totalPage,
pageTranslate: [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
],
canRead: this.preChapter.canRead
}
this.prePage.pageTranslate = [
`(${-this.windowWidth+delta}px,0)`,
`(${-this.windowWidth+delta}px,0)`,
`(0,${-this.windowHeight+delta}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(${delta}px,0)`,
`(0,${delta}px)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth+delta}px,0)`,
`(0,${this.windowHeight+delta}px)`,
]
}
}
}
},
/**
* 触摸结束
**/
touchEnd(e) {
console.log(e, 'e')
this.isTouch = false
this.showAnimation = true
this.showShadow = false
let delta = 0
let that = this
if (this.turnType === 0 || this.turnType === 1) {
delta = e.changedTouches[0].clientX - this.touchStartX;
} else {
delta = e.changedTouches[0].clientY - this.touchStartY;
this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
console.log(this.page, 'page')
//this.getNowReadIndex()
}
if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
if (!this.prePage.isCover) {
this.goPrePage()
}
} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
//if(e.changedTouches[0].clientY > 100){ // 显示弹窗
e.changedTouches[0].clientY > 100 ? this.goNextPage() : ''
//}
} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=
this
.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
this.showMenu()
}
} else {
if (this.next && this.delta <= 0) { //下一页
this.goNextPage()
} else if (this.next && this.delta > 0) { //取消翻页
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(0,0)`,
`(0,0)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
]
if (this.turnType == 0) {
this.pageBackRef.transition = 'right .5s ease'
this.pageBackRef.right = 0
this.pageBackRef.width = 0
}
} else if (this.pre && this.delta >= 0) { //上一页
this.goPrePage()
} else if (this.pre && this.delta < 0) { //取消翻页
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(0,0)`,
`(0,0)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
]
this.cover.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
if (this.turnType == 0) {
this.pageBackRef.transition = 'left .5s ease'
this.pageBackRef.left = 0
this.pageBackRef.width = 0
}
}
}
this.next = false
this.pre = false
// setTimeout(()=>{
// this.pageBackRef.width = '0px'
// },450)
},
/**
* 取消触摸
**/
touchcancel() {
//取消翻页,重置页面
this.showAnimation = false
this.showShadow = false
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(0,0)`,
`(0,0)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
]
this.cover.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
this.next = false
this.pre = false
},
/**
* 呼出菜单
**/
showMenu() {
// #ifdef APP-PLUS
plus.navigator.setFullscreen(false);
// #endif
this.menuShow = true;
if (this.music == null && !this.isVerticalHua) {
this.musicManuShow = true;
} else {
this.musicManuShow = false;
}
setTimeout(() => {
this.itemShow = true
}, 100)
},
/**
* 关闭菜单
**/
closeMenu() {
// #ifdef APP-PLUS
plus.navigator.setFullscreen(true);
// #endif
this.itemShow = false
this.settingShow = false
this.directoryShow = false
setTimeout(() => {
this.directoryShowBefore = false
this.menuShow = false
this.musicManuShow = false;
}, 300)
},
/**
* 关闭菜单栏，呼出设置栏
**/
openSetting() {
this.itemShow = false
setTimeout(() => {
this.settingShow = true
}, 300)
},
/**
* 关闭菜单栏，呼出目录栏
**/
openDirectory() {
// #ifdef APP-PLUS
plus.navigator.setFullscreen(true);
// #endif
this.itemShow = false
this.directoryShowBefore = true
setTimeout(() => {
this.directoryShow = true
console.log(this.directoryShow)
}, 300)
},
/**
* 拖动进度条
**/
slideChanging(e) {
this.progressTouched = true
this.chapterProgress = e.detail.value
},
/**
* 结束拖动进度条
**/
async slideChange(e) {
this.chapterProgress = e.detail.value
uni.showLoading({
title: '加载中'
})
await this.getThreeChapter(e.detail.value)
this.counlSystemInfo()
this.progressTouched = false
this.goToPage(0)
uni.hideLoading()
},
/**
* 上一页,页面轮换
**/
goPrePage() {
if (this.prePage.isCover) { //如果是首页
this.cover.pageTranslate = [
`(0,0)`,
`(0,0)`,
`(0,0)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
]
return
}
if (!this.prePage.ready && !this.preChapter.ready) {
this.waitForPre = true
uni.showLoading({
title: '正在准备上一章',
mask: true
})
return
}
let showChapter = false
this.currentPage -= 1
if (this.currentPage === -1) { //翻至上一章了
showChapter = true
this.currentPage = this.preChapter.totalPage - 1
this.chapterRotate('pre')
}
console.log(copyBookText, 'goPrePage////////////////////////////////')
let cur = [].concat(this.curPage.pageTranslate)
let pre = [].concat(this.prePage.pageTranslate)
this.goToPage(this.currentPage)
// 当前scrollTop的值
//、 this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
// console.log(this.scrollTop,'翻页后的scrollTop')
// this.getDomIndex()
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
this.curPage.pageTranslate = pre
this.nextPage.pageTranslate = cur
if (this.turnType === 0) {
// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
// this.$refs.pageBackRef.$el.style.width = `100px`
this.pageBackRef.before = true
this.pageBackRef.transition = 'left .5s ease'
this.pageBackRef.left = `${this.windowWidth}px`
this.pageBackRef.right = 0
this.pageBackRef.width = `100px`
}
setTimeout(() => {
if (showChapter) {
uni.showToast({
title: this.curChapter.chapterName,
icon: 'none'
})
}
this.showAnimation = true
this.prePage.pageTranslate = [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
this.curPage.pageTranslate = [
`(0,0)`,
`(0,0)`,
`(0,0)`
]
this.nextPage.pageTranslate = [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
]
}, 50)
},
/**
* 下一页,页面轮换
**/
goNextPage() {
if (this.nextPage.isEnd) { //如果翻至本书末尾
alery('到头了')
uni.showToast({
title: '跳转推荐页',
icon: 'none'
})
/*****************************************/
/*****************************************/
/*****************************************/
return
}
// if (!this.nextPage.ready && !this.nextChapter.ready) {
// this.waitForNext = true
// uni.showLoading({
// title: '正在准备下一章',
// mask: true
// })
// return
// }
this.currentPage += 1
let showChapter = false
console.log(this.currentPage, this.curChapter.totalPage)
if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
return
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 = 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)`
]
}, 100)
},
/**
* 章节轮换
**/
async chapterRotate(type) {
/*
1:在切换上下章时调用请求数据方
2:调用截取数据方法 this.counlSystemInfo()
*/
if (type === 'next') {
this.preChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.nextChapter)
console.log(this.curChapter.chapterIndex, 'chapterIndex')
copyBookText = this.curChapter.text;
this.counlSystemInfo()
console.log(copyBookText, 1111111111)
if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
this.nextChapter = {
ready: false,
chapterIndex: this.curChapter.chapterIndex + 1,
chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
}
await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
this.$set(this.nextChapter, 'text', this.tmpChapter.text)
this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
this.calcNextChapter()
} else {
this.nextChapter = {
ready: true,
isEnd: true
}
}
this.getThreeChapter(this.curChapter.chapterIndex)
}
if (type === 'pre') {
this.nextChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.preChapter)
copyBookText = this.curChapter.text;
this.counlSystemInfo()
console.log(copyBookText, '跳转到上一章')
// this.preChapter.text =
if (this.curChapter.chapterIndex !== 0) {
this.preChapter = {
ready: false,
chapterIndex: this.curChapter.chapterIndex - 1,
chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
}
await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
this.$set(this.preChapter, 'text', this.tmpChapter.text)
this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
this.calcPreChapter()
} else {
this.preChapter = {
ready: true,
isCover: true
}
}
this.getThreeChapter(this.curChapter.chapterIndex)
}
},
/**
* 跳转下一章
**/
goNextChapter() {
if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
uni.showToast({
title: '已经是最后一章了',
icon: 'none'
})
return
}
if (this.waitForNext || this.waitForPre) {
return
}
if (this.isVertical) {
if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
uni.showLoading({
title: '请稍等...'
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex + 1)
// this.SimulationTextObj = {
// SimulationText : copyBookText,
// fontSize : this.fontSize,
// lineHeight : this.lineHeight,
// oldReadPage: 0
// // background:this.background
// }
uni.hideLoading()
this.down = true
this.clearDown()
}, 300)
} else {
uni.showToast({
icon: 'none',
title: '已加载全部'
})
}
} else {
if (this.nextChapter.ready) {
this.chapterRotate('next')
this.goToPage(0)
} else {
uni.showLoading({
title: '正在准备下一章'
})
this.waitForNextChapter = true
}
}
},
/**
* 跳转上一章
**/
goPreChapter(page) {
if (this.curChapter.chapterIndex === 0) {
uni.showToast({
title: '这是第一章',
icon: 'none'
})
return
}
if (this.isVertical) {
if (this.curChapter.chapterIndex > 0) {
uni.showLoading({
title: '请稍等...'
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex - 1)
// this.counlSystemInfo()
console.log(copyBookText, '翻页后//////////////')
uni.hideLoading()
}, 300)
} else {
uni.showToast({
icon: 'none',
title: '已经在最开头了'
})
}
} else {
if (this.waitForNext || this.waitForPre) {
return
}
if (this.preChapter.ready) {
this.chapterRotate('pre')
this.goToPage(0)
} else {
uni.showLoading({
title: '正在准备上一章'
})
this.waitForPreChapter = true
}
}
},
/**
* 根据页码跳转
**/
goToPage(page) {
this.currentPage = page
this.showAnimation = false
console.log(page, '======>')
// console.log(copyBookText[page],'当前页')
this.$nextTick(function() {
this.curPage = {
ready: this.curChapter.ready,
chapterName: this.curChapter.chapterName,
text: copyBookText[page],
pageNum: this.currentPage,
totalPage: this.curChapter.totalPage,
pageTranslate: [
`(0,0)`,
`(0,0)`,
`(0,0)`
],
canRead: this.curChapter.canRead
}
})
// console.log(copyBookText[page][0],'顶部第一句话')
// let nowRead = copyBookText[page][0]
// let nowReadIndex = 0-----------------------
// this.domIndex = nowReadIndex
this.setStorage() // 设置缓存
if (this.currentPage === 0) {
if (this.preChapter.ready && this.preChapter.isCover) { //翻至封面了
this.prePage = {
ready: true,
isCover: true,
pageTranslate: [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
]
}
} else {
this.prePage = {
ready: this.preChapter.ready,
chapterName: this.preChapter.chapterName,
// text: this.preChapter.text,
text: this.preChapter.text.map(function(obj, index) {
return obj.picAndWord
}),
pageNum: this.preChapter.totalPage - 1,
totalPage: this.preChapter.totalPage,
pageTranslate: [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
],
canRead: this.preChapter.canRead
}
}
} else {
this.prePage = {
ready: true,
chapterName: this.curChapter.chapterName,
text: copyBookText[page - 1],
pageNum: this.currentPage - 1,
totalPage: this.curChapter.totalPage,
pageTranslate: [
`(${-this.windowWidth}px,0)`,
`(${-this.windowWidth}px,0)`,
`(0,${-this.windowHeight}px)`
],
canRead: this.curChapter.canRead
}
}
if (this.currentPage > this.curChapter.totalPage - 1) {
if (this.nextChapter.ready && this.nextChapter.isEnd) { //翻至最后一章了
this.nextPage = {
ready: true,
isEnd: true,
pageTranslate: [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
]
}
} else {
this.nextPage = {
ready: this.nextChapter.ready,
chapterName: this.nextChapter.chapterName,
text: this.nextChapter.text.map(function(obj, index) {
return obj.picAndWord
}),
pageNum: 0,
totalPage: this.nextChapter.totalPage,
pageTranslate: [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
],
canRead: this.nextChapter.canRead
}
}
} else {
this.nextPage = {
ready: true,
chapterName: this.curChapter.chapterName,
text: copyBookText[page + 1],
pageNum: this.currentPage + 1,
totalPage: this.curChapter.totalPage,
pageTranslate: [
`(0,0)`,
`(${this.windowWidth}px,0)`,
`(0,${this.windowHeight}px)`
],
canRead: this.curChapter.canRead
}
console.log(this.domIndex, 'domIndex')
}
},
/**
* 跳转到指定章节
**/
async goToChapter(index) {
this.progressTouched = false
this.closeMenu()
uni.showLoading({
title: '加载中'
})
await this.getThreeChapter(index.id)
//this.SimulationTextObj.SimulationText = []
this.SimulationTextObj = {
SimulationText : copyBookText,
fontSize : this.fontSize,
lineHeight : this.lineHeight,
oldReadPage: 0,
background:this.background
}
//this.counlSystemInfo()
this.goToPage(0)
this.scrollTop = 0
// this.domIndex = 1
uni.hideLoading()
// setTimeout(() => {
// this.$router.go(0)
// }, 500)
},
/**
* 加大字体
**/
async bigSize() {
let progress = this.progress //记录阅读进度用于调整字体后跳转
this.fontSize += 2
uni.setStorageSync('fontSize', this.fontSize)
this.calcHeight()
copyBookText = this.curChapter.text;
this.counlSystemInfo()
await this.calcCurChapter()
let page = Math.floor((this.curChapter.totalPage - 1) * progress)
this.readerSet = {
fontSize : this.fontSize,
page : page
}
this.oldReadSpeed.readPage = page
this.goToPage(page)
if (this.preChapter.ready && !this.preChapter.isCover) {
this.preChapter.ready = false
await this.calcPreChapter()
}
if (this.nextChapter.ready && !this.nextChapter.isEnd) {
this.nextChapter.ready = false
await this.calcNextChapter()
}
},
/**
* 缩小字体
**/
async smallSize() {
let progress = this.progress
this.fontSize -= 2
uni.setStorageSync('fontSize', this.fontSize)
this.calcHeight()
copyBookText = this.curChapter.text;
this.counlSystemInfo()
await this.calcCurChapter()
let page = Math.floor((this.curChapter.totalPage - 1) * progress)
this.readerSet = {
fontSize : this.fontSize,
page : page
}
this.oldReadSpeed.readPage = page
this.goToPage(page)
if (this.preChapter.ready && !this.preChapter.isCover) {
this.preChapter.ready = false
await this.calcPreChapter()
}
if (this.nextChapter.ready && !this.nextChapter.isEnd) {
this.nextChapter.ready = false
await this.calcNextChapter()
}
},
/**
* 改变行距
**/
async changeLineHeight(lineHeight) {
let progress = this.progress
if (lineHeight === this.lineHeight) {
return
} else {
this.lineHeight = lineHeight;
uni.showToast({
title:lineHeight,
duration:2000
})
uni.setStorageSync('lineHeight', this.lineHeight)
this.calcHeight()
copyBookText = this.curChapter.text;
this.counlSystemInfo()
await this.calcCurChapter()
let page = Math.floor((this.curChapter.totalPage - 1) * progress)
this.readerSet = {
lineHeight : this.lineHeight,
page : page
}
this.oldReadSpeed.readPage = page
this.goToPage(page)
if (this.preChapter.ready && !this.preChapter.isCover) {
this.preChapter.ready = false
await this.calcPreChapter()
}
if (this.nextChapter.ready && !this.nextChapter.isEnd) {
this.nextChapter.ready = false
await this.calcNextChapter()
}
}
},
/**
* 改变翻页方式
**/
changeTurnType(turnType) {
if (turnType === this.turnType) {
return
} else {
this.showAnimation = false
this.turnType = turnType;
uni.setStorageSync('turnType', this.turnType)
}
if (turnType == 4) {
// 逼真翻页方式
this.isSimulation = true
} else {
this.isSimulation = false
}
if (turnType == 3) {
this.isVerticalHua = true
// 如果正在播放音频 则暂停掉
if (this.musicPlaying) {
//console.log('正在播放音频')
this.music.pause()
this.highlight = "null";
this.isAudioMenu = false
}
uni.showModal({
title: '提示',
showCancel: false,
content: '当前阅读模式下，无听书功能，如想体验听书功能，请切换其他模式，并且阅读进度与其他模式不共享。',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
})
} else {
this.isVerticalHua = false
}
},
/**
* 改变背景
**/
changeBackground(background) {
if (background === this.background) {
return
} else {
this.background = background;
uni.setStorageSync('background', this.background)
// this.readerSet.background = background // 修改阅读器背景
this.SimulationTextObj.background = this.background
this.SimulationTextObj.oldReadPage = this.curPage.pageNum
console.log('改变页面背景',this.curPage.pageNum)
// this.SimulationTextObj = {
// SimulationText : this.SimulationTextObj.SimulationText,
// fontSize : this.SimulationText.fontSize,
// lineHeight : this.SimulationText.lineHeight,
// background: this.background,
// page: this.oldReadSpeed.readPage
// }
}
},
/**
* 获取目录
**/
getDirectoryList(showLoading) {
if (showLoading) {
uni.showLoading({
title: '加载中',
mask: true
})
}
return this.$http
.post('book/book/getBookCatalogue', {
'bookid': this.bookId_mark
})
.then(res => {
let vipnum = 0
if (this.detail.isBuy == 1) {
vipnum = 1
}
for (let i in res.bookCatalogue) {
this.directoryList.push({
"id": i,
"chapterId": res.bookCatalogue[i].chapterId,
"name": res.bookCatalogue[i].chapterName,
})
}
})
.catch(() => {
// 此处是网络连接失败的逻辑
uni.hideLoading()
return new Promise((resolve, reject) => {
uni.showModal({
title: '连接失败',
content: '请检查您的网络状态',
confirmText: '重试',
success: async (res) => {
if (res.confirm) {
//用户点击了重试
await this.getDirectoryList(true)
resolve()
} else if (res.cancel) {
//用户点击取消
this.back()
}
}
})
})
})
// /*****************************************/
// /*****************************************/
// /*****************************************/
},
/**
* 获取一章数据
**/
getOneChapter(chapterId, showLoading) {
if (showLoading) {
uni.showLoading({
title: '加载中',
mask: true
})
}
// 检查是否已经购买
// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0
// book/bookchaptercontent/appBooksChapterContent?bookid=89&id=4039&userId=10176
return this.$http
.post('book/bookchaptercontent/appBooksChapterContent', {
'userId': this.userInfo.id,
'bookid': this.bookId_mark,
'chapterid': chapterId
})
.then(res => {
this.tmpChapter.text = res.bookCatalogue
// console.log(this.tmpChapter.text,'tmpChapter')
})
.catch(() => {
// 此处是网络连接失败的逻辑
uni.hideLoading()
return new Promise((resolve, reject) => {
uni.showModal({
title: '连接失败',
content: '请检查您的网络状态',
confirmText: '重试',
success: async (res) => {
if (res.confirm) {
//用户点击了重试
await this.getOneChapter(chapterId, true)
resolve()
} else if (res.cancel) {
//用户点击取消
this.back()
}
}
})
})
})
/*****************************************/
/*****************************************/
/*****************************************/
},
/**
* 获取三章数据
**/
async getThreeChapter(index) {
await this.getOneChapter(this.directoryList[Number(index)].chapterId)
this.curChapter = {
chapterIndex: Number(index),
chapterName: this.directoryList[Number(index)].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
this.verticalData = {
chapterIndex: Number(index),
chapterName: this.directoryList[Number(index)].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
copyBookText = this.curChapter.text;
this.counlSystemInfo()
this.domIndex = 0;
if (this.curChapter.chapterIndex !== 0) {
await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
//this.mpcounlSystemInfo
this.preChapter = {
chapterIndex: Number(index) - 1,
chapterName: this.directoryList[Number(index) - 1].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
preText = this.tmpChapter.text
this.mpcounlSystemInfo()
this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1
// console.log(this.preChapterTotal,'上一章内容页数')
// 处理数据
//
} else {
this.preChapter = {
ready: true,
isCover: true
}
}
if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
this.nextChapter = {
chapterIndex: Number(index) + 1,
chapterName: this.directoryList[Number(index) + 1].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
nextText = this.tmpChapter.text
this.nextmpcounlSystemInfo()
this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1
// console.log(this.nextChapterTotal,'下一章内容页数')
} else {
this.nextChapter = {
ready: true,
isEnd: true
}
}
await this.calcCurChapter()
await this.calcPreChapter()
await this.calcNextChapter()
},
/*
获取进度
*/
getReadRateUl() {
let data = {
bookId: this.bookId_mark,
userId: this.userInfo.id,
}
$http.request({
url: "book/bookreadrate/getReadRate",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log("获取", res)
if (res.readRate === null) {
this.speedTrue = false
} else {
this.speedTrue = true;
this.curChapter.chapterIndex = res.readRate.chapterId
this.updateReadId = res.readRate.id
this.oldReadSpeed.precent = res.readRate.precent
this.oldReadSpeed.updateReadId = res.readRate.id
this.getThreeChapter(this.curChapter.chapterIndex)
}
})
},
/*
保存更新进度
*/
saveReadRateUl() {
console.log("保存数据", this.speedData)
let data = {
bookId: this.speedData.bookId,
chapterId: this.speedData.chapter_id,
chapterName: this.speedData.chapter_name,
precent: this.progress,
contentId: this.speedData.content_id,
userId: this.userInfo.id,
}
$http.request({
url: "book/bookreadrate/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log("保存成功", res)
})
},
/*
更新进度
*/
updateReadRateUl() {
console.log("更新数据", this.speedData)
let data = {
bookId: this.speedData.bookId,
chapterId: this.speedData.chapter_id,
chapterName: this.speedData.chapter_name,
precent: this.speedData.precent,
contentId: this.speedData.content_id,
userId: this.userInfo.id,
id: this.updateReadId
}
$http.request({
url: "book/bookreadrate/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log("更新", res)
})
},
/**
* 购买书籍接口
**/
buyBook() {
//在回调中调用this.initPage()刷新本页1
uni.showToast({
title: '跳转至购买页面，如果未登陆则跳转登陆',
icon: 'none'
})
},
// 接收renderjs发回的数据
onViewClick(options) {
console.log('renderjsCall回调');
console.log(options);
if(options.chapterid == 'next'){ // 下一章
this.goNextChapter()
}else if(options.chapterid == 'prev'){ // 上一章
this.goPreChapter()
}else if(options.curpage>0){
this.goNextPage()
// console.log(options.curpage)
}else if(options.curpage<0){
this.goPrePage()
}
// }else{ // 单纯的跳页
// this.page = options.curpage
// this.goToPage(this.page)
// }
},
showMenuCall(options){
this.setShow = true
}
},
beforeDestroy() {
if (this.musicPlaying) {
this.music.pause()
}
},
onHide() {
if (this.musicPlaying) {
this.music.pause()
}
},
}
</script>
<script lang="renderjs" module="turnjs">
import '@/utils/jquery.min.1.7.js';
import turn from '@/utils/turn.js';
export default {
data() {
return {
width: '',
height: '',
SimulationText: [],
length:0,
hasContent: false,
curPage:1,
touchNum: 0, //点击次数
touchTime: null, //定时器清除
lastPage:false,
musicIndexDom:0,
highlight:'null',
musicPlaying:false,
fontSize:'',
lineHeight:'',
containerStyle: '',
devName:false,
letterSpacing:1,
}
},
mounted() {
this.onTurn();
this.isAndroid()
console.log(this.devName,'devName')
},
methods: {
isAndroid() { //判断是否为安卓手机
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
this.devName = isAndroid
},
updateReaderSet(newVal, oldVal){
// 阅读器设置更新
$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
console.log(newVal,'阅读器设置更新')
if(newVal.page > 0 && newVal.fontSize !== this.fontSize || newVal.page > 0 && newVal.lineHeight !== this.lineHeight){
$("#flipbook").turn('page',newVal.page+1)
}
// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
// $(".myPage p").css({backgroundColor:this.containerStyle})
},
updateMusic(newVal, oldVal){ //听书
this.highlight = newVal.highlight
this.musicIndexDom = newVal.musicIndexDom
this.musicPlaying = newVal.musicPlaying
console.log(newVal,'听书配置项有变化')
// let page = 1
// page = $("#flipbook").turn('page')
if(newVal.musicPlaying){
// 开启听书
console.log(newVal.page,'newVal.page')
if(newVal.page > 0){ // 翻页
console.log('翻页翻页', newVal.page+2)
$("#flipbook").turn('page', newVal.page+3)
}
$("#flipbook .paragraph").css({color:"#333"})
$("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"})
}
else{
// 关闭听书
$("#flipbook .paragraph").css({color:"#333"})
}
},
updateReadPercent(newVal, oldVal){
// 获取阅读进度
this.curPage = newVal.readPage
// console.log('获取到了阅读的进度page',newVal,this.curPage)-
//$("#flipbook").turn('page', this.curPage+1)
},
updateRenderData(newVal, oldVal) {
let {
width,
height
} = newVal;
this.width = width;
this.height = height;
},
updateSimulationText(newVal, oldVal) {
$("#flipbook").turn('pages',1) // 内容变化时，保留1页1
$("#flipbook").turn('pages',newVal.SimulationText.length)
// this.onTurn();
// this.SimulationText = newVal
console.log('更新数组', newVal)
this.fontSize = newVal.fontSize
this.lineHeight = newVal.lineHeight
newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
//$(".myPage p").css({backgroundColor:this.containerStyle})
this.devName ? this.letterSpacing = 2 : this.letterSpacing = 1
console.log(this.letterSpacing,'-----------------------------')
for (var i=0; i<newVal.SimulationText.length;i++) {
var tagHtml = "";
var conntentHtml = "";
for (var j=0; j<newVal.SimulationText[i].length; j++) {
var classname = ''
var styleconteent = ''
newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : 'notshouhang'
newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = "'text-indent:2em ;font-size:"+newVal.fontSize+"px; color: #5d5d5d; line-height:"+newVal.lineHeight*newVal.fontSize+"px;'": styleconteent = "'font-size:"+newVal.fontSize+"px ; display:inline;line-height:"+newVal.lineHeight*newVal.fontSize+"px; color: #5d5d5d;'"
conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[i][j].list + "</p>"
}
var page1 = i+1
var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
var tagHtml = "<div style='padding:0 10px;letter-spacing:"+ this.letterSpacing +"px; position:relative; background-color:"+this.containerStyle+"; height:inherit'>"+ conntentHtml +"<div style='text-align:center; color:#777 ; position: absolute;bottom: 5px; left: 0;text-align: center; width: 100%;' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
// $("#flipbook").append(tagHtml);
if (!$("#flipbook").turn('hasPage', i+2)) {
// Create an element for this page.
var element = $('<div />').html('');
// Add the page
$("#flipbook").turn('addPage', element, i+2);
element.html(tagHtml);
}
}
// 如果有阅读缓存
if(newVal.oldReadPage>0){
// alert('读取历史阅读进度')
$("#flipbook").turn('page', newVal.oldReadPage+1)
}else{
$("#flipbook").turn('page', 2)
}
},
onClick(event, ownerInstance) {
if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
//console.log('点击了左侧')
if($("#flipbook").turn('page') == 1){ //第一页
// console.log('切换到下一章节')
//console.log('第一页了')
ownerInstance.callMethod('onViewClick', {
curpage: 0,
chapterid : 'prev'
})
}else{
// 不是第一页
$("#flipbook").turn("previous")
ownerInstance.callMethod('onViewClick', {
curpage: -1,
chapterid : ''
})
}
}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
// console.log('点击了右侧')
if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页
// console.log('切换到下一章节')
// console.log('最后一页了')
ownerInstance.callMethod('onViewClick', {
curpage: 0,
chapterid : 'next'
})
}else{
// 不是最后一页
$("#flipbook").turn("next")
ownerInstance.callMethod('onViewClick', {
curpage: 1,
chapterid: '',
})
}
} else{
// console.log('点击了中间')
// 双击
this.touchNum++
if (this.touchNum == 0) {} else {
if (this.touchNum > 1) {
clearTimeout(this.touchTime)
//单击事件
this.touchTime = setTimeout(() => {
this.touchNum = 0
}, 250)
// console.log('双击')
ownerInstance.callMethod('showMenuCall', {
menuShow:true
})
} else {
clearTimeout(this.touchTime)
this.touchTime = setTimeout(() => {
//双击或多次点击事件
this.touchNum = 0
}, 250)
//console.log('单击')
}
}
// end
}
},
onTurn() {
$("#flipbook").turn({
autoCenter: true,
display: 'single',
height: this.height,
width: this.width,
elevation: 50,
duration:500,
gradients: true,
when: {
turning: function(event, page, pageObject) {
// 翻页时
// this.curPage = page
// console.log(event, page, pageObject,this.curPage)
}, }
});
}
}
}
</script>
<style>
/* .container1{background-color: #000;} */
.notshouhang:after {
display: inline-block;
width: 100%;
content: '';
}
.buts{width: 100%; display:flex; }
.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
</style>
<style lang="scss" scoped>
@import url("@/pages/yRead/iconfont.css");
// turnjs
/// .shouhang{text-indent: 2em;color: red;}
.flipbook-viewport{overflow:hidden;width:100%;height:100%;
.container{display: flex;justify-content: center;align-items: center;margin: 0 auto;}.flipbook ::v-deep .page{background-color: white;background-repeat: no-repeat;background-size: 100% 100%;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);img {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;}}.shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;}
}
// end
.page-wrapper{background-color: #fff;}
#flipbook {
view {
p {
padding: 0 10px;
}
}
}
.menu-top {
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #fff;
// transition: top .3s;
display: flex;
align-items: center;
height: 66rpx;
// .head {
// position: relative;
// display: flex;
// height: 40px;
// width: 100%; margin-top:0rpx;
// line-height: 10px;
// color: #fff;
// }
.back {
width: 100%;
// background-color: #333;
.backiconfont {
margin-top: 1px;
}
}
}
.setMenu {
text-align: center;
padding: 20px 10px
}
.showImgs {
float: right;
padding-right: 3px;
margin-right: 10px;
width: 30px;
font-size: 15px;
border: 1px solid #6aa84f;
height: 30px;
line-height: 30px;
/* color: red; */
border-radius: 15px;
}
.chapterImgTitle {
display: block;
;
color: #636363;
text-align: center;
font-size: 30rpx;
margin: 10px 0;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
.scroll-view-item_H {
display: inline-block;
width: 100%;
//height: 300rpx;
//line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.imgBox {
height: 500rpx;
overflow: hidden;
padding: 10px;
// img{height: 300rpx !important; width: unset;}
}
}
.scroll-Y {
height: 600px;
}
page {
position: relative;
width: 100%;
height: 100%;
}
.hidden {
opacity: 0;
}
.action {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.item {
flex: 1;
height: 100%;
}
}
.nothingShow {
display: block;
font-size: 24rpx;
color: #666;
margin: 10px 0;
text-align: center;
}
.listenitem {
width: 150rpx;
height: 150rpx;
color: #fff;
background-color: #636363;
border-radius: 50%;
text-align: center;
line-height: 150rpx;
font-size: 30px;
font-weight: 700;
position: fixed;
right: 30rpx;
bottom: 280rpx;
z-index: 9999;
}
.audio_menu {
width: 200rpx;
height: 100rpx;
position: fixed;
bottom: 280rpx;
background-color: #636363;
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 50rpx;
.audioSymbol {
padding: 0 20rpx;
}
}
.verticalbox {
position: fixed;
top: 20rpx;
left: 0;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
height: 100%;
width: 100%;
background-color: #fff;
overflow: hidden;
.chapter {
font-size: 14px;
color: $minor-text-color;
height: 30px;
width: 100%;
line-height: 30px;
}
.bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: $minor-text-color;
height: 30px;
width: 100%;
}
.content {
flex: 1 1 auto;
.inner-box {
.book-inner {}
}
}
}
.highlight {
color: #e5d6a0 !important;
// padding: 10rpx 20rpx;
// border-radius: 10rpx;
// background-color: #cbcbcb;
}
.fhighlight {}
.container {
position: fixed;
top: 64rpx;
left: 0;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
height: 96%;
width: 100%;
background-color: #f7faf9;
overflow: hidden;
.chapter {
font-size: 14px;
color: $minor-text-color;
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 48rpx;
}
.bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: $minor-text-color;
height: 30px;
width: 100%;
}
.bottom-bar1 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: $minor-text-color;
height: 55px;
width: 324px;
}
.content {
flex: 1 1 auto;
overflow: hidden;
.inner-box {
overflow: hidden;
.book-inner {
// display:block;
// text-indent:32rpx;
}
}
}
}
.container0 {
background-color: #f7faf9;
background-size: 100% 100%;
position: fixed;
}
.container1 {
background-color: #000;
}
.directory {
position: fixed;
top: 0;
display: flex;
flex-flow: column;
width: 600rpx;
height: 100%; padding-right: 10rpx;
transition: left .1s;
.bookname {
padding: 90rpx 0 70rpx 20rpx;
height: 60rpx;
font-size: 40rpx;
font-weight: bold;
}
.directory-listItem {
display: flex;
align-items: center;
padding-left: 20rpx;
height: 90rpx;
font-size: 35rpx;
border-bottom: #eee solid 1rpx;
}
.active {
color: red
}
}
.menu {
// position: fixed;
// top: 0;
// left: 0;
// z-index: 300;
// width: 100%;
// transition: all .3s;
.menu-bottom {
position: absolute;
left: 0;
width: 100%;
background-color: #333;
transition: bottom .3s;
color: #fff;
.show-chapter {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -110%);
padding: 5px 10px;
line-height: 20px;
border-radius: 10rpx;
font-size: 13px;
background-color: #333;
}
.progress-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 50px;
width: 100%;
font-size: 15px;
}
.items-box {
display: flex;
justify-content: space-around;
align-items: center;
height: 80px;
width: 100%;
.item-box {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
height: 100%;
}
}
}
.setting {
// position: absolute;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px 20px;
width: 100%;
// color: #fff;
// background-color: #333;
transition: bottom .3s;
.item {
display: flex;
align-items: center;
height: 70px;
.item-name {
padding: 10px;
color: #333;
font-size: 12px;
}
.icon {
margin-right: 10px;
padding: 5px 20px;
font-size: 15px;
height: 32px;
line-height: 20px;
width: auto;
text-align: center;
border-radius: 20px;
border: #333 solid 1px;
}
.type-setting {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-right: 10px;
padding: 5px;
height: 30px;
width: 30px;
border-radius: 5px;
border: #333 solid 1px;
.line {
width: 100%;
border-bottom: #333 solid 1px;
}
.lineActive {
width: 100%;
border-bottom: #FF9900 solid 1px;
}
}
.active {
color: #FF9900;
border: #FF9900 solid 1px;
}
}
}
}
.cover {
image {
height: 400rpx;
width: 300rpx;
background-color: #eee;
}
}
.pageback_container {
z-index: 103;
position: fixed;
right: 2%;
top: 66rpx;
height: 96%;
max-width: 50vw;
// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
filter: drop-shadow(5px 0px 8px rgba(0, 0, 0, 0.3));
.pageback {
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #fcfcfc 0, #141414 90%);
background-size: 350% 100%;
}
}
.page-section-spacing {
margin-top: 60rpx;
}
.scroll-view_H {
white-space: nowrap;
}
.scroll-view-item {
height: 300rpx;
}
.backiconfont {
width: 20px;
margin-left: 10px;
margin-top: 10px;
height: 20px;
background-color: rgba(255, 255, 255, .8);
border-radius: 100%;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300rpx;
}
.jushou {
text-indent: 2em;
}
.item_wrap {
flex-wrap: wrap;
}
</style>
Reference in New Issue View Git Blame Copy Permalink