新书推荐页面

src/main.js

@@ -20,6 +20,7 @@ Vue.prototype.$axios = axios
 
 // 馆代码 1201为东西湖馆代码 / 本地测试用FTZN
 Vue.prototype.libcode = 'FTZN'
+// Vue.prototype.libcode = '1201'
 
 // 引入echart
 import echarts from 'echarts'

src/views/digitalResource.vue

@@ -1,5 +1,7 @@
 <template>
   <div id="bookshelf">
+    <HeaderTop />
+    <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header" style="height:120px">
       <router-link to="/">
         <span class="icon iconfont icon-l">&#xe631;</span>
@@ -7,6 +9,7 @@
       <h2>数字资源</h2>
     </div>
     <div class="main">
+      <!-- <div v-for="item in srcList" :key="item" class="book-rack"> -->
       <div v-for="(item,index) in srcList" :key="index" class="main-item" @click="jump(item.nrsUrl)">
         <img :src="'data:image/png;base64,' + item.nrsImages">
         <div class="title">
@@ -19,10 +22,13 @@
 </template>
 
 <script>
+import HeaderTop from '@/views/module/headerTop.vue'
 import { initNumberResoures } from '@/api/bookshelf'
+// import data1 from './data1.json'
 export default {
   name: 'DigitalResource',
   components: {
+    HeaderTop
   },
   data() {
     return {
@@ -30,12 +36,13 @@ export default {
     }
   },
   created() {
-    this.getResoures()
+    // this.srcList = data1.srcList
+    this.getInfo()
   },
   methods: {
-    getResoures() {
+    getInfo() {
       initNumberResoures({ libcode: this.libcode }).then(data => {
-        this.srcList = data
+        this.rankingList = data
       })
     },
     jump(url) {

src/views/module/bookList.vue

@@ -2,8 +2,7 @@
   <div class="hotbook-box">
     <div class="most-book">
       <div class="most-book-img">
-        <img :src="bookdata[0].img">
-
+        <img :src="bookdata[0].cover" :onerror="defaultImg">
       </div>
       <div class="most-book-txt book-rack">
         <div class="txt">
@@ -15,17 +14,20 @@
       </div>
     </div>
     <ul class="hotbook-list">
-      <li v-for="(item,index) in bookdata" :key="index">
-        <img :src="item.img">
+      <li v-for="(item,index) in bookList" :key="index" @click="handleDetails(index)">
+        <img :src="item.cover" :onerror="defaultImg">
         <p>{{ item.title }}</p>
       </li>
     </ul>
+    <BookDetails ref="detailDom" />
   </div>
 </template>
 
 <script>
+import BookDetails from './bookDetails.vue'
 export default {
   name: 'BookList',
+  components: { BookDetails },
   props: {
     bookdata: {
       type: Array,
@@ -36,7 +38,19 @@ export default {
   },
   data() {
     return {
-
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
+    }
+  },
+  computed: {
+    bookList() {
+      const arr = this.bookdata.slice(1)
+      return arr
+    }
+  },
+  methods: {
+    handleDetails(index) {
+      this.$refs.detailDom.bookData = this.bookdata[index]
+      this.$refs.detailDom.dialogVisible = true
     }
   }
 
@@ -61,9 +75,12 @@ export default {
     position: absolute;
     left: 90px;
     bottom: 20px;
-    img{
     width: 318px;
     height: 382px;
+    overflow: hidden;
+    img{
+      width: 100%;
+      vertical-align: middle;
     }
   }
   .txt{

src/views/newBook.vue

@@ -1,5 +1,7 @@
 <template>
   <div id="bookshelf">
+    <HeaderTop />
+    <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header" style="height:120px">
       <router-link to="/">
         <span class="icon iconfont icon-l">&#xe631;</span>
@@ -11,18 +13,44 @@
 </template>
 
 <script>
+import HeaderTop from '@/views/module/headerTop.vue'
 import BookList from '@/views/module/bookList.vue'
-import data1 from './data1.json'
+import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
+// import data1 from './data1.json'
 export default {
   name: 'NewBook',
-  components: { BookList },
+  components: { HeaderTop, BookList },
   data() {
     return {
-
+      bookData: []
     }
   },
   created() {
-    this.bookData = data1.bookList
+    // this.bookData = data1.bookList
+    this.getBookData()
+  },
+  methods: {
+    getBookData() {
+      FetchNewBookRecommend().then(res => {
+        console.log(res, 'res')
+        let data = []
+        data = res
+        data.forEach(item => {
+          this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+        })
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    getCoverByISBN(isbn, item) {
+      const params = {
+        isbn: isbn
+      }
+      FetchCoverByISBN(params).then((res) => {
+        item.cover = window.URL.createObjectURL(res)
+        this.bookData.push(item)
+      })
+    }
   }
 }
 </script>