修改小说内容分段展示

vedio/common/models/Book.js

@@ -25,6 +25,8 @@ export default class Book {
 			createTime,
 			tagList,
 			isUnlock,
+			free,
+			charge,
 			bookLegumes,
 			lockRate
 		} = param || {}
@@ -54,6 +56,8 @@ export default class Book {
 		this.categoryId = categoryId;
 		this.createTime = createTime;
 		this.isUnlock = isUnlock;
+		this.charge = charge;
+		this.free = free;
 		this.bookLegumes = bookLegumes;
 		this.lockRate = lockRate;
 	}

vedio/components/coin-popup/coin-popup.vue

@@ -25,31 +25,9 @@
 									src="@/static/index/ic_quit_white.png"></image>
 							</view>
 						</view>
-						<!-- <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
-							<view style="font-size: 38rpx;color: black;">{{titleText}}</view>
-							<view class="flex">
-								<view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;">
-									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本部：</view>
-									<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view>
-									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
-										书豆
-									</view>
-								</view>
-								<view v-if="point>0" style="width: 60rpx;"></view>
-								<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
-									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
-									<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}
-									</view>
-									<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
-										书豆
-									</view>
-								</view>
-							</view>
-						</view> -->
 						<view class="section">
 							<view class="pack-box">
 								<view class="pack-item"
-									:style="item.largeType !=='vip' ?'background: #f4c98b;':'background: #f5f5f5;'"
 									:class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
 									:key='index' @click="choosePack(item, index)">
 									<view style="display: flex;flex-direction: column;align-items: center;">
@@ -331,7 +309,8 @@
 		align-items: center;
 		flex-wrap: wrap;
 
-		.active {
+		.active {
+			background-color: #f4c98b !important;
 			border: 6rpx solid #fd5350 !important;
 		}
 
@@ -343,7 +322,7 @@
 			display: flex;
 			flex-direction: column;
 			justify-content: space-around;
-			// background: #f5f5f5;
+			background: #f5f5f5;
 			border: 6rpx solid #f5f5f5;
 			border-radius: 10rpx;
 			position: relative;

vedio/page-subs/sub_A/book-content/components/detail-content.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>
-		</template>
-		<template v-else>
-			<view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in preContentSources'
-				:key="index">
-				{{item}}
-			</view>
-			<view class="limit-button-box" @click="tapVip">
-				{{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";
-
-	export default {
-		props: {
-			userInfo: {
-				type: Object,
-				default: function() {
-					return null
-				}
-			},
-			detail: {
-				type: Object,
-				default: function() {
-					return {}
-				}
-			}
-		},
-		data: function() {
-			return {
-				user: null,
-				fontSize: `18px`,
-				PRECENT_VALUE:40
-			}
-		},
-		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) {
-					if(this.detail.lockRate!=null&&this.detail.lockRate>0){
-						this.PRECENT_VALUE=this.detail.lockRate;
-					}
-					console.log('this.PRECENT_VALUE='+this.PRECENT_VALUE);
-					let precent = this.PRECENT_VALUE / 100;
-					let preLength = Math.floor(length * precent);
-					return result.splice(0, preLength);
-				} else {
-					return result;
-				}
-			},
-			limitButtonTitle: function() {
-				let result = `~剩余${100-this.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()) {
-					gotoVIPApplyPage()
-				}
-			},
-			tapVip() {
-				let isIOS = wx.getSystemInfoSync().platform;
-				if (isIOS === 'ios') {
-					uni.showToast({
-						title: '暂不支持IOS系统',
-						icon: 'none'
-					})
-				
-					return
-				}
-				// 展示充值VIP弹框
-				this.$emit('tapVip')
-			}
-		}
-	}
-</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;
-		}
-	}
+<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>
+		</template>
+		<template v-else>
+			<view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in preContentSources'
+				:key="index">
+				{{item}}
+			</view>
+			<view class="limit-button-box" @click="tapVip">
+				{{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";
+
+	export default {
+		props: {
+			userInfo: {
+				type: Object,
+				default: function() {
+					return null
+				}
+			},
+			detail: {
+				type: Object,
+				default: function() {
+					return {}
+				}
+			}
+		},
+		data: function() {
+			return {
+				user: null,
+				fontSize: `18px`,
+				PRECENT_VALUE: 40
+			}
+		},
+		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.free , ...this.detail.charge];
+			},
+			preContentSources: function() {
+				return this.detail && this.detail.free ? [...this.detail.free] : [];
+			},
+			limitButtonTitle: function() {
+				let result = `后续内容更精彩`;
+				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()) {
+					gotoVIPApplyPage()
+				}
+			},
+			tapVip() {
+				let isIOS = wx.getSystemInfoSync().platform;
+				if (isIOS === 'ios') {
+					uni.showToast({
+						title: '暂不支持IOS系统',
+						icon: 'none'
+					})
+
+					return
+				}
+				// 展示充值VIP弹框
+				this.$emit('tapVip')
+			}
+		}
+	}
+</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-content/models/BookDetail.js

@@ -4,13 +4,31 @@ export default class BookDetail extends Book {
 	constructor(param) {
 		super(param);
 		const {
-			contentMd
+			contentMd,
+			freeMd,
+			chargeMd,
 		} = param || {}
 		this.contentMd = contentMd;
+		this.freeMd = freeMd;
+		this.chargeMd = chargeMd;
 		let result = contentMd ? contentMd.replace(/<[^>]+>/g, "") : "";
 		result = result.split("\n");
 		this.content = result.filter(item => {
 			return item.split(/[\t\r\f\n\s]*/g).join("");
 		});
+		
+		let result2 = freeMd ? freeMd.replace(/<[^>]+>/g, "") : "";
+		result2 = result2.split("\n");
+		this.free = result2.filter(item => {
+			return item.split(/[\t\r\f\n\s]*/g).join("");
+		});
+		
+		let result3 = chargeMd ? chargeMd.replace(/<[^>]+>/g, "") : "";
+		result3 = result3.split("\n");
+		this.charge = result3.filter(item => {
+			return item.split(/[\t\r\f\n\s]*/g).join("");
+		});
+		
+		console.log('param------',param)
 	}
 }
\ No newline at end of file