book-hi/pages/home/components/ScanBookList.vue

<template>
    <view class="wrapper">
        <scroll-view
            scroll-y
            @scroll="onScroll"
            :refresher-enabled="isAtTop"
            :refresher-triggered="isRefreshing"
            @refresherrefresh="onRefresh"
            @scrolltoupper="scrollToUpper"
            upper-threshold="5"
            class="book-scroll"
        >
            <view class="scan-book-list">
                <!-- 顶部提示 -->
                <view class="tip-text">
                    套装书(相同ISBN相同的系列书籍)只需扫描其中一本，扫描价即套装价；需用户将整个套装全部寄出，缺册不予回收。
                </view>

                <!-- 书籍列表 -->
                <view class="book-list">
                    <BookItem
                        v-for="book in bookList"
                        :key="book.isbn"
                        :book="book"
                        @delete="handleDeleteBook"
                        @quantity-change="handleQuantityChange"
                        @upsell="handleUpsell"
                    />
                </view>

                <view class="link-wrap flex-a">
                    <text class="link-btn flex-1" @click="goToScannedBooks"
                        >扫过的书 ></text
                    >
                    <text class="link-btn flex-1" @click="goToRules"
                        >卖书规则 ></text
                    >
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import BookItem from "./BookItem.vue";

export default {
    components: {
        BookItem,
    },
    props: {
        bookList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            books: [],
            isRefreshing: false,
            isAtTop: true, // 是否在顶部，默认为true
            scrollTop: 0,
        };
    },
    watch: {
        bookList: {
            handler(newVal) {
                this.books = newVal;
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        // 滚动事件
        onScroll(e) {
            // 记录滚动位置
            this.scrollTop = e.detail.scrollTop;

            // 只有在最顶部时才能触发下拉刷新
            this.isAtTop = this.scrollTop < 5;
        },

        // 滚动到顶部事件
        scrollToUpper() {
            this.isAtTop = true;
        },

        // 下拉刷新
        onRefresh() {
            console.log("onRefresh");
            this.isRefreshing = true;

            // 触发父组件的刷新事件
            this.$emit("refresh");

            // 模拟刷新完成
            setTimeout(() => {
                this.isRefreshing = false;
            }, 600);
        },

        // 加价
        handleUpsell(book) {
            this.$emit("upsell", book);
        },

        handleDeleteBook(book) {
            this.$emit("deleted", book);
        },

        handleQuantityChange(data) {
            const book = this.books.find((book) => book.isbn === data.isbn);
            if (book) {
                book.num = data.num;
            }
            this.$emit("updateBooks", this.books, book);
        },

        onNext() {
            this.$emit("next");
        },

        goToScannedBooks() {
            uni.navigateTo({
                url: "/pages-home/pages/scaned-book",
            });
        },

        goToRules() {
            uni.navigateTo({
                url: "/pages-mine/pages/rules-for-sellbooks",
            });
        },
    },
};
</script>

<style lang="scss">
.wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

.book-scroll {
    height: calc(100vh - 240px);
}

.scan-book-list {
    padding: 20rpx;
    display: flex;
    flex-direction: column;

    .tip-text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #ff8a4b;
        line-height: 36rpx;
    }

    .link-wrap {
        gap: 20rpx;
        box-sizing: border-box;
        margin-top: 20rpx;

        .link-btn {
            height: 80rpx;
            background: #ffffff;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #666666;
        }
    }
}
</style>