优化阅读页面

pages/novelReading/novelReading.vue

@@ -1,14 +1,27 @@
 <template>
 	<view class="novelReading_content">
-		<!-- 	 -->
-		<!-- @tap="handelShowStepUp" -->
 		<view class="novelReading_body" :style="`background:${bodyReadingBg}`">
 			<!--   @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher" @preload="preloadContent"-->
 			<view class="novelReading_main_con">
+				<view class="novelReading_main_read"
+					:style="`background:${theFirstTime ? 'rgba(0,0,0,0.8)' :'transparent'};top:${mainReadTipsTop};bottom:${mainReadTipsBottom}`">
+					<view class="main_read_item read_item_last" @tap="pageLsatTurning">
+						<text v-if="theFirstTime">上一页</text>
+					</view>
+					<view v-if="theFirstTime" class="main_read_item read_item_centre" @tap="handelShowStepUp">
+						<view class="tips">点击中间</view>
+						<view class="name">显示菜单</view>
+					</view>
+					<view v-else class="main_read_item" @tap="handelShowStepUp"></view>
+					<view class="main_read_item read_item_next" @tap="pageNextTurning">
+						<text v-if="theFirstTime">下一页</text>
+					</view>
+				</view>
+				<!--  @clickTo="handelShowStepUp" -->
 				<yingbing-ReadPage style="height: 100%;" ref="yingbingReadPage" :footerShow="true"
 					:page-type="charactersPageType" :font-size="newCharactersSize" :enableClick="true"
 					:line-height="defaultCharactersLineHeight" :color="novelContentColor" :bg-color="bodyReadingBg"
-					:slide="20" :enablePreload="false" @loadmore="loadmoreContent" @clickTo="handelShowStepUp"
+					:slide="20" :enablePreload="false" @loadmore="loadmoreContent"
 					:clickOption="{width:200,height: 400,left:'auto',top:'auto'}" :topGap="0" :bottomGap="20"
 					@change="currentChange" :readChapterFlag="readChapterFlag">
 					<template slot="test">
@@ -49,13 +62,13 @@
 			</view>
 		</view>
 		<view class="u_popup_all">
-			<u-popup :show="navbarPopupShow" mode="top" :overlay="false" bgColor="transparent">
+			<u-popup :show="navbarPopupShow" mode="top" :overlay="false" bgColor="transparent" z-index="60">
 				<u-navbar :title="bookInfo.title" @rightClick="rightClick" :autoBack="true" :fixed="false"
 					:bgColor="mainBodyBg" :titleStyle="{ color: navigationBarTitleTextColor }"
 					:leftIconColor="navigationBarTitleTextBackColor" :shadow="true" :safeAreaInsetTop="true"
 					:placeholder="true" />
 			</u-popup>
-			<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent"
+			<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" z-index="61" bgColor="transparent"
 				:safeAreaInsetBottom="false">
 				<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
 					<view class="reading_schedule_body">
@@ -91,7 +104,7 @@
 					</view>
 				</view>
 			</u-popup>
-			<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5"
+			<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="62"
 				:safeAreaInsetBottom="false">
 				<view class="step_up_box" :style="`background:${bodyReadingBg}`">
 					<view class="step_up_box_body">
@@ -229,6 +242,9 @@
 				readChapterLastid: '',
 				readChapterNextid: '',
 				readChapterFlag: false,
+				theFirstTime: true,
+				mainReadTipsTop: 0,
+				mainReadTipsBottom: 0
 			};
 		},
 		onLoad(options) {
@@ -238,7 +254,9 @@
 		},
 		onShow() {
 			const token = myGetStorage('token');
+			const theFirstTime = myGetStorage('theFirstTime');
 			this.token = token;
+			this.theFirstTime = theFirstTime ? false : true;
 			const bookSid = this.booksDirectorySid;
 			const data = {
 				sid: bookSid,
@@ -312,7 +330,6 @@
 						console.log(err, '========');
 					});
 				})
-
 			},
 			async loadmoreContent(chapter, callback) {
 				console.log(chapter, "loadmoreContent")
@@ -328,33 +345,25 @@
 				} else if (chapter > newReadDirectoryActive) {
 					chapterId = newReadChapterNextid
 				}
-				const readChapterInfoObj = await this.isGetBookInfo(chapterId);
+				const resTemp = await this.isGetBookInfo(chapterId);
-				let newReadInfoObj = {};
+				let newReadInfoObj = this.isBooksObj(resTemp);;
-				if (readChapterInfoObj.chackpay == 1) {
+				// if (readChapterInfoObj.chackpay == 1) {
-					newReadInfoObj = {
+				// 	newReadInfoObj = {
-						...readChapterInfoObj
+				// 		...readChapterInfoObj
-					}
+				// 	}
-					callback('success', newReadInfoObj);
+				// 	callback('success', newReadInfoObj);
-				}
+				// }
-				if (readChapterInfoObj.chackpay == 2 || readChapterInfoObj.chackpay == 3) {
+				// if (readChapterInfoObj.chackpay == 2 || readChapterInfoObj.chackpay == 3) {
-					const custom = [`slot:test`];
+				// 	const custom = [`slot:test`];
-					newReadInfoObj = {
+				// 	newReadInfoObj = {
-						...readChapterInfoObj,
+				// 		...readChapterInfoObj,
-						custom,
+				// 		custom,
-						content: '',
+				// 		content: '',
-					}
+				// 	}
-					callback('success', newReadInfoObj);
+				callback('success', newReadInfoObj);
-				}
+				// }
-				const flag = newNovelReadingContentText.some((m) => m.id == readChapterInfoObj.id);
+				const sortArr = this.handelReadList([newReadInfoObj]);
-				let listContents = newNovelReadingContentText;
+				this.novelReadingContentText = sortArr;
-				if (!flag) {
-					if (chapter < newReadDirectoryActive) {
-						listContents = [newReadInfoObj, ...newNovelReadingContentText];
-					} else if (chapter > newReadDirectoryActive) {
-						listContents = [...newNovelReadingContentText, newReadInfoObj];
-					}
-				}
-				this.novelReadingContentText = listContents;
 			},
 			currentChange(pageInfo) {
 				const novelReadingContentText = this.novelReadingContentText;
@@ -372,24 +381,45 @@
 					}
 				})
 			},
+			pageLsatTurning() {
+				const theFirstTime = this.theFirstTime;
+				if (theFirstTime) {
+					this.handelTheFirstTime();
+				} else {
+					this.$refs.yingbingReadPage.pagePrev();
+				}
+			},
+			pageNextTurning() {
+				const newReadChapterInfoObj = this.readChapterInfoObj;
+				const theFirstTime = this.theFirstTime;
+				if (theFirstTime) {
+					this.handelTheFirstTime();
+				} else {
+					if (newReadChapterInfoObj.isvip == 1) {
+						uni.showToast({
+							icon: 'none',
+							title: '当前章节未解锁,暂不支持跳章节观看',
+						})
+						return;
+					}
+					this.$refs.yingbingReadPage.pageNext();
+				}
+			},
 			upperNextChapter(type) {
-				// const newNovelReadingContentText = this.novelReadingContentText;
-				// const newReadDirectoryActive = this.readDirectoryActive;
-				// const newReadChapterInfoObj = this.readChapterInfoObj;
 				const newReadChapterLastid = this.readChapterLastid;
 				const newReadChapterNextid = this.readChapterNextid;
-				// console.log(newReadDirectoryActive, "=========")
+				const newReadChapterInfoObj = this.readChapterInfoObj;
 				let chapterId = '';
 				if (type == 'upper') {
 					chapterId = newReadChapterLastid;
 				} else if (type == 'next') {
-					// if (newReadChapterInfoObj.isvip == 1) {
+					if (newReadChapterInfoObj.isvip == 1) {
-					// 	uni.showToast({
+						uni.showToast({
-					// 		icon: 'none',
+							icon: 'none',
-					// 		title: '当前章节未解锁,暂不支持跳章节观看',
+							title: '当前章节未解锁,暂不支持跳章节观看',
-					// 	})
+						})
-					// 	return;
+						return;
-					// }
+					}
 					chapterId = newReadChapterNextid;
 				}
 				this.isGetReadChapter(chapterId);
@@ -411,46 +441,59 @@
 				}
 				return newBooksObj;
 			},
+			handelReadList(list) {
+				const newNovelReadingContentText = this.novelReadingContentText;
+				const data = [];
+				list.forEach((m) => {
+					const obj = newNovelReadingContentText.find((j) => {
+						return m.id == j.id
+					})
+					if (!obj) {
+						data.push(m)
+					}
+				})
+				const sortArr = [...newNovelReadingContentText, ...data]
+				sortArr.sort((a, b) => {
+					return a.chapter - b.chapter
+				})
+				return sortArr;
+			},
 			async isGetReadChapter(chapterId, type) {
 				let lastObj = {};
 				let nextObj = {};
 				let newReadInfoObj = {};
+				let contents = [];
 				const newNovelReadingContentText = this.novelReadingContentText;
 				const resTemp = await this.isGetBookInfo(chapterId);
 				if (resTemp.lastid) {
-					const lastIdx = newNovelReadingContentText.findIndex((m) => m.lastid = resTemp.lastid);
+					const lastItem = newNovelReadingContentText.find((m) => {
-					if (lastIdx != -1) {
+						return m.id == resTemp.lastid
-						newReadInfoObj = newNovelReadingContentText[lastIdx];
+					});
+					if (lastItem) {
+						lastObj = lastItem;
 					} else {
 						const resLastObj = await this.isGetBookInfo(resTemp.lastid);
 						lastObj = this.isBooksObj(resLastObj);
 					}
 				}
+				newReadInfoObj = this.isBooksObj(resTemp);
+				contents.push(newReadInfoObj);
 				if (resTemp.nextid) {
-					const lastIdx = newNovelReadingContentText.findIndex((m) => m.nextid = resTemp.nextid);
+					const nextItem = newNovelReadingContentText.find((m) => m.id == resTemp.nextid);
-					if (lastIdx != -1) {
+					if (nextItem) {
-						nextObj = newNovelReadingContentText[lastIdx];
+						nextObj = nextItem;
 					} else {
 						const resNextObj = await this.isGetBookInfo(resTemp.nextid);
 						nextObj = this.isBooksObj(resNextObj);
 					}
+					contents.push(nextObj);
 				}
-				newReadInfoObj = this.isBooksObj(resTemp);
+				const sortArr = this.handelReadList(contents);
-				const flag = newNovelReadingContentText.some((m) => m.id == newReadInfoObj.id);
+				this.novelReadingContentText = sortArr
-				let listContents = newNovelReadingContentText;
-				if (!flag) {
-					if (type == 'upper') {
-						listContents = [newReadInfoObj, ...newNovelReadingContentText, ];
-					} else if (type == 'next') {
-						listContents = [...newNovelReadingContentText, newReadInfoObj];
-					}
-				}else {
-					listContents = [lastObj, newReadInfoObj, nextObj]
-				}
-				this.novelReadingContentText = listContents;
 				this.readChapterInfoObj = newReadInfoObj;
+				// if(type) {
 				this.$refs.yingbingReadPage.init({
-					contents: [lastObj, newReadInfoObj, nextObj],
+					contents: sortArr,
 					start: 0,
 					currentChapter: newReadInfoObj.chapter,
 				})
@@ -459,10 +502,43 @@
 				this.readChapterNextid = newReadInfoObj.nextid;
 			},
 			handelDirectoryItem(row) {},
+			handelPurchaseFull() {
+				const readChapterInfoObj = this.readChapterInfoObj;
+				uni.showLoading({
+					title: '加载中...'
+				});
+				const data = {
+					sid: readChapterInfoObj.sid,
+					id: readChapterInfoObj.id,
+					allprice: readChapterInfoObj.allprice,
+				};
+				uni.$u.http.post('/buyall', data).then((res) => {
+					uni.hideLoading();
+					if (res.status == 1) {
+						if (res.data.status == 2) {
+							console.log("购买失败")
+						}
+					}
+				}).catch((err) => {
+					uni.hideLoading();
+				});
+			},
 			handelShowStepUp() {
-				this.readingPopupshow = !this.readingPopupshow;
+				const theFirstTime = this.theFirstTime;
-				// this.navbarPopupShow = !this.navbarPopupShow;
+				if (theFirstTime) {
-				this.stepUpPopupShow = false;
+					this.handelTheFirstTime();
+				} else {
+					this.readingPopupshow = !this.readingPopupshow;
+					this.navbarPopupShow = !this.navbarPopupShow;
+					this.stepUpPopupShow = false;
+				}
+			},
+			handelTheFirstTime() {
+				// const theFirstTime = this.theFirstTime;
+				// if (theFirstTime) {
+				this.theFirstTime = false;
+				mySetStorage('theFirstTime', '1');
+				// }
 			},
 			handelDirectoryPopup() {
 				// this.directoryPopupShow = true;
@@ -490,27 +566,7 @@
 					url: `/pages/voucherCenter/index`
 				})
 			},
-			handelPurchaseFull() {
+
-				const readChapterInfoObj = this.readChapterInfoObj;
-				uni.showLoading({
-					title: '加载中...'
-				});
-				const data = {
-					sid: readChapterInfoObj.sid,
-					id: readChapterInfoObj.id,
-					allprice: readChapterInfoObj.allprice,
-				};
-				uni.$u.http.post('/buyall', data).then((res) => {
-					uni.hideLoading();
-					if (res.status == 1) {
-						if (res.data.status == 2) {
-							console.log("购买失败")
-						}
-					}
-				}).catch((err) => {
-					uni.hideLoading();
-				});
-			},
 			// 切换页面颜色
 			changNovelMainType(type) {
 				this.novelMainTypeColor = type;
@@ -626,6 +682,7 @@
 				this.nextChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonBg;
 				this.nextChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonTextColor;
 			},
+
 			rightClick() {
 				uni.navigateBack();
 			},
@@ -635,6 +692,34 @@
 				})
 			}
 		},
+		watch: {
+			// 阅读菜单
+			readingPopupshow(newVal) {
+				if (newVal) {
+					// this.mainReadTipsBottom = `calc(constant(safe-area-inset-bottom) + ${300}rpx)`;
+					this.mainReadTipsBottom = `${300}rpx`;
+				} else {
+					this.mainReadTipsBottom = 0;
+				}
+			},
+			// 导航栏
+			navbarPopupShow(newVal) {
+				if (newVal) {
+					this.mainReadTipsTop = '44px';
+				} else {
+					this.mainReadTipsTop = 0;
+				}
+			},
+			// 设置阅读样式
+			stepUpPopupShow(newVal) {
+				if (newVal) {
+					this.mainReadTipsBottom = `${408}rpx`;
+					// this.mainReadTipsBottom = `calc(constant(safe-area-inset-bottom) + ${408}rpx)`;
+				} else {
+					this.mainReadTipsBottom = 0;
+				}
+			}
+		},
 		created() {
 			const novelMainObj = myGetStorage('novelMainObj') || '{}';
 			const novelMainTypeColor = JSON.parse(novelMainObj).novelMainTypeColor || 'F3EFE9';
@@ -774,6 +859,7 @@
 				flex-direction: column;
 				width: 100%;
 				height: 100%;
+				position: relative;
 				// // padding: 32rpx 32rpx;
 				// padding-bottom: constant(safe-area-inset-bottom);
 				// /* 兼容 iOS 设备 */
@@ -784,6 +870,52 @@
 				// // padding-top:var(–status-bar-height);
 				box-sizing: border-box;
 
+				.novelReading_main_read {
+					display: flex;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					z-index: 50;
+					padding-bottom: constant(safe-area-inset-bottom);
+					padding-bottom: env(safe-area-inset-bottom);
+					padding-top: var(--status-bar-height);
+					box-sizing: border-box;
+
+					.main_read_item {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						justify-content: center;
+						// background-color: #ff728f;
+						color: #fff;
+					}
+
+					.read_item_last,
+					.read_item_next {
+						font-size: 46rpx;
+					}
+
+					.read_item_centre {
+						border-left-style: solid;
+						border-right-style: solid;
+						border-left-width: 2rpx;
+						border-right-width: 2rpx;
+						border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0) 100%) 1;
+						border-image-slice: 2;
+
+						.tips {
+							font-size: 28rpx;
+						}
+
+						.name {
+							font-size: 46rpx;
+						}
+					}
+				}
+
 				.novelReading_main {
 					flex: 1;
 					width: 100%;
@@ -879,7 +1011,7 @@
 				justify-content: center;
 				align-items: center;
 				width: 192rpx;
-				height: 82rpx;
+				height: 80rpx;
 				font-size: 34rpx;
 				line-height: 1;
 				border-radius: 12rpx;

uni_modules/yingbing-ReadPage/components/yingbing-ReadPage/yingbing-ReadPage.vue

@@ -44,7 +44,7 @@
 								<text class="flip-item-header-text" :style="{
 								color: color,
 								'font-family': fontFamily
-							}">{{item.title}}</text>
+							}">{{item.title}}{{current}}</text>
 							</view>
 							<template v-if="item.type == 'text'">
 								<view class="flip-item-text flip-item-content">

uni_modules/yingbing-flip/components/modules/flip.wxs

@@ -72,6 +72,7 @@ function touchcancel(event, ins) {
 
 function touchaction(event, ins, isFlipTo) {
 	var state = ins.getState();
+	console.log(state,"statestate")
 	clearInterval(ins)
 	if (state.isTouch && !state.disableTouch) {
 		var rect = ins.getBoundingClientRect()

uni_modules/yingbing-flip/components/yingbing-flip/yingbing-flip.vue

@@ -343,6 +343,7 @@
 		},
 		watch: {
 			current (newVal) {
+				console.log(newVal,"newValnewVal")
 				this.currentIndex = newVal
 			}
 		}

unpackage/cache/uts_custom_ios/app-ios-debug.json

@@ -0,0 +1 @@
+{"dir":"/Users/seaman/srv/bdserver.dcloud.net.cn/service/storage/app/package/IOS/queue/52b619a0-59af-11ee-9b76-5d8f23a3a6b1/wgtRoot/__UNI__474F351/"}

unpackage/debug/.ios.ins

@@ -1 +0,0 @@
-forceInstall