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

<template>
	<view class="bookList_content" :style="{width:window_width}">
		<view :class="book_list.length>0?'top':'top-none'">
			<view class='top__info'>
				{{is_edit?'':'全部'}}
			</view>
			<view class="top__edit" @click="clickEdit">{{is_edit?'取消':'编辑'}}</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">
					<uni-icons :type="edit_book_list.indexOf(item.book_id)==-1?'circle':'circle-filled'" size="35"></uni-icons>
				</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>
</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';
		
	let window_width = ref(uni.getSystemInfoSync().windowWidth + '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)
	
	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','clickDeleteBook'])
	
	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 clickEdit() {
		changeEditStatus()
	}
	
	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;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background-color: red;
			&__info{
				display: flex;
				padding-left: 20rpx;
			}
			&__edit{
				display: flex;
				width: 120rpx;
				height: 100%;
				justify-content: center;
				align-items: center;
				// background-color: green;
			}
		}
		
		.top-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;
					align-items: center;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				&__book-info{
					margin-top: 10rpx;
				}
				&__edit-icon{
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					// width: 60rpx;
					// height: 60rpx;
					// background-color: red;
				}
			}
		}
		.bottom-tools{
			position: fixed;
			left: 0%;
			right: 0%;
			bottom: 0%;
			width: 100%;
			// height: 98rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			&__all{
				display: flex;
				width: 50%;
				height: 100%;
				justify-content: center;
				align-items: center;
				background-color: green;
			}
			&__delete{
				background-color: paleturquoise;
			}
		}
	}
</style>