You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.9 KiB
113 lines
2.9 KiB
<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>
|