From 6917eed6dccf0162a8d6a7061acc87957d1bfc82 Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Mon, 26 Sep 2022 16:44:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E4=B9=A6=E6=8E=A8=E8=8D=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20=E4=BB=A3=E7=A0=81=E5=A4=8D=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hotBook.vue            | 37 ++++++++++++++++++++++++++------
 src/views/module/bookDetails.vue | 17 ++++++---------
 src/views/module/bookList.vue    | 24 +++++++++++++++------
 src/views/newBook.vue            |  9 ++++----
 4 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/src/views/hotBook.vue b/src/views/hotBook.vue
index 475fcf5..014f74d 100644
--- a/src/views/hotBook.vue
+++ b/src/views/hotBook.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="bookshelf">
+    <!-- <HeaderTop /> -->
     <div class="bookshelf-header" style="height:120px">
       <router-link to="/">
         <span class="icon iconfont icon-l">&#xe631;</span>
@@ -11,20 +12,42 @@
 </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'
 export default {
-  name: 'HotBook',
-  components: {
-    BookList
-  },
+  name: 'NewBook',
+  components: { BookList },
   data() {
     return {
-      bookData: null
+      bookData: []
     }
   },
   created() {
-    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>
diff --git a/src/views/module/bookDetails.vue b/src/views/module/bookDetails.vue
index 424991f..db8c714 100644
--- a/src/views/module/bookDetails.vue
+++ b/src/views/module/bookDetails.vue
@@ -10,13 +10,13 @@
         <div class="book-details-box">
           <div class="book-details">
             <div class="book-cover">
-              <img :src="bookData.img" alt="">
+              <img :src="bookData.cover" :onerror="defaultImg">
             </div>
             <div class="book-desc">
-              <h3>{{ bookData.title }}</h3>
-              <p class="book-from">作者：{{ bookData.author }}嘎嘎嘎嘎嘎嘎嘎嘎嘎过嘎嘎嘎嘎嘎嘎嘎嘎嘎过嘎嘎嘎嘎嘎嘎嘎嘎嘎过</p>
-              <p class="book-from">出版社：{{ bookData.author }}嘎嘎嘎嘎嘎嘎嘎嘎嘎过嘎嘎嘎嘎嘎嘎嘎嘎嘎过嘎嘎嘎嘎嘎嘎嘎嘎嘎过</p>
-              <p class="book-brief">简介：哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈</p>
+              <h3>{{ bookData.nbName }}</h3>
+              <p class="book-from">作者：{{ bookData.nbAuthor }}</p>
+              <p class="book-from">出版社：{{ bookData.nbPublisher }}</p>
+              <p class="book-brief"> 简介：{{ bookData.nbExplain }}</p>
             </div>
           </div>
           <div class="book-local">
@@ -24,10 +24,6 @@
           </div>
         </div>
       </div>
-      <!-- <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span> -->
     </el-dialog>
   </div>
 </template>
@@ -38,7 +34,8 @@ export default {
   data() {
     return {
       dialogVisible: false,
-      bookData: {}
+      bookData: {},
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
     }
   },
   created() {
diff --git a/src/views/module/bookList.vue b/src/views/module/bookList.vue
index 7058653..6f3bcc4 100644
--- a/src/views/module/bookList.vue
+++ b/src/views/module/bookList.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="hotbook-box">
-    <div class="most-book">
+    <div class="most-book" @click="handleDetails(0)">
       <div class="most-book-img">
         <img :src="bookdata[0].cover" :onerror="defaultImg">
       </div>
       <div class="most-book-txt book-rack">
         <div class="txt">
-          <h3>书名：{{ bookdata[0].title }}</h3>
-          <p>作者：{{ bookdata[0].author }}</p>
-          <p>出版社：</p>
-          <p>出版日期：</p>
+          <h3>书名：{{ bookdata[0].nbName }}</h3>
+          <p>作者：{{ bookdata[0].nbAuthor }}</p>
+          <p>出版社：{{ bookdata[0].nbAuthor }}</p>
+          <p>出版时间：{{ bookdata[0].nbPublisherdate }}</p>
         </div>
       </div>
     </div>
     <ul class="hotbook-list">
       <li v-for="(item,index) in bookList" :key="index" @click="handleDetails(index)">
         <img :src="item.cover" :onerror="defaultImg">
-        <p>{{ item.title }}</p>
+        <p class="book-name">{{ item.nbName }}</p>
       </li>
     </ul>
     <BookDetails ref="detailDom" />
@@ -110,10 +110,20 @@ export default {
   li{
     margin-bottom: 20px;
     margin-left: 48px;
+    width: 300px;
+    overflow: hidden;
+    // text-align: center;
     img{
-      width: 300px;
+      width: 100%;
+      vertical-align: middle;
       height: 360px;
     }
+    .book-name{
+      width: 100%;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
   }
   & li:nth-child(3n+1){
     margin-left: 0;
diff --git a/src/views/newBook.vue b/src/views/newBook.vue
index 9b2b5e8..90e705c 100644
--- a/src/views/newBook.vue
+++ b/src/views/newBook.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="bookshelf">
-    <HeaderTop />
+    <!-- <HeaderTop /> -->
     <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header" style="height:120px">
       <router-link to="/">
@@ -13,20 +13,18 @@
 </template>
 
 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
+// import HeaderTop from '@/views/module/headerTop.vue'
 import BookList from '@/views/module/bookList.vue'
 import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
-// import data1 from './data1.json'
 export default {
   name: 'NewBook',
-  components: { HeaderTop, BookList },
+  components: { BookList },
   data() {
     return {
       bookData: []
     }
   },
   created() {
-    // this.bookData = data1.bookList
     this.getBookData()
   },
   methods: {
@@ -48,6 +46,7 @@ export default {
       }
       FetchCoverByISBN(params).then((res) => {
         item.cover = window.URL.createObjectURL(res)
+        console.log(res, 'res')
         this.bookData.push(item)
       })
     }