localization-inquiry-machine/src/views/newBookRecommend.vue

<template>
  <!-- 新书推荐 -->
  <div class="content-main new-main">
    <div class="swiper-container">
      <div class="swiper-wrapper new-book-list">
        <div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)">
          <div class="book-list-item">
            <div class="book-img">
              <img :src="item.imgPath" :onerror="defaultImg">
            </div>
            <div class="book-info">
              <h4 class="title-item">{{ item.name }}</h4>
              <p>作者：{{ item.author }}</p>
              <p>出版社：{{ item.publisher }}</p>
              <p>出版年份：{{ item.publisherdate }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="icon iconfont prev-btn">
        <svg class="icon svg-icon" aria-hidden="true">
          <use xlink:href="#icon-zuohua" />
        </svg>
      </div>
      <div class="icon iconfont next-btn">
        <svg class="icon svg-icon" aria-hidden="true">
          <use xlink:href="#icon-youhua" />
        </svg>
      </div>
    </div>
    <BookDetails ref="detailDom" />
  </div>
</template>

<script>
import { Swiper } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
// import { FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine'
import { FetchNewBook, FetchMarcByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine'
import BookDetails from './module/bookDetails.vue'
export default {
  name: 'NewBookRecommend',
  components: {
    BookDetails
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      coverUrl: null,
      rankingList: []
    }
  },
  created() {
    this.getNewBook()
  },
  mounted() {
  },
  methods: {
    initSwiper() {
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          touchEventsTarget: '.swiper-container',
          slidesPerView: 5,
          spaceBetween: 20,
          centeredSlides: true,
          observer: true,
          // loop: true,
          centeredSlidesBounds: true,
          watchSlidesVisibility: true,
          navigation: {
            nextEl: '.next-btn',
            prevEl: '.prev-btn'
          }
          // on: {
          //   click: function() {
          //     alert(this.clickedIndex)
          //   }
          // }
        })
      })
    },

    getNewBook() {
      console.log('this.$route.query.libcode', this.$route.query.libcode)
      const params = {
        'libcode': this.$route.query.libcode,
        'size': 40
      }
      FetchNewBook(params).then(res => {
        // 图片地址格式  http://192.168.99.67:8080/downloadFile/qytsg/ae281b90-b100-4541-9379-3e104854652c.png
        // 图片地址格式  http://192.168.99.72:14000/api/fileRelevant/getImg?imgType=2&imgId=c964bcab-ec82-43f0-8653-04d930d7da4a
        const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
        console.log('res.data', res)
        this.rankingList = res.map(item => {
          if (item.imgPath) {
            item.imgPath = linkSrc + '/api/fileRelevant/getImg?imgType=2&imgId=' + item.imgPath
            return Promise.resolve(item)
          } else {
            const params = {
              'sIsbn': item.isbn
            }
            return FetchMarcByISBN(params).then(response => {
              const result = JSON.parse(response.data)[0]
              if (result.srcurl) {
                item.imgPath = result.srcurl
                return item
              } else if (result.img) {
                item.imgPath = 'data:image/png;base64,' + result.img
                return item
              } else {
                return null
              }
            })
          }
        })
        Promise.all(this.rankingList).then(results => {
          this.rankingList = results.filter(item => item !== null)
          this.initSwiper()
        })

        console.log('this.rankingList', this.rankingList)
      })
    },
    // getBookList() {
    //   const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
    //   const params = {
    //     libcode: this.libcode,
    //     pageNo: 1,
    //     pageSize: 10
    //   }
    //   FetchNewBookRecommend(params).then(res => {
    //     console.log(res)
    //     this.rankingList = res.newbookList.map((item, index) => {
    //       if (item.nbImgPath) {
    //         item.cover = linkSrc + '/downloadFile' + item.nbImgPath
    //       } else {
    //         item.cover = null
    //       }
    //       return item
    //     })
    //     this.initSwiper()
    //   }).catch(() => {
    //     this.$message.error('接口错误')
    //   })
    // },
    // getCoverByISBN(isbn, item) {
    //   const params = {
    //     isbn: isbn
    //   }
    //   FetchCoverByISBN(params).then((res) => {
    //     // item.cover = window.URL.createObjectURL(res)
    //     item.cover = res
    //     this.rankingList.push(item)
    //     this.initSwiper()
    //   })
    // },
    // 详情
    handleDetails(index) {
      const params = {
        isbn: this.rankingList[index].isbn.replace(/\-/g, '')
      }
      getBookDetailsByISBN(params).then(res => {
        const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
        res.imgPath = linkSrc + '/api/fileRelevant/getImg?imgType=2&imgId=' + res.bookCover
        this.$refs.detailDom.bookData = res

        this.$refs.detailDom.dialogVisible = true
      })
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
.new-main{
  position: relative;
  padding: 0 50px;
}
.new-book-list{
  color: #333;
  .book-list-item{
    width: 100%;
    box-shadow: 0px 0px 20px 1px #D2D2D2;
    border-radius: 2px 2px 2px 2px;
  }
  .book-img{
    height: 6.575rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    img{
      display: block;
      width: 100%;
      // height: 100%;
    }
  }
  .book-info{
    padding: 10px 20px;
    h4{
      font-weight: normal;
      margin-bottom: 20px;
    }
    p{
      margin-bottom: 10px;
    }
  }
}

.icon{
  height: 1.1em;
}
.prev-btn,
.next-btn{
  position: absolute;
  bottom: 60px;
  font-size: 60px;
  // color: #71C09E;
  z-index: 999;
}

.prev-btn{
  left: 100px;
}

.next-btn{
  right: 100px;
}

.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.84);
  .book-info{
    line-height: 20px;
    font-size: 16px;
    h4{
      font-size: 20px;
    }
  }
}

.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-next {
    font-size: 28px;
    transform: scale(0.9);
    .book-info{
      line-height: 28px;
      font-size: 22px;
      h4{
        font-size: 28px;
      }
    }
}

.swiper-slide-active,.swiper-slide-duplicate-active {
  transform: scaleX(1);
  .book-info{
    line-height: 40px;
    font-size: 28px;
    h4{
      font-size: 40px;
    }
  }
}
</style>