From dea49e6385dce9962eac276d2f99a8abe1f6763b Mon Sep 17 00:00:00 2001 From: "@fawn-nine" <1271023382@qq.com> Date: Fri, 24 Mar 2023 16:41:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E6=96=87=E5=AD=97?= =?UTF-8?q?=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/yRead/angbook.vue | 173 +++++++++++++++++++++++++++++----------- 1 file changed, 126 insertions(+), 47 deletions(-) diff --git a/pages/yRead/angbook.vue b/pages/yRead/angbook.vue index 49013a0..4298535 100644 --- a/pages/yRead/angbook.vue +++ b/pages/yRead/angbook.vue @@ -126,8 +126,6 @@ :class="highlight === item.paragraph ? 'highlight' : ''" :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">

- - --> - - - - + @@ -495,7 +484,7 @@ import battery from '../../components/battery/battery.vue' import virtualList from '../../components/virtualList/virtualList.vue' // 引入翻页效果动画 - //import $ from 'jquery' + import $ from 'jquery' import { dateToStr @@ -504,6 +493,7 @@ mapState } from 'vuex'; import $http from '../../config/requestConfig'; +import { nextTick } from "vue"; let copyBookText = [] let preText = [] @@ -743,7 +733,12 @@ clientlast: null, //开始位置 touchNum: 0, //点击次数 touchTime: null, //定时器清除 - + musicItem:{ + // 听书相关内容 + musicIndexDom:0, + highlight: 'null', + musicPlaying:false, + } } }, @@ -792,9 +787,15 @@ height: this.height } - }, - }, + } + + }, methods: { + changeMusicItem(){ + this.musicItem.highlight = this.highlight, + this.musicItem.musicIndexDom = this.domIndex, + this.musicItem.musicPlaying = this.musicPlaying + }, openStart(e) { //记录位置 this.clientlast = e.changedTouches[0]; @@ -1510,7 +1511,7 @@ this.domIndex = 0 this.createAudio() this.musicManuShow = false - this.isAudioMenu = true + this.isAudioMenu = true } else { let found = false this.verticalData.text.forEach((item, itemIndex) => { @@ -1523,7 +1524,7 @@ this.domIndex = itemIndex this.createAudio() this.musicManuShow = false - this.isAudioMenu = true + this.isAudioMenu = true return } }) @@ -1555,6 +1556,8 @@ setTimeout(() => { this.music.play(); //执行播放 this.musicPlaying = true + this.musicItem.musicPlaying = true + this.changeMusicItem() }, 150) } // 音频播放结束 @@ -1565,7 +1568,6 @@ } else { console.log('音频播放结束2'); - this.addDomIndex() } }); @@ -1597,11 +1599,13 @@ audioPause() { this.isPause = !this.isPause if (this.isPause) { - this.music.pause() + this.music.pause() this.musicPlaying = false + this.musicItem.musicPlaying = false } else { this.music.play() this.musicPlaying = true + this.musicItem.musicPlaying = true } }, // 关闭听书 @@ -1614,6 +1618,7 @@ this.isPause = false; this.music = null; this.musicPlaying = false + this.changeMusicItem() }, /** @@ -3051,8 +3056,14 @@ onViewClick(options) { console.log('renderjsCall回调'); console.log(options); - this.page = options.curpage - this.goToPage(this.page) + if(options.chapterid == 'next'){ // 下一章 + this.goNextChapter() + }else if(options.chapterid == 'prev'){ // 上一章 + this.goPreChapter() + }else{ // 单纯的跳页 + this.page = options.curpage + this.goToPage(this.page) + } }, showMenuCall(options){ this.setShow = true @@ -3082,14 +3093,35 @@ SimulationText: [], length:0, hasContent: false, - curPage:1, + curPage:1, + touchNum: 0, //点击次数 + touchTime: null, //定时器清除 + lastPage:false, + musicIndexDom:0, + highlight:'null', + musicPlaying:false } }, mounted() { - this.onTurn(); - + this.onTurn(); }, methods: { + updateMusic(newVal, oldVal){ + this.highlight = newVal.highlight + this.musicIndexDom = newVal.musicIndexDom + this.musicPlaying = newVal.musicPlaying + console.log(newVal,'听书配置项有变化') + let page = 1 + page = $("#flipbook").turn('page') + if(newVal.musicPlaying){ + // 开启听书 + $("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"}) + + }else{ + // 关闭听书 + $("#flipbook .paragraph").css({color:"#333"}) + } + }, updateReadPercent(newVal, oldVal){ // 获取阅读进度 this.curPage = newVal.readPage @@ -3106,7 +3138,7 @@ }, updateSimulationText(newVal, oldVal) { - $("#flipbook").turn('pages',1) + $("#flipbook").turn('pages',1) // 内容变化时，值保留 $("#flipbook").turn('pages',newVal.length) // this.onTurn(); // this.SimulationText = newVal @@ -3119,11 +3151,11 @@ var styleconteent = '' newVal[i][j].class == 'jushou' ? classname = 'shouhang' : '' newVal[i][j].class == 'jushou' ? styleconteent = 'text-indent:2em' : '' - conntentHtml += "

" + newVal[i][j].list + "

" + conntentHtml += "

" + newVal[i][j].list + "

" } var page1 = i+1 var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;" - var tagHtml = "
"+ conntentHtml +"
"+page1+"/"+ newVal.length +"
"; + var tagHtml = "
"+ conntentHtml +"
"+page1+"/"+ newVal.length +"
"; // $("#flipbook").append(tagHtml); if (!$("#flipbook").turn('hasPage', i+2)) { // Create an element for this page @@ -3140,26 +3172,68 @@ }, onClick(event, ownerInstance) { if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页 - console.log('点击了左侧') + //console.log('点击了左侧') + if($("#flipbook").turn('page') == 1){ //第一页 + // console.log('切换到下一章节') + //console.log('第一页了') + ownerInstance.callMethod('onViewClick', { + curpage: 0, + chapterid : 'prev' + }) + }else{ + // 不是第一页 $("#flipbook").turn("previous") ownerInstance.callMethod('onViewClick', { - curpage: $("#flipbook").turn('page')-1 + curpage: $("#flipbook").turn('page')-1, + chapterid : '' }) + } }else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页 - console.log('点击了右侧') - $("#flipbook").turn("next") + // console.log('点击了右侧') + if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页 + // console.log('切换到下一章节') + // console.log('最后一页了') ownerInstance.callMethod('onViewClick', { - curpage: $("#flipbook").turn('page')-1 + curpage: 0, + chapterid : 'next' + }) + }else{ + // 不是最后一页 + $("#flipbook").turn("next") + ownerInstance.callMethod('onViewClick', { + curpage: $("#flipbook").turn('page')-1, + chapterid: '', }) + + } } else{ - console.log('点击了中间') - ownerInstance.callMethod('showMenuCall', { - menuShow:true - }) + // console.log('点击了中间') + // 双击 + this.touchNum++ + if (this.touchNum == 0) {} else { + if (this.touchNum > 1) { + clearTimeout(this.touchTime) + //单击事件 + this.touchTime = setTimeout(() => { + this.touchNum = 0 + }, 250) + console.log('双击') + ownerInstance.callMethod('showMenuCall', { + menuShow:true + }) + } else { + clearTimeout(this.touchTime) + this.touchTime = setTimeout(() => { + //双击或则多次点击事件 + this.touchNum = 0 + }, 250) + //console.log('单击') + } + + } + // end + } - // 调用 service 层的方法 - // console.log(event, ownerInstance) - }, onTurn() { @@ -3169,16 +3243,21 @@ height: this.height, width: this.width, elevation: 50, + duration:1000, gradients: true, when: { turning: function(event, page, pageObject) { - // 翻页时 - // this.curPage += 1 - console.log(event, page, pageObject,this.curPage) + // 翻页时 + // console.log(event, page, pageObject,this.curPage) }, - turning: function(event, page, pageObject) {} + } }); + // $("#flipbook").bind("last", function(event) { + // console.log("You are at the end of the flipbook"); + // this.lastPage = true + + // }); } } } @@ -3415,7 +3494,7 @@ justify-content: center; align-items: center; padding: 0; - // height: 96%; + height: 96%; width: 100%; background-color: #f7faf9; overflow: hidden;