xs/xs-app/components/read/readPage.vue

<template>
	<view v-html="book_title" :style="{
		fontSize:`${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]*1.5}px`,
		lineHeight:`${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
		color:`${font_color}`
	}"></view>
	<view class="inner-box">
		<view class="book-inner"
			v-html="getText()"
			:style="{
				fontSize: `${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
				lineHeight: `${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
				color:`${font_color}`
		}" @touchstart="(event)=>{emits('onTouchstart',event)}"
		@touchend="(event)=>{emits('onTouchend',event)}"
		@touchmove="(event)=>{emits('onTouchmove',event)}">
		</view>
		<view style="display: flex;justify-content: space-around;justify-items: center;background-color: aliceblue;margin-bottom: 3%;margin-top: 3%;">
			<view @tap="emits('clickPreChapter')">上一章</view>
			<view @tap="emits('clickCatalog')">目录</view>
			<view @tap="emits('clickNextChapter')">下一章</view>
		</view>
	</view>
</template>
	
<script setup lang="ts">
	import {defineProps, ref, watch} from 'vue'
	import { ReadSetting } from '../../stores/readSetting';
	import { config } from '../../config/config';
	import { log } from '../../framework/log';
	import { tools } from '../../framework/tools';
	
	let lock_content = ref('')
	
	let  {text_content,book_title} =  defineProps(['text_content','book_title'])
	
	setLockContent()
	
	let  emits = defineEmits(['onTouchstart','onTouchend','onTouchmove','clickCatalog','clickPreChapter','clickNextChapter'])
	
	let read_setting_data = ReadSetting().getReadSetting()
	
	let font_color = ref(tools.getFontColorByMode(read_setting_data.readMode))
	
	function showTopLoading(){
	}
	
	function showBottomLoading(){
			
	}
	
	watch(async () => ReadSetting().getReadSetting().readMode, // 监听的数据源
		(newVal, oldVal) => {
			 font_color.value = tools.getFontColorByMode(ReadSetting().getReadSetting().readMode)
		}
	);
	
	function setLockContent(){
		let len = text_content.length
		let temp_list = text_content.split('<br><br>')
		if(temp_list.length>=6){
			for(let i=0;i<6;i++){
				lock_content.value += (temp_list[i]+"<br><br>"+"<br><br>")
			}
		}else{
			lock_content.value = '请使用书币解锁内容，或者成为vip！'
		}
	}
	function getText(){
		return isLock.value?lock_content:text_content
	}
	
	let isLock = ref(false)
	function LockChapter(){
		isLock.value = true
	}
	
	function UnLockChapter(){
		isLock.value = false
	}
	defineExpose({ showBottomLoading,showTopLoading ,LockChapter,UnLockChapter });
</script>

<style lang="scss" scoped>
	.inner-box {
		flex: 1 1 auto;
		overflow: hidden;
		.book-inner {
			text-indent: 2em;
			text-align: justify;
		}
		padding: 5%;
	}
</style>