456

xs-app/framework/tools.ts

@@ -140,7 +140,7 @@ export class tools {
 	}
 	
 	// 添加书架
-	public static addBookshelf(book_data:book_item_data, cb:Function) {
+	public static addBookshelf(book_data:book_item_data, cb:Function=null) {
 		util.showLoading('加入书架...', true)
 		util.hideLoading(500, ()=>{
 			// 请求
@@ -151,13 +151,15 @@ export class tools {
 	}
 
 	// 删除书架
-	public static deleteBookshelf(book_id_list:number[], cb:Function) {
-		util.showLoading('移除书架...', true)
-		util.hideLoading(500, ()=>{
-			// 请求
-			BookshelfData().deleteBook(book_id_list)
-			uni.$emit(config.EVENT_TYPE.UPDATE_BOOKSHELF)
-			cb && cb()
+	public static deleteBookshelf(book_id_list:number[], cb:Function=null) {
+		util.showModal('删除?', `从书架删除这${book_id_list.length}本书?`, ()=>{
+			util.showLoading('移除书架...', true)
+			util.hideLoading(500, ()=>{
+				// 请求
+				BookshelfData().deleteBook(book_id_list)
+				uni.$emit(config.EVENT_TYPE.UPDATE_BOOKSHELF)
+				cb && cb()
+			})
 		})
 	}
     

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

@@ -1,5 +1,11 @@
 <template>
 	<view class="content">
+		<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">
 			<view class="book-list__item" v-for="(item,index) in book_list" :key="index"
 			@click="clickBook(item,index)">
@@ -10,26 +16,103 @@
 				<view class="book-list__item__book-info">
 					 {{item.start_read_chapter_id>0?item.start_read_chapter_id:0}}章 / {{item.chapter_count}}章
 				</view>
+				<view class="book-list__item__edit-icon" v-if="is_edit">
+					<uni-icons v-if="edit_book_list.indexOf(item.book_id)==-1" type="circle" size="35"></uni-icons>
+					<uni-icons v-else type="circle-filled" size="35"></uni-icons>
+				</view>
+			</view>
+		</view>
+		<view v-if="is_edit" class="bottom-tools" :style="{bottom:safeAreaInsets_bottom + 'rpx'}">
+			<view class="bottom-tools__all" @click="clickSelectedAll">
+				{{ is_selected_all?'取消全选':'全选' }}
+			</view>
+			<view class="bottom-tools__delete bottom-tools__all" @click="clickDelete">
+				删除({{edit_book_list.length}})
 			</view>
 		</view>
-		
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { watch } from 'vue';
+	import { ref, watch } from 'vue';
     import { book_item_data } from '../../data/data';
+    import { util } from '../../framework/util';
+import { tools } from '../../framework/tools';
+		
+	let safeAreaInsets_bottom = ref(uni.getSystemInfoSync().safeAreaInsets.bottom*2)	
+	let is_edit = ref(false)	
+	let edit_book_list = ref<Array<number>>([])
+	let is_selected_all = ref(false)
 		
 	const props = defineProps({
 		book_list: Array,
 	})
-	const emits = defineEmits(['clickBook'])
+	const emits = defineEmits(['clickBook','clickDeleteBook'])
 	// watch(()=>props.book_list, (new_v,old_v)=>{
 	//     console.log('book_list-观察 新值:',new_v,'旧值:',old_v)
 	// },{immediate:true})
 	
 	function clickBook(book_data:book_item_data, index:number) {
-		emits('clickBook',book_data,index)
+		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()
+		} else {
+			uni.showTabBar()
+			edit_book_list.value = []
+		}
+	}
+	
+	function clickSelectedAll() {
+		edit_book_list.value = []
+		if(is_selected_all.value) {
+			is_selected_all.value = false
+		} else {
+			console.log('全选')
+			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>
@@ -39,6 +122,31 @@
 		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; //横向排列
@@ -46,6 +154,7 @@
 			padding: 1% 2%;
 			// background-color: red;
 			&__item {
+				position: relative;
 				display: flex;
 				flex-direction: column;
 				margin: 2% 2%;
@@ -64,6 +173,35 @@
 					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;
+			width: 100%;
+			height: 98rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			&__all{
+				display: flex;
+				width: 50%;
+				height: 100%;
+				justify-content: center;
+				align-items: center;
+				background-color: green;
+			}
+			&__delete{
+				background-color: paleturquoise;
 			}
 		}
 	}