intelligent-bookshelf/src/views/index.vue

<template>
  <div id="bookshelf">
    <div class="bookshelf-header">
      <h2>RFID智慧书架</h2>
      <span class="shelf-num">01架</span>
    </div>
    <!-- 本架分类 -->
    <div class="book-category">
      <p>近代文学类</p>
      <p>古代文学类</p>
    </div>
    <!-- 智慧书架导航 -->
    <ul class="book-nav">
      <li>
        <img src="~@/assets/images/home/nav1.png">
        <p>图书检索</p>
      </li>
      <li @click="toPath('/HotBook')">
        <img src="~@/assets/images/home/nav2.png">
        <p>热门图书</p>
      </li>
      <li @click="toPath('/AuthorRecommend')">
        <img src="~@/assets/images/home/nav3.png">
        <p>作者推荐</p>
      </li>
      <li @click="toPath('/DigitalResource')">
        <img src="~@/assets/images/home/nav4.png">
        <p>数字资源</p>
      </li>
      <li>
        <img src="~@/assets/images/home/nav5.png">
        <p>场馆导航</p>
      </li>
    </ul>
    <!-- 本架图书 -->
    <div class="book-rack">
      <div class="list-top">
        <div class="list-top-title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-benjiatushu" />
          </svg>
          <p>本架图书</p>
        </div>
        <span class="more" @click="toPath('/CurrentRackBook')">更多<i class="iconfont icon-zuo rotate" /></span>
      </div>
      <div class="rack-list">
        <BookListItem class="list-big" :list-data.sync="rackList" />
        <BookListItem class="list-middle" :list-data.sync="otherList" :is-other-book="true" />
      </div>
    </div>
    <!-- 新书推荐 -->
    <div class="book-rack new-recommend">
      <div class="list-top">
        <div class="list-top-title">
          <p>新书推荐</p>
        </div>
        <span class="more" @click="toPath('/NewBook')">更多<i class="iconfont icon-zuo rotate" /></span>
      </div>
      <BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
    </div>
  </div>
</template>

<script>
import data from './data'
import BookListItem from '@/views/module/bookListItem.vue'
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
export default {
  name: 'Home',
  components: {
    BookListItem
  },
  data() {
    return {
      rackList: [], // 本架图书排行第一
      otherList: [], // 本架图书排行后两本
      newList: [] // 新书推荐
    }
  },
  created() {
    this.getBookList()
    this.rackList = data.bookList.splice(0, 1)
    this.otherList = data.bookList.splice(-2)
    // this.newList = data.newList
  },
  mounted() {

  },
  methods: {
    toPath(path) {
      this.$router.push(path)
    },
    getBookList() {
      FetchNewBookRecommend().then(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.newList.push(item)
        // this.newList.slice(0, 4)
      })
    }
  }
}
</script>

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