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

<template>
	<view class="bookshelf-content">
		<view class="bookshelf-content__top" :style="{height:top_height+'px'}">
			<view class="bookshelf-content__top__bg">
				<image class="image" src="../../static/imgs/public/img_top_bg_1.png"></image>
			</view>
			<view :style="{marginTop: safeArea_top+'px'}">
				<z-tabs 
				ref="tabs"
				:tabs-style="{height:tab_height + 'px'}"
				bg-color="transparent"
				bar-height="0"
				active-color="#FF8EBB"
				:active-style="{'font-size': '60rpx', 'font-weight': '500'}"
				inactive-color="#3D3D3D"
				:inactive-style="{'font-size': '30rpx', 'font-weight': '500'}"
				scroll-count="1" 
				:bottomLineIsShow="false" 
				:list="tab_list"  
				:current="tab_current"
				@change="tabsChange" />	
			</view>
		</view>
		<view :style="{marginTop: top_height + 'px'}">
			<bookList :class="tab_current==0?'style_show':'style_hide'" 
			:book_list='data_book_list' 
			@clickBook='gotoReadBook' 
			@clickEdit='clickEdit'
			@clickButtonStatus='bookListClickButtonStatus'
			@clickDeleteBook='bookListClickDeleteBook'></bookList>
			<readHistory :class="tab_current==1?'style_show':'style_hide'" 
			:book_list='data_read_history_list' 
			@clickBook='gotoReadBook' 
			@clickEdit='clickEdit'
			@clickButtonStatus='readHistoryClickButtonStatus'
			@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';
    import { util } from '../../framework/util';
	
	let tab_height = ref(50)
	let tab_list = ref(['书架','阅读历史'])
	let tab_current = ref(0)  //0:书架 1:阅读历史
	
	let safeArea_top = ref(0)
	let top_height = ref(0)
	if(tools.platform == config.Platform.WEIXIN) {
		safeArea_top.value = uni.getSystemInfoSync().safeArea.top
	}
	top_height.value = safeArea_top.value + tab_height.value
	
	let data_book_list = ref<Array<book_item_data>>([])
	let data_read_history_list = ref<Array<book_item_data>>([])
	
	let booksheflf_type_status = ref(config.book_action_status.QUAN_BU)
	let read_history_type_status = ref(config.book_action_status.QUAN_BU)
	
	let is_edit_status = ref(false)
	
	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)
		}
		
		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.resetSortBookshelf(data_book_list.value)
		},()=>{
			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()},500)
			data_book_list.value = []
			for (let i = 0; i < tools.getLocalBookshelfList().length; i++) {
				let element = tools.getLocalBookshelfList()[i]
				if(booksheflf_type_status.value==config.book_action_status.QUAN_BU) {
					data_book_list.value.push(element)
				} else {
					if(booksheflf_type_status.value==element.book_is_action) {
					    data_book_list.value.push(element)
					}
				}
			}
		})
		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)
			data_read_history_list.value = []
			for (let i = 0; i < tools.getLocalReadHistoryList().length; i++) {
				let element = tools.getLocalReadHistoryList()[i]
				// data_read_history_list.value.push(element)
				if(read_history_type_status.value==config.book_action_status.QUAN_BU) {
					data_read_history_list.value.push(element)
				} else {
					if(read_history_type_status.value==element.book_is_action) {
					    data_read_history_list.value.push(element)
					}
				}
			}
		})
		uni.$on(config.EVENT_TYPE.UPDATE_BOOKSHELF_CURRENT_READ_CHAPTER,(book_data:book_item_data)=>{
			for (let i = 0; i < data_book_list.value.length; i++) {
				let element = data_book_list.value[i]
				if(element.book_id==book_data.book_id) {
					if(element.start_read_chapter_id!=book_data.start_read_chapter_id) {
						element.start_read_chapter_id = book_data.start_read_chapter_id
					}
					break
				}
			}
			for (let i = 0; i < data_read_history_list.value.length; i++) {
				let element = data_read_history_list.value[i]
				if(element.book_id==book_data.book_id) {
					if(element.start_read_chapter_id!=book_data.start_read_chapter_id) {
						element.start_read_chapter_id = book_data.start_read_chapter_id
					}
					break
				}
			}
		})
	}
	
	function tabsChange(index:number) {
		tab_current.value = index
	}
	
	function clickEdit(is_edit:boolean) {
		is_edit_status.value = is_edit
	}
	
	function changeButtonStatusTips(status:number) {
		// console.log('button status=',status)
		let status_string = ''
		switch (status){
			case config.book_action_status.QUAN_BU:
			    status_string = '全部'
				break;
			case config.book_action_status.LIAN_ZAI:
			    status_string = '连载'
			    break;
			case config.book_action_status.WAN_JIE:
			    status_string = '完结'
			    break;
			default:
				break;
		}
		if(status_string.length>0) {
			util.showInfoToast(status_string)
		}
	}
		
	function bookListClickButtonStatus(status:number) {
		booksheflf_type_status.value = status
		changeButtonStatusTips(status)
		
		data_book_list.value = []
		if(status==config.book_action_status.QUAN_BU) {
		    data_book_list.value = tools.getLocalBookshelfList()
			return
		}
		let temp_list:book_item_data[] = []
		for (let i = 0; i < tools.getLocalBookshelfList().length; i++) {
			let element = tools.getLocalBookshelfList()[i]
			if(element.book_is_action == status) {
				temp_list.push(element)
			}
		}
		if(temp_list.length>0) {
			data_book_list.value = temp_list
		}
	}
	
	function bookListClickDeleteBook() {
		data_book_list.value = tools.getLocalBookshelfList()
	}
	
	function readHistoryClickButtonStatus(status:number) {
		read_history_type_status.value = status
		changeButtonStatusTips(status)
		
		data_read_history_list.value = []
		if(status==config.book_action_status.QUAN_BU) {
		    data_read_history_list.value = tools.getLocalReadHistoryList()
			return
		}
		let temp_list:book_item_data[] = []
		for (let i = 0; i < tools.getLocalReadHistoryList().length; i++) {
			let element = tools.getLocalReadHistoryList()[i]
			if(element.book_is_action == status) {
				temp_list.push(element)
			}
		}
		if(temp_list.length>0) {
			data_read_history_list.value = temp_list
		}
	}
	
	function readHistoryClickDeleteBook() {
		data_read_history_list.value = tools.getLocalReadHistoryList()
	}
	
	function gotoReadBook(book_data:book_item_data, index:number) {
		// console.log('book_data=',book_data,'index=',index)
		return tools.gotoBookdetails(book_data.book_id,book_data.wx_book_id)
		// 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 })
		// 	}
		// }
		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) {
				uni.pageScrollTo({ scrollTop:0 })
			}
		}
	}
	
</script>

<style lang="scss">
	.bookshelf-content{
		display: flex;
		flex-direction: column;	
		&__top{
			position: fixed; 
			z-index: 9; 
			top: 0; 
			width: 100%;
			&__bg{
				position: absolute; 
				flex-shrink: 0;
				width:100%;
				height: 100%;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.style_show{
		display: flex;
	}
	.style_hide{
		display: none;
	}
</style>