intelligent-bookshelf/src/views/bookRackList.vue

<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 v-if="bookList[item]" :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].length }}本)</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)
        for (let index = 0; index < res.shelfAll.length; index++) {
          const shelfNo = res.shelfAll[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>