代码优化

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

 <template>
 	<view class="detail-bottom" :style="[bottomStyle]">
-		<view class="fixed-bottom" :style="[fixedBottomStyle]">
+		<view class="fixed-bottom" :style="[fixedBottomStyle,{backgroundColor:backgroundColor}]">
 			<!-- <view class="bottom-item" @click="tapItem('like')">
 				<uni-icons :type='likeIcon.type' customPrefix="readiconfont" :color='likeIcon.color'
 					size='20'></uni-icons>
@@ -41,6 +41,10 @@
 </template>
 
 <script>
+	import {
+		watchContentFormatChange,
+		removeContentFormatChangeWatch
+	} from "../services/index.js"
 	import SystemInfoMixin from "../../../../common/mixins/system-info-mixin.js"
 	import {
 		px2rpx
@@ -66,9 +70,22 @@
 		},
 		data: function() {
 			return {
-				height: `100`
+				height: `100`,
+				backgroundColor: `#fff`
 			}
 		},
+		mounted() {
+			// 监听样式变动
+			watchContentFormatChange((data) => {
+				let result = data.getFormatValue();
+				if (this.backgroundColor != result.backgroundColor) {
+					this.backgroundColor = result.backgroundColor
+				}
+			}, this)
+		},
+		destroyed() {
+			removeContentFormatChangeWatch(this);
+		},
 		computed: {
 			fixedBottomStyle: function() {
 				let height = 0;
@@ -113,7 +130,7 @@
 				return {
 					type: this.detail.isCollect ? 'icon-collection' : 'icon-uncollection',
 					color: this.detail.isCollect ? '#FECF02' : "#333",
-					title: this.detail.isCollect ? "已收藏": "收藏"
+					title: this.detail.isCollect ? "已收藏" : "收藏"
 				}
 			}
 		},

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

-<template>
-	<view class="detail-content">
-		<template v-if='showVIPContent'>
-			<!-- <view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in contentSources'
-				:key='index'>
-				{{item}}
-			</view> -->
-			<yingbing-flip type="cover" :data="contentSources" style="height: 100vh;">
-				<!-- #ifndef MP -->
-				<template v-slot="{item, index}">
-				<!-- #endif -->
-					<!-- #ifdef MP -->
-					<template v-for="(item, index) in contentSources" :slot="index">
-					<!-- #endif -->
-						<view style="height: 100%">
-							<text style="font-size: 28rpx;color: #fff;">{{item}}</text>
-						</view>
-					</template>
-			</yingbing-flip>
-
-		</template>
-		<template v-else>
-			<yingbing-flip :data="preContentSources" style="height: 100vh;">
-				<!-- #ifndef MP -->
-				<template v-slot="{item, index}">
-				<!-- #endif -->
-					<!-- #ifdef MP -->
-					<template v-for="(item, index) in list" :slot="index">
-					<!-- #endif -->
-						<view style="height: 100%">
-							<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
-						</view>
-					</template>
-			</yingbing-flip>
-
-			<!-- <view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in preContentSources'
-				:key="index">
-				{{item}}
-			</view> -->
-			<view class="limit-button-box" @click="tapLimitButton">
-				{{limitButtonTitle}}
-			</view>
-		</template>
-	</view>
-</template>
-
-<script>
-	import {
-		watchContentFormatChange,
-		removeContentFormatChangeWatch
-	} from "../services/index.js"
-	import {
-		showLoginView
-	} from "../../../../common/services/userServices.js"
-	import {
-		gotoVIPApplyPage
-	} from "../../../../common/services/page-route.js"
-	import User from "../../../../common/models/User.js";
-	const PRECENT_VALUE = 40;
-	export default {
-		props: {
-			userInfo: {
-				type: Object,
-				default: function() {
-					return null
-				}
-			},
-			detail: {
-				type: Object,
-				default: function() {
-					return {}
-				}
-			}
-		},
-		data: function() {
-			return {
-				user: null,
-				fontSize: `18px`,
-			}
-		},
-		mounted() {
-			watchContentFormatChange((data) => {
-				let result = data.getFormatValue();
-				if (this.fontSize != result.fontSize) {
-					this.fontSize = result.fontSize
-				}
-			}, this)
-		},
-		destroyed() {
-			removeContentFormatChangeWatch(this);
-		},
-		watch: {
-			userInfo: {
-				handler: function(n) {
-					if (n) {
-						this.user = new User(n)
-					} else {
-						this.user = null
-					}
-				},
-				deep: true,
-				immediate: true
-			}
-		},
-		computed: {
-			contentSources: function() {
-				return this.detail && this.detail.content ? this.detail.content : [];
-			},
-			preContentSources: function() {
-				let result = this.detail && this.detail.content ? [...this.detail.content] : [];
-				let length = result.length;
-				if (length >= 2) {
-					let precent = PRECENT_VALUE / 100;
-					let preLength = Math.floor(length * precent);
-					return result.splice(0, preLength);
-				} else {
-					return result;
-				}
-			},
-			limitButtonTitle: function() {
-				let result = `~剩余${100-PRECENT_VALUE}%内容`;
-				if (!this.user) {
-					result = `${result}，点击登录后继续阅读`;
-				} else if (!this.user.isVip()) {
-					result = `${result}为会员章节内容，请前往购买会员`
-				}
-				result = `${result}~`;
-				return result;
-			},
-			contentStyle: function() {
-				return {
-					fontSize: this.fontSize
-				}
-			},
-			showVIPContent: function() {
-				return (this.user && this.user.isVip()) || this.detail.isUnlock
-			}
-		},
-		methods: {
-			tapLimitButton() {
-				if (!this.user) {
-					showLoginView()
-				} else if (!this.user.isVip()) {
-					let isIOS = wx.getSystemInfoSync().platform;
-					if (isIOS === 'ios') {
-						uni.showToast({
-							title: '暂不支持IOS系统',
-							icon: 'none'
-						})
-					
-						return
-					}
-					gotoVIPApplyPage()
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.detail-content {
-		paading: 20rpx 30rpx;
-		margin: 20rpx 30rpx;
-		display: flex;
-		flex-direction: column;
-
-		.content-paragraph {
-			text-indent: 1em;
-			word-wrap: break-word;
-			word-break: break-all;
-			white-space: normal;
-			line-height: 1.5em;
-			margin-bottom: 1em;
-			color: #333;
-		}
-
-		.content-paragraph:last-child {
-			margin-bottom: 0;
-		}
-
-		.limit-button-box {
-			text-indent: 0;
-			height: 120rpx;
-			line-height: 120rpx;
-			text-align: center;
-			color: goldenrod;
-			font-size: 28rpx;
-		}
-	}
-</style>
\ No newline at end of file

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

@@ -30,8 +30,8 @@
 	} from "../../../../common/utils/util.js";
 	import CatalogueList from "../models/CatalogueList.js";
 	import {
-		saveContentFormat,
-		readContentFormat
+		saveCatalogueFormat,
+		readCatalogueFormat
 	} from "../services/index.js"
 	export default {
 		mixins: [SystemInfoMixin],
@@ -78,7 +78,7 @@
 		},
 		mounted() {
 			this.initColorList();
-			this.currentContentFormat = readContentFormat()
+			this.currentContentFormat = readCatalogueFormat()
 			for (let i in this.currentContentFormat.catalogueList) {
 				if (this.currentContentFormat.catalogueList[i].id == this.detail.id) {
 					// 处理特殊情况，下标错误
@@ -129,7 +129,7 @@
 
 				this.currentCatalogue = e
 
-				saveContentFormat(this.currentContentFormat);
+				saveCatalogueFormat(this.currentContentFormat);
 				this.close()
 			},
 			tabVip() {

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

@@ -72,6 +72,8 @@
 	import {
 		watchContentFormatChange,
 		removeContentFormatChangeWatch,
+		watchCatalogueFormatChange,
+		removeCatalogueFormatChangeWatch,
 		getChapterinfoData
 	} from "../services/index.js"
 
@@ -126,6 +128,7 @@
 		},
 		destroyed() {
 			removeContentFormatChangeWatch(this);
+			removeCatalogueFormatChangeWatch(this);
 		},
 		mounted() {
 			let _this = this
@@ -138,14 +141,8 @@
 			})
 
 			// 监听样式变动
-			watchContentFormatChange((data) => {
+			watchCatalogueFormatChange((data) => {
 				let result = data.getFormatValue();
-				if (this.fontSize != result.fontSize) {
-					this.fontSize = parseInt(result.fontSize.substring(0, 2))
-				}
-				if (this.background != result.backgroundColor) {
-					this.background = result.backgroundColor
-				}
 
 				let resultCatalogue = this.catalogue
 				for (let i in result.catalogueList) {
@@ -167,8 +164,19 @@
 					this.isFisrt = false
 					this.refreshChapterinfoData()
 				}
+			}, this)
 
+			// 监听样式变动
+			watchContentFormatChange((data) => {
+				let result = data.getFormatValue();
+				if (this.fontSize != result.fontSize) {
+					this.fontSize = parseInt(result.fontSize.substring(0, 2))
+				}
+				if (this.background != result.backgroundColor) {
+					this.background = result.backgroundColor
+				}
 			}, this)
+
 		},
 		methods: {
 			reloadChapterinfoData() {
@@ -263,7 +271,7 @@
 							_this.isClick = true
 						}, 300)
 					} else {
-						let max = this.detail.isUnlock ? (this.detail.articleChapterList.length - 1) :
+						let max = this.detail.isUnlock ? (this.detail.articleChapterList.length) :
 							(this.detail.freeNum + 1)
 
 						if (this.catalogue < max) {
@@ -391,7 +399,6 @@
 
 			.content {
 				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;

vedio/page-subs/sub_A/book-long-content/models/CatalogueFormat.js

+export default class CatalogueFormat {
+	constructor(param) {
+		const {
+			catalogueList,
+		} = param || {}
+		this.catalogueList = catalogueList;
+	}
+	getFormatValue() {
+		return {
+			catalogueList: this.catalogueList
+		}
+	}
+}
\ No newline at end of file

vedio/page-subs/sub_A/book-long-content/services/index.js

@@ -8,6 +8,7 @@ import {
 	saveStorage
 } from "../../../../common/utils/storageUtil";
 import ContentFormat from "../models/ContentFormat";
+import CatalogueFormat from "../models/CatalogueFormat";
 import {
 	apiGET,
 	apiPOST
@@ -114,6 +115,48 @@ function removeContentFormatChangeWatch(observer) {
 	removeNotificationObserver(KEY_NOTIFICATION_LONG_CONTENT_FORMAT_CHANGE, observer);
 }
 
+
+function saveCatalogueFormat(format) {
+	let result = readCatalogueFormat();
+	Object.keys(format).forEach(key => {
+		let value = format[key];
+		result[key] = value || result[key];
+	})
+	saveStorage(KEY_STORAGE_CATALOGUE_FORMAT, result);
+	notifyCatalogueFormatChange(new CatalogueFormat(result));
+}
+
+function readCatalogueFormat(id) {
+	let result = readStorage(KEY_STORAGE_CATALOGUE_FORMAT);
+	if (result) {
+		result = new CatalogueFormat(result);
+	} else {
+		result = new CatalogueFormat({
+			catalogueList: [] // 章节列表
+		})
+	}
+	return result;
+}
+
+function notifyCatalogueFormatChange(format) {
+	postNotification(KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE, format);
+}
+
+function watchCatalogueFormatChange(fn, observer) {
+	if (typeof fn == 'function') fn.call(observer, readCatalogueFormat());
+	addNormalNotificationObserver(KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE, (data) => {
+		if (typeof fn == 'function') fn.call(observer, data);
+	}, observer)
+}
+
+function removeCatalogueFormatChangeWatch(observer) {
+	removeNotificationObserver(KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE, observer);
+}
+
+// 样式设置
+const KEY_STORAGE_CATALOGUE_FORMAT = "KEY_STORAGE_CATALOGUE_FORMAT";
+const KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE = "KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE";
+
 module.exports = {
 	getBookDetailData,
 	getBookRecommendData,
@@ -126,5 +169,12 @@ module.exports = {
 	readContentFormat,
 	notifyContentFormatChange,
 	watchContentFormatChange,
-	removeContentFormatChangeWatch
+	removeContentFormatChangeWatch,
+	
+	saveCatalogueFormat,
+	readCatalogueFormat,
+	notifyCatalogueFormatChange,
+	watchCatalogueFormatChange,
+	removeCatalogueFormatChangeWatch,
+
 }
\ No newline at end of file

vedio/pagesD/readerRecord/readerRecord.vue

@@ -44,6 +44,10 @@
 		openUrl
 	} from '@/utils/app+.js';
 
+	import {
+		gotoBookContentPage
+	} from '../../common/services/page-route';
+
 	const app = getApp();
 
 	export default {
@@ -77,14 +81,7 @@
 			},
 			handleInfo(item) {
 				var bookId = item.id;
-				uni.navigateTo({
-					url: `/page-subs/sub_A/book-content/book-content`,
-					success: (res) => {
-						res.eventChannel.emit("openBookContentPage", {
-							bookId
-						})
-					}
-				})
+				gotoBookContentPage(item.id, item.shortis)
 			},
 			handleXing(item) {
 				var that = this;