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 @click="toSearch">
        <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 @click="toRoomNav">
        <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"></i></span>
      </div>
      <div class="rack-list">
        <BookListItem :list-data.sync="rackList" />
        <div class="other-list">
          <BookListItem :list-data.sync="otherList" :is-other-book="true" />
        </div>
      </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"></i></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',
      leftShelfNo: '',
      rightShelfNo: '',
      rackList: [], // 本架图书排行第一
      otherList: [], // 本架图书排行后两本
      newList: [] // 新书推荐
    }
  },
  created() {
    this.getNewBookList()
    // 本架图书 + 书架借本信息
    this.initSmartBookshelf()
  },
  mounted() {
  },
  methods: {
    toSearch() {
      window.location.href = 'https://opac.whlib.org.cn/opac'
    },
    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)
      }
    },
    toRoomNav() {
      const linkSrc = process.env.VUE_APP_BASE_API
      window.location.href = linkSrc + '/anchoring/initVenueNavigation.do?libcode=' + this.libcode
    },
    // 首页 - 新书推荐
    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
      }
      console.log(params)
      FetchCoverByISBN(params).then((res) => {
        // item.cover = window.URL.createObjectURL(res)
        if (res) {
          item.cover = res
        } else {
          item.cover = ''
        }
        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
          console.log('rackList', this.rackList)
        })
        Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => {
          this.otherList = res
          console.log('otherList', this.otherList)
        })
      })
    },
    // 处理数据格式
    initBookData(bookList) {
      return bookList.map(async(item, index) => {
        const newItem = {
          cover: item.srcUrl,
          ranking: item.bookUID,
          nbName: item.bookName,
          isOtherBook: index !== 0,
          nbAuthor: item.bookAuthor ? 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>