1
This commit is contained in:
@fawn-nine
809
pages/eBook/2/book.vue
Normal file
809
pages/eBook/2/book.vue
Normal file
@@ -0,0 +1,809 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 仅计算用 -->
|
||||
<cus-page id="preChapter" class="hidden" :content="preChapter.content" :fontSize="fontSize"
|
||||
:lineHeight="lineHeight"></cus-page>
|
||||
<cus-page id="curChapter" class="hidden" :content="curChapter.content" :fontSize="fontSize"
|
||||
:lineHeight="lineHeight"></cus-page>
|
||||
<cus-page id="nextChapter" class="hidden" :content="nextChapter.content" :fontSize="fontSize"
|
||||
:lineHeight="lineHeight"></cus-page>
|
||||
|
||||
<!-- 上一页 -->
|
||||
<cus-page v-if="prePage.ready" :zIndex="102" :bgColor="bgColor" :transform="prePage.pageTransform[turnType]"
|
||||
:showAnimation="showAnimation" :showShadow="showShadow" :turnType="turnType"
|
||||
:chapterName="prePage.chapterName" :innerHeight="innerHeight" :content="prePage.content"
|
||||
:fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor" :pageNum="prePage.pageNum"
|
||||
:systemTimeStr="systemTimeStr" :totalPage="prePage.totalPage" :clipPath="prePage.clipPath"
|
||||
:bgStyle="prePage.bgStyle" :subBgStyle="prePage.subBgStyle">
|
||||
</cus-page>
|
||||
|
||||
<!-- 本页 -->
|
||||
<cus-page :isTouch="true" :zIndex="101" :bgColor="bgColor" :transform="curPage.pageTransform[turnType]"
|
||||
:showAnimation="showAnimation" :showShadow="showShadow" :turnType="turnType"
|
||||
:chapterName="curPage.chapterName" :innerHeight="innerHeight" :content="curPage.content"
|
||||
:fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor" :pageNum="curPage.pageNum"
|
||||
:systemTimeStr="systemTimeStr" :totalPage="curPage.totalPage" :clipPath="curPage.clipPath"
|
||||
:bgStyle="curPage.bgStyle" :subBgStyle="curPage.subBgStyle" @touch-start="touchStart"
|
||||
@touch-move="touchMove" @touch-end="touchEnd" @touch-cancel="touchCancel">
|
||||
</cus-page>
|
||||
|
||||
<!-- 下一页 -->
|
||||
<cus-page ref="curChapter" v-if="nextPage.ready" :zIndex="100" :bgColor="bgColor"
|
||||
:transform="nextPage.pageTransform[turnType]" :showAnimation="showAnimation" :showShadow="showShadow"
|
||||
:turnType="turnType" :chapterName="nextPage.chapterName" :innerHeight="innerHeight"
|
||||
:content="nextPage.content" :fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor"
|
||||
:pageNum="nextPage.pageNum" :systemTimeStr="systemTimeStr" :totalPage="nextPage.totalPage">
|
||||
</cus-page>
|
||||
|
||||
<!-- 点击屏幕弹出 -->
|
||||
<content-setting ref="contentSetting" :bgColor="bgColor" :textColor="textColor" :isDark="isDark"
|
||||
:fontSize="fontSize" :bgColorList="bgColorList" :textColorList="textColorList" :turnTypeList="turnTypeList"
|
||||
:colorType="colorType" :turnType="turnType" :chapterData="chapterData"
|
||||
:chapterIndex="curChapter.chapterIndex" @updateProps="updateProps" @updatePage="updatePage"
|
||||
@updateCatalog="updateCatalog" @whenHide="hideMenu" @moreHandle="moreHandle" @listenHandle="listenHandle">
|
||||
</content-setting>
|
||||
|
||||
<!-- 悬浮窗 -->
|
||||
<cus-audio-play ref="audioPlay" :bookId="id" :bookName="title" :chapterName="curChapter.chapterName"
|
||||
:content="curChapter.content" :styleBottom="120" @show="getAudioPlayShow"></cus-audio-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import contentSetting from './contentSetting.vue'
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations,
|
||||
mapActions
|
||||
}
|
||||
from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
contentSetting,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id:"5f9c97aa52f7032983c485e4",
|
||||
title: '开局就杀皇帝',
|
||||
chapterData: [],
|
||||
preChapter: { //上一章数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterIndex: 0,
|
||||
chapterName: '',
|
||||
content: '',
|
||||
totalPage: 1,
|
||||
},
|
||||
|
||||
curChapter: { //本一章数据
|
||||
chapterIndex: 0,
|
||||
chapterName: '',
|
||||
content: '',
|
||||
totalPage: 1,
|
||||
},
|
||||
|
||||
nextChapter: { //下一章数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterIndex: 0,
|
||||
chapterName: '',
|
||||
content: '',
|
||||
totalPage: 1,
|
||||
},
|
||||
|
||||
prePage: { //上一页数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterName: '',
|
||||
content: '',
|
||||
pageNum: 0,
|
||||
totalPage: 1,
|
||||
pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
|
||||
clipPath: '', // 仿真翻页
|
||||
bgStyle: {},
|
||||
subBgStyle: {},
|
||||
},
|
||||
|
||||
curPage: { //本页数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterName: '',
|
||||
content: '',
|
||||
pageNum: 0,
|
||||
totalPage: 1,
|
||||
pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
|
||||
clipPath: '', // 仿真翻页
|
||||
subBgStyle: {},
|
||||
},
|
||||
|
||||
nextPage: { //下一页数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterName: '',
|
||||
content: '',
|
||||
pageNum: 0,
|
||||
totalPage: 1,
|
||||
pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
|
||||
},
|
||||
|
||||
showAnimation: false, //是否开启动画
|
||||
showShadow: false, //是否显示页面阴影
|
||||
aimdistance: 50, // 滑动翻页的最小距离
|
||||
|
||||
windowWidth: 0, //可用屏幕宽度
|
||||
windowHeight: 0, //可用屏幕高度
|
||||
statusBarHeight: 0,
|
||||
contentHeight: 0, //阅读区域高度
|
||||
|
||||
systemTimeStr: '', //系统时间字符串
|
||||
|
||||
touchStartX: 0, // 触屏起始点x
|
||||
touchStartY: 0, // 触屏起始点y
|
||||
deltaX: 0, // 手指瞬时位移
|
||||
deltaY: 0, // 手指瞬时位移
|
||||
|
||||
bgColorList: ['#CCE8CF', '#CCBF95', '#E1C7CA', '#3C3734'], //背景色列表
|
||||
textColorList: ['#352C1D', '#352C1D', '#FFFFFF', '#352C1D'], //字体色列表
|
||||
turnTypeList: ['覆盖', '平移', '仿真', '上下'],
|
||||
maxFontSize: 30, //最大字体大小，px
|
||||
minFontSize: 14, //最小字体大小，px
|
||||
turnType: 0, //翻页方式 覆盖0，平移1，仿真2，上下3
|
||||
fontSize: 16, //字体大小，
|
||||
simplified: 1, //是否简体
|
||||
lineHeight: 1.5, //行高，注意是fontSize的倍数
|
||||
isDark: false, // 是否夜间模式
|
||||
colorType: 0,
|
||||
history: { //本书历史记录
|
||||
chapterIndex: 0,
|
||||
progress: 0
|
||||
},
|
||||
|
||||
bgColor: '', // 背景色
|
||||
textColor: '', // 字体色
|
||||
over: 40,
|
||||
turnDirect: 0, //向左向下-1 向右向上1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
curSource: 'get_curSource',
|
||||
readHistorys: 'get_readHistorys',
|
||||
setting: 'get_setting'
|
||||
}),
|
||||
//截取至整行的最大高度
|
||||
innerHeight() {
|
||||
let lineHeight = this.fontSize * this.lineHeight
|
||||
let lineNum = Math.floor(this.contentHeight / lineHeight)
|
||||
return lineNum * lineHeight
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
// this.id = option.id
|
||||
// this.title = option.title
|
||||
this.getSystemInfo()
|
||||
this.setPageInfo()
|
||||
this.initPage()
|
||||
},
|
||||
onUnload() {
|
||||
uni.hideLoading()
|
||||
|
||||
// 浏览记录
|
||||
let t_progress = Math.floor((this.curPage.pageNum + 1) / this.curPage.totalPage * 100) / 100
|
||||
let idx = this.readHistorys.findIndex(item => item._id === this.id)
|
||||
if (idx > -1) {
|
||||
let params = {
|
||||
...this.readHistorys[idx],
|
||||
index: this.curPage.chapterIndex,
|
||||
progress: t_progress || 0,
|
||||
readChapter: this.chapterData[this.curPage.chapterIndex].title,
|
||||
readHistory: true
|
||||
}
|
||||
this.updateReadHistory(params)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['set_setting']),
|
||||
...mapActions(['updateReadHistory']),
|
||||
async initPage() {
|
||||
uni.hideLoading()
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '章节准备中'
|
||||
})
|
||||
this.getChapterInfo()
|
||||
await this.getChapterList()
|
||||
await this.getThreeChapter(this.history.chapterIndex)
|
||||
let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
|
||||
this.goToPage(page)
|
||||
uni.hideLoading()
|
||||
},
|
||||
getChapterInfo() {
|
||||
let res = this.readHistorys.filter(item => item._id === this.id)
|
||||
if (res && res.length) {
|
||||
this.history = {
|
||||
chapterIndex: res[0].index,
|
||||
progress: res[0].progress
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取设备信息
|
||||
getSystemInfo() {
|
||||
let sysInfo = uni.getSystemInfoSync()
|
||||
this.windowWidth = sysInfo.windowWidth
|
||||
this.windowHeight = sysInfo.windowHeight
|
||||
this.statusBarHeight = sysInfo.statusBarHeight
|
||||
|
||||
// 设置时间
|
||||
// this.systemTimeStr = this.$formatTimestamp('', 'hh:mm')
|
||||
// setInterval(() => {
|
||||
// this.systemTimeStr = this.$formatTimestamp('', 'hh:mm')
|
||||
// }, 60000)
|
||||
},
|
||||
// 计算页面布局信息
|
||||
setPageInfo() {
|
||||
this.contentHeight = this.windowHeight - 30 - 30 - 10 - this.statusBarHeight
|
||||
|
||||
let t_setting = this.setting
|
||||
this.turnType = t_setting.hasOwnProperty('turnType') ? t_setting.turnType : this.turnType
|
||||
this.fontSize = t_setting.hasOwnProperty('fontSize') ? t_setting.fontSize : this.fontSize
|
||||
this.simplified = t_setting.hasOwnProperty('simplified') ? t_setting.simplified : this.simplified
|
||||
this.lineHeight = t_setting.hasOwnProperty('lineHeight') ? t_setting.lineHeight : this.lineHeight
|
||||
this.isDark = t_setting.hasOwnProperty('isDark') ? t_setting.isDark : this.isDark
|
||||
this.colorType = t_setting.hasOwnProperty('colorType') ? t_setting.colorType : this.colorType
|
||||
this.$nextTick(function() {
|
||||
this.$refs.contentSetting.changeBackground(this.colorType, this.isDark)
|
||||
})
|
||||
},
|
||||
// 获取章节列表
|
||||
async getChapterList() {
|
||||
let res = await this.$store.dispatch('getChapterList', this.id)
|
||||
if (res) {
|
||||
this.chapterData = res
|
||||
}
|
||||
},
|
||||
// 获取章节内容
|
||||
async getBookContent(idx, attrName) {
|
||||
let params = this.chapterData[idx]
|
||||
let res = await this.$store.dispatch('getBookContent', params)
|
||||
if (res) {
|
||||
// console.log(this.chapterData[idx]);
|
||||
this[attrName] = {
|
||||
chapterIndex: idx,
|
||||
chapterName: this.chapterData[idx].title,
|
||||
content: res,
|
||||
}
|
||||
await this.calcChapter(attrName)
|
||||
}
|
||||
},
|
||||
// 计算章节页数
|
||||
calcChapter(attrName) {
|
||||
const self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
this.$nextTick(function() {
|
||||
query.select(`#${attrName} .book-inner`).boundingClientRect(data => {
|
||||
if (data.height) {
|
||||
let totalPage = Math.ceil(data.height / self.innerHeight)
|
||||
self[attrName].totalPage = totalPage || 1
|
||||
self[attrName].ready = true //章节准备完毕
|
||||
resolve(true)
|
||||
} else {
|
||||
resolve(false)
|
||||
}
|
||||
}).exec()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取三章内容
|
||||
async getThreeChapter(idx) {
|
||||
await this.getBookContent(idx, 'curChapter') // 获取当前章节的内容
|
||||
if (idx > 0) {
|
||||
await this.getBookContent(idx - 1, 'preChapter') // 获取上一个章节的内容
|
||||
} else {
|
||||
this.preChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
if (idx < this.chapterData.length - 1) {
|
||||
await this.getBookContent(idx + 1, 'nextChapter') // 获取下一个章节的内容
|
||||
} else {
|
||||
this.nextChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
},
|
||||
// 根据页码跳转
|
||||
goToPage(page) {
|
||||
let winW = this.windowWidth,
|
||||
winH = this.windowHeight
|
||||
|
||||
this.showAnimation = false
|
||||
this.curPage = {
|
||||
...this.curChapter,
|
||||
pageNum: page < this.curChapter.totalPage - 1 ? page : this.curChapter.totalPage - 1,
|
||||
pageTransform: [
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
],
|
||||
clipPath: '', // 仿真翻页
|
||||
bgStyle: {},
|
||||
subBgStyle: {},
|
||||
}
|
||||
|
||||
let perCommon = {
|
||||
pageTransform: [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
],
|
||||
clipPath: '', // 仿真翻页
|
||||
bgStyle: {},
|
||||
subBgStyle: {},
|
||||
}
|
||||
// 翻到章节的第一页并且没有上一章
|
||||
if (page === 0 && this.preChapter.isOver) {
|
||||
this.prePage = {
|
||||
ready: true,
|
||||
isOver: true,
|
||||
...perCommon
|
||||
}
|
||||
}
|
||||
// 翻到章节的第一页并且有上一章
|
||||
else if (page === 0 && !this.preChapter.isOver) {
|
||||
this.prePage = {
|
||||
...this.preChapter,
|
||||
pageNum: this.preChapter.totalPage - 1,
|
||||
...perCommon
|
||||
}
|
||||
}
|
||||
//还有上一页
|
||||
else {
|
||||
this.prePage = {
|
||||
...this.curChapter,
|
||||
pageNum: page - 1,
|
||||
...perCommon
|
||||
}
|
||||
}
|
||||
|
||||
let nextCommon = {
|
||||
pageTransform: [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
],
|
||||
}
|
||||
// 翻到章节的最后一页并且没有下一章
|
||||
if (page >= this.curChapter.totalPage - 1 && this.nextChapter.isOver) {
|
||||
this.nextPage = {
|
||||
ready: true,
|
||||
isOver: true,
|
||||
...nextCommon
|
||||
}
|
||||
}
|
||||
// 翻到章节的最后一页并且有下一章
|
||||
else if (page >= this.curChapter.totalPage - 1 && !this.nextChapter.isOver) {
|
||||
this.nextPage = {
|
||||
...this.nextChapter,
|
||||
pageNum: 0,
|
||||
...nextCommon
|
||||
}
|
||||
}
|
||||
//还有下一页
|
||||
else {
|
||||
this.nextPage = {
|
||||
...this.curPage,
|
||||
pageNum: page + 1,
|
||||
...nextCommon
|
||||
}
|
||||
}
|
||||
},
|
||||
// 章节轮换
|
||||
async chapterRotate(type) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '章节准备中'
|
||||
})
|
||||
let curIndex = 0
|
||||
switch (type) {
|
||||
// 上一章
|
||||
case 'pre':
|
||||
this.nextChapter = JSON.parse(JSON.stringify(this.curChapter))
|
||||
this.curChapter = JSON.parse(JSON.stringify(this.preChapter))
|
||||
curIndex = this.curChapter.chapterIndex
|
||||
if (curIndex > 0) {
|
||||
await this.getBookContent(curIndex - 1, 'preChapter') // 获取上一个章节的内容
|
||||
} else {
|
||||
this.preChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
break
|
||||
// 下一章
|
||||
case 'next':
|
||||
this.preChapter = JSON.parse(JSON.stringify(this.curChapter))
|
||||
this.curChapter = JSON.parse(JSON.stringify(this.nextChapter))
|
||||
curIndex = this.curChapter.chapterIndex
|
||||
if (curIndex < this.chapterData.length - 1) {
|
||||
await this.getBookContent(curIndex + 1, 'nextChapter') // 获取下一个章节的内容
|
||||
} else {
|
||||
this.nextChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 去上一页
|
||||
// num: 页码
|
||||
async goPrePage(num) {
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
|
||||
if (num === -1) {
|
||||
if (this.preChapter.ready && this.preChapter.isOver) {
|
||||
return
|
||||
}
|
||||
await this.chapterRotate('pre')
|
||||
num = this.curChapter.totalPage - 1
|
||||
}
|
||||
|
||||
let pre = [].concat(this.prePage.pageTransform)
|
||||
let cur = [].concat(this.curPage.pageTransform)
|
||||
let tClipPath = this.prePage.clipPath
|
||||
let tBgStyle = JSON.parse(JSON.stringify(this.prePage.bgStyle))
|
||||
let tSubBgStyle = JSON.parse(JSON.stringify(this.prePage.subBgStyle))
|
||||
this.goToPage(num)
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
]
|
||||
this.curPage.pageTransform = pre
|
||||
this.nextPage.pageTransform = cur
|
||||
|
||||
if (this.turnType === 2) {
|
||||
this.curPage.clipPath = tClipPath
|
||||
this.curPage.bgStyle = tBgStyle
|
||||
this.curPage.subBgStyle = tSubBgStyle
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.pageReset('pre')
|
||||
}, 50)
|
||||
},
|
||||
// 去下一页
|
||||
// num: 页码
|
||||
async goNextPage(num) {
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
|
||||
if (num === this.curPage.totalPage) {
|
||||
if (this.nextChapter.ready && this.nextChapter.isOver) {
|
||||
return
|
||||
}
|
||||
await this.chapterRotate('next')
|
||||
num = 0
|
||||
}
|
||||
let cur = [].concat(this.curPage.pageTransform)
|
||||
let next = [].concat(this.nextPage.pageTransform)
|
||||
let tClipPath = this.curPage.clipPath
|
||||
let tBgStyle = JSON.parse(JSON.stringify(this.curPage.bgStyle))
|
||||
let tSubBgStyle = JSON.parse(JSON.stringify(this.curPage.subBgStyle))
|
||||
this.goToPage(num)
|
||||
this.prePage.pageTransform = cur
|
||||
this.curPage.pageTransform = next
|
||||
this.nextPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW}px,0)`,
|
||||
`translate(0,0)`,
|
||||
'translate(0,0)'
|
||||
]
|
||||
|
||||
if (this.turnType === 2) {
|
||||
this.prePage.clipPath = tClipPath
|
||||
this.prePage.bgStyle = tBgStyle
|
||||
this.prePage.subBgStyle = tSubBgStyle
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.pageReset('next')
|
||||
}, 50)
|
||||
},
|
||||
touchStart(touche) {
|
||||
this.showAnimation = false
|
||||
this.touchStartX = touche.clientX;
|
||||
this.touchStartY = touche.clientY;
|
||||
},
|
||||
touchMove(touche) {
|
||||
this.showShadow = true;
|
||||
let deltaX = touche.clientX - this.touchStartX
|
||||
let deltaY = touche.clientY - this.touchStartY
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
|
||||
// 限制边界
|
||||
if (this.turnType !== 2) {
|
||||
deltaX = Math.abs(deltaX) < winW ? deltaX : deltaX / Math.abs(deltaX) * winW
|
||||
deltaY = Math.abs(deltaY) < winH ? deltaY : deltaY / Math.abs(deltaY) * winH
|
||||
}
|
||||
let delta = this.getTouche(deltaX, deltaY)
|
||||
if (Math.abs(delta) < 5) {
|
||||
return
|
||||
}
|
||||
if (this.turnDirect === 0) {
|
||||
this.turnDirect = delta / Math.abs(delta)
|
||||
}
|
||||
let attrName = this.turnDirect > 0 ? 'prePage' : 'nextPage'
|
||||
if (this[attrName].ready && this[attrName].isOver) { //翻至封面了
|
||||
this.deltaX = 0
|
||||
this.deltaY = 0
|
||||
return
|
||||
}
|
||||
this.deltaX = deltaX;
|
||||
this.deltaY = deltaY;
|
||||
let over = this.over
|
||||
if (this.turnDirect < 0) {
|
||||
// console.log('向下翻页');
|
||||
// 向下翻页
|
||||
if (this.turnType === 2) {
|
||||
let absDeltaY = Math.abs(deltaY)
|
||||
let symbolY = deltaY / absDeltaY
|
||||
let posX1 = winW + deltaX - (symbolY === 1 ? absDeltaY : 0)
|
||||
let posX2 = winW + deltaX - (symbolY === 1 ? 0 : absDeltaY)
|
||||
if (posX1 <= 0 || posX2 <= 0) {
|
||||
return
|
||||
}
|
||||
let rotateZ = ((Math.atan2(winH * 0.5, absDeltaY) * 180 / Math.PI))
|
||||
rotateZ = (90 - rotateZ).toFixed(0)
|
||||
let blurDis = 1 - ((posX1 + posX2) / (winW * 2))
|
||||
blurDis = blurDis < 0.4 ? 0.4 : blurDis
|
||||
this.curPage.clipPath =
|
||||
`polygon(0px 0px, ${posX1}px 0px, ${posX2}px ${winH}px, 0px ${winH}px)`
|
||||
this.curPage.bgStyle = {
|
||||
filter: `drop-shadow(0px 0px ${40*blurDis}px rgba(0, 0, 0, 0.8))`,
|
||||
transform: `rotateY(180deg) rotateZ(${rotateZ*symbolY}deg)`,
|
||||
transformOrigin: `${winW + deltaX - absDeltaY*0.5}px 50%`,
|
||||
display: 'block'
|
||||
}
|
||||
this.curPage.subBgStyle = {
|
||||
clipPath: `polygon(${posX1}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX2}px ${winH+over}px)`,
|
||||
boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
|
||||
}
|
||||
}
|
||||
|
||||
this.curPage.pageTransform = [
|
||||
`translate(${deltaX}px,0)`,
|
||||
`translate(${deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,${deltaY}px)`
|
||||
]
|
||||
this.nextPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW+deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
} else {
|
||||
// console.log('向上翻页');
|
||||
// 向上翻页
|
||||
if (this.turnType === 2) {
|
||||
let posX = touche.clientX
|
||||
if (posX <= 0) {
|
||||
return
|
||||
}
|
||||
let blurDis = 1 - (posX / winW)
|
||||
blurDis = blurDis < 0.4 ? 0.4 : blurDis
|
||||
this.prePage.clipPath =
|
||||
`polygon(0px 0px, ${posX}px 0px, ${posX}px ${winH}px, 0px ${winH}px)`
|
||||
this.prePage.bgStyle = {
|
||||
filter: `drop-shadow(0px 0px ${40*blurDis}px rgba(0, 0, 0, 0.8))`,
|
||||
transform: `rotateY(180deg) rotateZ(0deg)`,
|
||||
transformOrigin: `${posX}px 50%`,
|
||||
display: 'block'
|
||||
}
|
||||
this.prePage.subBgStyle = {
|
||||
clipPath: `polygon(${posX}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX}px ${winH+over}px)`,
|
||||
boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
|
||||
}
|
||||
}
|
||||
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW+deltaX}px,0)`,
|
||||
`translate(${-winW+deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,${-winH+deltaY}px)`
|
||||
]
|
||||
this.curPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
}
|
||||
},
|
||||
async touchEnd(touche) {
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
let touchStart = this.getTouche(this.touchStartX, this.touchStartY)
|
||||
let client = this.getTouche(touche.clientX, touche.clientY)
|
||||
let delta = client - touchStart
|
||||
if (Math.abs(delta) < 0.8) { //部分手机点击屏幕时无法做到delta===0
|
||||
if (touche.clientX < winW / 3) { //点击屏幕左1/3为上一页
|
||||
this.showAnimation = true
|
||||
this.showShadow = false
|
||||
this.goPrePage(this.curPage.pageNum - 1)
|
||||
} else if (touche.clientX > winW / 3 * 2) { //点击屏幕右1/3为下一页
|
||||
this.showAnimation = true
|
||||
this.showShadow = false
|
||||
this.goNextPage(this.curPage.pageNum + 1)
|
||||
} else { //点击屏幕中间1/3为呼出菜单
|
||||
if (this.turnDirect === 0) {
|
||||
this.showMenu()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let symbol = delta / Math.abs(delta)
|
||||
// 如果小于最小允许翻页的距离
|
||||
if (Math.abs(delta) < this.aimdistance) {
|
||||
this.pageReset(symbol < 0 ? 'pre' : 'next')
|
||||
return
|
||||
}
|
||||
this.showShadow = false
|
||||
if (symbol < 0) {
|
||||
this.goNextPage(this.curPage.pageNum + 1)
|
||||
} else {
|
||||
this.goPrePage(this.curPage.pageNum - 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
touchCancel(e) {
|
||||
this.pageReset()
|
||||
},
|
||||
pageReset(type = 'next') {
|
||||
let over = this.over
|
||||
// let type1 = this.turnDirect > 0 ? 'next' : 'pre'
|
||||
// console.log(type, type1);
|
||||
this.turnDirect = 0
|
||||
this.showAnimation = true
|
||||
this.showShadow = false
|
||||
//取消翻页,重置页面
|
||||
let winW = this.windowWidth,
|
||||
winH = this.windowHeight
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${type==='next'?0:-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
]
|
||||
this.curPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
this.nextPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
|
||||
if (this.turnType === 2) {
|
||||
let posX = type === 'next' ? 0 : winW
|
||||
let prop = type === 'next' ? 'prePage' : 'curPage'
|
||||
this[prop].clipPath =
|
||||
`polygon(0px 0px, ${posX}px 0px, ${posX}px ${winH}px, 0px ${winH}px)`
|
||||
this[prop].bgStyle = {
|
||||
transform: `rotateY(180deg) rotateZ(0deg)`,
|
||||
transformOrigin: `${posX}px 50%`,
|
||||
display: 'block'
|
||||
}
|
||||
this[prop].subBgStyle = {
|
||||
clipPath: `polygon(${posX}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX}px ${winH+over}px)`,
|
||||
boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
]
|
||||
}, 100)
|
||||
},
|
||||
getTouche(x, y) {
|
||||
let result = 0
|
||||
switch (this.turnType) {
|
||||
// 覆盖
|
||||
case 0:
|
||||
result = x
|
||||
break
|
||||
// 平移
|
||||
case 1:
|
||||
result = x
|
||||
break
|
||||
// 仿真
|
||||
case 2:
|
||||
result = x
|
||||
break
|
||||
// 上下
|
||||
case 3:
|
||||
result = y
|
||||
break
|
||||
}
|
||||
return result
|
||||
},
|
||||
// 显示操作菜单
|
||||
showMenu() {
|
||||
this.$refs.curChapter.setFullscreen(false)
|
||||
this.$refs.contentSetting.show()
|
||||
},
|
||||
// 隐藏操作菜单
|
||||
hideMenu() {
|
||||
this.$refs.curChapter.setFullscreen(true)
|
||||
},
|
||||
updateProps(res) {
|
||||
res.forEach(item => {
|
||||
this[item[0]] = item[1]
|
||||
if (item.length === 2 || (item.length > 2 && !item[2])) {
|
||||
this.updateSetting(item[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
async updatePage() {
|
||||
await this.calcChapter('preChapter')
|
||||
await this.calcChapter('curChapter')
|
||||
await this.calcChapter('nextChapter')
|
||||
this.goToPage(this.curPage.pageNum)
|
||||
},
|
||||
updateSetting(prop) {
|
||||
let t_setting = Object.assign({}, this.setting || {})
|
||||
t_setting[prop] = this[prop]
|
||||
this.set_setting(t_setting)
|
||||
},
|
||||
updateCatalog(index) {
|
||||
let idx = this.readHistorys.findIndex(item => item._id = this.id)
|
||||
if (idx > -1) {
|
||||
let params = {
|
||||
...this.readHistorys[idx],
|
||||
index: index,
|
||||
progress: 0,
|
||||
readChapter: this.chapterData[index].title
|
||||
}
|
||||
this.updateReadHistory(params)
|
||||
}
|
||||
this.initPage()
|
||||
},
|
||||
moreHandle() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/public/bookDetail?id=' + this.id
|
||||
})
|
||||
},
|
||||
listenHandle() {
|
||||
this.$refs.audioPlay.show()
|
||||
},
|
||||
getAudioPlayShow(data) {
|
||||
this.show = data
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user