intelligence-screen/src/views/newBookRecommend/index.vue

<template>
  <!-- 新书推荐 -->
  <div class="screen-item lending-ranking">
    <div class="common-title">新书推荐</div>
    <div ref="newbook" class="big-module module-content">
      <swiper ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
        <swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
          <div class="book-list-item">
            <div class="book-img">
              <img :src="coverUrl" :onerror="defaultImg">
            </div>
            <div class="book-info">
              <h4 class="title-item">{{ item.nbName }}</h4>
              <p>{{ item.nbAuthor }}</p>
            </div>
            <div class="ranking-num">
              <svg v-if="index === 0" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-no1" />
              </svg>
              <svg v-if="index === 1" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-no21" />
              </svg>
              <svg v-if="index === 2" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-no3" />
              </svg>
              <p>NO.{{ index+1 }}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'NewBookRecommend',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      rankingList: [],
      swiperOptionThumbs: {
        direction: 'vertical',
        autoplay: true,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        touchRatio: 0.2,
        autoScrollOffset: true
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.swiperThumbs.swiper
    }
  },
  created() {
  },
  mounted() {
    this.getNewBookRecommend()
  },
  methods: {
    getNewBookRecommend() {
      FetchNewBookRecommend().then(res => {
        if (res.errCode === 0) {
          this.rankingList = res.data
          this.rankingList.forEach(item => {
            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
          })
        } else {
          this.$message.error('接口错误')
        }
      })
    },
    getCoverByISBN(isbn, item) {
      const params = {
        isbn: isbn
      }
      FetchCoverByISBN(params).then((res) => {
        item.cover = window.URL.createObjectURL(res)
      })
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
.swiper-container{
  overflow: initial;
}
.swiper {
  &.gallery-thumbs {
    height: 1.275rem;
  }
  &.gallery-thumbs .swiper-slide {
    width: 100%;
    height: 100%;
  }
  &.gallery-thumbs .swiper-slide-active {
    background-color: #09194B;
  }
}
</style>