本架图书

src/views/bookRackList.vue

@@ -25,7 +25,7 @@
           <p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
           <span class="icon iconfont icon-r" @click="handlePage(1)">&#xe62f;</span>
         </div> -->
-        <div :class="['swiper'+index,'rack-box-list']">
+        <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 class="box-txt">
@@ -47,7 +47,6 @@
 </template>
 
 <script>
-import data1 from './data1.json'
 import { initBookshelfDetails } from '@/api/bookshelf'
 import BookDetails from './module/bookDetails.vue'
 import { Swiper } from 'vue-awesome-swiper'
@@ -61,34 +60,33 @@ export default {
   data() {
     return {
       listData: [],
-      bookList: [],
+      bookList: {},
       classnameL: 'rack-direct-active',
       classnameR: null
     }
   },
   created() {
-    // this.$route.query.leftShelfNo
-    this.listData = data1.listData
-    this.bookList = data1.rackBook
     this.initBookshelfDetails(-1)
   },
   mounted() {
-    this.initSwiper()
   },
   methods: {
     initSwiper() {
       this.$nextTick(() => {
-        this.bookList.forEach((el, index) => {
-          new Swiper('.swiper' + index, {
-            slidesPerView: 'auto',
-            slidesPerGroup: 15,
-            observer: true,
-            navigation: {
-              nextEl: '.icon-r' + index,
-              prevEl: '.icon-l' + index
-            }
+        for (const key in this.bookList) {
+          console.log(key)
+          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
+              }
+            })
           })
-        })
+        }
       })
     },
     handleDetails(index) {
@@ -121,11 +119,13 @@ export default {
       } else { // 右
         params.shelfNo = this.$route.query.rightShelfNo
       }
-      console.log(params, this.$route.query.leftShelfNo)
       initBookshelfDetails(params).then((res) => {
-        console.log(res)
-        this.listData = res.shelfs
-        this.bookList = res.shelfBook
+        this.listData.splice(0, this.listData.length, ...res.shelfs)
+        for (let index = 0; index < res.shelfs.length; index++) {
+          const shelfNo = res.shelfs[index]
+          this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo])
+        }
+        this.initSwiper()
       })
     }
   }