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