翻页效果

manifest.json

@@ -19,7 +19,7 @@
             "prompt" : "template",
             "template" : {
                 "title" : "用户协议和隐私政策",
-                "message" : "请你务必审慎阅读、充分理解“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href='https://www.twin-ui.com'>《用户协议》</a>和<a href='https://www.twin-ui.com'>《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
+                "message" : "请你务必审慎阅读、充分理解“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href='https://main.nuttyreading.com/agreement.html'>《用户协议》</a>和<a href='https://main.nuttyreading.com/privacy.html'>《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
                 "buttonAccept" : "同意",
                 "buttonRefuse" : "暂不同意"
             }

pages/bookShop/commodityDetail.vue

@@ -310,8 +310,9 @@ formatRichText (html) { //控制小程序中图片大小
 </script>
 <style lang="scss" scoped>
 	.xiangqing {
-		overflow: hidden;
+		overflow: hidden; overflow-x: hidden;
 		img{display: block; max-width: 100%;}
+		p{max-width: 100%;}
 	}
 	.goods_nav {
 		z-index: 1;

pages/peanut/home.vue

@@ -195,7 +195,7 @@
 			return {
 				scrollTop: 0,
 				list3: [
-					'../../static/icon/home_ban_1.jpg',
+					// '../../static/icon/home_ban_1.jpg',
 					'../../static/icon/home_ban_2.jpg',
 					'../../static/icon/home_ban_3.jpg',
 				],

pages/yRead/angbook.vue

@@ -57,54 +57,11 @@
 
 		<!-- 垂直翻页 -->
 		<!-- @click="showMenu" -->	
-		<view class="vertical" v-if="isVerticalHua">
-			<view class="verticalbox" :class="{ container0: background === 1, container1: background === 2 }"
-				@click="showMenu">
-				<!-- 章节名 -->
-				<view class="chapter">
-					{{ verticalData.chapterName }}
-				</view>
-				<scroll-view :scroll-anchoring="true" scroll-y="true" :scroll-top="scrollTop"
-					scroll-with-animation="true" style="height: 600px; " @scrolltoupper="scrolltoupper"
-					@scrolltolower="scrolltolower" @scroll="scroll">
-					<view class="content">
-						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="verticalData.canRead">
-							<view style="text-indent: 2em;" v-for="(item, index) in verticalData.text" :key="index"
-								:class="highlight === index ? 'highlight' : ''">
-								<p class="book-inner" v-html="item.content" :style="{
-										fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
-										fontSize: `${fontSize}px`,
-										lineHeight: `${lineHeight * fontSize}px`,
-										color: `${colorList[background - 1]}`
-									}"></p>
-								<img style="max-width: 90%;" v-if="item.otherContent != '' && item.otherContent != null"
-									:src="item.otherContent">
-							</view>
-						</view>
-						<view
-							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
-							v-else>
-							付费章节
-							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
-								@touchend.stop="buyBook">去购买</view>
-						</view>
-					</view>
-				</scroll-view>
-				<view class="bottom-bar">
-					<!-- 时间 -->
-					<view>{{ systemTimeStr }}</view>
-					<!-- 电量 -->
-					<view>
-						<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
-					</view>
-				</view>
-			</view>
-		</view>
 
 		<!-- 横向翻页 -->
-		<view class="across" v-else>
+		<view class="across" >
 			<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
-			<view class="chantong" v-show="!isSimulation">
+			<view class="chantong" style="display: none;">
 				<!-- 上一页 -->
 				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
 					:style="{
@@ -190,8 +147,6 @@
 							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
 						</view>
 					</view>
-
-
 				</view>
 
 				<!-- 下一页-->
@@ -234,20 +189,22 @@
 				</view>
 			</view>
 			<!-- 仿真翻页 -->
-			<view v-show="isSimulation" class="flipbook-viewport" 
+			<view v-if="isSimulation" class="flipbook-viewport" 
 			:rect="rect" 
 			:change:rect="updateRenderData"	
+			:readerSet = "readerSet"
+			:change:readerSet="updateReaderSet"
 			:musicItem="musicItem"
 			:change:musicItem="updateMusic"
 			:oldReadSpeed="oldReadSpeed"
 			:change:oldReadSpeed="updateReadPercent"
-			:SimulationText="SimulationText" :change:SimulationText="updateSimulationText"
+			:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
 			 @touchend="turnjs.onClick"
 			>
 			<!-- <view class="container across"  @touchend="openEnd" @touchstart="openStart"> -->
 				<view class="container across"  >
 					<view class="flipbook" id="flipbook" >
-						<div class="hard"><img style="max-width: 100%;" :src="bookFengMian"></div>						
+						<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; color: #666; ">->点击两侧开启阅读<-</p> </div></div>						
 						<!-- <div 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"
@@ -700,6 +657,7 @@ import { nextTick } from "vue";
 					freeChapterCount: 0,
 					isBuy: 0,
 					isVip: 0,
+					chapterNum:null, // 阅读章节数
 				},
 				isVerticalHua: false,
 				speedTrue: false, //判断是否更新进度
@@ -727,9 +685,13 @@ import { nextTick } from "vue";
 				height: '800px',
 				text: 'hello',
 				isSimulation: true, // 仿真翻页模式				
-				SimulationText: [], // 仿真翻页内容数组
+				SimulationTextObj : {    // 仿真翻页内容
-				hasSimulationText: false,
+				'SimulationText' : [],
-				setShow: true, // 设置显示？
+				'fontSize' : '',
+				'lineHeight':'',
+				'oldReadPage':0
+				},				
+				setShow: false, // 设置显示？
 				clientlast: null, //开始位置
 				touchNum: 0, //点击次数
 				touchTime: null, //定时器清除				
@@ -738,6 +700,12 @@ import { nextTick } from "vue";
 					musicIndexDom:0,
 					highlight: 'null',
 					musicPlaying:false,
+				},
+				readerSet:{
+					fontSize:'',  // 字体大小，
+					lineHeight:'' ,// 行高，注意是fontSize的倍数
+					page:0,	
+					background:''
 				}
 			}
 		},
@@ -790,7 +758,21 @@ import { nextTick } from "vue";
 			}
 			
 		},	
+		// watch: {
+		// 	    changeBackground: {    // 深度监听
+		// 	        handler(newName, oldName) {
+		// 	            console.log(newName)
+		// 	        },
+		// 	        immediate: true,
+		// 	        deep: true
+		// 	    }
+		// 	},	
 		methods: {
+			_changeReaderSeting(){				
+				this.readerSet.fontSize = this.fontSize,  //字体大小，
+				this.readerSet.lineHeight = this.lineHeight //行高，注意是fontSize的倍数
+				
+			},
 			changeMusicItem(){
 					this.musicItem.highlight = this.highlight,
 					this.musicItem.musicIndexDom = this.domIndex,
@@ -827,7 +809,7 @@ import { nextTick } from "vue";
 			clickImg(item, index) {
 				// 点击图片
 				let imgarr = this.newchapterImgList.map(item => item)
-				console.log(imgarr, 'imgarr')
+				// console.log(imgarr, 'imgarr')
 				this.imgsShow = false
 				uni.previewImage({
 					current: index,
@@ -868,8 +850,12 @@ import { nextTick } from "vue";
 					.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
 					.then(res => {
 						this.bookName = res.book.name,
-						this.bookFengMian = res.book.images
+						this.bookFengMian = res.book.images,
-						console.log('获取电子书详情', res)
+						this.detail.freeChapterCount = res.book.freeChapterCount,
+						this.detail.isBuy = res.book.isBuy,
+						this.detail.isVip =  res.book.isVip,
+						this.detail.chapterNum = res.book.chapterNum // 阅读章节数
+						//console.log('获取电子书详情', res)
 					});
 
 
@@ -1016,7 +1002,6 @@ import { nextTick } from "vue";
 				})
 				preText = arr
 				// console.log(copyBookText,'copyBookText')				
-				// this.getSizePage(NumCol)
 			},
 			nextmpforGet(colSize, NumCol) {
 				let that = this
@@ -1151,9 +1136,14 @@ import { nextTick } from "vue";
 				}
 				arr.push(newArr)
 				copyBookText = arr // 每一页显示的内容				
-				this.SimulationText = []
+				this.SimulationTextObj = { 
-				this.SimulationText = arr
+				SimulationText : arr,
-				this.hasSimulationText = true
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: 0,
+				background:this.background
+				}
+				// this.hasSimulationText = true
 				console.log(this.SimulationText, 'SimulationText')
 			},
 
@@ -1293,6 +1283,8 @@ import { nextTick } from "vue";
 				if (typeof this.background !== 'number') {
 					this.background = 1
 				}
+				// this.readerSet.background = this.background
+				
 				this.turnType = uni.getStorageSync('turnType')
 				if (this.turnType == 2) {
 					this.isVertical = true;
@@ -1312,7 +1304,9 @@ import { nextTick } from "vue";
 						this.history = value
 					}
 				})
-
+				this.$nextTick(()=>{
+					this._changeReaderSeting()
+				})
 				/*****************************************/
 				/*****************************************/
 				/*****************************************/
@@ -1344,7 +1338,16 @@ import { nextTick } from "vue";
 				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
 				this.oldReadSpeed.readPage = page
 				this.goToPage(page)
+				this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = {
+				SimulationText : copyBookText,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: this.oldReadSpeed.readPage,
+				background:this.background
+				}
 				uni.hideLoading()
+				
 			},
 
 			/**
@@ -2448,10 +2451,18 @@ import { nextTick } from "vue";
 						})
 						setTimeout(() => {
 							this.getThreeChapter(this.curChapter.chapterIndex + 1)
+							// this.SimulationTextObj = {
+							// SimulationText : copyBookText,
+							// fontSize : this.fontSize,
+							// lineHeight : this.lineHeight,
+							// oldReadPage: 0
+							// // background:this.background
+							// }
 							uni.hideLoading()
 							this.down = true
 							this.clearDown()
 						}, 300)
+						
 					} else {
 						uni.showToast({
 							icon: 'none',
@@ -2526,6 +2537,7 @@ import { nextTick } from "vue";
 				this.currentPage = page
 				this.showAnimation = false
 				console.log(page, '======>')
+				
 				// console.log(copyBookText[page],'当前页')
 				this.$nextTick(function() {
 					this.curPage = {
@@ -2651,6 +2663,14 @@ import { nextTick } from "vue";
 					title: '加载中'
 				})
 				await this.getThreeChapter(index.id)
+				//this.SimulationTextObj.SimulationText = []
+				this.SimulationTextObj = {
+				SimulationText : copyBookText,
+				fontSize : this.fontSize,
+				lineHeight : this.lineHeight,
+				oldReadPage: 0,
+				background:this.background
+				}
 				//this.counlSystemInfo()
 				this.goToPage(0)
 				this.scrollTop = 0
@@ -2673,6 +2693,11 @@ import { nextTick } from "vue";
 				this.counlSystemInfo()
 				await this.calcCurChapter()				
 				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.oldReadSpeed.readPage = page
 				this.goToPage(page)
 				if (this.preChapter.ready && !this.preChapter.isCover) {
 					this.preChapter.ready = false
@@ -2696,6 +2721,11 @@ import { nextTick } from "vue";
 				this.counlSystemInfo()
 				await this.calcCurChapter()
 				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+				this.readerSet = {
+					fontSize : this.fontSize,
+					page : page
+				}
+				this.oldReadSpeed.readPage = page
 				this.goToPage(page)
 				if (this.preChapter.ready && !this.preChapter.isCover) {
 					this.preChapter.ready = false
@@ -2705,6 +2735,7 @@ import { nextTick } from "vue";
 					this.nextChapter.ready = false
 					await this.calcNextChapter()
 				}
+				
 			},
 
 			/**
@@ -2722,6 +2753,11 @@ import { nextTick } from "vue";
 					this.counlSystemInfo()
 					await this.calcCurChapter()
 					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
+					this.readerSet = {
+						lineHeight : this.lineHeight,
+						page : page
+					}
+					this.oldReadSpeed.readPage = page
 					this.goToPage(page)
 					if (this.preChapter.ready && !this.preChapter.isCover) {
 						this.preChapter.ready = false
@@ -2732,6 +2768,7 @@ import { nextTick } from "vue";
 						await this.calcNextChapter()
 					}
 				}
+				
 			},
 
 
@@ -2784,8 +2821,20 @@ import { nextTick } from "vue";
 				if (background === this.background) {
 					return
 				} else {
+					
 					this.background = background;
 					uni.setStorageSync('background', this.background)
+					// this.readerSet.background = background  // 修改阅读器背景
+					this.SimulationTextObj.background = this.background
+					this.SimulationTextObj.oldReadPage = this.curPage.pageNum			
+					console.log('改变页面背景',this.curPage.pageNum)
+					// this.SimulationTextObj = {
+					// 	SimulationText : this.SimulationTextObj.SimulationText,
+					// 	fontSize : this.SimulationText.fontSize,
+					// 	lineHeight : this.SimulationText.lineHeight,
+					// 	background: this.background,
+					// 	page: this.oldReadSpeed.readPage
+					// }				
 				}
 			},
 
@@ -2849,14 +2898,14 @@ import { nextTick } from "vue";
 			 * 获取一章数据
 			 **/
 			getOneChapter(chapterId, showLoading) {
-
 				if (showLoading) {
 					uni.showLoading({
 						title: '加载中',
 						mask: true
 					})
 				}
-
+				// 检查是否已经购买	
+				// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0			
 				return this.$http
 					.post('book/bookchaptercontent/appGetBookChapterContent', {
 						'userId': this.userInfo.id,
@@ -2866,6 +2915,7 @@ import { nextTick } from "vue";
 					.then(res => {						
 						this.tmpChapter.text = res.bookCatalogue
 						// console.log(this.tmpChapter.text,'tmpChapter')
+						
 					})
 					.catch(() => {						
 						// 此处是网络连接失败的逻辑						
@@ -3099,14 +3149,27 @@ import { nextTick } from "vue";
 				lastPage:false,
 				musicIndexDom:0,
 				highlight:'null',
-				musicPlaying:false
+				musicPlaying:false,
+				fontSize:'',
+				lineHeight:'',
+				containerStyle: ''
 			}
 		},		
 		mounted() {	
 			this.onTurn();			
 		},
 		methods: {
-			updateMusic(newVal, oldVal){
+			updateReaderSet(newVal, oldVal){
+				// 阅读器设置更新					
+				$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
+			console.log(newVal,'阅读器设置更新')	
+			if(newVal.page > 0 && newVal.fontSize !== this.fontSize || newVal.page > 0 && newVal.lineHeight !== this.lineHeight){
+				$("#flipbook").turn('page',newVal.page+1)
+			}
+			// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+			// $(".myPage p").css({backgroundColor:this.containerStyle})
+			},			
+			updateMusic(newVal, oldVal){ //听书
 				this.highlight = newVal.highlight
 				this.musicIndexDom = newVal.musicIndexDom
 				this.musicPlaying = newVal.musicPlaying
@@ -3125,8 +3188,8 @@ import { nextTick } from "vue";
 			updateReadPercent(newVal, oldVal){
 				// 获取阅读进度
 				this.curPage = newVal.readPage
-				console.log('获取到了阅读的进度page',newVal,this.curPage)
+				// console.log('获取到了阅读的进度page',newVal,this.curPage)-
-			$("#flipbook").turn('page', this.curPage+1)
+				//$("#flipbook").turn('page', this.curPage+1)
 			},
 			updateRenderData(newVal, oldVal) {
 				let {
@@ -3138,24 +3201,28 @@ import { nextTick } from "vue";
 				
 			},
 			updateSimulationText(newVal, oldVal) {
-				$("#flipbook").turn('pages',1)     // 内容变化时，值保留
+				$("#flipbook").turn('pages',1)     // 内容变化时，保留1页
-				$("#flipbook").turn('pages',newVal.length)
+				$("#flipbook").turn('pages',newVal.SimulationText.length)
 				// this.onTurn();				
 				// this.SimulationText = newVal
-				console.log('更新数组', $("#flipbook").turn("resize"))				
+				console.log('更新数组', newVal)
-				for (var i=0; i<newVal.length;i++) {
+				this.fontSize = newVal.fontSize
+				this.lineHeight = newVal.lineHeight
+				newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
+				//$(".myPage p").css({backgroundColor:this.containerStyle})
+				for (var i=0; i<newVal.SimulationText.length;i++) {
 					var tagHtml = "";
 					var conntentHtml = "";	
-					for (var j=0; j<newVal[i].length; j++) {
+					for (var j=0; j<newVal.SimulationText[i].length; j++) {
 						var classname = ''
 						var styleconteent = ''
-						newVal[i][j].class == 'jushou' ? classname = 'shouhang' : ''
+						newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : ''
-						newVal[i][j].class == 'jushou' ? styleconteent = 'text-indent:2em' : ''
+						newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = `"text-indent:2em ;font-size:${newVal.fontSize}px; color: #5d5d5d"` : styleconteent = "'font-size:"+newVal.fontSize+"px ; line-height:"+newVal.lineHeight*newVal.fontSize+"px;  color: #5d5d5d'"
-						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal[i][j].paragraph +"' style="+styleconteent+">" + newVal[i][j].list + "</p>"
+						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[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; color:#777'>"+page1+"/"+ newVal.length +"</div></div>";
+					var tagHtml = "<div style='padding:0 18px; position:relative;  background-color:"+this.containerStyle+"; height:inherit'>"+ conntentHtml +"<div style='text-align:center; color:#777 ; position: absolute;bottom: 5px; left: 0;text-align: center; width: 100%;' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
 					// $("#flipbook").append(tagHtml);
 					if (!$("#flipbook").turn('hasPage', i+2)) {
 					        // Create an element for this page
@@ -3165,11 +3232,14 @@ import { nextTick } from "vue";
 					        element.html(tagHtml);
 					}
 				}
+				// 如果有阅读缓存
+				if(newVal.oldReadPage>0){
+					$("#flipbook").turn('page', newVal.oldReadPage+1)
+				}else{
+					$("#flipbook").turn('page', 2)
+				}
 				
 			},			
-			toprev(){
-				console.log('点击了')
-			},
 			onClick(event, ownerInstance) {
 				if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
 					//console.log('点击了左侧')
@@ -3243,31 +3313,26 @@ import { nextTick } from "vue";
 					height: this.height,
 					width: this.width,
 					elevation: 50,
-					duration:1000,
+					duration:500,
 					gradients: true,
 					when: {
 							turning: function(event, page, pageObject) {
 								// 翻页时
+							// this.curPage = page
 							// console.log(event, page, pageObject,this.curPage)
-					},
+						},	}
-					
-					}
 				});				
-				// $("#flipbook").bind("last", function(event) {
-				// 	console.log("You are at the end of the flipbook");
-				// 	this.lastPage = true
-					
-				// });
 			}
+			
 		}		
 	}
 </script>
 <style>
+	/* .container1{background-color: #000;} */
 	.buts{width: 100%; display:flex; }
 	.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
 </style>
 <style lang="scss" scoped>	
-	
 	@import url("@/pages/yRead/iconfont.css");
 	// turnjs
 	/// .shouhang{text-indent: 2em;color: red;}

新建 文本文档.txt

@@ -0,0 +1,44 @@
+app 描述：疯子读书是一款专业的中医线上读书平台。中医古籍、中医经典，各家学说，各种中医类型的电子书。疯子读书不止可以看，还可以听，APP内还具有听书功能，解放您的眼睛。
+
+简短概括：一款专业的中医线上读书软件
+
+公司名称：天津众妙之门科技有限公司
+
+
+隐私政策地址：https://main.nuttyreading.com/privacy.html
+
+各个平台账号密码：
+天津众妙之门科技有限公司【疯子阅读】
+
+1、阿里云  https://account.aliyun.com/
+      账号：众妙之门花生享阅
+      密码：FZDS1234fzds
+      手机：18526084267
+2、苹果【每年有会费688需要缴纳】
+      apple id：huashengdingyue@163.com
+      密码：HSDY1234hsdy
+      账号主体联系人：皮诺曦
+3、华为开放平台 https://id1.cloud.huawei.com/
+      账号：18526084267
+      密码：HSXY1234hsxy
+4、腾讯应用宝 https://open.qq.com/
+      huashengdingyue@163.com
+      账号：2711345245
+      密码：HSDY1234hsdy
+5、小米 
+      账号：13110039505
+      密码：HSXY1234hsxy
+      绑定邮箱：huashengdingyue@163.com
+6、百度智能云 https://cloud.baidu.com/
+     （文字转语音阅读“听书”）
+     账户：天津众妙之门
+     密码：HSDY1234hsdy
+7、快递100
+      账户名：fengzidushu
+      密码：wu751019
+8、疯子读书163邮箱
+      邮箱账号：fengzidushu@163.com
+      邮箱密码：FZDS1234fzds
+9、微信开放平台
+      账号：fengzidushu@163.com
+      密码：FZDS1234fzds