intelligent-bookshelf/src/views/index.vue

<template>
  <div id="bookshelf">
    <div class="bookshelf-header">
      <h2>RFID智慧书架</h2>
      <span class="shelf-num">{{ shelfName }}</span>
    </div>
    <!-- 本架分类 -->
    <div class="book-category">
      <p>{{ leftShelfMsg }}</p>
      <p>{{ rightShelfMsg }}</p>
    </div>
    <!-- 智慧书架导航 -->
    <ul class="book-nav">
      <li>
        <img src="~@/assets/images/home/nav1.png">
        <p>图书检索</p>
      </li>
      <li @click="toPath('/HotBook?bookType=hot')">
        <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 :list-data.sync="rackList" />
        <BookListItem :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?bookType=new')">更多<i class="iconfont icon-zuo rotate" /></span>
      </div>
      <BookListItem :list-data.sync="newList" :is-new-book="true" />
    </div>
  </div>
</template>

<script>
import BookListItem from '@/views/module/homeListItem.vue'
import { FetchNewBookRecommend, FetchCoverByISBN, initSmartBookshelf } from '@/api/bookshelf'
export default {
  name: 'Home',
  components: {
    BookListItem
  },
  data() {
    return {
      shelfName: '1',
      leftShelfMsg: '',
      rightShelfMsg: '',
      leftShelfNo: '1201-03-001-A-01',
      rightShelfNo: '1201-03-001-B-01',
      rackList: [], // 本架图书排行第一
      otherList: [], // 本架图书排行后两本
      newList: [] // 新书推荐
    }
  },
  created() {
    this.getNewBookList()
    // 本架图书 + 书架借本信息
    this.initSmartBookshelf()
  },
  mounted() {
  },
  methods: {
    toPath(path) {
      if (path === '/CurrentRackBook') {
        const query = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo }
        this.$router.push({ path: path, query: query })
      } else {
        this.$router.push(path)
      }
    },
    // 首页 - 新书推荐
    getNewBookList() {
      const params = {
        libcode: this.libcode,
        pageNo: 1,
        pageSize: 4
      }
      FetchNewBookRecommend(params).then(res => {
        let data = []
        data = res.newbookList
        data.forEach(item => {
          this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
        })
      }).catch(() => {
        this.$message.error('接口错误')
      })
    },
    // 根据isbn获取图书封面
    getCoverByISBN(isbn, item) {
      const params = {
        isbn: isbn
      }
      FetchCoverByISBN(params).then((res) => {
        item.cover = window.URL.createObjectURL(res)
        this.newList.push(item)
      })
    },
    // 初始化首页书架信息
    initSmartBookshelf() {
      // this.leftShelfNo = this.$route.query.leftShelfNo
      // this.rightShelfNo = this.$route.query.rightShelfNo
      const params = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo }
      // const _this = this
      initSmartBookshelf(params).then((res) => {
        this.shelfName = res.shelfName
        this.leftShelfMsg = res.leftShelf.sortMsg
        this.rightShelfMsg = res.rightShelf.sortMsg
        Promise.all(this.initBookData(res.bookList.splice(0, 1))).then((res) => {
          this.rackList = res
        })
        Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => {
          this.otherList = res
        })
      })
    },
    // 处理数据格式
    initBookData(bookList) {
      return bookList.map(async(item, index) => {
        const newItem = {
          ranking: item.bookUID,
          nbName: item.bookName,
          isOtherBook: index !== 0,
          nbAuthor: item.bookAuthor,
          isNewBook: false,
          num: item.heat ? item.heat : '0',
          isbn: item.isbn
        }
        const params = {
          isbn: item.isbn
        }
        const res = await FetchCoverByISBN(params)
        newItem.cover = window.URL.createObjectURL(res)
        return newItem
      })
    }
  }
}
</script>

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