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;