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() {
      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>