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