xs/xs-app/pages/bookshelf/bookshelf.vue

<template>
	<view class="bookshelf-content">
		<view style="position: fixed; z-index: 10; width: 100%; ">
			<z-tabs ref="tabs"
			:tabs-style="{height:tab_height + 'rpx'}"
			bg-color="#F8F8F8"
			bar-height="0"
			:active-color="config.theme_color"
			:active-style="{'font-size': '80rpx', 'font-weight': '500'}"
			inactive-color="#3D3D3D"
			:inactive-style="{'font-size': '40rpx', 'font-weight': '400'}"
			scroll-count="1" 
			:bottomLineIsShow="false" 
			:list="tab_list"  
			:current="tab_current"
			@change="tabsChange" />	
		</view>
		<view :style="{marginTop: tab_height + 'rpx'}">
			<bookList :class="tab_current==0?'style_show':'style_hide'" :book_list='data_book_list' @clickBook='gotoReadBook'></bookList>
			<readHistory :class="tab_current==1?'style_show':'style_hide'" :book_list='data_read_history_list' @clickBook='gotoReadBook' @clickDeleteBook='readHistoryClickDeleteBook'></readHistory>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { config } from '../../config/config';
	import { book_item_data } from '../../data/data';
    import { ref } from 'vue';
    import { tools } from '../../framework/tools';
	import bookList from '../bookshelf/bookshelf-bookList.vue'
	import readHistory from '../bookshelf/bookshelf-readHistory.vue'
    import { ReadRecord } from '../../stores/readRecordManager';
	
	let tab_height = ref(100)
	let tab_list = ref(['书架','阅读历史'])
	let tab_current = ref(0)  //0:书架 1:阅读历史
	
	let data_book_list = ref<Array<book_item_data>>([])
	let data_read_history_list = ref<Array<book_item_data>>([])
	
	initData()
	initEvent()
	
	function initData() {				
		uni.setNavigationBarTitle({
			title:config.app_name
		})
		
		data_book_list.value = tools.getLocalBookshelfList()
		data_read_history_list.value = tools.getLocalReadHistoryList()
	}
	
	function requestBookshelfData() {
		let local_book_list = []
		let request_book_shelf_list = []
		for (let i = 0; i < tools.getLocalBookshelfList().length; i++) {
			let element = tools.getLocalBookshelfList()[i]
			let read_record_data = ReadRecord().getReadRecordData(element.book_id)
			if(read_record_data) {
				element.start_read_chapter_id = read_record_data.chapter_id
			} else {
				element.start_read_chapter_id = 1
			}
			local_book_list.push(element)
			
			let book_opt = tools.getRequestBookshelfParameter(element)
			request_book_shelf_list.push(book_opt)
		}
		
		data_book_list.value = local_book_list
		tools.requestBookShelf(request_book_shelf_list,1,(data:book_item_data[])=>{
			// console.log('请求书架data=',data)
			data_book_list.value = []
			for (let i = 0; i < data.length; i++) {
				let element = data[i]
				data_book_list.value.push(element)
			}
			tools.saveLocalBookshelfList()
		},()=>{
			data_book_list.value = local_book_list
		})
	}
	
	function initEvent() {
		uni.$on(config.EVENT_TYPE.USER_LOGIN_SUCCESS, ()=>{
			requestBookshelfData()
		})
		uni.$on(config.EVENT_TYPE.UPDATE_BOOKSHELF,()=>{
			data_book_list.value = []
			setTimeout(()=>{
				data_book_list.value = tools.getLocalBookshelfList()
			},50)
		})
		uni.$on(config.EVENT_TYPE.UPDATE_READHISTORY,()=>{
			// console.log('tools.getLocalReadHistoryList()=',tools.getLocalReadHistoryList())
			data_read_history_list.value = []
			setTimeout(()=>{
				data_read_history_list.value = tools.getLocalReadHistoryList()
			},50)
		})
	}
	
	function tabsChange(index:number) {
		tab_current.value = index
	}
	
	function readHistoryClickDeleteBook() {
		data_read_history_list.value = []
		tools.resetSortReadHistory(data_read_history_list.value)
	}
	
	function gotoReadBook(book_data:book_item_data, index:number) {
		// console.log('book_data=',book_data,'index=',index)
		tools.gotoRead(book_data)
		if(tab_current.value==0) {
			// 书架
			if(index>0) {
				data_book_list.value.splice(index,1)
				data_book_list.value.unshift(book_data)
				tools.resetSortBookshelf(data_book_list.value)
				uni.pageScrollTo({ scrollTop:0 })
			}
		} else {
			//阅读历史
			if(index>0) {
				data_read_history_list.value.splice(index,1)
				data_read_history_list.value.unshift(book_data)
				uni.pageScrollTo({ scrollTop:0 })
			}
		}
	}
	
</script>

<style lang="scss">
	.bookshelf-content{
		display: flex;
		flex-direction: column;
	}
	.style_show{
		display: flex;
	}
	.style_hide{
		display: none;
	}
</style>