intelligent-bookshelf/src/views/hotBook.vue

<template>
  <div id="bookshelf">
    <!-- <HeaderTop /> -->
    <div class="bookshelf-header" style="height:120px">
      <router-link to="/">
        <span class="icon iconfont icon-l">&#xe631;</span>
      </router-link>
      <h2>热门图书</h2>
    </div>
    <BookList :bookdata="bookData" />
  </div>
</template>

<script>
// import HeaderTop from '@/views/module/headerTop.vue'
import BookList from '@/views/module/bookList.vue'
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
export default {
  name: 'NewBook',
  components: { BookList },
  data() {
    return {
      bookData: []
    }
  },
  created() {
    this.getBookData()
  },
  methods: {
    getBookData() {
      FetchNewBookRecommend().then(res => {
        console.log(res, 'res')
        let data = []
        data = res
        data.forEach(item => {
          this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
        })
      }).catch(() => {
        this.$message.error('接口错误')
      })
    },
    getCoverByISBN(isbn, item) {
      const params = {
        isbn: isbn
      }
      FetchCoverByISBN(params).then((res) => {
        item.cover = window.URL.createObjectURL(res)
        this.bookData.push(item)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";

</style>