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

<template>
	<readPage 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">
	</settingMenu>
	<chapterCatalog v-if="showChapterList" :items="directoryList" :size="40" :remain="16"
	 :scrollHeight="windowHeight*0.6" @clickChar="goToChapter" @Close="showChapterList=false">
	</chapterCatalog>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { book_data, 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} = uni.getSystemInfoSync()
	const readPages = ref(null)
	const Menu = ref(null)
	let book_data:book_item_data = UserStatus().getUserSlectBook()
	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]
	//设置属性end
	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()
		})
	}
	function draw(dir_is_down:boolean=true){
		let loading_view = (d:book_read_data)=>{
			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()
	}	
		
	function up_dir_load(){
		cur_read_chapter_index.value-=1;
		draw(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 onClickMode(){
		console.log("点了模式")
	}
	
	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().getReadSetting().fontSizeIndex + 1
			if(new_index>=config.read_config.fontSizeList.length){
				
			}else{
				ReadSetting().changeFontSize(new_index)
			}
		}else{
			new_index = ReadSetting().getReadSetting().fontSizeIndex - 1
			if(new_index<0){
				
			}else{
				ReadSetting().changeFontSize(new_index)
			}
		}
	}
	
	function onChangeBgColor(index:number){
		
	}
	//设置end
	
	//章节列表 start
	let showChapterList = ref(false)
	function goToChapter(chapter_list_item_data:chapter_item_data){
		// console.log("想看",chapter_list_item_data)
		cur_read_chapter_index.value = tools.getCurChapterIndex(chapter_list_item_data.id,directoryList)
		book_text_list_view.value = []
		draw()
		hideChapterList()
	}
	
	// function getCurChapterId(){
	// 	return tools.getCurChapterData(cur_read_chapter_index.value,directoryList).id
	// }
</script>

<style scoped>
	
</style>