xs/xs-app/pages/readbook/read.vue

<template>
	<view class="color-bg" :style="{'background-color': read_setting_data.readMode==config.read_config.readMode.Bright?config.read_config.colorList[read_setting_data.colorBgIndex]:DarkBg,'height':book_text_list_view.length<=0?'100vh':'100%'}">
		<readPage class="content" ref="readPages" @touchstart="onStartClickView"
		@touchend="onEndClickView" @touchmove="hideSetting" v-for="(book_read_data_item,index) in book_text_list_view" :key="book_read_data_item.book_chapter_id" 
		:text_content="book_read_data_item.book_content" :book_title="book_read_data_item.book_title">
		</readPage>
		<settingMenu ref="Menu" v-if="menuShow" @clickCatalog="onClickCatalog" 
		@clickPreChapter="onClickPreChapter" @clickNextChapter="onClickNextChapter" 
		@clickMode="onClickMode" @clickOpenSetting="onClickOpenSetting"
		@Close="closeMenu" @changeFontSize="onChangeFontSize" @changeBgColor="onChangeBgColor"
		@selectAutoBuy="onSelectAutoBuy" @clickKeep="onClickKeep">
		</settingMenu>
		<chapterCatalog v-if="showChapterList" :items="directoryList" :size="40" :remain="16"
		 :scrollHeight="windowHeight*0.6" @clickChar="goToChapter" @Close="showChapterList=false">
		</chapterCatalog>
	</view>
</template>

<script setup lang="ts">
	import { onUnload } from '@dcloudio/uni-app'
	import { nextTick, ref, watch } from 'vue';
	import { book_item_data, book_read_data, chapter_item_data } from '../../data/data';
	import { tools } from '../../framework/tools';
	import { UserStatus } from '../../stores/userStatusManager';
	import { log } from '../../framework/log';
	import readPage from '../../components/read/readPage.vue'
	import settingMenu from '../../components/read/settingMenu.vue'
	import chapterCatalog from '../../components/read/chapterCatalog.vue'
	import {onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { ReadSetting } from '../../stores/readSetting';
	import { config } from '../../config/config';
	
	const {windowHeight,windowWidth} = uni.getSystemInfoSync()
	const readPages = ref(null)
	const Menu = ref(null)
	let book_data:book_item_data = UserStatus().getUserSelectBook()
	let directoryList:chapter_item_data[] = []
	let cur_read_chapter_index =ref(0)
	let start_read_chapter_id = book_data.start_read_chapter_id
	//设置属性 
	let read_setting_data = ReadSetting().getReadSetting()
	let fontSize = config.read_config.fontSizeList[read_setting_data.fontSizeIndex]
	let bgColor = config.read_config.colorList[read_setting_data.colorBgIndex]
	
	// 页面销毁
	onUnload(()=>{
		tools.exitRead()
	})
	
	//设置属性end
	updateNavigation()
	if(book_data!=null&&start_read_chapter_id!=-1){
		initView()
	}
	let book_text_list_view = ref<Array<book_read_data>>([])
	let book_text_list_cache = ref<Map<number,book_read_data>>(new Map<number,book_read_data>())
	function initView(){
		tools.getChapterList(book_data.chapter_path,(chapter_ls)=>{
			directoryList = chapter_ls
			cur_read_chapter_index.value = tools.getCurChapterIndex(start_read_chapter_id,directoryList)
			draw(null)
		})
	}
	function draw(cb:Function,dir_is_down:boolean=true){
		let loading_view = (d:book_read_data)=>{
			book_data.start_read_chapter_id = d.book_chapter_id //记录开始阅读章节id
			cb && cb()
			nextTick(()=>{
				if(d!=null){
					if(dir_is_down){
						book_text_list_view.value.push(d)
					}else{
						book_text_list_view.value.unshift(d)
					}
				}
			})
		}
		if(cur_read_chapter_index.value<=directoryList.length&&cur_read_chapter_index.value>=0){
			let data = tools.getCurChapterData(cur_read_chapter_index.value,directoryList)
			if(data!=null){
				let cache_data = book_text_list_cache.value.get(data.id)
				if(cache_data!=null){
					loading_view(cache_data)
				}else{
					tools.getCurChapterTxt(book_data.base_path,data.id,fontSize*2,(text:string)=>{
						cache_data = new book_read_data()
						cache_data.book_content = text
						cache_data.book_chapter_id = data.id
						cache_data.book_title = tools.autoParagraphTitle(data.name,fontSize*4) 
						book_text_list_cache.value.set(data.id,cache_data)
						loading_view(cache_data)
					})
				}
			}
		
		}else{
			log.Error("暂无可读取内容！")
		}
	
	}
	function down_dir_load(){
		cur_read_chapter_index.value+=1;
		draw(null)
	}	
		
	function up_dir_load(){
		cur_read_chapter_index.value-=1;
		draw(null,false)
	}
	
	onPullDownRefresh( async () => {
		showTopLoadingStatus()
		uni.stopPullDownRefresh();
	})
	
	onReachBottom(async ()=>{
		showBottomLoadingStatus()
	})
	
	function showBottomLoadingStatus(){
		readPages.value.find((child,index)=>{
			if( index == (book_text_list_view.value.length-1) ){
				child.showBottomLoading()
				down_dir_load()
			}
		})
	}
	
	function showTopLoadingStatus(){
		readPages.value.find((child,index)=>{
			if( index == 0 ){
				child.showTopLoading()
				up_dir_load()
			}
		})
	}
	
	//设置相关
	let menuShow = ref(false)
	
	let startTouchY = ref(-1)
	
	let endTouchY = ref(-1)
	
	function onClickCatalog(){
		closeMenu()
		showChapterList.value = true
	}
	
	function hideChapterList(){
		showChapterList.value = false
	}
	
	function onClickOpenSetting(){
		console.log("点了设置")
		showSetting()
	}
	
	function onClickPreChapter(){
		goToChapter(tools.getPreChapterData(cur_read_chapter_index.value,directoryList))
		hideSetting()
	}
	
	function onClickNextChapter(){
		goToChapter(tools.getNextChapterData(cur_read_chapter_index.value,directoryList))
		hideSetting()
	}
	
	function onStartClickView(e){
		startTouchY.value = e.changedTouches[0].pageY
	}
	
	function onEndClickView(e){
		endTouchY.value = e.changedTouches[0].pageY
		
		if(Math.abs(endTouchY.value-startTouchY.value)<=5){
			startTouchY.value = -1
			showMenuView()
		}
	}
	
	function showMenuView(){
		menuShow.value = true
	}
	
	function hideAllTop(){
		
	}
	
	function showSetting(){
		Menu.value.showSettingFont()
	}
	
	function hideSetting(){
		startTouchY.value = -1
		menuShow.value = false
		hideChapterList()
	}
	
	function closeMenu(){
		hideSetting()
	}
	
	function onChangeFontSize(index:number){
		let new_index = -1;
		if(index>0){
			new_index = ReadSetting().data.fontSizeIndex + 1
			if(new_index>=config.read_config.fontSizeList.length){
				
			}else{
				ReadSetting().changeFontSize(new_index)
			}
		}else{
			new_index = ReadSetting().data.fontSizeIndex - 1
			if(new_index<0){
				
			}else{
				ReadSetting().changeFontSize(new_index)
			}
		}
	}
	
	function onChangeBgColor(index:number){
		ReadSetting().changeReadMode(config.read_config.readMode.Bright)
		ReadSetting().changeBgColor(index)
	}
	
	function onSelectAutoBuy(isAuto:boolean){
		ReadSetting().changeAutoBuyNextChapter(isAuto)
	}
	
	function onClickKeep(){
		log.Debug("收藏",book_data.book_name)
	}
	
	let DarkBg = ref(tools.getDbColorByMode(read_setting_data.readMode))
	
	function onClickMode(mode:number){
		ReadSetting().changeReadMode(mode)
	}

	watch(async () => ReadSetting().data.readMode, // 监听的数据源
		(newVal, oldVal) => {
			DarkBg.value = tools.getDbColorByMode(read_setting_data.readMode)
			updateNavigation()
		}
	);
	
	//设置end
	
	//章节列表 start
	let showChapterList = ref(false)
	function goToChapter(chapter_list_item_data:chapter_item_data){
		// console.log("想看",chapter_list_item_data)
		if(chapter_list_item_data!=null){
			cur_read_chapter_index.value = tools.getCurChapterIndex(chapter_list_item_data.id,directoryList)
			draw(()=>{
				book_text_list_view.value = []
			})
			hideChapterList()
		}else{
			log.Error('goToChapter error!',cur_read_chapter_index.value)
		}
	
	}
	
	watch(async () => ReadSetting().data.colorBgIndex, // 监听的数据源
		(newVal, oldVal) => {
			bgColor = config.read_config.colorList[read_setting_data.colorBgIndex]
			updateNavigation()
		}
	);
	
	function updateNavigation(){
		let showbgColor  = bgColor
		if(read_setting_data.readMode==config.read_config.readMode.Dark){
			showbgColor = tools.getDbColorByMode(read_setting_data.readMode)
		}
		uni.setNavigationBarColor({
		    frontColor: '#ffffff',
		    backgroundColor: showbgColor,
		    animation: {
		        duration: 0,
		        timingFunc: 'easeIn'
		    }
		})
	}
	
	// function getCurChapterId(){
	// 	return tools.getCurChapterData(cur_read_chapter_index.value,directoryList).id
	// }
</script>

<style scoped lang="scss">
	.color-bg{
	  // position: relative; /* 或者使用 fixed/absolute，根据需要调整 */
	  width: 100vw;
	  // height: 100vh; /* 视口高度 */
	  // overflow: hidden; /* 隐藏超出容器的内容，如果需要的话 */
	  // height: 100%;
	  overflow-y: auto;
	}
	.content {
	  /* 内容组件的样式 */
	  position: relative; /* 相对于 page-container 定位 */
	  z-index: 1; /* 确保内容在背景之上 */
	  /* 其他样式... */
	}
</style>