|
|
@@ -1,7 +1,25 @@
|
|
|
<template>
|
|
|
<view class="readHistory_content" :style="{width:window_width}">
|
|
|
- <view v-if="book_list.length>0" class="" @click="clickDeleteBook">
|
|
|
- 清空
|
|
|
+ <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">
|
|
|
<view class="book-list__item" v-for="(item,index) in book_list" :key="index"
|
|
|
@@ -9,16 +27,15 @@
|
|
|
<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">
|
|
|
- <view class="book-list__item__book-info__name">
|
|
|
- {{item.book_name}}
|
|
|
- </view>
|
|
|
- <view class="book-list__item__book-info__author book-list__item__book-info__name">
|
|
|
- 作者:{{item.author_name}}
|
|
|
- </view>
|
|
|
- <view class="book-list__item__book-info__date book-list__item__book-info__name">
|
|
|
- {{item.read_hisroty_time}}
|
|
|
- </view>
|
|
|
+ {{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>
|
|
|
@@ -27,20 +44,110 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref } from 'vue';
|
|
|
+ import { ref, watch } from 'vue';
|
|
|
import { book_item_data } from '../../data/data';
|
|
|
- defineProps({
|
|
|
+ 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>,
|
|
|
})
|
|
|
- const emits = defineEmits(['clickBook','clickDeleteBook'])
|
|
|
- let window_width = ref(uni.getSystemInfoSync().windowWidth + 'px')
|
|
|
+ // 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 clickDeleteBook() {
|
|
|
- emits('clickDeleteBook')
|
|
|
+ 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 clickBook(book_data:book_item_data, index:number) {
|
|
|
- emits('clickBook',book_data,index)
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ util.showModal('是否删除?','',()=>{
|
|
|
+ tools.deleteReadHistory(edit_book_list.value)
|
|
|
+ changeEditStatus()
|
|
|
+ emits('clickDeleteBook',edit_book_list.value)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
@@ -51,54 +158,116 @@
|
|
|
flex-direction: column;
|
|
|
// background-color: purple;
|
|
|
|
|
|
- .book-list{
|
|
|
+ .top{
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-top: 20rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
// background-color: red;
|
|
|
-
|
|
|
- &__item{
|
|
|
+ &__info{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ &__item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ // background-color: red;
|
|
|
+ &__image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ &__name{
|
|
|
+ position: absolute;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__edit{
|
|
|
+ position: absolute;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
// background-color: green;
|
|
|
+ &__icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ .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: 200rpx;
|
|
|
- height: 250rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 400rpx;
|
|
|
flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
|
|
|
- .image {
|
|
|
+ .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{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 20rpx;
|
|
|
- // background-color: red;
|
|
|
- &__name{
|
|
|
- margin-top: 10rpx;
|
|
|
- display: -webkit-box;
|
|
|
- align-items: center;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- &__author{
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 16px;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- }
|
|
|
- &__date{
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 15px;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
+ 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%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
future
