book-hi/pages-home/pages/scaned-book.vue

<template>
    <view class="scan-history">
        <!-- 顶部操作栏 -->
        <view class="header" v-if="bookList.length">
            <view class="left">
                <u-checkbox v-if="isEditMode" class="checkbox-item" v-model="isAllSelected" @change="toggleSelectAll"
                    shape="circle" active-color="#38C148"></u-checkbox>
                <text v-if="isEditMode" class="select-text">全选</text>
            </view>
            <view class="right">
                <text v-if="!isEditMode" @tap="toggleEditMode">管理</text>
                <text v-else @tap="handleDelete">移除待售藏书</text>
            </view>
        </view>

        <!-- 书籍列表 -->
        <page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty>
            <template #empty>
                <view class="flex-d flex-a-c" style="padding-top: 25vh;">
                    <image src="../static/no-data.png" style="width:100%;height:260rpx" mode="heightFix"></image>
                    <view class="common-title" style="padding:33rpx 0 20rpx 0">暂无内容</view>
                    <view class="common-text">您暂未扫过书籍</view>
                </view>
            </template>

            <u-checkbox-group v-model="checkedIds">
                <view class="book-list">
                    <BookListItem v-for="book in bookList" :key="book.isbn" :book="book" :isEditMode="isEditMode" />
                </view>
            </u-checkbox-group>
        </page-scroll>

        <!-- 删除确认弹窗 -->
        <common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
            <text>确定删除这本图书吗？</text>
        </common-dialog>
    </view>
</template>

<script>
import BookListItem from '../components/BookListItem.vue'
import commonDialog from '@/components/common-dialog.vue'
import pageScroll from '@/components/pageScroll/index.vue'

export default {
    components: {
        BookListItem,
        commonDialog,
        pageScroll
    },
    data() {
        return {
            isEditMode: false,
            bookList: [],
            checkedIds: [],
            isAllSelected: false
        }
    },
    mounted() {
        this.$refs.pageRef?.loadData(true)
    },
    methods: {
        handleUpdateList(data) {
            this.bookList = data.map(v => {
                v.selected = false
                return v
            })
        },

        // 切换编辑模式
        toggleEditMode() {
            this.isEditMode = !this.isEditMode
            if (!this.isEditMode) {
                this.bookList.forEach(book => book.selected = false)
            }
        },

        // 切换全选
        toggleSelectAll() {
            const newValue = !this.isAllSelected
            console.log(newValue, 'newValue')
            this.bookList.forEach(book => book.selected = newValue)
        },

        // 处理删除
        handleDelete() {
            let deleteIds = this.bookList.filter(book => book.selected)
            if (deleteIds.length === 0) {
                uni.showToast({
                    title: '请选择要删除的记录',
                    icon: 'none'
                })
                return
            }
            this.$refs.deleteDialog.openPopup()
        },

        // 确认删除
        confirmDelete() {
            let deleteIds = this.bookList.filter(book => book.selected).map(v => v.isbn)
            uni.$u.http.post('/token/order/removeScanLogs', deleteIds).then(res => {
                if (res.code === 200) {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success'
                    })
                    this.$refs.pageRef?.loadData(true)
                }
            })
        }
    }
}
</script>

<style lang="scss">
.scan-history {
    min-height: 100vh;

    ::v-deep .checkbox-item {
        .u-checkbox__label {
            margin: 0 !important;
        }
    }

    .header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 88rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
        font-size: 28rpx;
        border-bottom: 1rpx solid #EEEEEE;

        .left {
            display: flex;
            align-items: center;

            .select-text {
                margin-left: 12rpx;
                color: #333333;
            }
        }

        .right {
            text {
                color: #333333;

                &.delete-btn {
                    color: #FF5B5B;
                }
            }
        }
    }

    .scroll-view {
        height: calc(100vh - 88rpx);
    }

    .book-list {
        padding: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20rpx;

        .load-more {
            width: 100%;
            display: flex;
            color: #999999;
            font-size: 24rpx;
            padding: 30rpx 0;
            justify-content: center;
        }
    }
}
</style>