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

<template>
	<view class="bookList_content" :style="{width:window_width}">
		<view class="top">
			<view class='top__info' v-if="!is_edit">
				<view class="top__info__item" v-for="(item,index) in top_button_list" :key="index"
				@click="clickButtonStatus(item.status)">
					<image class="top__info__item__image" v-if="cur_button_status==item.status" src="../../static/imgs/public/img_selected.png"></image>
					<image class="top__info__item__image" v-else src="../../static/imgs/public/img_unselected.png"></image>
					<view class="top__info__item__name">
						{{item.name}}
					</view>
				</view>
			</view>
			<view :class="cur_button_status==config.book_action_status.QUAN_BU?'top__edit':'top__edit-none'" @click="clickEdit">
				<view class="top__edit__icon">
					<image v-if="is_edit" class="image" src="../../static/imgs/public/img_close.png"></image>
					<image v-else class="image" src="../../static/imgs/public/img_edit.png"></image>
				</view>
				<view class="top__edit__name">
					{{is_edit?'取消':'编辑'}}
				</view>
			</view>
		</view>
		<view class="book-list" :style="{marginBottom:is_edit?bottom_tools_all_height+'rpx':0}">
			<view class="book-list__item" v-for="(item,index) in book_list" :key="index"
			@click="clickBook(item,index)">
			    <view class="book-list__item__book-cover">
			    	<image class="image" :src="item.book_cover" mode="aspectFill"></image>
			    </view>
				<view class="book-list__item__book-name">
					{{item.book_name}}
				</view>
				<view class="book-list__item__book-info">
					 {{util.isNull(item.start_read_chapter_id)?'1':item.start_read_chapter_id}}章 / {{item.chapter_count}}章
				</view>
				<view class="book-list__item__edit-icon" v-if="is_edit">
					<image class="image" v-if="edit_book_list.indexOf(item.book_id)==-1" src="../../static/imgs/public/img_unselected_1.png" mode="aspectFill"></image>
					<image class="image" v-else src="../../static/imgs/public/img_selected_1..png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-if="is_edit" class="bottom-tools" :style="{height:bottom_tools_all_height+'rpx'}">
			<view class="bottom-tools__all" :style="{height:bottom_tools_real_height+'rpx'}" @click="clickSelectedAll">
				{{ is_selected_all?'取消全选':'全选' }}
			</view>
			<view class="bottom-tools__delete bottom-tools__all" :style="{height:bottom_tools_real_height+'rpx'}" @click="clickDelete">
				删除({{edit_book_list.length}})
			</view>
		</view>
		<view class="empty" v-if="book_list.length<=0" :style="{height:empty_height}">
			<z-paging-empty-view :emptyViewFixed="false" ></z-paging-empty-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue';
    import { book_item_data } from '../../data/data';
    import { util } from '../../framework/util';
    import { tools } from '../../framework/tools';
    import { config } from '../../config/config';
		
	let window_width = ref(uni.getSystemInfoSync().windowWidth + 'px')	
	let empty_height = ref((uni.getSystemInfoSync().windowHeight-80-30)+'px')
	let is_edit = ref(false)	
	let edit_book_list = ref<Array<number>>([])
	let is_selected_all = ref(false)
	let bottom_tools_real_height = ref(98)
	let bottom_tools_all_height = ref(0)
	let top_button_list = ref(
	   [{'name':'全部','status':config.book_action_status.QUAN_BU},
	   {'name':'连载','status':config.book_action_status.LIAN_ZAI},
	   {'name':'完结','status':config.book_action_status.WAN_JIE}]
	)
	let cur_button_status = ref(config.book_action_status.QUAN_BU)
	
	bottom_tools_all_height.value = bottom_tools_real_height.value + uni.getSystemInfoSync().safeAreaInsets.bottom
				
	const props = defineProps({
		book_list: Array<book_item_data>,
	})
	// watch(()=>props.book_list, (new_v,old_v)=>{
	//     console.log('book_list-观察 新值:',new_v,'旧值:',old_v)
	// },{immediate:true})
	const emits = defineEmits(['clickBook','clickButtonStatus','clickDeleteBook','clickEdit'])
	
	function clickBook(book_data:book_item_data, index:number) {
		if(is_edit.value) {
			let index = edit_book_list.value.indexOf(book_data.book_id)
			if(index>-1) {
				edit_book_list.value.splice(index,1)
			} else {
				edit_book_list.value.push(book_data.book_id)
			}
			if(edit_book_list.value.length >= props.book_list.length) {
				if(is_selected_all.value==false) {
					is_selected_all.value = true
				}
			} else {
				if(is_selected_all.value==true) {
					is_selected_all.value = false
				}
			}
		} else {
			emits('clickBook',book_data,index)
		}
	}
	
	function clickButtonStatus(status:number) {
		if(cur_button_status.value == status) {
			return
		}
		cur_button_status.value = status
		emits('clickButtonStatus',status)
	}
		
	function clickEdit() {
		changeEditStatus()
		emits('clickEdit', is_edit.value)
	}
	
	function changeEditStatus() {
		is_edit.value = !is_edit.value
		if(is_edit.value) {
			uni.hideTabBar({
				animation:false
			})
		} else {
			uni.showTabBar({
				animation:false,
			})
			edit_book_list.value = []
		}
	}
	
	function clickSelectedAll() {
		edit_book_list.value = []
		if(is_selected_all.value) {
			is_selected_all.value = false
		} else {
			if(props.book_list) {
				for (let i = 0; i < props.book_list.length; i++) {
					let element = props.book_list[i]
					edit_book_list.value.push(element.book_id)
				}
				is_selected_all.value = true
			}
		}
	}
	
	function clickDelete() {
		if(edit_book_list.value.length==0) {
			util.showInfoToast('请选择书籍')
			return
		}
		tools.deleteBookshelf(edit_book_list.value, ()=>{
			changeEditStatus()
			emits('clickDeleteBook',edit_book_list.value)
		})
	}
	
</script>

<style lang="scss">
	.bookList_content{
		display: flex;	
		flex-direction: column;
		
		.top{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 80rpx;
			// background-color: red;
			&__info{
				display: flex;
				margin-left: 10rpx;				
				&__item {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 15rpx;
					flex-shrink: 0;
					width: 145rpx;
					height: 60rpx;
					// background-color: red;
					&__image{
						width: 100%;
						height: 100%;
					}
					&__name{
						position: absolute;
						font-size: 16px;
						color: #fff;
					}
				}
			}
			&__edit{
				position: absolute;
				display: flex;
				right: 20rpx;
				width: 120rpx;
				height: 80rpx;
				justify-content: center;
				align-items: center;
				// background-color: green;
				&__icon {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					// background-color: red;
					.image {
						width: 100%;
						height: 100%;
					}
				}
				&__name {
					font-size: 15px;
				}
			}
			&__edit-none {
				display: none;
			}
		}
		
		.book-list{
			display: flex;
			flex-direction: row; //横向排列
			flex-wrap: wrap;     //换行排列
			padding: 1% 2%;
			// background-color: red;
			&__item {
				position: relative;
				display: flex;
				flex-direction: column;
				margin: 2% 2%;
				width: 46%;
				align-items: center;
				// background-color: purple;
				&__book-cover{
					width: 300rpx;
					height: 400rpx;
					flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
				    .image{
						width: 100%;
						height: 100%;
					}
				}
				&__book-name{
					margin-top: 10rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 19px;
					width: 90%;
					height: 100rpx;
				}
				&__book-info{
					margin-top: 10rpx;
					font-size: 17px;
					font-weight: 460;
					color: #777777;
				}
				&__edit-icon{
					position: absolute;
					top: 340rpx;
					right: 30rpx;
					width: 50rpx;
					height: 50rpx;
					flex-shrink: 0;
					.image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.bottom-tools{
			position: fixed;
			left: 0%;
			right: 0%;
			bottom: 0%;
			width: 100%;
			// height: 98rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			border-top: 1rpx solid #999;
			&__all{
				display: flex;
				width: 50%;
				height: 100%;
				justify-content: center;
				align-items: center;
				// background-color: green;
			}
			&__delete{
				// background-color: paleturquoise;
			}
		}
		
		.empty{
			display: flex; 
			justify-content: center; 
			align-items: center;
		}
	}
</style>