You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.5 KiB
97 lines
2.5 KiB
<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>
|