|
@ -6,13 +6,13 @@ |
|
|
<div v-for="(item,index) in rankingList" :key="index" class="swiper-slide"> |
|
|
<div v-for="(item,index) in rankingList" :key="index" class="swiper-slide"> |
|
|
<div class="book-list-item"> |
|
|
<div class="book-list-item"> |
|
|
<div class="book-img"> |
|
|
<div class="book-img"> |
|
|
<img :src="item.img" :onerror="defaultImg"> |
|
|
|
|
|
|
|
|
<img :src="item.coverUrl" :onerror="defaultImg"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="book-info"> |
|
|
<div class="book-info"> |
|
|
<h4 class="title-item">{{ item.title }}</h4> |
|
|
|
|
|
<p>作者:{{ item.author }}</p> |
|
|
|
|
|
<p>出版社:教育出版社</p> |
|
|
|
|
|
<p>出版日期:2022-03-03 <span class="icon iconfont "></span></p> |
|
|
|
|
|
|
|
|
<h4 class="title-item">{{ item.nbName }}</h4> |
|
|
|
|
|
<p>作者:{{ item.nbAuthor }}</p> |
|
|
|
|
|
<p>出版社:{{ item.nbPublisher }}</p> |
|
|
|
|
|
<p>出版年份:{{ item.nbPublisherdate }}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -34,20 +34,21 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import data from './data' |
|
|
|
|
|
import { Swiper } from 'vue-awesome-swiper' |
|
|
import { Swiper } from 'vue-awesome-swiper' |
|
|
import 'swiper/swiper-bundle.css' |
|
|
import 'swiper/swiper-bundle.css' |
|
|
|
|
|
|
|
|
|
|
|
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/inquiryMachine' |
|
|
export default { |
|
|
export default { |
|
|
name: 'NewBookRecommend', |
|
|
name: 'NewBookRecommend', |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|
|
|
|
|
coverUrl: null, |
|
|
rankingList: [] |
|
|
rankingList: [] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
this.rankingList = data.ranking |
|
|
|
|
|
|
|
|
// this.rankingList = data.ranking |
|
|
|
|
|
this.getBookList() |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.initSwiper() |
|
|
this.initSwiper() |
|
@ -70,7 +71,36 @@ export default { |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
getBookList() { |
|
|
|
|
|
FetchNewBookRecommend().then(res => { |
|
|
|
|
|
console.log(res, 'res') |
|
|
|
|
|
this.rankingList = res |
|
|
|
|
|
this.rankingList.forEach(item => { |
|
|
|
|
|
this.getCoverByISBN(item.isbn.replace(/\-/g, '')) |
|
|
|
|
|
if (this.coverUrl) { |
|
|
|
|
|
item.coverUrl = this.coverUrl |
|
|
|
|
|
} |
|
|
|
|
|
this.coverUrl = null |
|
|
|
|
|
}) |
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
console.log(err) |
|
|
|
|
|
this.$message.error('接口错误') |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
getCoverByISBN(isbn) { |
|
|
|
|
|
const params = { |
|
|
|
|
|
isbn: isbn |
|
|
|
|
|
} |
|
|
|
|
|
FetchCoverByISBN(params).then((res) => { |
|
|
|
|
|
try { |
|
|
|
|
|
this.coverUrl = res |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
this.coverUrl = window.URL.createObjectURL(res) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|