diff --git a/selfServiceMachine/src/api/bookshelf.js b/selfServiceMachine/src/api/book.js
similarity index 50%
rename from selfServiceMachine/src/api/bookshelf.js
rename to selfServiceMachine/src/api/book.js
index c60a1c7..4c760e3 100644
--- a/selfServiceMachine/src/api/bookshelf.js
+++ b/selfServiceMachine/src/api/book.js
@@ -4,16 +4,18 @@ import request from '@/utils/request'
 // 书单推荐二级页面
 export function FetchBookRecommendList(params) {
   return request({
-    url: '/frontDemoApi/bookRecommendList',
+    url: 'frontDemoApi/bookRecommendList',
     method: 'get',
     params: params
   })
 }
-export function FetchbookOnlineList(params) {
+
+//书单推荐-书籍详情
+export function FetchBookRecommendDetails(parameter) {
   return request({
-    url: '/frontDemoApi/bookOnlineList',
-    method: 'get',
-    params: params
+    url: 'frontDemoApi/bookRecommendDetails',
+    method: 'post',
+    data: parameter
   })
 }
 
@@ -22,5 +24,5 @@ export function FetchbookOnlineList(params) {
 
 export default {
   FetchBookRecommendList,
-  FetchbookOnlineList
+  FetchBookRecommendDetails
 }
diff --git a/selfServiceMachine/src/assets/styles/index.scss b/selfServiceMachine/src/assets/styles/index.scss
index 32002f8..67de27f 100644
--- a/selfServiceMachine/src/assets/styles/index.scss
+++ b/selfServiceMachine/src/assets/styles/index.scss
@@ -154,8 +154,12 @@
       .ranking-img{
         width: 140px;
         height: 200px;
-        background-color: red;
+        background-color: #f1f1f1;
         overflow: hidden;
+        img{
+          display: block;
+          width: 100%;
+        }
       }
       .ranking-book-detail{
         margin-top: 10px;
@@ -339,6 +343,7 @@
       background-color: #fff;
       border-radius: 8px;
       height: calc(100vh - 698px);
+      // height: calc(100vh - 20px);
       overflow: hidden;
       overflow-y: scroll;
       .result{
@@ -532,3 +537,8 @@
   height: 40px;
   line-height: 40px;
 }
+
+.load-data{
+  padding: 15px 0;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/selfServiceMachine/src/main.js b/selfServiceMachine/src/main.js
index 0ea23e8..9e4556e 100644
--- a/selfServiceMachine/src/main.js
+++ b/selfServiceMachine/src/main.js
@@ -20,6 +20,7 @@ Vue.prototype.$axios = axios
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
+Vue.prototype.coverUrl = 'http://192.168.99.67:8080'
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/selfServiceMachine/src/views/bookRecommend.vue b/selfServiceMachine/src/views/bookRecommend.vue
index a24f497..70b747e 100644
--- a/selfServiceMachine/src/views/bookRecommend.vue
+++ b/selfServiceMachine/src/views/bookRecommend.vue
@@ -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){
+          
+        }else{
+          this.detailData = item
+        }
       }).catch(() => {
         this.$message.error('接口错误')
       })
     },
-
-
-    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);
-				// 	});
-			},
     //监听滚动
     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 {
diff --git a/selfServiceMachine/src/views/onlineBookSelection.vue b/selfServiceMachine/src/views/onlineBookSelection.vue
index ef129c2..6a6f09e 100644
--- a/selfServiceMachine/src/views/onlineBookSelection.vue
+++ b/selfServiceMachine/src/views/onlineBookSelection.vue
@@ -8,11 +8,9 @@
 </template>
 
 <script>
-// import { bookListCrud } from './mixins/booklist.js'
 export default {
   name: 'OnlineBookSelection',
-  components: {  },
-  // mixins: [bookListCrud],
+  components: {},
   data() {
     return {
     }