xuhuajiao
/
intelligent-bookshelf
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ip更换/详情修改

master
xuhuajiao 1 year ago
parent
8bde497947
commit
1c896572df
4 changed files with 469 additions and 440 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      .env.production
  2. 343
      src/views/bookRackList.vue
  3. 367
      src/views/index.vue
  4. 181
      src/views/module/homeListItem.vue

18
.env.production
View File

@ -1,9 +1,9 @@
ENV = 'production'
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
# VUE_APP_BASE_API = 'https://openapitest.aiyxlib.com'
# VUE_APP_BASE_API = 'http://192.168.99.107:7070'
VUE_APP_BASE_API = 'http://172.16.0.23:8080'
# 如果接口是 http 形式， wss 需要改为 ws
VUE_APP_WS_API = 'ws://192.168.99.107:7071'
ENV = 'production'
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
# VUE_APP_BASE_API = 'http://192.168.99.107:7070'
VUE_APP_BASE_API = 'http://172.22.0.23:8080'
# VUE_APP_BASE_API = 'http://127.0.0.1:8080'
# 如果接口是 http 形式， wss 需要改为 ws
VUE_APP_WS_API = 'ws://192.168.99.107:7071'

343
src/views/bookRackList.vue
View File

@ -1,165 +1,178 @@
<template>
<div id="bookshelf">
<div class="bookshelf-header" style="height:120px">
<!-- <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span>
</router-link> -->
<span class="icon iconfont icon-l" @click="goBack()">&#xe631;</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)">&#xe631;</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)">&#xe62f;</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.bookData = res
this.$refs.detailDom.dialogVisible = true
})
},
// 翻页
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>
<template>
<div id="bookshelf">
<div class="bookshelf-header" style="height:120px">
<!-- <router-link to="/">
<span class="icon iconfont icon-l">&#xe631;</span>
</router-link> -->
<span class="icon iconfont icon-l" @click="goBack()">&#xe631;</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)">&#xe631;</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)">&#xe62f;</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>

367
src/views/index.vue
View File

@ -1,182 +1,185 @@
<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 = 'http://219.140.69.151/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
}
FetchCoverByISBN(params).then((res) => {
item.cover = window.URL.createObjectURL(res)
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
})
Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => {
this.otherList = res
})
})
},
// 处理数据格式
initBookData(bookList) {
return bookList.map(async(item, index) => {
const newItem = {
ranking: item.bookUID,
nbName: item.bookName,
isOtherBook: index !== 0,
nbAuthor: 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>
<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 = 'http://219.140.69.151/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
}
FetchCoverByISBN(params).then((res) => {
item.cover = window.URL.createObjectURL(res)
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>

181
src/views/module/homeListItem.vue
View File

@ -1,84 +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" :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.bookData = res
this.$refs.detailDom.dialogVisible = true
})
}
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>
<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" :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