library-inquiry-machine/src/views/bookList.vue

<template>
  <div class="content-main">
    <Search ref="searchRefs" />
    <div class="bookList-wrap" style="margin: 30px 44px;">
      <div class="bookList-left">
        <Ranking />
      </div>
      <!-- 图书列表 -->
      <div class="book-content2">
        <div class="result">检索结果：<span>{{ totalNum }}</span>册</div>
        <div class="book-all-list" @scroll="listenScroll">
          <div v-for="(item,index) in bookList" :key="index" class="book-item" @click="getBookDetaisByBookRecNo(item)">
            <div class="book-info">
              <div class="book-img">
                <img :src="item.bookCover && item.bookCover === null ? defaultImg : baseUrl + '/api/fileRelevant/getImg?imgType=2&imgId=' + item.bookCover+'.jpg'" :onerror="defaultImg" alt="">
                <!-- <img :src="coverUrl+'/demoRecommend/getBookCover.do?id='+item.id" :onerror="defaultImg" alt=""> -->
              </div>
              <div class="book-txt">
                <h4> {{ item.title }} </h4>
                <div class="book-autor"> {{ item.author }} </div>
                <div class="book-publish"> {{ item.publisher }} </div>
                <div class="book-isbn">ISBN：{{ item.isbn }}</div>
                <!-- <div class="book-intro title-item"> {{ item.introduce }} </div> -->
                <div class="to-book-more">查看详情</div>
              </div>
            </div>
          </div>
          <div v-if="!hasNextPage" class="load-data">暂无更多数据</div>
          <div v-else class="load-data">加载中...</div>
        </div>
      </div>
    </div>
    <BookDetails ref="bookDetailsRef" />
  </div>
</template>

<script>
import { FetchFindBooksByQuery, FetchBookDetaisByBookRecNo } from '@/api/inquiryMachine'
import { positionCrud } from './mixins/index.js'
import Search from './module/search'
import Ranking from './module/ranking'
import BookDetails from './module/bookDetails'

export default {
  name: 'BookList',
  components: {
    Search,
    Ranking,
    BookDetails
  },
  mixins: [positionCrud],
  data() {
    return {
      baseUrl: process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API,
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      bookList: [],
      coverUrl: null,
      pageIndex: 1,
      pageSize: 10,
      hasNextPage: false,
      totalPages: 0,
      totalNum: 0
    }
  },
  computed: {
  },
  created() {
  },
  mounted() {
    this.getBookRecommendList()
  },
  methods: {
    getLocation(row) {
      const parts = []
      if (row.floorName) {
        parts.push(row.floorName)
      }
      if (row.regionName) {
        parts.push(row.regionName)
      }
      if (row.gridName) {
        parts.push(row.gridName)
      }
      return parts.length > 0 ? parts.join('-') : '-'
    },
    getBookRecommendList() {
      let params
      if (localStorage.getItem('searchKey')) {
        this.$refs.searchRefs.keyword = localStorage.getItem('searchKey')
        this.$refs.searchRefs.keyWordIndex = parseInt(localStorage.getItem('keyWordIndex'))
        params = {
          'fondsCode': this.libcode,
          'search': localStorage.getItem('searchKey'),
          'page': this.pageIndex - 1,
          'size': this.pageSize
        }
      } else {
        params = {
          'fondsCode': this.libcode,
          'search': this.$refs.searchRefs.keyword,
          'page': this.pageIndex - 1,
          'size': this.pageSize
        }
      }
      FetchFindBooksByQuery(params).then(res => {
        const resData = res.content
        if (resData.length === 0) {
          this.hasNextPage = false
        } else {
          this.hasNextPage = resData.length === this.pageSize
        }

        this.totalNum = res.totalElements
        this.totalPages = res.totalPages
        this.bookList = this.bookList.concat(resData)
        // if (this.pageIndex > res.totalPages) {
        //   this.hasNextPage = false
        // }
        localStorage.removeItem('searchKey')
        localStorage.removeItem('keyWordIndex')
      }).catch(() => {
        this.$message.error('接口错误')
      })
    },
    // 监听滚动
    listenScroll(e) {
      const ele = e.srcElement ? e.srcElement : e.target
      if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { // 监听滚动到div底部
        this.addMoreData()
      }
    },
    // 加载更多
    addMoreData() {
      if (this.hasNextPage) {
        this.getBookRecommendList()
        this.pageIndex++
      }
    },
    getBookDetaisByBookRecNo(item) {
      FetchBookDetaisByBookRecNo({
        'bookRecNo': item.bookRecNo
      }).then(res => {
        this.$refs.bookDetailsRef.getBookRankingDetail(res)
      }).catch(() => {
        this.$message.error('接口错误')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
::v-deep .el-dialog{
  width: 930px;
  border-radius: 16px;
  background: #F8F8FD;
  box-shadow: 0px 3px 20px 1px rgba(0,0,0,0.05);
  .el-dialog__body{
    padding: 20px 0 23px 0;
  }
}

.detail-dialog{
  ::v-deep .el-dialog__header{
    display: none;
  }
}
.dialog-book{
  padding: 30px;
  font-size: 28px;
  .book-txt{
    color: #191A1A!important;
    font-size: 30px !important;
  }
  .book-autor{
    font-size: 24px !important;
  }
  .book-publish{
    font-size: 28px !important;
  }
}
</style>