本架书架-点击详情

src/views/bookRackList.vue

@@ -10,26 +10,13 @@
         <span :class="classnameR" @click="handleDirect(1)">右</span>
       </div>
     </div>
-    <div class="rack-box">
+    <div v-loading="loading" class="rack-box">
       <div v-for="(item, index) in listData" :key="index" class="rack-item">
-        <!-- <ul class="rack-box-list">
-          <li v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)">
-            <div class="box-txt">
-              <span class="book-name">{{ eitem.title }}</span>
-              <span class="book-writer">{{ eitem.author }}</span>
-            </div>
-          </li>
-        </ul> -->
-        <!-- <div class="rack-floor">
-          <span class="icon iconfont icon-l" @click="handlePage(-1)">&#xe631;</span>
-          <p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
-          <span class="icon iconfont icon-r" @click="handlePage(1)">&#xe62f;</span>
-        </div> -->
         <div v-if="bookList[item]" :class="['swiper'+index,'rack-box-list']">
           <div class="swiper-wrapper">
-            <div v-for="(eitem , eindex) in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eindex)">
+            <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 }} {{ eindex+1 }}</span>
+                <span class="book-name">{{ eitem.bookName }}</span>
                 <span class="book-writer">{{ eitem.bookAuthor }}</span>
               </div>
             </div>
@@ -37,7 +24,7 @@
         </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].length }}本)</span></p>
+          <p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item].length }}本)</span></p>
           <span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
         </div>
       </div>
@@ -47,7 +34,7 @@
 </template>
 
 <script>
-import { initBookshelfDetails } from '@/api/bookshelf'
+import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf'
 import BookDetails from './module/bookDetails.vue'
 import { Swiper } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
@@ -59,6 +46,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       listData: [],
       bookList: {},
       classnameL: 'rack-direct-active',
@@ -89,9 +77,14 @@ export default {
         }
       })
     },
-    handleDetails(index) {
-      this.$refs.detailDom.bookData = this.bookList[index]
-      this.$refs.detailDom.dialogVisible = true
+    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) {
@@ -113,6 +106,7 @@ export default {
       this.initBookshelfDetails(n)
     },
     initBookshelfDetails(n) {
+      this.loading = true
       const params = {}
       if (n === -1) { // 左
         params.shelfNo = this.$route.query.leftShelfNo
@@ -125,7 +119,12 @@ export default {
           const shelfNo = res.shelfs[index]
           this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo])
         }
-        this.initSwiper()
+        if (this.listData.length > 0) {
+          this.initSwiper()
+        }
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
       })
     }
   }