From 1c896572dffb0de9a4100f19ea9a5e87aa0f9dad Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 28 Aug 2023 17:32:15 +0800
Subject: [PATCH] =?UTF-8?q?ip=E6=9B=B4=E6=8D=A2/=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                   |  18 +-
 src/views/bookRackList.vue        | 343 ++++++++++++++--------------
 src/views/index.vue               | 367 +++++++++++++++---------------
 src/views/module/homeListItem.vue | 181 ++++++++-------
 4 files changed, 469 insertions(+), 440 deletions(-)

diff --git a/.env.production b/.env.production
index 1eb400c..7c2bee8 100644
--- a/.env.production
+++ b/.env.production
@@ -1,9 +1,9 @@
-ENV = 'production'
-
-# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
-# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
-# VUE_APP_BASE_API  = 'https://openapitest.aiyxlib.com'
-# VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
-VUE_APP_BASE_API  = 'http://172.16.0.23:8080'
-# 如果接口是 http 形式， wss 需要改为 ws
-VUE_APP_WS_API = 'ws://192.168.99.107:7071'
+ENV = 'production'
+
+# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
+# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
+# VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
+VUE_APP_BASE_API  = 'http://172.22.0.23:8080'
+# VUE_APP_BASE_API  = 'http://127.0.0.1:8080'
+# 如果接口是 http 形式， wss 需要改为 ws
+VUE_APP_WS_API = 'ws://192.168.99.107:7071'
diff --git a/src/views/bookRackList.vue b/src/views/bookRackList.vue
index aafcbd8..6162f7e 100644
--- a/src/views/bookRackList.vue
+++ b/src/views/bookRackList.vue
@@ -1,165 +1,178 @@
-<template>
-  <div id="bookshelf">
-    <div class="bookshelf-header" style="height:120px">
-      <!-- <router-link to="/">
-        <span class="icon iconfont icon-l">&#xe631;</span>
-      </router-link> -->
-      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
-      <h2>本架图书</h2>
-      <div class="rack-direct">
-        <span :class="classnameL" @click="handleDirect(-1)">左</span>
-        <span :class="classnameR" @click="handleDirect(1)">右</span>
-      </div>
-    </div>
-    <div v-loading="loading" class="rack-box">
-      <div v-for="(item, index) in listData" :key="index" class="rack-item">
-        <div :class="['swiper'+index,'rack-box-list']">
-          <div class="swiper-wrapper">
-            <div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)">
-              <div class="box-txt">
-                <span class="book-name">{{ eitem.bookName }}</span>
-                <span class="book-writer">{{ eitem.bookAuthor }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="rack-floor">
-          <span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)">&#xe631;</span>
-          <p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item]?bookList[item].length:0 }}本)</span></p>
-          <span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
-        </div>
-      </div>
-    </div>
-    <BookDetails ref="detailDom" />
-  </div>
-</template>
-
-<script>
-import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf'
-import BookDetails from './module/bookDetails.vue'
-import { Swiper } from 'vue-awesome-swiper'
-import 'swiper/swiper-bundle.css'
-
-export default {
-  name: 'CurrentRackBook',
-  components: {
-    BookDetails
-  },
-  data() {
-    return {
-      loading: false,
-      listData: [],
-      bookList: {},
-      classnameL: 'rack-direct-active',
-      classnameR: null
-    }
-  },
-  created() {
-    this.initBookshelfDetails(-1)
-  },
-  mounted() {
-  },
-  methods: {
-    initSwiper() {
-      this.$nextTick(() => {
-        for (const key in this.bookList) {
-          this.bookList[key].forEach((el, index) => {
-            new Swiper('.swiper' + index, {
-              slidesPerView: 'auto',
-              slidesPerGroup: 15,
-              observer: true,
-              navigation: {
-                nextEl: '.icon-r' + index,
-                prevEl: '.icon-l' + index
-              }
-            })
-          })
-        }
-      })
-    },
-    // 左右架切换之后，初始化swiper位置
-    setSwiperInit() {
-      setTimeout(() => {
-        this.listData.forEach((item, index) => {
-          document.getElementsByClassName('swiper-wrapper')[index].style.transform = 'translate3d(0px, 0px, 0px)'
-        })
-      }, 50)
-    },
-    handleDetails(itemData) {
-      const params = {
-        isbn: itemData.isbn.replace(/\-/g, '')
-      }
-      getBookDetailsByISBN(params).then(res => {
-        this.$refs.detailDom.bookData = res
-        this.$refs.detailDom.dialogVisible = true
-      })
-    },
-    // 翻页
-    handlePage(page) {
-      if (page === 1) {
-        // 下一页
-      } else {
-        // 上一页
-      }
-    },
-    // 控制左右
-    handleDirect(n) {
-      if (n === -1) { // 左
-        this.classnameR = null
-        this.classnameL = 'rack-direct-active'
-      } else { // 右
-        this.classnameL = null
-        this.classnameR = 'rack-direct-active'
-      }
-      this.initBookshelfDetails(n)
-    },
-    goBack() {
-      this.$router.go(-1)
-    },
-    initBookshelfDetails(n) {
-      this.loading = true
-      const params = {}
-      if (n === -1) { // 左
-        params.shelfNo = this.$route.query.leftShelfNo
-      } else { // 右
-        params.shelfNo = this.$route.query.rightShelfNo
-      }
-      initBookshelfDetails(params).then((res) => {
-        console.log(this.listData)
-        // if (res.shelfs.length === 0) {
-        //   res.shelfs.push('firstShelf', 'secondShelf', 'thirdShelf', 'fourthShelf', 'fivethShelf')
-        //   for (let index = 0; index < res.shelfs.length; index++) {
-        //     const shelfNo = res.shelfs[index]
-        //     res.shelfBook[shelfNo] = []
-        //   }
-        // }
-        this.listData.splice(0, this.listData.length, ...res.shelfAll)
-        if (res.shelfs.length !== 0) {
-          for (let index = 0; index < res.shelfs.length; index++) {
-            const shelfNo = res.shelfs[index]
-            this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo])
-          }
-        }
-        if (this.listData.length > 0) {
-          this.initSwiper()
-          this.setSwiperInit()
-        }
-        setTimeout(() => {
-          this.loading = false
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "~@/assets/styles/index.scss";
-.swiper-container {
-  position: relative;
-  width: 100%;
-}
-.swiper-slide {
-  width: 65px !important;
-}
-</style>
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <!-- <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link> -->
+      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <h2>本架图书</h2>
+      <div class="rack-direct">
+        <span :class="classnameL" @click="handleDirect(-1)">左</span>
+        <span :class="classnameR" @click="handleDirect(1)">右</span>
+      </div>
+    </div>
+    <div v-loading="loading" class="rack-box">
+      <div v-for="(item, index) in listData" :key="index" class="rack-item">
+        <div :class="['swiper'+index,'rack-box-list']">
+          <div class="swiper-wrapper">
+            <div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)">
+              <div class="box-txt">
+                <span class="book-name">{{ eitem.bookName }}</span>
+                <span class="book-writer">{{ eitem.bookAuthor }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rack-floor">
+          <span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)">&#xe631;</span>
+          <p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item]?bookList[item].length:0 }}本)</span></p>
+          <span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
+        </div>
+      </div>
+    </div>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf'
+import BookDetails from './module/bookDetails.vue'
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+
+export default {
+  name: 'CurrentRackBook',
+  components: {
+    BookDetails
+  },
+  data() {
+    return {
+      loading: false,
+      listData: [],
+      bookList: {},
+      classnameL: 'rack-direct-active',
+      classnameR: null
+    }
+  },
+  created() {
+    this.initBookshelfDetails(-1)
+  },
+  mounted() {
+  },
+  methods: {
+    initSwiper() {
+      this.$nextTick(() => {
+        for (const key in this.bookList) {
+          this.bookList[key].forEach((el, index) => {
+            new Swiper('.swiper' + index, {
+              slidesPerView: 'auto',
+              slidesPerGroup: 15,
+              observer: true,
+              navigation: {
+                nextEl: '.icon-r' + index,
+                prevEl: '.icon-l' + index
+              }
+            })
+          })
+        }
+      })
+    },
+    // 左右架切换之后，初始化swiper位置
+    setSwiperInit() {
+      setTimeout(() => {
+        this.listData.forEach((item, index) => {
+          document.getElementsByClassName('swiper-wrapper')[index].style.transform = 'translate3d(0px, 0px, 0px)'
+        })
+      }, 50)
+    },
+    handleDetails(itemData) {
+      const params = {
+        isbn: itemData.isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        this.$refs.detailDom.dialogVisible = true
+        if (res) {
+          this.$refs.detailDom.bookData = res
+        } else {
+          this.$refs.detailDom.bookData = {
+            srcUrl: itemData.bookAuthor,
+            bookName: itemData.bookName,
+            bookAuthor: itemData.bookAuthor ? itemData.bookAuthor : '暂无信息',
+            gist: '暂无简介',
+            Publish: '暂无信息',
+            places: [
+              { shelfName: '' }
+            ]
+          }
+        }
+      })
+    },
+    // 翻页
+    handlePage(page) {
+      if (page === 1) {
+        // 下一页
+      } else {
+        // 上一页
+      }
+    },
+    // 控制左右
+    handleDirect(n) {
+      if (n === -1) { // 左
+        this.classnameR = null
+        this.classnameL = 'rack-direct-active'
+      } else { // 右
+        this.classnameL = null
+        this.classnameR = 'rack-direct-active'
+      }
+      this.initBookshelfDetails(n)
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    initBookshelfDetails(n) {
+      this.loading = true
+      const params = {}
+      if (n === -1) { // 左
+        params.shelfNo = this.$route.query.leftShelfNo
+      } else { // 右
+        params.shelfNo = this.$route.query.rightShelfNo
+      }
+      initBookshelfDetails(params).then((res) => {
+        console.log(this.listData)
+        // if (res.shelfs.length === 0) {
+        //   res.shelfs.push('firstShelf', 'secondShelf', 'thirdShelf', 'fourthShelf', 'fivethShelf')
+        //   for (let index = 0; index < res.shelfs.length; index++) {
+        //     const shelfNo = res.shelfs[index]
+        //     res.shelfBook[shelfNo] = []
+        //   }
+        // }
+        this.listData.splice(0, this.listData.length, ...res.shelfAll)
+        if (res.shelfs.length !== 0) {
+          for (let index = 0; index < res.shelfs.length; index++) {
+            const shelfNo = res.shelfs[index]
+            this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo])
+          }
+        }
+        if (this.listData.length > 0) {
+          this.initSwiper()
+          this.setSwiperInit()
+        }
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.swiper-container {
+  position: relative;
+  width: 100%;
+}
+.swiper-slide {
+  width: 65px !important;
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 28eef14..c10eee8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,182 +1,185 @@
-<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 = 'http://219.140.69.151/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
-      }
-      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>
+<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 = 'http://219.140.69.151/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
+      }
+      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
+          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>
diff --git a/src/views/module/homeListItem.vue b/src/views/module/homeListItem.vue
index ed40e9b..4397d03 100644
--- a/src/views/module/homeListItem.vue
+++ b/src/views/module/homeListItem.vue
@@ -1,84 +1,97 @@
-<template>
-  <div>
-    <div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]">
-      <div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)">
-        <div class="book-img">
-          <img :src="item.cover" :onerror="defaultImg" />
-        </div>
-        <div class="book-info">
-          <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
-          <p class="book-author">{{ item.nbAuthor }}</p>
-          <div v-if="!isNewBook" class="book-num">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-remen" />
-            </svg>
-            <p>{{ item.num }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <BookDetails ref="detailDom" />
-  </div>
-</template>
-
-<script>
-import { getBookDetailsByISBN } from '@/api/bookshelf'
-import BookDetails from './bookDetails.vue'
-
-export default {
-  name: 'BookListItem',
-  components: { BookDetails },
-  props: {
-    listData: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    },
-    isOtherBook: {
-      type: Boolean,
-      default: function() {
-        return false
-      }
-    },
-    isNewBook: {
-      type: Boolean,
-      default: function() {
-        return false
-      }
-    }
-  },
-  data() {
-    return {
-      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
-    }
-  },
-  watch: {
-    listData: function(newValue, oldValue) {
-    },
-    isOtherBook: function(newValue, oldValue) {
-    },
-    isNewBook: function(newValue, oldValue) {
-    }
-  },
-  created() {
-  },
-  mounted() {
-  },
-  methods: {
-    handleDetails(index) {
-      const params = {
-        isbn: this.listData[index].isbn.replace(/\-/g, '')
-      }
-      getBookDetailsByISBN(params).then(res => {
-        this.$refs.detailDom.bookData = res
-        this.$refs.detailDom.dialogVisible = true
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "~@/assets/styles/index.scss";
-</style>
+<template>
+  <div>
+    <div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]">
+      <div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)">
+        <div class="book-img">
+          <img :src="item.cover" :onerror="defaultImg" />
+        </div>
+        <div class="book-info">
+          <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
+          <p class="book-author">{{ item.nbAuthor }}</p>
+          <div v-if="!isNewBook" class="book-num">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-remen" />
+            </svg>
+            <p>{{ item.num }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import { getBookDetailsByISBN } from '@/api/bookshelf'
+import BookDetails from './bookDetails.vue'
+
+export default {
+  name: 'BookListItem',
+  components: { BookDetails },
+  props: {
+    listData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    isOtherBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    isNewBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
+    }
+  },
+  watch: {
+    listData: function(newValue, oldValue) {
+    },
+    isOtherBook: function(newValue, oldValue) {
+    },
+    isNewBook: function(newValue, oldValue) {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    handleDetails(index) {
+      const params = {
+        isbn: this.listData[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        this.$refs.detailDom.dialogVisible = true
+        if (res) {
+          this.$refs.detailDom.bookData = res
+        } else {
+          this.$refs.detailDom.bookData = {
+            srcUrl: this.listData[index].cover,
+            bookName: this.listData[index].nbName,
+            bookAuthor: this.listData[index].nbAuthor ? this.listData[index].nbAuthor : '暂无信息',
+            gist: '暂无简介',
+            Publish: '暂无信息',
+            places: [
+              { shelfName: '' }
+            ]
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>