12 changed files with 643 additions and 12 deletions
-
1public/index.html
-
4public/static/config.js
-
4src/main.js
-
3src/utils/request.js
-
178src/views/bookRackList-dxh.vue
-
9src/views/bookRackList.vue
-
191src/views/index-dxh.vue
-
20src/views/index.vue
-
103src/views/mixins/booklist-dxh.js
-
36src/views/mixins/booklist.js
-
97src/views/module/homeListItem-dxh.vue
-
9src/views/module/homeListItem.vue
@ -0,0 +1,4 @@ |
|||
window.g = { |
|||
AXIOS_TIMEOUT: 10000, |
|||
ApiUrl: 'http://192.168.3.5:8080', // 配置服务器地址
|
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<!-- <router-link to="/"> |
|||
<span class="icon iconfont icon-l"></span> |
|||
</router-link> --> |
|||
<span class="icon iconfont icon-l" @click="goBack()"></span> |
|||
<h2>本架图书</h2> |
|||
<div class="rack-direct"> |
|||
<span :class="classnameL" @click="handleDirect(-1)">左</span> |
|||
<span :class="classnameR" @click="handleDirect(1)">右</span> |
|||
</div> |
|||
</div> |
|||
<div v-loading="loading" class="rack-box"> |
|||
<div v-for="(item, index) in listData" :key="index" class="rack-item"> |
|||
<div :class="['swiper'+index,'rack-box-list']"> |
|||
<div class="swiper-wrapper"> |
|||
<div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)"> |
|||
<div class="box-txt"> |
|||
<span class="book-name">{{ eitem.bookName }}</span> |
|||
<span class="book-writer">{{ eitem.bookAuthor }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="rack-floor"> |
|||
<span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)"></span> |
|||
<p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item]?bookList[item].length:0 }}本)</span></p> |
|||
<span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<BookDetails ref="detailDom" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf' |
|||
import BookDetails from './module/bookDetails.vue' |
|||
import { Swiper } from 'vue-awesome-swiper' |
|||
import 'swiper/swiper-bundle.css' |
|||
|
|||
export default { |
|||
name: 'CurrentRackBook', |
|||
components: { |
|||
BookDetails |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
listData: [], |
|||
bookList: {}, |
|||
classnameL: 'rack-direct-active', |
|||
classnameR: null |
|||
} |
|||
}, |
|||
created() { |
|||
this.initBookshelfDetails(-1) |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
initSwiper() { |
|||
this.$nextTick(() => { |
|||
for (const key in this.bookList) { |
|||
this.bookList[key].forEach((el, index) => { |
|||
new Swiper('.swiper' + index, { |
|||
slidesPerView: 'auto', |
|||
slidesPerGroup: 15, |
|||
observer: true, |
|||
navigation: { |
|||
nextEl: '.icon-r' + index, |
|||
prevEl: '.icon-l' + index |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 左右架切换之后，初始化swiper位置 |
|||
setSwiperInit() { |
|||
setTimeout(() => { |
|||
this.listData.forEach((item, index) => { |
|||
document.getElementsByClassName('swiper-wrapper')[index].style.transform = 'translate3d(0px, 0px, 0px)' |
|||
}) |
|||
}, 50) |
|||
}, |
|||
handleDetails(itemData) { |
|||
const params = { |
|||
isbn: itemData.isbn.replace(/\-/g, '') |
|||
} |
|||
getBookDetailsByISBN(params).then(res => { |
|||
this.$refs.detailDom.dialogVisible = true |
|||
if (res) { |
|||
this.$refs.detailDom.bookData = res |
|||
} else { |
|||
this.$refs.detailDom.bookData = { |
|||
srcUrl: itemData.bookAuthor, |
|||
bookName: itemData.bookName, |
|||
bookAuthor: itemData.bookAuthor ? itemData.bookAuthor : '暂无信息', |
|||
gist: '暂无简介', |
|||
Publish: '暂无信息', |
|||
places: [ |
|||
{ shelfName: '' } |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 翻页 |
|||
handlePage(page) { |
|||
if (page === 1) { |
|||
// 下一页 |
|||
} else { |
|||
// 上一页 |
|||
} |
|||
}, |
|||
// 控制左右 |
|||
handleDirect(n) { |
|||
if (n === -1) { // 左 |
|||
this.classnameR = null |
|||
this.classnameL = 'rack-direct-active' |
|||
} else { // 右 |
|||
this.classnameL = null |
|||
this.classnameR = 'rack-direct-active' |
|||
} |
|||
this.initBookshelfDetails(n) |
|||
}, |
|||
goBack() { |
|||
this.$router.go(-1) |
|||
}, |
|||
initBookshelfDetails(n) { |
|||
this.loading = true |
|||
const params = {} |
|||
if (n === -1) { // 左 |
|||
params.shelfNo = this.$route.query.leftShelfNo |
|||
} else { // 右 |
|||
params.shelfNo = this.$route.query.rightShelfNo |
|||
} |
|||
initBookshelfDetails(params).then((res) => { |
|||
console.log(this.listData) |
|||
// if (res.shelfs.length === 0) { |
|||
// res.shelfs.push('firstShelf', 'secondShelf', 'thirdShelf', 'fourthShelf', 'fivethShelf') |
|||
// for (let index = 0; index < res.shelfs.length; index++) { |
|||
// const shelfNo = res.shelfs[index] |
|||
// res.shelfBook[shelfNo] = [] |
|||
// } |
|||
// } |
|||
this.listData.splice(0, this.listData.length, ...res.shelfAll) |
|||
if (res.shelfs.length !== 0) { |
|||
for (let index = 0; index < res.shelfs.length; index++) { |
|||
const shelfNo = res.shelfs[index] |
|||
this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo]) |
|||
} |
|||
} |
|||
if (this.listData.length > 0) { |
|||
this.initSwiper() |
|||
this.setSwiperInit() |
|||
} |
|||
setTimeout(() => { |
|||
this.loading = false |
|||
}, 1000) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.swiper-container { |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
.swiper-slide { |
|||
width: 65px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,191 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header"> |
|||
<h2>RFID智慧书架</h2> |
|||
<span class="shelf-num">{{ shelfName }}</span> |
|||
</div> |
|||
<!-- 本架分类 --> |
|||
<div class="book-category"> |
|||
<p>{{ leftShelfMsg }}</p> |
|||
<p>{{ rightShelfMsg }}</p> |
|||
</div> |
|||
<!-- 智慧书架导航 --> |
|||
<ul class="book-nav"> |
|||
<li @click="toSearch"> |
|||
<img src="~@/assets/images/home/nav1.png" /> |
|||
<p>图书检索</p> |
|||
</li> |
|||
<li @click="toPath('/HotBook?bookType=hot')"> |
|||
<img src="~@/assets/images/home/nav2.png" /> |
|||
<p>热门图书</p> |
|||
</li> |
|||
<li @click="toPath('/AuthorRecommend')"> |
|||
<img src="~@/assets/images/home/nav3.png" /> |
|||
<p>作者推荐</p> |
|||
</li> |
|||
<li @click="toPath('/DigitalResource')"> |
|||
<img src="~@/assets/images/home/nav4.png" /> |
|||
<p>数字资源</p> |
|||
</li> |
|||
<li @click="toRoomNav"> |
|||
<img src="~@/assets/images/home/nav5.png" /> |
|||
<p>场馆导航</p> |
|||
</li> |
|||
</ul> |
|||
<!-- 本架图书 --> |
|||
<div class="book-rack"> |
|||
<div class="list-top"> |
|||
<div class="list-top-title"> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-benjiatushu" /> |
|||
</svg> |
|||
<p>本架图书</p> |
|||
</div> |
|||
<span class="more" @click="toPath('/CurrentRackBook')">更多<i class="iconfont icon-zuo rotate"></i></span> |
|||
</div> |
|||
<div class="rack-list"> |
|||
<BookListItem :list-data.sync="rackList" /> |
|||
<div class="other-list"> |
|||
<BookListItem :list-data.sync="otherList" :is-other-book="true" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 新书推荐 --> |
|||
<div class="book-rack new-recommend"> |
|||
<div class="list-top"> |
|||
<div class="list-top-title"> |
|||
<p>新书推荐</p> |
|||
</div> |
|||
<span class="more" @click="toPath('/NewBook?bookType=new')">更多<i class="iconfont icon-zuo rotate"></i></span> |
|||
</div> |
|||
<BookListItem :list-data.sync="newList" :is-new-book="true" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BookListItem from '@/views/module/homeListItem.vue' |
|||
import { FetchNewBookRecommend, FetchCoverByISBN, initSmartBookshelf } from '@/api/bookshelf' |
|||
export default { |
|||
name: 'Home', |
|||
components: { |
|||
BookListItem |
|||
}, |
|||
data() { |
|||
return { |
|||
shelfName: '1', |
|||
leftShelfMsg: '', |
|||
rightShelfMsg: '', |
|||
// leftShelfNo: '1201-03-001-A-01', |
|||
// rightShelfNo: '1201-03-001-B-01', |
|||
leftShelfNo: '', |
|||
rightShelfNo: '', |
|||
rackList: [], // 本架图书排行第一 |
|||
otherList: [], // 本架图书排行后两本 |
|||
newList: [] // 新书推荐 |
|||
} |
|||
}, |
|||
created() { |
|||
this.getNewBookList() |
|||
// 本架图书 + 书架借本信息 |
|||
this.initSmartBookshelf() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
toSearch() { |
|||
window.location.href = 'https://opac.whlib.org.cn/opac' |
|||
}, |
|||
toPath(path) { |
|||
if (path === '/CurrentRackBook') { |
|||
const query = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo } |
|||
this.$router.push({ path: path, query: query }) |
|||
} else { |
|||
this.$router.push(path) |
|||
} |
|||
}, |
|||
toRoomNav() { |
|||
const linkSrc = process.env.VUE_APP_BASE_API |
|||
window.location.href = linkSrc + '/anchoring/initVenueNavigation.do?libcode=' + this.libcode |
|||
}, |
|||
// 首页 - 新书推荐 |
|||
getNewBookList() { |
|||
const params = { |
|||
libcode: this.libcode, |
|||
pageNo: 1, |
|||
pageSize: 4 |
|||
} |
|||
FetchNewBookRecommend(params).then(res => { |
|||
let data = [] |
|||
data = res.newbookList |
|||
data.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
}) |
|||
}, |
|||
// 根据isbn获取图书封面 |
|||
getCoverByISBN(isbn, item) { |
|||
const params = { |
|||
isbn: isbn |
|||
} |
|||
console.log(params) |
|||
FetchCoverByISBN(params).then((res) => { |
|||
// item.cover = window.URL.createObjectURL(res) |
|||
if (res) { |
|||
item.cover = res |
|||
} else { |
|||
item.cover = '' |
|||
} |
|||
this.newList.push(item) |
|||
}) |
|||
}, |
|||
// 初始化首页书架信息 |
|||
initSmartBookshelf() { |
|||
this.leftShelfNo = this.$route.query.leftShelfNo |
|||
this.rightShelfNo = this.$route.query.rightShelfNo |
|||
const params = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo } |
|||
// const _this = this |
|||
initSmartBookshelf(params).then((res) => { |
|||
this.shelfName = res.shelfName |
|||
this.leftShelfMsg = res.leftShelf.sortMsg |
|||
this.rightShelfMsg = res.rightShelf.sortMsg |
|||
Promise.all(this.initBookData(res.bookList.splice(0, 1))).then((res) => { |
|||
this.rackList = res |
|||
console.log('rackList', this.rackList) |
|||
}) |
|||
Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => { |
|||
this.otherList = res |
|||
console.log('otherList', this.otherList) |
|||
}) |
|||
}) |
|||
}, |
|||
// 处理数据格式 |
|||
initBookData(bookList) { |
|||
return bookList.map(async(item, index) => { |
|||
const newItem = { |
|||
cover: item.srcUrl, |
|||
ranking: item.bookUID, |
|||
nbName: item.bookName, |
|||
isOtherBook: index !== 0, |
|||
nbAuthor: item.bookAuthor ? item.bookAuthor : '', |
|||
isNewBook: false, |
|||
num: item.heat ? item.heat : '0', |
|||
isbn: item.isbn |
|||
} |
|||
// const params = { |
|||
// isbn: item.isbn |
|||
// } |
|||
// const res = await FetchCoverByISBN(params) |
|||
// newItem.cover = window.URL.createObjectURL(res) |
|||
return newItem |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
import { FetchHotBookRecommend, FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/bookshelf' |
|||
export const bookListCrud = { |
|||
// 组件共用属性
|
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
bookData: [], |
|||
page: 1, |
|||
pageSize: 13, |
|||
pageCount: 1, |
|||
bookLoading: false |
|||
} |
|||
}, |
|||
computed: { |
|||
bookList() { |
|||
const arr = this.bookData.slice(1) |
|||
return arr |
|||
} |
|||
}, |
|||
// 组件共用方法
|
|||
methods: { |
|||
// 获取热门/新书图书list
|
|||
getBookData() { |
|||
this.bookLoading = true |
|||
const bookType = this.$route.query.bookType |
|||
const params = { |
|||
libcode: this.libcode, |
|||
pageNo: this.page, |
|||
pageSize: this.pageSize |
|||
} |
|||
if (bookType === 'hot') { |
|||
FetchHotBookRecommend(params).then(res => { |
|||
this.pageCount = res.page.totalPages |
|||
res.hotbookList.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
}) |
|||
} else { |
|||
FetchNewBookRecommend(params).then(res => { |
|||
res.newbookList.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
}) |
|||
} |
|||
}, |
|||
// 根据isbn查找封面
|
|||
getCoverByISBN(isbn, item) { |
|||
const params = { |
|||
isbn: isbn |
|||
} |
|||
FetchCoverByISBN(params).then((res) => { |
|||
// item.cover = window.URL.createObjectURL(res)
|
|||
if (res) { |
|||
item.cover = res |
|||
} else { |
|||
item.cover = '' |
|||
} |
|||
this.bookData.push(item) |
|||
this.bookLoading = false |
|||
}) |
|||
}, |
|||
// 滚动加载
|
|||
lazyLoading(e) { |
|||
const scrollTop = e.target.scrollTop |
|||
const windowHeight = e.target.clientHeight |
|||
const scrollHeight = e.target.scrollHeight |
|||
// 滚动条到底部
|
|||
if (scrollTop + windowHeight === scrollHeight) { |
|||
this.bookLoading = true |
|||
this.page++ |
|||
if (this.page > this.pageCount) { |
|||
this.bookLoading = false |
|||
this.$message.success('暂无更多数据~') |
|||
return |
|||
} |
|||
this.getBookData() |
|||
} |
|||
}, |
|||
// 点击查看详情
|
|||
handleDetails(index) { |
|||
const params = { |
|||
isbn: this.bookData[index].isbn.replace(/\-/g, '') |
|||
} |
|||
getBookDetailsByISBN(params).then(res => { |
|||
if (res) { |
|||
this.$refs.detailDom.bookData = res |
|||
this.$refs.detailDom.dialogVisible = true |
|||
} else { |
|||
this.$message.error('暂无图书内容~') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
}) |
|||
} |
|||
}, |
|||
// 组件挂载时的共用方法
|
|||
mounted() { |
|||
} |
|||
} |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<div> |
|||
<div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]"> |
|||
<div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)"> |
|||
<div class="book-img"> |
|||
<img :src="item.cover ? item.cover : ''" :onerror="defaultImg" /> |
|||
</div> |
|||
<div class="book-info"> |
|||
<h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4> |
|||
<p class="book-author">{{ item.nbAuthor }}</p> |
|||
<div v-if="!isNewBook" class="book-num"> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-remen" /> |
|||
</svg> |
|||
<p>{{ item.num }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<BookDetails ref="detailDom" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getBookDetailsByISBN } from '@/api/bookshelf' |
|||
import BookDetails from './bookDetails.vue' |
|||
|
|||
export default { |
|||
name: 'BookListItem', |
|||
components: { BookDetails }, |
|||
props: { |
|||
listData: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
isOtherBook: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
}, |
|||
isNewBook: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"' |
|||
} |
|||
}, |
|||
watch: { |
|||
listData: function(newValue, oldValue) { |
|||
}, |
|||
isOtherBook: function(newValue, oldValue) { |
|||
}, |
|||
isNewBook: function(newValue, oldValue) { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
handleDetails(index) { |
|||
const params = { |
|||
isbn: this.listData[index].isbn.replace(/\-/g, '') |
|||
} |
|||
getBookDetailsByISBN(params).then(res => { |
|||
this.$refs.detailDom.dialogVisible = true |
|||
if (res) { |
|||
this.$refs.detailDom.bookData = res |
|||
} else { |
|||
this.$refs.detailDom.bookData = { |
|||
srcUrl: this.listData[index].cover, |
|||
bookName: this.listData[index].nbName, |
|||
bookAuthor: this.listData[index].nbAuthor ? this.listData[index].nbAuthor : '暂无信息', |
|||
gist: '暂无简介', |
|||
Publish: '暂无信息', |
|||
places: [ |
|||
{ shelfName: '' } |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue