diff --git a/pages/yRead/angbook - 目录修改前.vue b/pages/yRead/angbook - 目录修改前.vue new file mode 100644 index 0000000..d8b5e0c --- /dev/null +++ b/pages/yRead/angbook - 目录修改前.vue @@ -0,0 +1,3572 @@ + + + + + + + diff --git a/pages/yRead/angbook - 副本 (2).vue b/pages/yRead/angbook - 阅读器修改前).vue similarity index 100% rename from pages/yRead/angbook - 副本 (2).vue rename to pages/yRead/angbook - 阅读器修改前).vue diff --git a/pages/yRead/angbook.vue b/pages/yRead/angbook.vue index 9e4d7c1..b78cc93 100644 --- a/pages/yRead/angbook.vue +++ b/pages/yRead/angbook.vue @@ -7,6 +7,12 @@ --> @@ -419,7 +496,7 @@ import virtualList from '../../components/virtualList/virtualList.vue' // 引入翻页效果动画 //import $ from 'jquery' - + import { dateToStr } from '../../utils/utils.js' @@ -428,7 +505,7 @@ } from 'vuex'; import $http from '../../config/requestConfig'; - let copyBookText = [] + let copyBookText = [] let preText = [] let nextText = [] let imglist = [] @@ -442,28 +519,34 @@ data() { return { baseList: [{ - name: 'photo', - title: '章节图片' - }, - { - name: 'setting', - title: '阅读器设置' - } - ], - imgsShow:false, - nothingShow:false, + name: 'photo', + title: '章节图片' + }, + { + name: 'list-dot', + title: '目 录' + }, + { + name: 'play-circle', + title: '听 书' + } + ], + imgsShow: false, + nothingShow: false, // 本章图片列表 - chapterImgList:[], - newchapterImgList:[], - preChapterTotal : null, - nextChapterTotal :null, + chapterImgList: [], + newchapterImgList: [], + preChapterTotal: null, + nextChapterTotal: null, // preBookText = [] oldReadSpeed: { // 本地初始阅读进度 precent: null, - updateReadId: null + updateReadId: null, + readPage:0 }, - scrollTop1:0, + scrollTop1: 0, bookName: '我是书名', + bookFengMian:'', // 书籍封面 bookId: 1, bookId_mark: '', history: { //本书历史记录 @@ -598,7 +681,7 @@ directoryShowBefore: false, // 目录渲染 turnPageTime: .5, //翻页动画时间 - biaodian : ['，',':','、',';','。','.'], //匹配的标点 + biaodian: ['，', ':', '、', ';', '。', '.'], //匹配的标点 maxFontSize: 30, //最大字体大小，px minFontSize: 14, //最小字体大小，px turnType: 4, //翻页方式 @@ -628,7 +711,7 @@ isBuy: 0, isVip: 0, }, - isVerticalHua:false, + isVerticalHua: false, speedTrue: false, //判断是否更新进度 speedData: { bookId: 0, @@ -646,7 +729,7 @@ width: 0, before: false }, - topChange:0, + topChange: 0, scroll_end: false, musicPlaying: false, // 正在播放音频 // 仿真翻页参数 @@ -654,9 +737,13 @@ height: '800px', text: 'hello', isSimulation: true, // 仿真翻页模式 - SimulationText:[], // 仿真翻页内容数组 - hasSimulationText:false, - setShow:true, + SimulationText: [], // 仿真翻页内容数组 + hasSimulationText: false, + setShow: true, // 设置显示？ + clientlast: null, //开始位置 + touchNum: 0, //点击次数 + touchTime: null, //定时器清除 + } }, @@ -675,12 +762,14 @@ this.setStorage() }, - onReady() { + onReady() { // console.log('------------------------------') // 单页禁止测滑返回 // #ifdef APP-PLUS - let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象 - currentWebview.setStyle({ popGesture: 'none' }) + let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象 + currentWebview.setStyle({ + popGesture: 'none' + }) // #endif }, onHide() { @@ -689,7 +778,7 @@ mounted() { this.initPage() }, - computed: { + computed: { progress() { //章节的阅读进度 if (this.curChapter.totalPage === 1) { return 0 @@ -698,62 +787,87 @@ }, ...mapState(['userInfo']), rect() { - return { - width: this.width, - height: this.height, - - } - - }, - }, - methods: { - openStart(e){ - // console.log(4444,e) + return { + width: this.width, + height: this.height + } + }, - openEnd(e){ - let delta = 0 - let that = this - delta = e.changedTouches[0].clientX - this.touchStartX; - if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=this.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单 - // this.showMenu() - this.setShow = true - //this.menuShow = true - // console.log(this.menuShow) + }, + methods: { + openStart(e) { + //记录位置 + this.clientlast = e.changedTouches[0]; + }, + openEnd(e) { + + this.touchNum++ + if (this.touchNum == 0) {} else { + if (this.touchNum > 1) { + clearTimeout(this.touchTime) + //单击事件 + this.touchTime = setTimeout(() => { + this.touchNum = 0 + }, 250) + console.log('双击') + this.setShow = true + // this.createAudio() + } else { + clearTimeout(this.touchTime) + this.touchTime = setTimeout(() => { + //双击或则多次点击事件 + this.touchNum = 0 + }, 250) + //console.log('单击') + } + } }, - clickImg(item,index){ + clickImg(item, index) { // 点击图片 - let imgarr = this.newchapterImgList.map(item => item) - console.log(imgarr,'imgarr') + let imgarr = this.newchapterImgList.map(item => item) + console.log(imgarr, 'imgarr') this.imgsShow = false uni.previewImage({ - current:index, - urls: imgarr + current: index, + urls: imgarr }) }, - clickSet(name){ + clickSet(name) { // 点击图片 - if(name == 0){ - this.imgsShow = true - }else if(name == 1){ - this.showMenu() + 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(){ + toRight() { this.nothingShow = true }, - showImgHandle(){ + 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.bookName = res.book.name, + this.bookFengMian = res.book.images console.log('获取电子书详情', res) }); @@ -811,45 +925,53 @@ copyBookText.map((res, index) => { res.content = '' + res.content // console.log(res.picAndWord) - if (res.content.length > colSize - 2) { + if (res.content.length > colSize - 2) { //colSize - 2 段落首行空格 // 判断是否下一行以标点开始 - let nextString = res.content.substr(colSize-2, 1) + 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]) { + 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 ) + 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 + 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.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 @@ -865,20 +987,30 @@ res.content = '' + res.content if (res.content.length > colSize - 2) { // 判断是否下一行以标点开始 - let nextString = res.content.substr(colSize-2, 1) + 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]) { + 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 ) + 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'}) + arr.push({ + 'paragraph': index, + list: res.content.substr(0, colSize - 2), + 'level': 0, + class: 'jushou' + }) } }) preText = arr @@ -894,20 +1026,30 @@ res.content = '' + res.content if (res.content.length > colSize - 2) { // 判断是否下一行以标点开始 - let nextString = res.content.substr(colSize-2, 1) + 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]) { + 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 ) + 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'}) + arr.push({ + 'paragraph': index, + list: res.content.substr(0, colSize - 2), + 'level': 0, + class: 'jushou' + }) } }) nextText = arr @@ -921,17 +1063,27 @@ 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]) { + 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) + } + } + 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({ + 'paragraph': index, + 'list': text.substr(0, colSize), + 'level': 0, + class: '' + }) // arr.push(strBR) } }, @@ -944,20 +1096,30 @@ res.content = '' + res.content if (res.content.length > colSize - 2) { // 判断是否下一行以标点开始 - let nextString = res.content.substr(colSize-2, 1) + 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]) { + 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 ) + 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'}) + arr.push({ + 'paragraph': index, + list: res.content.substr(0, colSize - 2), + 'level': 0, + class: 'jushou' + }) } }) this.tmpChapter.text = arr @@ -970,7 +1132,7 @@ let arr = [], newArr = [] copyBookText = copyBookText.filter((item, index) => { - + if (item == '' || item == ' ' || item == ' ') { } else { @@ -988,9 +1150,10 @@ } arr.push(newArr) copyBookText = arr // 每一页显示的内容 + this.SimulationText = [] this.SimulationText = arr this.hasSimulationText = true - console.log(this.SimulationText,'SimulationText') + console.log(this.SimulationText, 'SimulationText') }, setStorage() { @@ -1023,11 +1186,11 @@ // 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.chapter_name = this.directoryList[this.curChapter.chapterIndex].name; this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId; //console.log('符合更新条件') // 阅读进度大于原进度时 @@ -1178,6 +1341,7 @@ await this.getThreeChapter(this.history.chapterIndex) // this.counlSystemInfo() let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress) + this.oldReadSpeed.readPage = page this.goToPage(page) uni.hideLoading() }, @@ -1228,7 +1392,7 @@ setTimeout(() => { const query = uni.createSelectorQuery().in(this); query.select('#curChapter').boundingClientRect(data => { - let height = data.height; + let height = data.height; // #ifdef APP-PLUS || MP-WEIXIN height = Math.round(height * this.pixelRatio) / this.pixelRatio // #endif @@ -1323,7 +1487,7 @@ }).exec(); }, - getNowReadIndex() { + getNowReadIndex() { let progress = this.progress //记录阅读进度用于调整字体后跳转 // let page = Math.floor((this.curChapter.totalPage - 1) * progress) let page = 0 @@ -1332,310 +1496,341 @@ page = 0 } else { page = Math.floor((this.curChapter.totalPage - 1) * progress) - } - // console.log(this.curChapter.totalPage, 'curChapter') - // 通过page 判断当前读到了哪里 - // console.log(page+1, '当前页') - - let nowRead = copyBookText[page][0].list - console.log(nowRead,'顶部第一句话') - //let nowReadIndex = 0 - //console.log(page,'page') - if (page == 0) { - // return this.scrollTop = 0 - this.domIndex = 0 - this.createAudio() - this.musicManuShow = false - this.isAudioMenu = true - }else{ - let found = false - this.verticalData.text.forEach((item, itemIndex) => { - // console.log(copyBookText[page][0][0],'copyBookText') - //console.log(item.content,'item') - if (item.content.indexOf(nowRead) != -1) { - // 找到了 - console.log(item.number,'找到了') - found = true - this.domIndex = itemIndex + } + // console.log(this.curChapter.totalPage, 'curChapter') + // 通过page 判断当前读到了哪里 + // console.log(page+1, '当前页') + + let nowRead = copyBookText[page][0].list + console.log(nowRead, '顶部第一句话') + //let nowReadIndex = 0 + //console.log(page,'page') + if (page == 0) { + // return this.scrollTop = 0 + this.domIndex = 0 this.createAudio() this.musicManuShow = false this.isAudioMenu = true - return - } - }) - if(!found){ - uni.showToast({ - title:'未找到音频', - icon:'none', - duration:2000 - }) - } - } - }, - - // 创建音频 - createAudio() { - console.log('读到的位置', this.domIndex); - this.music = uni.createInnerAudioContext() - this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址 - console.log(this.verticalData.text, '文本') - // 找到符合条件的dom - console.log('domList', this.domList) - // 给对应dom高亮 - this.highlight = this.domIndex - this.fhighlight = true - console.log('highlight', this.highlight); - console.log('domIndex', this.domIndex); - // 判断是否有src - if (this.music.src) { - setTimeout(() => { - this.music.play(); //执行播放 - this.musicPlaying = true - }, 150) - } - // 音频播放结束 - this.music.onEnded(() => { - this.musicPlaying = false - if (this.domIndex == this.domList.length - 1) { - console.log('全部音频播放完毕'); - } else { - console.log('音频播放结束2'); - - this.addDomIndex() - } - }); - }, - // 加载下一条音频 - addDomIndex() { - this.domIndex += 1 - //console.log(this.domIndex, '下一条domIndex') - //console.log(this.curPage.text, '最大值') - setTimeout(()=>{ - this.createAudio() - let paragraphindex = 0 - //if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){ - this.curPage.text.map((item, index) => { - if(index == this.curPage.text.length - 1 ){ - paragraphindex = item.paragraph - return - } - }) - //return - if(this.domIndex > paragraphindex){ - this.goNextPage() - } - - },1000) - - }, - // 暂停事件 - audioPause() { - this.isPause = !this.isPause - if (this.isPause) { - this.music.pause() - this.musicPlaying = false - } else { - this.music.play() - this.musicPlaying = true - } - }, - // 关闭听书 - offAudio() { - this.music.stop(); - // this.domIndex = 0; - this.highlight = "null"; - this.fhighlight = false - this.isAudioMenu = false; - this.isPause = false; - this.music = null; - this.musicPlaying = false - }, - - /** - * 计算上一章页数,并翻页（如果有） - **/ - calcPreChapter() { - return new Promise((resolve, reject) => { - // 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看 - setTimeout(() => { - const query = uni.createSelectorQuery().in(this); - query.select('#preChapter').boundingClientRect(data => { - let height = data.height; - // let height = copyBookText.height; - // #ifdef APP-PLUS || MP-WEIXIN - height = Math.round(height * this.pixelRatio) / this.pixelRatio - // #endif - // this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1 - this.preChapter.totalPage = this.preChapterTotal - this.preChapter.ready = true //章节准备完毕 - if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时 - uni.hideLoading() //把loading关掉 - this.waitForPre = false; - //页面准备完毕 - this.goPrePage() + let found = false + this.verticalData.text.forEach((item, itemIndex) => { + // console.log(copyBookText[page][0][0],'copyBookText') + //console.log(item.content,'item') + if (item.content.indexOf(nowRead) != -1) { + // 找到了 + console.log(item.number, '找到了') + found = true + this.domIndex = itemIndex + this.createAudio() + this.musicManuShow = false + this.isAudioMenu = true + return } - if (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) { - + }) + if (!found) { uni.showToast({ - title: '跳转推荐页', - icon: 'none' + title: '未找到音频', + icon: 'none', + duration: 2000 }) - /*****************************************/ - /*****************************************/ - /*****************************************/ + } + } + }, + // 创建音频 + createAudio() { + console.log('读到的位置', this.domIndex); + this.music = uni.createInnerAudioContext() + this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址 + console.log(this.verticalData.text, '文本') + // 找到符合条件的dom + console.log('domList', this.domList) + // 给对应dom高亮 + this.highlight = this.domIndex + this.fhighlight = true + console.log('highlight', this.highlight); + console.log('domIndex', this.domIndex); + // 判断是否有src + if (this.music.src) { + setTimeout(() => { + this.music.play(); //执行播放 + this.musicPlaying = true + }, 150) + } + // 音频播放结束 + this.music.onEnded(() => { + this.musicPlaying = false + if (this.domIndex == this.domList.length - 1) { + console.log('全部音频播放完毕'); } else { + console.log('音频播放结束2'); + + this.addDomIndex() + } + }); + }, + // 加载下一条音频 + addDomIndex() { + this.domIndex += 1 + //console.log(this.domIndex, '下一条domIndex') + //console.log(this.curPage.text, '最大值') + setTimeout(() => { + this.createAudio() + let paragraphindex = 0 + //if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){ + this.curPage.text.map((item, index) => { + if (index == this.curPage.text.length - 1) { + paragraphindex = item.paragraph + return + } + }) + //return + if (this.domIndex > paragraphindex) { + this.goNextPage() + } + + }, 1000) + + }, + // 暂停事件 + audioPause() { + this.isPause = !this.isPause + if (this.isPause) { + this.music.pause() + this.musicPlaying = false + } else { + this.music.play() + this.musicPlaying = true + } + }, + // 关闭听书 + offAudio() { + this.music.stop(); + // this.domIndex = 0; + this.highlight = "null"; + this.fhighlight = false + this.isAudioMenu = false; + this.isPause = false; + this.music = null; + this.musicPlaying = false + }, + + /** + * 计算上一章页数,并翻页（如果有） + **/ + calcPreChapter() { + return new Promise((resolve, reject) => { + // 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看 + setTimeout(() => { + const query = uni.createSelectorQuery().in(this); + query.select('#preChapter').boundingClientRect(data => { + let height = data.height; + // let height = copyBookText.height; + // #ifdef APP-PLUS || MP-WEIXIN + height = Math.round(height * this.pixelRatio) / this.pixelRatio + // #endif + // this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1 + this.preChapter.totalPage = this.preChapterTotal + this.preChapter.ready = true //章节准备完毕 + if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时 + uni.hideLoading() //把loading关掉 + this.waitForPre = false; + //页面准备完毕 + this.goPrePage() + } + if (this.waitForPreChapter) { + uni.hideLoading() + this.waitForPreChapter = false + this.goPreChapter() + } + resolve() + }).exec(); + + }, 100) + + }) + + }, + + /** + * 计算下一章页数,并翻页（如果有） + **/ + calcNextChapter() { + return new Promise((resolve, reject) => { + // 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看 + setTimeout(() => { + const query = uni.createSelectorQuery().in(this); + query.select('#nextChapter').boundingClientRect(data => { + let height = data.height; + // #ifdef APP-PLUS || MP-WEIXIN + height = Math.round(height * this.pixelRatio) / this.pixelRatio + // #endif + //this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1 + this.nextChapter.totalPage = this.nextChapterTotal + this.nextChapter.ready = true //章节准备完毕 + if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时 + uni.hideLoading() //把loading关掉 + this.waitForNext = false; + //页面准备完毕 + this.goNextPage() + } + if (this.waitForNextChapter) { + uni.hideLoading() + this.waitForNextChapter = false + this.goNextChapter() + } + resolve() + }).exec(); + }, 100) + + }) + + }, + + /** + * 触摸开始 + **/ + touchStart(e) { + this.showAnimation = false + this.isTouch = true + this.touchX = e.touches[0].clientX; + this.touchStartX = e.touches[0].clientX; + this.touchY = e.touches[0].clientY; + this.touchStartY = e.touches[0].clientY; + // console.log(touchStartY, '触摸开始') + + if (this.turnType === 0) { + // this.$refs.pageBackRef.$el.style.transition = 'unset' + // this.$refs.pageBackRef.$el.style.right = 0 + // this.$refs.pageBackRef.$el.style.width = 0 + this.pageBackRef.transition = 'unset' + this.pageBackRef.right = 0 + this.pageBackRef.left = 0 + this.pageBackRef.width = 0 + this.pageBackRef.before = true + } + }, + + /** + * 触摸 + **/ + touchMove(e) { + this.showShadow = true; + let delta = 0 + + if (this.turnType === 0 || this.turnType === 1) { // 翻页方式为‘覆盖’ 或 ‘左右平移’ + delta = e.touches[0].clientX - this.touchStartX; + + this.pageBackRef.before = delta > 0 ? true : false + if (this.turnType === 0 && !this.pageBackRef.before) { + // this.$refs.pageBackRef.$el.style.right = `${-delta}px` + // this.$refs.pageBackRef.$el.style.width = `${-delta * 0.5}px` + this.pageBackRef.right = `${-delta}px` + this.pageBackRef.width = `${-delta * 0.5}px` + } else if (this.turnType === 0 && this.pageBackRef.before) { + this.pageBackRef.left = `${delta}px` + this.pageBackRef.width = `${-delta * 0.5}px` + } + if (delta > this.windowWidth) { + delta = this.windowWidth + } + if (delta < -this.windowWidth) { + delta = -this.windowWidth + } + + + this.delta = e.touches[0].clientX - this.touchX; + this.touchX = e.touches[0].clientX; + + } else { //翻页方式为‘上下平移’ + delta = e.touches[0].clientY - this.touchStartY; + + // 限制边界 + if (delta > this.windowHeight) { + delta = this.windowHeight + } + if (delta < -this.windowHeight) { + delta = -this.windowHeight + } + + this.delta = e.touches[0].clientY - this.touchY; + this.touchY = e.touches[0].clientY; + // console.log(this.delta, 'delta') + } + if (this.next && this.nextPage.ready) { //首次翻下一页之后 + if (this.nextPage.isEnd) { + return + } + // 限制边界 + if (delta > 0) { + delta = 0 + } + + this.prePage.pageTranslate = [ + `(${-this.windowWidth}px,0)`, + `(${-this.windowWidth+delta}px,0)`, + `(0,${-this.windowHeight+delta}px)` + ] + + this.curPage.pageTranslate = [ + `(${delta}px,0)`, + `(${delta}px,0)`, + `(0,${delta}px)` + ] + + this.nextPage.pageTranslate = [ + `(0,0)`, + `(${this.windowWidth+delta}px,0)`, + `(0,${this.windowHeight+delta}px)` + ] + } + if (!this.pre && !this.next && delta < 0) { //首次翻下一页 + this.next = true + if (this.nextPage.ready) { //页面准备好了 + if (this.nextPage.isEnd) { + + uni.showToast({ + title: '跳转推荐页', + icon: 'none' + }) + /*****************************************/ + /*****************************************/ + /*****************************************/ + + + } else { + this.prePage.pageTranslate = [ + `(${-this.windowWidth}px,0)`, + `(${-this.windowWidth+delta}px,0)`, + `(0,${-this.windowHeight+delta}px)` + ] + this.curPage.pageTranslate = [ + `(${delta}px,0)`, + `(${delta}px,0)`, + `(0,${delta}px)` + ] + + this.nextPage.pageTranslate = [ + `(0,0)`, + `(${this.windowWidth+delta}px,0)`, + `(0,${this.windowHeight+delta}px)` + ] + } + } else if (this.nextChapter.ready) { //下一章已经准备好了 + this.nextPage = { + ready: this.nextChapter.ready, + chapterName: this.nextChapter.chapterName, + text: copyBookText, + pageNum: 0, + totalPage: this.nextChapter.totalPage, + pageTranslate: [ + `(0,0)`, + `(${this.windowWidth}px,0)`, + `(0,${this.windowHeight}px)` + ], + canRead: this.nextChapter.canRead + } this.prePage.pageTranslate = [ `(${-this.windowWidth}px,0)`, `(${-this.windowWidth+delta}px,0)`, @@ -1653,125 +1848,27 @@ `(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 + } + if (this.pre && this.prePage.ready) { //首次翻上一页之后 + + // 限制边界 + 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.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)` + ] - // 限制边界 - 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 - } + } else { this.prePage.pageTranslate = [ `(${-this.windowWidth+delta}px,0)`, `(${-this.windowWidth+delta}px,0)`, @@ -1786,763 +1883,786 @@ this.nextPage.pageTranslate = [ `(0,0)`, `(${this.windowWidth+delta}px,0)`, - `(0,${this.windowHeight+delta}px)`, + `(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() - } + /** + * 触摸结束 + **/ + 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) { + 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 (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)` - ] + } 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)` + ] - 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 + 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) - }, + this.next = false + this.pre = false + // setTimeout(()=>{ + // this.pageBackRef.width = '0px' + // },450) + }, - /** - * 取消触摸 - **/ - touchcancel() { + /** + * 取消触摸 + **/ + 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 - }, 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.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 = [ - `(0,0)`, - `(0,0)`, - `(0,0)` + `(${-this.windowWidth}px,0)`, + `(${-this.windowWidth}px,0)`, + `(0,${-this.windowHeight}px)` ] - 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.next = false + this.pre = false - 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' - }) + /** + * 呼出菜单 + **/ + 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; } - this.showAnimation = true + 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 = [ - `(0,0)`, - `(0,0)`, - `(0,0)` - ] - this.nextPage.pageTranslate = [ - `(0,0)`, - `(${this.windowWidth}px,0)`, - `(0,${this.windowHeight}px)` - ] - }, 50) - }, + this.curPage.pageTranslate = pre + this.nextPage.pageTranslate = cur + if (this.turnType === 0) { - - /** - * 下一页,页面轮换 - **/ - goNextPage() { - if (this.nextPage.isEnd) { //如果翻至本书末尾 - alery('到头了') - uni.showToast({ - title: '跳转推荐页', - icon: 'none' - }) - /*****************************************/ - /*****************************************/ - /*****************************************/ - return - } - if (!this.nextPage.ready && !this.nextChapter.ready) { - this.waitForNext = true - uni.showLoading({ - title: '正在准备下一章', - mask: true - }) - return - } - this.currentPage += 1 - let showChapter = false - console.log(this.currentPage,this.curChapter.totalPage) - if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了 - showChapter = true - this.currentPage = 0 - this.chapterRotate('next') - this.speedData.bookId = this.bookId_mark; - this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id; - this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name; - this.speedData.precent = this.curChapter.chapterIndex; - this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId; - if (this.speedTrue) { - this.updateReadRateUl() - } else { - this.saveReadRateUl() + // 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` } - } - let cur = [].concat(this.curPage.pageTranslate) - let next = [].concat(this.nextPage.pageTranslate) - this.goToPage(this.currentPage) - // 当前scrollTop的值 - // this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 )) - // console.log(this.scrollTop,'翻页后的scrollTop') - - this.prePage.pageTranslate = cur - this.curPage.pageTranslate = next - this.nextPage.pageTranslate = [ - `(0,0)`, - `(${this.windowWidth}px,0)`, - `(0,${this.windowHeight}px)` - ] - - if (this.turnType === 0) { - // this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s' - // this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px` - // this.$refs.pageBackRef.$el.style.width = `100px` - this.pageBackRef.before = false - this.pageBackRef.transition = 'right .5s ease .15s' - this.pageBackRef.right = `${this.windowWidth}px` - this.pageBackRef.left = 0 - this.pageBackRef.width = `100px` - } - setTimeout(() => { - if (showChapter) { - uni.showToast({ - title: this.curChapter.chapterName, - icon: 'none' - }) - } - this.showAnimation = true - this.prePage.pageTranslate = [ - `(${-this.windowWidth}px,0)`, - `(${-this.windowWidth}px,0)`, - `(0,${-this.windowHeight}px)` - ] - this.curPage.pageTranslate = [ - `(0,0)`, - `(0,0)`, - `(0,0)` - ] - this.nextPage.pageTranslate = [ - `(0,0)`, - `(${this.windowWidth}px,0)`, - `(0,${this.windowHeight}px)` - ] - - }, 100) - }, - - /** - * 章节轮换 - **/ - async chapterRotate(type) { - /* - 1:在切换上下章时调用请求数据方 - 2:调用截取数据方法 this.counlSystemInfo() - */ - if (type === 'next') { - this.preChapter = Object.assign({}, this.curChapter) - this.curChapter = Object.assign({}, this.nextChapter) - console.log(this.curChapter.chapterIndex, 'chapterIndex') - copyBookText = this.curChapter.text; - - this.counlSystemInfo() - console.log(copyBookText,1111111111) - if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断 - this.nextChapter = { - ready: false, - chapterIndex: this.curChapter.chapterIndex + 1, - chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name, - } - await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId) - this.$set(this.nextChapter, 'text', this.tmpChapter.text) - this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead) - this.calcNextChapter() - } else { - this.nextChapter = { - ready: true, - isEnd: true - } - } - this.getThreeChapter(this.curChapter.chapterIndex) - - } - if (type === 'pre') { - this.nextChapter = Object.assign({}, this.curChapter) - this.curChapter = Object.assign({}, this.preChapter) - copyBookText = this.curChapter.text; - this.counlSystemInfo() - console.log(copyBookText, '跳转到上一章') - // this.preChapter.text = - if (this.curChapter.chapterIndex !== 0) { - this.preChapter = { - ready: false, - chapterIndex: this.curChapter.chapterIndex - 1, - chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name, + setTimeout(() => { + if (showChapter) { + uni.showToast({ + title: this.curChapter.chapterName, + icon: 'none' + }) } - 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) - } - }, + 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) + }, - /** - * 跳转下一章 - **/ - goNextChapter() { - if (this.curChapter.chapterIndex === this.directoryList.length - 1) { - uni.showToast({ - title: '已经是最后一章了', - icon: 'none' - }) - return - } - if (this.waitForNext || this.waitForPre) { - return - } - - if (this.isVertical) { - if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) { - uni.showLoading({ - title: '请稍等...' - }) - setTimeout(() => { - this.getThreeChapter(this.curChapter.chapterIndex + 1) - uni.hideLoading() - this.down = true - this.clearDown() - }, 300) - } else { + /** + * 下一页,页面轮换 + **/ + goNextPage() { + if (this.nextPage.isEnd) { //如果翻至本书末尾 + alery('到头了') uni.showToast({ - icon: 'none', - title: '已加载全部' + title: '跳转推荐页', + icon: 'none' }) + /*****************************************/ + /*****************************************/ + /*****************************************/ + return } - } else { - if (this.nextChapter.ready) { + if (!this.nextPage.ready && !this.nextChapter.ready) { + this.waitForNext = true + uni.showLoading({ + title: '正在准备下一章', + mask: true + }) + return + } + this.currentPage += 1 + let showChapter = false + console.log(this.currentPage, this.curChapter.totalPage) + if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了 + showChapter = true + this.currentPage = 0 this.chapterRotate('next') - this.goToPage(0) - } else { - uni.showLoading({ - title: '正在准备下一章' - }) - this.waitForNextChapter = true + this.speedData.bookId = this.bookId_mark; + this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id; + this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name; + this.speedData.precent = this.curChapter.chapterIndex; + this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId; + if (this.speedTrue) { + this.updateReadRateUl() + } else { + this.saveReadRateUl() + } + } + let cur = [].concat(this.curPage.pageTranslate) + let next = [].concat(this.nextPage.pageTranslate) + this.goToPage(this.currentPage) + // 当前scrollTop的值 + // this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 )) + // console.log(this.scrollTop,'翻页后的scrollTop') - } + this.prePage.pageTranslate = cur + this.curPage.pageTranslate = next + this.nextPage.pageTranslate = [ + `(0,0)`, + `(${this.windowWidth}px,0)`, + `(0,${this.windowHeight}px)` + ] - }, + if (this.turnType === 0) { + // this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s' + // this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px` + // this.$refs.pageBackRef.$el.style.width = `100px` + this.pageBackRef.before = false + this.pageBackRef.transition = 'right .5s ease .15s' + this.pageBackRef.right = `${this.windowWidth}px` + this.pageBackRef.left = 0 + this.pageBackRef.width = `100px` + } + setTimeout(() => { + if (showChapter) { + uni.showToast({ + title: this.curChapter.chapterName, + icon: 'none' + }) + } + this.showAnimation = true + this.prePage.pageTranslate = [ + `(${-this.windowWidth}px,0)`, + `(${-this.windowWidth}px,0)`, + `(0,${-this.windowHeight}px)` + ] + this.curPage.pageTranslate = [ + `(0,0)`, + `(0,0)`, + `(0,0)` + ] + this.nextPage.pageTranslate = [ + `(0,0)`, + `(${this.windowWidth}px,0)`, + `(0,${this.windowHeight}px)` + ] - /** - * 跳转上一章 - **/ - 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 { + }, 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({ - icon: 'none', - title: '已经在最开头了' + title: '已经是最后一章了', + icon: 'none' }) + return } - } else { if (this.waitForNext || this.waitForPre) { return } - if (this.preChapter.ready) { - this.chapterRotate('pre') - this.goToPage(0) + if (this.isVertical) { + if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) { + uni.showLoading({ + title: '请稍等...' + }) + setTimeout(() => { + this.getThreeChapter(this.curChapter.chapterIndex + 1) + uni.hideLoading() + this.down = true + this.clearDown() + }, 300) + } else { + uni.showToast({ + icon: 'none', + title: '已加载全部' + }) + } } else { - uni.showLoading({ - title: '正在准备上一章' + 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' }) - this.waitForPreChapter = true + 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, + /** + * 根据页码跳转 + **/ + 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: [ - `(${-this.windowWidth}px,0)`, - `(${-this.windowWidth}px,0)`, - `(0,${-this.windowHeight}px)` - ] + `(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: 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, + 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.preChapter.canRead + canRead: this.curChapter.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)` - ] + 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: this.nextChapter.ready, - chapterName: this.nextChapter.chapterName, - text: this.nextChapter.text.map(function(obj, index) { - return obj.picAndWord - }), - pageNum: 0, - totalPage: this.nextChapter.totalPage, + 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.nextChapter.canRead + canRead: this.curChapter.canRead } + + console.log(this.domIndex, 'domIndex') + } - - } else { - this.nextPage = { - ready: true, - chapterName: this.curChapter.chapterName, - text: copyBookText[page + 1], - pageNum: this.currentPage + 1, - totalPage: this.curChapter.totalPage, - pageTranslate: [ - `(0,0)`, - `(${this.windowWidth}px,0)`, - `(0,${this.windowHeight}px)` - ], - canRead: this.curChapter.canRead - } - - console.log(this.domIndex, 'domIndex') - - } - }, + }, - /** - * 跳转到指定章节 - **/ - async goToChapter(index) { - this.progressTouched = false - this.closeMenu() - uni.showLoading({ - title: '加载中' - }) - await this.getThreeChapter(index.id) - //this.counlSystemInfo() - this.goToPage(0) - this.scrollTop = 0 - // this.domIndex = 1 - uni.hideLoading() - }, + /** + * 跳转到指定章节 + **/ + async goToChapter(index) { + this.progressTouched = false + this.closeMenu() + uni.showLoading({ + title: '加载中' + }) + await this.getThreeChapter(index.id) + //this.counlSystemInfo() + this.goToPage(0) + this.scrollTop = 0 + // this.domIndex = 1 + uni.hideLoading() + // setTimeout(() => { + // this.$router.go(0) + // }, 500) + }, - /** - * 加大字体 - **/ - async bigSize() { - let progress = this.progress //记录阅读进度用于调整字体后跳转 - this.fontSize += 2 - uni.setStorageSync('fontSize', this.fontSize) - this.calcHeight() - copyBookText = this.curChapter.text; - this.counlSystemInfo() - await this.calcCurChapter() - let page = Math.floor((this.curChapter.totalPage - 1) * progress) - this.goToPage(page) - if (this.preChapter.ready && !this.preChapter.isCover) { - this.preChapter.ready = false - await this.calcPreChapter() - } - if (this.nextChapter.ready && !this.nextChapter.isEnd) { - this.nextChapter.ready = false - await this.calcNextChapter() - } - }, - - /** - * 缩小字体 - **/ - async smallSize() { - let progress = this.progress - this.fontSize -= 2 - uni.setStorageSync('fontSize', this.fontSize) - this.calcHeight() - copyBookText = this.curChapter.text; - this.counlSystemInfo() - await this.calcCurChapter() - let page = Math.floor((this.curChapter.totalPage - 1) * progress) - this.goToPage(page) - if (this.preChapter.ready && !this.preChapter.isCover) { - this.preChapter.ready = false - await this.calcPreChapter() - } - if (this.nextChapter.ready && !this.nextChapter.isEnd) { - this.nextChapter.ready = false - await this.calcNextChapter() - } - }, - - /** - * 改变行距 - **/ - async changeLineHeight(lineHeight) { - let progress = this.progress - if (lineHeight === this.lineHeight) { - return - } else { - this.lineHeight = lineHeight; - uni.setStorageSync('lineHeight', this.lineHeight) + /** + * 加大字体 + **/ + async bigSize() { + let progress = this.progress //记录阅读进度用于调整字体后跳转 + this.fontSize += 2 + uni.setStorageSync('fontSize', this.fontSize) this.calcHeight() copyBookText = this.curChapter.text; this.counlSystemInfo() @@ -2557,338 +2677,398 @@ 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 - + /** + * 缩小字体 + **/ + async smallSize() { + let progress = this.progress + this.fontSize -= 2 + uni.setStorageSync('fontSize', this.fontSize) + this.calcHeight() + copyBookText = this.curChapter.text; + this.counlSystemInfo() + await this.calcCurChapter() + let page = Math.floor((this.curChapter.totalPage - 1) * progress) + this.goToPage(page) + if (this.preChapter.ready && !this.preChapter.isCover) { + this.preChapter.ready = false + await this.calcPreChapter() } - uni.showModal({ - title: '提示', - showCancel:false, + if (this.nextChapter.ready && !this.nextChapter.isEnd) { + this.nextChapter.ready = false + await this.calcNextChapter() + } + }, + + /** + * 改变行距 + **/ + async changeLineHeight(lineHeight) { + let progress = this.progress + if (lineHeight === this.lineHeight) { + return + } else { + this.lineHeight = lineHeight; + uni.setStorageSync('lineHeight', this.lineHeight) + this.calcHeight() + copyBookText = this.curChapter.text; + this.counlSystemInfo() + await this.calcCurChapter() + let page = Math.floor((this.curChapter.totalPage - 1) * progress) + this.goToPage(page) + if (this.preChapter.ready && !this.preChapter.isCover) { + this.preChapter.ready = false + await this.calcPreChapter() + } + if (this.nextChapter.ready && !this.nextChapter.isEnd) { + this.nextChapter.ready = false + await this.calcNextChapter() + } + } + }, + + + /** + * 改变翻页方式 + **/ + changeTurnType(turnType) { + if (turnType === this.turnType) { + return + } else { + this.showAnimation = false + this.turnType = turnType; + uni.setStorageSync('turnType', this.turnType) + } + if (turnType == 4) { + // 逼真翻页方式 + this.isSimulation = true + } else { + this.isSimulation = false + } + if (turnType == 3) { + this.isVerticalHua = true + // 如果正在播放音频 则暂停掉 + if (this.musicPlaying) { + //console.log('正在播放音频') + this.music.pause() + this.highlight = "null"; + this.isAudioMenu = false + + } + uni.showModal({ + title: '提示', + showCancel: false, content: '当前阅读模式下，无听书功能，如想体验听书功能，请切换其他模式，并且阅读进度与其他模式不共享。', - success: function (res) { + success: function(res) { if (res.confirm) { console.log('用户点击确定'); } } - }) - } else { - this.isVerticalHua = false - } - }, - - /** - * 改变背景 - **/ - changeBackground(background) { - if (background === this.background) { - return - } else { - this.background = background; - uni.setStorageSync('background', this.background) - } - }, - - /** - * 获取目录 - **/ - getDirectoryList(showLoading) { - - if (showLoading) { - uni.showLoading({ - title: '加载中', - mask: true - }) - } - return this.$http - .post('book/book/getBookCatalogue', { - 'bookid': this.bookId_mark - }) - .then(res => { - let vipnum = 0 - if (this.detail.isBuy == 1) { - vipnum = 1 - } - for (let i in res.bookCatalogue) { - this.directoryList.push({ - "id": i, - "chapterId": res.bookCatalogue[i].chapterId, - "name": res.bookCatalogue[i].chapterName, - }) - } - }) - .catch(() => { - // 此处是网络连接失败的逻辑 - uni.hideLoading() - return new Promise((resolve, reject) => { - uni.showModal({ - title: '连接失败', - content: '请检查您的网络状态', - confirmText: '重试', - success: async (res) => { - if (res.confirm) { - //用户点击了重试 - await this.getDirectoryList(true) - resolve() - } else if (res.cancel) { - //用户点击取消 - this.back() - } - } - }) }) - }) - - // /*****************************************/ - // /*****************************************/ - // /*****************************************/ - }, - - - /** - * 获取一章数据 - **/ - getOneChapter(chapterId, showLoading) { - - if (showLoading) { - uni.showLoading({ - title: '加载中', - mask: true - }) - } - - return this.$http - .post('book/bookchaptercontent/appGetBookChapterContent', { - 'userId': this.userInfo.id, - 'bookid': this.bookId_mark, - 'chapterid': chapterId - }) - .then(res => { - this.tmpChapter.text = res.bookCatalogue - // console.log(this.tmpChapter.text,'tmpChapter') - }) - .catch(() => { - // 此处是网络连接失败的逻辑 - uni.hideLoading() - return new Promise((resolve, reject) => { - uni.showModal({ - title: '连接失败', - content: '请检查您的网络状态', - confirmText: '重试', - success: async (res) => { - if (res.confirm) { - //用户点击了重试 - await this.getOneChapter(chapterId, true) - resolve() - } else if (res.cancel) { - //用户点击取消 - this.back() - } - } - }) - }) - }) - /*****************************************/ - /*****************************************/ - /*****************************************/ - }, - - - /** - * 获取三章数据 - **/ - async getThreeChapter(index) { - await this.getOneChapter(this.directoryList[Number(index)].chapterId) - this.curChapter = { - chapterIndex: Number(index), - chapterName: this.directoryList[Number(index)].name, - text: this.tmpChapter.text, - canRead: this.tmpChapter.canRead - } - this.verticalData = { - chapterIndex: Number(index), - chapterName: this.directoryList[Number(index)].name, - text: this.tmpChapter.text, - canRead: this.tmpChapter.canRead - } - copyBookText = this.curChapter.text; - this.counlSystemInfo() - this.domIndex = 0; - if (this.curChapter.chapterIndex !== 0) { - await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId) - //this.mpcounlSystemInfo - this.preChapter = { - chapterIndex: Number(index) - 1, - chapterName: this.directoryList[Number(index) - 1].name, - text: this.tmpChapter.text, - canRead: this.tmpChapter.canRead - } - preText = this.tmpChapter.text - this.mpcounlSystemInfo() - this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1 - // console.log(this.preChapterTotal,'上一章内容页数') - // 处理数据 - - // - } else { - this.preChapter = { - ready: true, - isCover: true - } - } - - if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { - - await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId) - this.nextChapter = { - chapterIndex: Number(index) + 1, - chapterName: this.directoryList[Number(index) + 1].name, - text: this.tmpChapter.text, - canRead: this.tmpChapter.canRead - } - nextText = this.tmpChapter.text - this.nextmpcounlSystemInfo() - this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1 - // console.log(this.nextChapterTotal,'下一章内容页数') - } else { - this.nextChapter = { - ready: true, - isEnd: true - } - } - await this.calcCurChapter() - await this.calcPreChapter() - await this.calcNextChapter() - }, - /* - 获取进度 - */ - getReadRateUl() { - let data = { - bookId: this.bookId_mark, - userId: this.userInfo.id, - } - - $http.request({ - url: "book/bookreadrate/getReadRate", - method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 - data, - header: { //默认 无 说明：请求头 - 'Content-Type': 'application/json' - }, - }).then(res => { - console.log("获取", res) - if (res.readRate === null) { - this.speedTrue = false } else { - this.speedTrue = true; - this.curChapter.chapterIndex = res.readRate.chapterId - this.updateReadId = res.readRate.id - this.oldReadSpeed.precent = res.readRate.precent - this.oldReadSpeed.updateReadId = res.readRate.id - this.getThreeChapter(this.curChapter.chapterIndex) + this.isVerticalHua = false } - }) - }, + }, - /* - 保存更新进度 - */ - 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, - } + /** + * 改变背景 + **/ + changeBackground(background) { + if (background === this.background) { + return + } else { + this.background = background; + uni.setStorageSync('background', this.background) + } + }, - $http.request({ - url: "book/bookreadrate/save", - method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 - data, - header: { //默认 无 说明：请求头 - 'Content-Type': 'application/json' - }, - }).then(res => { - console.log("保存成功", res) - }) - }, - /* - 更新进度 + /** + * 获取目录 + **/ + getDirectoryList(showLoading) { + + if (showLoading) { + uni.showLoading({ + title: '加载中', + mask: true + }) + } + return this.$http + .post('book/book/getBookCatalogue', { + 'bookid': this.bookId_mark + }) + .then(res => { + let vipnum = 0 + if (this.detail.isBuy == 1) { + vipnum = 1 + } + for (let i in res.bookCatalogue) { + this.directoryList.push({ + "id": i, + "chapterId": res.bookCatalogue[i].chapterId, + "name": res.bookCatalogue[i].chapterName, + }) + } + }) + .catch(() => { + // 此处是网络连接失败的逻辑 + uni.hideLoading() + return new Promise((resolve, reject) => { + uni.showModal({ + title: '连接失败', + content: '请检查您的网络状态', + confirmText: '重试', + success: async (res) => { + if (res.confirm) { + //用户点击了重试 + await this.getDirectoryList(true) + resolve() + } else if (res.cancel) { + //用户点击取消 + this.back() + } + } + }) + }) + }) + + // /*****************************************/ + // /*****************************************/ + // /*****************************************/ + }, + + + /** + * 获取一章数据 + **/ + getOneChapter(chapterId, showLoading) { + + if (showLoading) { + uni.showLoading({ + title: '加载中', + mask: true + }) + } + + return this.$http + .post('book/bookchaptercontent/appGetBookChapterContent', { + 'userId': this.userInfo.id, + 'bookid': this.bookId_mark, + 'chapterid': chapterId + }) + .then(res => { + this.tmpChapter.text = res.bookCatalogue + // console.log(this.tmpChapter.text,'tmpChapter') + }) + .catch(() => { + // 此处是网络连接失败的逻辑 + uni.hideLoading() + return new Promise((resolve, reject) => { + uni.showModal({ + title: '连接失败', + content: '请检查您的网络状态', + confirmText: '重试', + success: async (res) => { + if (res.confirm) { + //用户点击了重试 + await this.getOneChapter(chapterId, true) + resolve() + } else if (res.cancel) { + //用户点击取消 + this.back() + } + } + }) + }) + }) + /*****************************************/ + /*****************************************/ + /*****************************************/ + }, + + + /** + * 获取三章数据 + **/ + async getThreeChapter(index) { + await this.getOneChapter(this.directoryList[Number(index)].chapterId) + this.curChapter = { + chapterIndex: Number(index), + chapterName: this.directoryList[Number(index)].name, + text: this.tmpChapter.text, + canRead: this.tmpChapter.canRead + } + this.verticalData = { + chapterIndex: Number(index), + chapterName: this.directoryList[Number(index)].name, + text: this.tmpChapter.text, + canRead: this.tmpChapter.canRead + } + copyBookText = this.curChapter.text; + this.counlSystemInfo() + this.domIndex = 0; + if (this.curChapter.chapterIndex !== 0) { + await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId) + //this.mpcounlSystemInfo + this.preChapter = { + chapterIndex: Number(index) - 1, + chapterName: this.directoryList[Number(index) - 1].name, + text: this.tmpChapter.text, + canRead: this.tmpChapter.canRead + } + preText = this.tmpChapter.text + this.mpcounlSystemInfo() + this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1 + // console.log(this.preChapterTotal,'上一章内容页数') + // 处理数据 + + // + } else { + this.preChapter = { + ready: true, + isCover: true + } + } + + if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { + + await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId) + this.nextChapter = { + chapterIndex: Number(index) + 1, + chapterName: this.directoryList[Number(index) + 1].name, + text: this.tmpChapter.text, + canRead: this.tmpChapter.canRead + } + nextText = this.tmpChapter.text + this.nextmpcounlSystemInfo() + this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1 + // console.log(this.nextChapterTotal,'下一章内容页数') + } else { + this.nextChapter = { + ready: true, + isEnd: true + } + } + await this.calcCurChapter() + await this.calcPreChapter() + await this.calcNextChapter() + }, + /* + 获取进度 */ - 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 - } + getReadRateUl() { + let data = { + bookId: this.bookId_mark, + userId: this.userInfo.id, + } - $http.request({ - url: "book/bookreadrate/update", - method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 - data, - header: { //默认 无 说明：请求头 - 'Content-Type': 'application/json' - }, - }).then(res => { - console.log("更新", res) - }) + $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); + this.page = options.curpage + this.goToPage(this.page) + }, + showMenuCall(options){ + this.setShow = true + } + }, - /** - * 购买书籍接口 - **/ - buyBook() { - //在回调中调用this.initPage()刷新本页1 - uni.showToast({ - title: '跳转至购买页面，如果未登陆则跳转登陆', - icon: 'none' - }) - } - }, - beforeDestroy() { - if(this.musicPlaying){ - this.music.pause() + beforeDestroy() { + if (this.musicPlaying) { + this.music.pause() } }, onHide() { - if(this.musicPlaying){ - this.music.pause() + if (this.musicPlaying) { + this.music.pause() } - } + }, } + diff --git a/utils/turnjs.scss b/utils/turnjs.scss new file mode 100644 index 0000000..abb5703 --- /dev/null +++ b/utils/turnjs.scss @@ -0,0 +1,2 @@ +.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;} +} \ No newline at end of file