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

<template>
  <scroll-view
    scroll-y
    refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="onRefresh"
    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>
</template>

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

export default {
  components: {
    BookItem,
  },
  props: {
    bookList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      books: [],
      isRefreshing: false,
    };
  },
  watch: {
    bookList: {
      handler(newVal) {
        this.books = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 下拉刷新
    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">
.scan-book-list {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 240px);

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

  .book-scroll {
    flex: 1;
    height: 0;
  }

  .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>