|
|
|
@ -13,7 +13,7 @@ |
|
|
|
<div class="filter-item-title">出版社</div> |
|
|
|
<ul class="publish-list"> |
|
|
|
<li v-for="(item,index) in publish" :key="index" @click="selectPublic(index)" :class="{ 'active': selectedIndex === index }"> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
<p>{{ item.publish }}</p> |
|
|
|
<span>{{ item.num }}</span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
@ -35,43 +35,33 @@ |
|
|
|
height="200px" |
|
|
|
@change="carouselChange" |
|
|
|
> |
|
|
|
<el-carousel-item> |
|
|
|
<div class="ranking-img"></div> |
|
|
|
</el-carousel-item> |
|
|
|
<el-carousel-item> |
|
|
|
<div class="ranking-img"></div> |
|
|
|
</el-carousel-item> |
|
|
|
<el-carousel-item> |
|
|
|
<div class="ranking-img"></div> |
|
|
|
<el-carousel-item v-for="(item,index) in topThree" :key="index"> |
|
|
|
<div class="ranking-img"> |
|
|
|
<img :src="coverUrl+'/demoOnlineSelect/getBookCover.do?id='+item.id" alt="" /> |
|
|
|
</div> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
<div class="ranking-book-detail"> |
|
|
|
<div v-if="i === carIndex" class="ranking-book-detail" v-for="(item,i) in topThree" :key="i"> |
|
|
|
<div class="book-info"> |
|
|
|
<h5>AI超入门</h5> |
|
|
|
<h5 class="title-item-only">{{ item.bookName }}</h5> |
|
|
|
<div class="book-author"> |
|
|
|
<span>秋叶 刘进新</span> |
|
|
|
<span>机械工业出版社</span> |
|
|
|
<span>{{ item.author }}</span> |
|
|
|
<span>{{ item.publish }}</span> |
|
|
|
</div> |
|
|
|
<p class="book-intro title-item"> |
|
|
|
图书简介图书简介图书简介图书简介图书简介图书简介图书 |
|
|
|
{{ item.introduce }} |
|
|
|
</p> |
|
|
|
<div :class="carClass"></div> |
|
|
|
</div> |
|
|
|
<div class="book-click-num"> |
|
|
|
<span class="click-num">100次</span> |
|
|
|
<span class="detail-btn" @click="detailShow=true">查看详情</span> |
|
|
|
<span class="click-num">{{item.clickNum}}次</span> |
|
|
|
<span class="detail-btn" @click="getBookDetail(item)">查看详情</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="ranking-list-bottom"> |
|
|
|
<li> |
|
|
|
<li v-for="(item,index) in rankingOther" :key="index" @click="getBookDetail(item)"> |
|
|
|
<span>TOP4</span> |
|
|
|
<p class="title-item-only">秒懂AI写作</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>TOP5</span> |
|
|
|
<p class="title-item-only"> |
|
|
|
ChatGPT:AI革命AI革命AI革命 |
|
|
|
</p> |
|
|
|
<p class="title-item-only">{{ item.bookName }}</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
@ -97,9 +87,9 @@ |
|
|
|
placeholder="请输入关键词进行检索" |
|
|
|
style="width: 300px" |
|
|
|
></el-input> |
|
|
|
<el-button type="primary">搜索</el-button> |
|
|
|
<el-button type="primary" @click="toSearch">搜索</el-button> |
|
|
|
</div> |
|
|
|
<el-button>重置</el-button> |
|
|
|
<el-button @click="resetSearch">重置</el-button> |
|
|
|
</div> |
|
|
|
<div class="hot-keyword"> |
|
|
|
<p>热门检索</p> |
|
|
|
@ -109,31 +99,31 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="recommend-list" @scroll="listenScroll"> |
|
|
|
<div class="result">检索结果：<span>121</span>册</div> |
|
|
|
<div class="recommend-item" v-for="item in count"> |
|
|
|
<div class="result">检索结果：<span>{{ totalNum }}</span>册</div> |
|
|
|
<div class="recommend-item" v-for="(item,index) in bookList" :key="index"> |
|
|
|
<div class="book-detail"> |
|
|
|
<div class="book-img"> |
|
|
|
<img src="" alt="" /> |
|
|
|
<img :src="coverUrl+'/demoOnlineSelect/getBookCover.do?id='+item.id" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="book-txt"> |
|
|
|
<h4> |
|
|
|
{{item}}秒懂AI提问：秒懂AI提问：让人工智能成为你的效率神器 |
|
|
|
{{item.bookName}} |
|
|
|
</h4> |
|
|
|
<div class="book-autor"> |
|
|
|
<span>秋叶 刘进新 姜梅 定秋枫</span> |
|
|
|
<span>2023年07月</span> |
|
|
|
<span>{{item.author}}</span> |
|
|
|
<span>{{item.createdDate}}</span> |
|
|
|
</div> |
|
|
|
<div class="book-publish"> |
|
|
|
<span>人民邮电出版社</span> |
|
|
|
<span>ISBN：950146556432</span> |
|
|
|
<span>{{item.publish}}</span> |
|
|
|
<span>ISBN：{{item.isbn}}</span> |
|
|
|
</div> |
|
|
|
<div class="book-intro title-item"> |
|
|
|
精心提炼20种GPT提问方法及指令，从入到进阶再到精通，100个案例带你玩转100个案例带你玩转G |
|
|
|
{{item.introduce}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="book-eval"> |
|
|
|
<span class="eval-num">100次</span> |
|
|
|
<span class="eval-num">{{item.clickNum}}次</span> |
|
|
|
<div class="eval-star"> |
|
|
|
<span class="active"></span> |
|
|
|
<span class="active"></span> |
|
|
|
@ -141,11 +131,11 @@ |
|
|
|
<span></span> |
|
|
|
<span></span> |
|
|
|
</div> |
|
|
|
<div class="to-book-more" @click="detailShow=true">查看详情</div> |
|
|
|
<div class="to-book-more" @click="getBookDetail(item)">查看详情</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="!hasNextPage">人家是有底线的</div> |
|
|
|
<div v-else>加载中...</div> |
|
|
|
<div class="load-data" v-if="!hasNextPage">暂无更多数据</div> |
|
|
|
<div class="load-data" v-else>加载中...</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -155,27 +145,27 @@ |
|
|
|
<div class="dialog-book"> |
|
|
|
<div class="book-detail"> |
|
|
|
<div class="book-img"> |
|
|
|
<img src="" alt="" /> |
|
|
|
<img :src="coverUrl+'/demoOnlineSelect/getBookCover.do?id='+detailData.id" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="book-txt"> |
|
|
|
<h4> |
|
|
|
秒懂AI提问：秒懂AI提问：让人工智能成为你的效率神器 |
|
|
|
{{ detailData.bookName }} |
|
|
|
</h4> |
|
|
|
<div class="book-autor"> |
|
|
|
<span>秋叶 刘进新 姜梅 定秋枫</span> |
|
|
|
<span>2023年07月</span> |
|
|
|
<span>{{ detailData.author }}</span> |
|
|
|
<span>{{ detailData.createdDate }}</span> |
|
|
|
</div> |
|
|
|
<div class="book-publish"> |
|
|
|
<span>人民邮电出版社</span> |
|
|
|
<span>ISBN：950146556432</span> |
|
|
|
<span>{{ detailData.publish }}</span> |
|
|
|
<span>ISBN：{{ detailData.isbn }}</span> |
|
|
|
</div> |
|
|
|
<div class="book-intro title-item"> |
|
|
|
精心提炼20种GPT提问方法及指令，从入到进阶再到精通，100个案例带你玩转100个案例带你玩转G |
|
|
|
{{ detailData.introduce }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="book-eval"> |
|
|
|
<span class="eval-num">100次</span> |
|
|
|
<span class="eval-num"> {{ detailData.clickNum }}次</span> |
|
|
|
<div class="eval-star"> |
|
|
|
<span class="active"></span> |
|
|
|
<span class="active"></span> |
|
|
|
@ -208,65 +198,59 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchBookRecommendList } from '@/api/bookshelf' |
|
|
|
import { FetchBookRecommendList, FetchBookRecommendDetails } from '@/api/book' |
|
|
|
export default { |
|
|
|
name: 'BookRecommend', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selectValue: '1', |
|
|
|
selectValue: 'title', |
|
|
|
keyword: '', |
|
|
|
detailShow: false, |
|
|
|
detailData: {}, |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
value: '1', |
|
|
|
value: 'title', |
|
|
|
label: '题名', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '2', |
|
|
|
value: 'isbn', |
|
|
|
label: 'ISBN', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '3', |
|
|
|
value: 'author', |
|
|
|
label: '著者', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '4', |
|
|
|
value: 'publish', |
|
|
|
label: '出版社', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '5', |
|
|
|
value: 'createdDate', |
|
|
|
label: '出版时间', |
|
|
|
}, |
|
|
|
], |
|
|
|
publish:[ |
|
|
|
{ |
|
|
|
num: '100册', |
|
|
|
name: '人民文学出版社', |
|
|
|
}, |
|
|
|
{ |
|
|
|
num: '96册', |
|
|
|
name: '商务印书馆', |
|
|
|
}, |
|
|
|
{ |
|
|
|
num: '80册', |
|
|
|
name: '人民出版社', |
|
|
|
}, |
|
|
|
{ |
|
|
|
num: '43册', |
|
|
|
name: '上海译文出版社', |
|
|
|
} |
|
|
|
], |
|
|
|
publishDate:[2023,2022,2021,2020,2019,2018], |
|
|
|
publish:[], |
|
|
|
publishDate:[], |
|
|
|
topThree: [], |
|
|
|
rankingOther: [], |
|
|
|
keywordData:['人工智能','遥遥领先','ChatAPT','5G'], |
|
|
|
selectedIndex: null, |
|
|
|
selectedDateIndex: null, |
|
|
|
keyWordIndex: null, |
|
|
|
carIndex: 0, |
|
|
|
count: 10, |
|
|
|
scrolly: '', // 上拉加载 |
|
|
|
bookList:[], |
|
|
|
pageIndex: 1, |
|
|
|
pageSize: 10, |
|
|
|
hasNextPage: false, |
|
|
|
totalPages: 0 |
|
|
|
totalPages: 0, |
|
|
|
totalNum: 0, |
|
|
|
query: { |
|
|
|
title: null, |
|
|
|
isbn: null, |
|
|
|
author: null, |
|
|
|
publish: null, |
|
|
|
createdDate: null, |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -287,95 +271,144 @@ export default { |
|
|
|
this.getBookRecommendList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
resetData(){ |
|
|
|
this.query = { |
|
|
|
title: null, |
|
|
|
isbn: null, |
|
|
|
author: null, |
|
|
|
publish: null, |
|
|
|
createdDate: null |
|
|
|
} |
|
|
|
this.pageIndex = 0 |
|
|
|
this.hasNextPage = true |
|
|
|
this.keyword = '' |
|
|
|
this.bookList = [] |
|
|
|
}, |
|
|
|
resetSearch(){ |
|
|
|
this.resetData() |
|
|
|
this.addMoreData() |
|
|
|
}, |
|
|
|
toSearch(){ |
|
|
|
this.query = { |
|
|
|
title: null, |
|
|
|
isbn: null, |
|
|
|
author: null, |
|
|
|
publish: null, |
|
|
|
createdDate: null |
|
|
|
} |
|
|
|
this.pageIndex = 0 |
|
|
|
this.hasNextPage = true |
|
|
|
this.bookList = [] |
|
|
|
switch(this.selectValue){ |
|
|
|
case 'title' : |
|
|
|
this.query.title = this.keyword |
|
|
|
break; |
|
|
|
case 'isbn' : |
|
|
|
this.query.isbn = this.keyword |
|
|
|
break; |
|
|
|
case 'author' : |
|
|
|
this.query.author = this.keyword |
|
|
|
break; |
|
|
|
case 'publish' : |
|
|
|
this.query.publish = this.keyword |
|
|
|
break; |
|
|
|
case 'createdDate' : |
|
|
|
this.query.createdDate = this.keyword |
|
|
|
break; |
|
|
|
} |
|
|
|
this.addMoreData() |
|
|
|
}, |
|
|
|
getBookRecommendList() { |
|
|
|
const params = { |
|
|
|
'pageNo': 0, |
|
|
|
'pageSize': 10 |
|
|
|
'recommendId': null, |
|
|
|
'pageNo': this.pageIndex, |
|
|
|
'pageSize': this.pageSize, |
|
|
|
'title':this.query.title, |
|
|
|
'isbn':this.query.isbn, |
|
|
|
'author':this.query.author, |
|
|
|
'publish':this.query.publish, |
|
|
|
'createdDate':this.query.createdDate |
|
|
|
} |
|
|
|
console.log(params) |
|
|
|
FetchBookRecommendList(params).then(res => { |
|
|
|
console.log(res) |
|
|
|
this.publish = res.publishGroup |
|
|
|
this.publishDate = res.createdDateGroup |
|
|
|
this.topThree = res.clickTop10.slice(0, 3) |
|
|
|
this.rankingOther = res.clickTop10.slice(3, 5) |
|
|
|
|
|
|
|
let resData = res.bookList; |
|
|
|
if(resData.length === 0){ |
|
|
|
this.hasNextPage = false |
|
|
|
}else{ |
|
|
|
this.hasNextPage = true |
|
|
|
} |
|
|
|
this.totalNum = res.page.totalRows |
|
|
|
this.totalPages = res.page.totalPages; |
|
|
|
if (this.pageIndex < 1) { |
|
|
|
this.bookList = resData; |
|
|
|
} else { |
|
|
|
this.bookList = this.bookList.concat(resData) |
|
|
|
} |
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
this.$message.error('接口错误') |
|
|
|
}) |
|
|
|
}, |
|
|
|
getBookDetail(item){ |
|
|
|
FetchBookRecommendDetails({bookId: item.id}).then(res => { |
|
|
|
console.log(res) |
|
|
|
this.detailShow = true |
|
|
|
if(Object.keys(res).length !== 0){ |
|
|
|
|
|
|
|
|
|
|
|
GetBookBasePages(ClassId,Order,pageIndex) { |
|
|
|
// const that = proxy; |
|
|
|
// that.ClassId = ClassId; |
|
|
|
// that.Order = Order; |
|
|
|
// that.pageIndex = pageIndex; |
|
|
|
// that.$http.get(proxy.$API.GETBOOKBASEPAGES, { |
|
|
|
// params: { |
|
|
|
// ClassId: ClassId, // 类别编号 |
|
|
|
// MarkRec: '', |
|
|
|
// Where: '', |
|
|
|
// Order: Order, |
|
|
|
// pageIndex: pageIndex, |
|
|
|
// pageSize: 20 |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// .then(res => { |
|
|
|
// if (res.type == 200) { |
|
|
|
// let resData = res.data; |
|
|
|
// that.hasNextPage = res.hasNextPage; |
|
|
|
// that.totalPages = res.pages; |
|
|
|
// if (that.pageIndex <= 1) { |
|
|
|
// that.bookList = resData; |
|
|
|
// // if (resData.length < 20) { |
|
|
|
// // that.hasNextPage = true |
|
|
|
// // } |
|
|
|
// } else { |
|
|
|
// that.bookList = that.bookList.concat(resData) |
|
|
|
// } |
|
|
|
// } else { |
|
|
|
// Toast(res.content); |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// .catch(res => { |
|
|
|
// console.log(res); |
|
|
|
// }); |
|
|
|
}, |
|
|
|
}else{ |
|
|
|
this.detailData = item |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.$message.error('接口错误') |
|
|
|
}) |
|
|
|
}, |
|
|
|
//监听滚动 |
|
|
|
listenScroll (e) { |
|
|
|
let ele = e.srcElement ? e.srcElement : e.target; |
|
|
|
if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部 |
|
|
|
this.addMoreData(); |
|
|
|
} |
|
|
|
//判断滚动-是否显示breadcrumb2 |
|
|
|
if (this.scrolly != ele.scrollTop) { |
|
|
|
this.isScroll = false; |
|
|
|
} |
|
|
|
this.scrolly = ele.scrollTop; |
|
|
|
if (ele.scrollTop == 0) { |
|
|
|
this.isScroll = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
//加载更多 |
|
|
|
addMoreData () { |
|
|
|
addMoreData() { |
|
|
|
if (this.hasNextPage) { |
|
|
|
this.pageIndex++; |
|
|
|
this.pageIndex ++; |
|
|
|
if(this.pageIndex > this.totalPages){ |
|
|
|
return false; |
|
|
|
this.hasNextPage = false |
|
|
|
} |
|
|
|
this.GetBookBasePages() |
|
|
|
this.getBookRecommendList() |
|
|
|
} |
|
|
|
}, |
|
|
|
selectPublic(index){ |
|
|
|
this.resetData() |
|
|
|
if (this.selectedIndex === index) { |
|
|
|
this.selectedIndex = null; |
|
|
|
this.selectedIndex = null |
|
|
|
this.query.publish = null |
|
|
|
} else { |
|
|
|
this.selectedIndex = index; |
|
|
|
this.query.publish = this.publish[index].publish |
|
|
|
} |
|
|
|
this.addMoreData() |
|
|
|
}, |
|
|
|
selectDate(index){ |
|
|
|
this.resetData() |
|
|
|
if (this.selectedDateIndex === index) { |
|
|
|
this.selectedDateIndex = null; |
|
|
|
this.query.createdDate = null |
|
|
|
} else { |
|
|
|
this.selectedDateIndex = index; |
|
|
|
this.query.createdDate = this.publishDate[index] |
|
|
|
} |
|
|
|
this.addMoreData() |
|
|
|
}, |
|
|
|
selectKeyWord(index){ |
|
|
|
this.addMoreData() |
|
|
|
if (this.keyWordIndex === index) { |
|
|
|
this.keyWordIndex = null; |
|
|
|
} else { |
|
|
|
|
