完成了文字高亮

2023-03-24 16:41:28 +08:00
parent 5127888c45
commit dea49e6385
1 changed files with 126 additions and 47 deletions
--- 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)` }">
 								</p>
-
-
 							</view>
 						</view>
 						<view
@@ -239,6 +237,8 @@
 			<view v-show="isSimulation" class="flipbook-viewport" 
 			:rect="rect" 
 			:change:rect="updateRenderData"
+			:musicItem="musicItem"
+			:change:musicItem="updateMusic"
 			:oldReadSpeed="oldReadSpeed"
 			:change:oldReadSpeed="updateReadPercent"
 			:SimulationText="SimulationText" :change:SimulationText="updateSimulationText"
@@ -258,17 +258,6 @@
 					</view>
 				</view>
 			</view>			
-			<!-- end -->
-			<!-- <view id="flipbook111"  style="display: none;">
-			<div class="myPage" style="background-color: #fff; padding: 0 10px;" v-for="(item, index) in SimulationText" :key="index">
-				<div class="chapter">{{ curPage.chapterName }}</div>
-				<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
-					:class="{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
-					:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
-				</p>							
-			</div>
-			</view> -->
-			<!--  -->
 			<!-- 模拟页面背景 -->
 			<view class v-if='turnType == 0 && !pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
 					width: `${pageBackRef.width}`,right: `${pageBackRef.right}`  }]" class="pageback_container">
@@ -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];
@@ -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()
 					}
 				});
@@ -1599,9 +1601,11 @@
 				if (this.isPause) {
 					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);
+				  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
@@ -3083,13 +3094,34 @@
 				length:0,
 				hasContent: false,
 				curPage:1,	
+				touchNum: 0, //点击次数
+				touchTime: null, //定时器清除
+				lastPage:false,
+				musicIndexDom:0,
+				highlight:'null',
+				musicPlaying:false
 			}
 		},		
 		mounted() {	
 			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 += "<p class="+classname+" style="+styleconteent+">" + newVal[i][j].list + "</p>"
+						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal[i][j].paragraph +"' style="+styleconteent+">" + newVal[i][j].list + "</p>"
 					}
 					var page1 = i+1
 					var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
-					var tagHtml = "<div style='background-color:#fff; padding: 0 12px; font-size:18px; line-height:28px'>"+ conntentHtml +"<div style='text-align:center'>"+page1+"/"+ newVal.length +"</div><div class='buts' style='display:flex;  justify-content: space-between;'></div></div>";
+					var tagHtml = "<div style='background-color:#fff; padding: 0 12px; font-size:18px; line-height:28px'>"+ conntentHtml +"<div style='text-align:center; color:#777'>"+page1+"/"+ newVal.length +"</div></div>";
 					// $("#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('点击了左侧')
-					$("#flipbook").turn("previous")
+					//console.log('点击了左侧')
+					if($("#flipbook").turn('page') == 1){ //第一页
+					// console.log('切换到下一章节')
+						//console.log('第一页了')
 						ownerInstance.callMethod('onViewClick', {
-						curpage: $("#flipbook").turn('page')-1
-					})
-				}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
-						console.log('点击了右侧')
-						$("#flipbook").turn("next")
-						ownerInstance.callMethod('onViewClick', {
-							curpage: $("#flipbook").turn('page')-1
+							curpage: 0,
+							chapterid : 'prev'
 						})						
 					}else{
-						console.log('点击了中间')
+						// 不是第一页
+					$("#flipbook").turn("previous")
+					ownerInstance.callMethod('onViewClick', {
+						curpage: $("#flipbook").turn('page')-1,
+						chapterid : ''
+					})
+					}
+				}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
+					//	console.log('点击了右侧')								
+					if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页
+						// console.log('切换到下一章节')
+						// console.log('最后一页了')
+						ownerInstance.callMethod('onViewClick', {
+							curpage: 0,
+							chapterid : 'next'
+						})						
+					}else{
+						// 不是最后一页						
+						$("#flipbook").turn("next")	
+						ownerInstance.callMethod('onViewClick', {
+							curpage: $("#flipbook").turn('page')-1,
+							chapterid: '',
+						})
+						
+					}
+					} else{
+						// console.log('点击了中间')
+						// 双击
+						this.touchNum++
+						if (this.touchNum == 0) {} else {
+							if (this.touchNum > 1) {
+								clearTimeout(this.touchTime)
+								//单击事件
+								this.touchTime = setTimeout(() => {
+									this.touchNum = 0
+								}, 250)
+								console.log('双击')
 								ownerInstance.callMethod('showMenuCall', {
 									menuShow:true
 								})								
+							} else {
+								clearTimeout(this.touchTime)
+								this.touchTime = setTimeout(() => {
+									//双击或则多次点击事件
+									this.touchNum = 0
+								}, 250)
+								//console.log('单击')
 							}
-				// 调用 service 层的方法
-				// console.log(event, ownerInstance)
 						
+						}
+						// end
+						
+					}	
 				
 				},				
 			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;