代码优化

vedio/page-subs/sub_A/book-long-content/book-long-content.vue

@@ -88,7 +88,8 @@
 				userInfo: null,
 				showVipOpen: 0,
 				showBeanOpen: 0,
-				current: 1
+				current: 1,
+				height: 0
 			};
 		},
 		onLoad(options) {
@@ -124,14 +125,12 @@
 				uni.startPullDownRefresh({})
 			})
 
-			// 绑定分享参数
-			// #ifdef MP-WEIXIN
-			wx.onCopyUrl(() => {
-				return {
-					query: `bookId=${this.bookData.id}`
+			let that = this
+			uni.getSystemInfo({
+				success(res) {
+					that.height = res.screenHeight
 				}
 			})
-			// #endif
 		},
 		onShow() {
 			refreshUserInfo();

vedio/page-subs/sub_A/book-long-content/components/detail-bottom.vue

@@ -42,7 +42,6 @@
 				<button class="c-button_clear cover-button" open-type="share"></button>
 			</view>
 		</view>
-		<view class="safe-placeholder" :style="[safePlaceholderStyle]"></view>
 	</view>
 </template>
 
@@ -76,7 +75,7 @@
 		},
 		data: function() {
 			return {
-				height: `100`,
+				height: `60`,
 				backgroundColor: `#fff`
 			}
 		},
@@ -96,28 +95,19 @@
 			fixedBottomStyle: function() {
 				let height = 0;
 				if (this.bottomSafeHeight) {
-					height = height + px2rpx(this.bottomSafeHeight)
+					// height = height + this.bottomSafeHeight
 				}
 				return {
-					bottom: `${height}rpx`
-				}
-			},
-			safePlaceholderStyle: function() {
-				let height = 0;
-				if (this.bottomSafeHeight) {
-					height = height + px2rpx(this.bottomSafeHeight)
-				}
-				return {
-					height: `${height}rpx`
+					bottom: `${height}px`
 				}
 			},
 			bottomStyle: function() {
-				let height = 100;
+				let height = 66;
 				if (this.bottomSafeHeight) {
-					height = height + px2rpx(this.bottomSafeHeight)
+					// height = height + this.bottomSafeHeight
 				}
 				return {
-					height: `${height}rpx`
+					height: `${height}px`
 				}
 			},
 			likeIcon: function() {
@@ -160,7 +150,7 @@
 <style lang="scss" scoped>
 	.detail-bottom {
 		position: absolute;
-		height: 100rpx;
+		height: 66px;
 		bottom: 0;
 		z-index: 99;
 
@@ -170,7 +160,7 @@
 			bottom: 0;
 			left: 0;
 			right: 0;
-			height: 100rpx;
+			height: 66px;
 			display: flex;
 			flex-direction: row;
 			align-items: center;

vedio/page-subs/sub_A/book-long-content/components/detail-content.vue

@@ -5,10 +5,10 @@
 			<view class='content' :style="{'color':color}">
 				<view class="title"
 					:style="{'font-size':(fontSize*1.6)+'px','line-height':lineHeight+'px','margin-bottom':lineHeight+'px'}">
-					{{info.data[read].sub}}
+					{{ '第' + catalogue + '章'}}
 				</view>
-				<view class="p" v-html='info.data[read].content'
-					:style="{'font-size':fontSize+'px','line-height':lineHeight+'px'}"></view>
+				<view v-html='info.data[read].content'
+					:style="{'font-size':fontSize+'px','line-height':lineHeight+'px','text-align':'left'}"></view>
 			</view>
 		</view>
 
@@ -16,12 +16,11 @@
 			<view class="loading" v-if="size<1" :style="{'font-size':fontSize+'px'}"> 正在加载中... </view>
 			<swiper class="center" :current="step" :disable-programmatic-animation='true' :circular='false'
 				:indicator-dots="false" :autoplay="false" :interval="3000" :duration="500" @change="handleChange">
-				<swiper-item class='html' :style="{width:winWidth+'px',height:height+'px'}" v-for="(item,index) in size"
-					:key='index'>
+				<swiper-item v-for="(item,index) in size" :key='index'>
 					<view class="article" v-if="catalogue<=detail.freeNum"
-						:style="{width:winWidth+'px','color':color,'transform': 'translateY(-'+(index*height)+'px)'}">
+						:style="{'color':color,'transform': 'translateY(-'+getTransHeight(index)+'px)'}">
 						<view
-							:style="{'font-size':(fontSize*1.6)+'px','line-height':lineHeight+'px','margin':(lineHeight * 0.6)+'px 0'}">
+							:style="{'font-size':(fontSize*1.6)+'px','line-height':lineHeight+'px','margin-bottom':lineHeight+'px','text-align':'left'}">
 							{{ '第' + catalogue + '章'}}
 						</view>
 						<view v-html='info.data[read].content'
@@ -61,8 +60,7 @@
 			</swiper>
 		</view>
 
-		<view class='act' :style="{height:winHeight+'px'}" @touchstart="touchstart" @touchmove="touchMove"
-			@touchend="touchend">
+		<view class='act' @touchstart="touchstart" @touchmove="touchMove" @touchend="touchend">
 			<view class='item' @tap.stop='prev'></view>
 			<view class='center' @tap.stop="toggleShow"></view>
 			<view class='item' @tap.stop='next'></view>
@@ -99,7 +97,6 @@
 				catalogue: 1,
 				isFisrt: true,
 				winWidth: 0,
-				winHeight: 0,
 				height: 0,
 				lineHeight: 0,
 				// 章节下标
@@ -125,19 +122,24 @@
 					this.page = this.step / (this.size - 1) * 100
 				},
 				deep: true
+			},
+			cata: {
+				handler(val, oldVal) {
+					this.page = this.step / (this.size - 1) * 100
+				},
+				deep: true
 			}
 		},
 		destroyed() {
 			removeContentFormatChangeWatch(this);
 		},
 		mounted() {
-			let that = this
+			let _this = this
 			uni.getSystemInfo({
 				success(res) {
-					that.winWidth = res.screenWidth
-					that.winHeight = res.screenHeight
-					that.height = res.screenHeight - 100 - 50
-					that.lineHeight = (that.winHeight - 50) / 20
+					_this.winWidth = res.screenWidth
+					_this.height = res.screenHeight - 66
+					_this.lineHeight = (res.screenHeight - 66) / 16
 				}
 			})
 			
@@ -163,13 +165,13 @@
 				} else {
 					if (this.catalogue != resultCatalogue) {
 						this.catalogue = resultCatalogue
-						// this.refreshChapterinfoData(this.catalogue)
+						this.refreshChapterinfoData(this.catalogue)
 					}
 				}
 
 				if (this.isFisrt) {
 					this.isFisrt = false
-					this.refreshChapterinfoData(3)
+					this.refreshChapterinfoData()
 				}
 
 			}, this)
@@ -177,7 +179,6 @@
 		methods: {
 			reloadChapterinfoData() {
 				this.refreshChapterinfoData()
-
 			},
 			// 文章数据刷新
 			refreshChapterinfoData(chapterId = this.catalogue) {
@@ -185,37 +186,26 @@
 				let id = this.detail.articleChapterList[chapterId - 1].id
 				getChapterinfoData(this.detail.id, id, (success, data) => {
 					if (success) {
-						this.info.title = data.chapterId
-						this.info.data.push({
+						this.info.data = [{
 							id: chapterId,
 							sub: data.chapterId,
 							content: data.content
-						})
+						}]
 						this.getHeight()
 					}
 				})
 			},
 			handleChange(e) {
-				console.log('change', e);
-				console.log('XXXXXXXX-step', this.step);
-				console.log('XXXXXXXX-read', this.read);
-				console.log('XXXXXXXX-size', this.size);
-				console.log('XXXXXXXX-page', this.page);
-				// if (this.catalogue != e.detail.index) {
-				// 	this.catalogue = e.detail.index
-				// 	if (this.detail.isUnlock) {
-				// 		this.changeCurrent()
-				// 	} else if (!this.detail.isUnlock && this.catalogue < this.detail.freeNum) {
-				// 		this.changeCurrent()
-				// 	}
-				// }
+				// console.log('change', e);
 			},
 			getHeight(prev) {
 				let _this = this
 				setTimeout(function() {
 					const query = uni.createSelectorQuery().in(_this);
 					query.select('#html .content').boundingClientRect(data => {
-						_this.size = Math.ceil(data.height / _this.height)
+						let _size = Math.ceil(data.height / _this.height)
+						_this.size = Math.ceil((data.height + _size * (_this.lineHeight * 2)) /
+							_this.height)
 						if (data.height < _this.height) {
 							_this.page = 100
 						}
@@ -239,12 +229,13 @@
 							this.isClick = false
 							this.handleLoadmore((success, data) => {
 								if (success == "success") {
-									this.info.data.unshift({
-										id: this.catalogue,
-										sub: this.catalogue,
+									_this.info.data.unshift({
+										id: _this.catalogue,
+										sub: _this.catalogue,
 										content: data
 									})
-									this.catalogue -= 1
+									_this.catalogue -= 1
+									_this.changeCurrent()
 									_this.size = 0
 									_this.getHeight(true)
 									_this.isClick = true
@@ -252,18 +243,17 @@
 								}
 
 								message.notify('加载失败')
-								this.isClick = false
+								_this.isClick = false
 							}, this.catalogue - 1)
 
 						} else {
 							message.notify('已经在最开头了')
 						}
 					}
-					this.toggle = false
 				}
 			},
 			next(from) {
-				if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum) {
+				if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum + 1) {
 					this.tapVip()
 					return
 				}
@@ -284,13 +274,14 @@
 							this.isClick = false
 							// 加载下一章
 							this.handleLoadmore((success, data) => {
-								this.info.data.push({
-									id: this.catalogue,
-									sub: this.catalogue,
+								_this.info.data.push({
+									id: _this.catalogue,
+									sub: _this.catalogue,
 									content: data
 								})
 
 								_this.catalogue += 1
+								_this.changeCurrent()
 								_this.read += 1
 								_this.size = 0
 								_this.step = 0
@@ -307,11 +298,17 @@
 							}
 						}
 					}
-					this.toggle = false
 				}
 			},
+			getTransHeight(i) {
+				var tH = i * this.height
+				for (let j = 1; j <= i; j++) {
+					tH -= (this.lineHeight * 2)
+				}
+				return tH
+			},
 			toggleShow() {
-				if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum) {
+				if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum + 1) {
 					this.tapVip()
 					return
 				}
@@ -381,9 +378,9 @@
 
 <style lang="scss">
 	.page {
+		position: relative;
 		width: 100%;
 		height: 100%;
-		position: relative;
 
 		#html {
 			width: 100%;
@@ -392,10 +389,13 @@
 			top: 0;
 			left: 0;
 			bottom: 0;
+			padding-top: 0;
 			box-sizing: border-box;
+			padding: 0 40rpx;
 
 			.content {
-				padding: 0 40rpx;
+				padding: 0;
+				background-color: #DCBD3B;
 				box-sizing: border-box;
 				font-weight: 400;
 				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
@@ -411,6 +411,7 @@
 			left: 0;
 			bottom: 0;
 			box-sizing: border-box;
+			padding: 0 40rpx;
 
 			.loading {
 				position: absolute;
@@ -420,30 +421,24 @@
 			}
 
 			.center {
+				height: calc(100% - 66px);
 				display: flex;
 				flex-direction: row;
 				justify-content: flex-start;
-				height: calc(100% - 50rpx - 100rpx);
 				position: relative;
-
-				.html {
-					width: 100%;
 				overflow-y: hidden;
 
 				.article {
-						padding: 10rpx 40rpx;
 					box-sizing: border-box;
 					font-weight: 400;
 					font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
 					text-indent: 36rpx;
 				}
 			}
-			}
 
 			.slots {
 				position: absolute;
 				width: 100%;
-				height: calc(100% - 50rpx - 100rpx);
 				top: 0;
 				left: 0;
 				right: 0;
@@ -512,7 +507,7 @@
 		.act {
 			width: 100%;
 			position: fixed;
-			z-index: 101;
+			z-index: 11;
 			top: 0;
 			left: 0;
 			bottom: 0;

vedio/page-subs/sub_A/book-long-content/components/setting-pop.vue

 <template>
-	<uni-popup ref='pop' type="bottom" :is-mask-click='false' :safe-area='false' @change='change'>
+	<uni-popup ref='pop' type="bottom" :is-mask-click='false' :safe-area='false' @change='change' @maskClick='tapMask'>
 		<view class="setting-box">
 			<view class="row">
 				<view class="title">
@@ -91,6 +91,9 @@
 				this.$emit('close')
 				this.$refs.pop.close();
 			},
+			tapMask() {
+				this.showPop = false;
+			},
 			change(e) {
 				if (this.showPop == e.show) return;
 				this.showPop = e.show