首页 图书详情

src/views/module/bookList.vue

@@ -25,7 +25,7 @@
 
 <script>
 import BookDetails from './bookDetails.vue'
-import { getBookDetailsByISBN, FetchCoverByISBN } from '@/api/bookshelf'
+import { getBookDetailsByISBN } from '@/api/bookshelf'
 export default {
   name: 'BookList',
   components: { BookDetails },
@@ -50,26 +50,13 @@ export default {
   },
   methods: {
     handleDetails(index) {
-      console.log(this.bookdata[index])
       const params = {
         isbn: this.bookdata[index].isbn.replace(/\-/g, '')
       }
-      console.log(params)
       getBookDetailsByISBN(params).then(res => {
-        console.log(res, '详情')
         this.$refs.detailDom.bookData = res
         this.$refs.detailDom.dialogVisible = true
       })
-    },
-    getCoverByISBN(isbn, item) {
-      const params = {
-        isbn: isbn
-      }
-      FetchCoverByISBN(params).then((res) => {
-        item.cover = window.URL.createObjectURL(res)
-        console.log(res, 'res')
-        this.bookData.push(item)
-      })
     }
   }
 

src/views/module/bookListItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-for="item in listData" :key="item.ranking" class="list-item">
+    <div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)">
       <div class="book-img">
         <img :src="item.cover" :onerror="defaultImg">
       </div>
@@ -15,12 +15,18 @@
         </div>
       </div>
     </div>
+    <BookDetails ref="detailDom" />
+
   </div>
 </template>
 
 <script>
+import { getBookDetailsByISBN } from '@/api/bookshelf'
+import BookDetails from './bookDetails.vue'
+
 export default {
   name: 'BookListItem',
+  components: { BookDetails },
   props: {
     listData: {
       type: Array,
@@ -59,6 +65,15 @@ export default {
   mounted() {
   },
   methods: {
+    handleDetails(index) {
+      const params = {
+        isbn: this.listData[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        this.$refs.detailDom.bookData = res
+        this.$refs.detailDom.dialogVisible = true
+      })
+    }
   }
 }
 </script>