6 changed files with 249 additions and 7 deletions
-
1public/index.html
-
4public/static/config.js
-
4src/main.js
-
3src/utils/request.js
-
231src/views/newBookRecommend-dxh.vue
-
13src/views/newBookRecommend.vue
@ -0,0 +1,4 @@ |
|||
window.g = { |
|||
AXIOS_TIMEOUT: 10000, |
|||
ApiUrl: 'http://192.168.3.5:8080' // 配置服务器地址
|
|||
} |
|||
@ -0,0 +1,231 @@ |
|||
<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.cover" :onerror="defaultImg"> |
|||
</div> |
|||
<div class="book-info"> |
|||
<h4 class="title-item">{{ item.nbName }}</h4> |
|||
<p>作者：{{ item.nbAuthor }}</p> |
|||
<p>出版社：{{ item.nbPublisher }}</p> |
|||
<p>出版年份：{{ item.nbPublisherdate }}</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 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.getBookList() |
|||
}, |
|||
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) |
|||
// } |
|||
// } |
|||
}) |
|||
}) |
|||
}, |
|||
getBookList() { |
|||
const params = { |
|||
libcode: this.libcode, |
|||
pageNo: 1, |
|||
pageSize: 10 |
|||
} |
|||
FetchNewBookRecommend(params).then(res => { |
|||
console.log(res) |
|||
let data = [] |
|||
data = res.newbookList |
|||
data.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
}).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 => { |
|||
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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue