新书推荐/热门图书添加滚动加载

2 years ago · ad213143da
7 changed files with 116 additions and 315 deletions
--- a/src/views/data.json
+++ b/src/views/data.json
@ -1,55 +0,0 @@
-{
-  "bookList":[
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定1",
-      "ranking": 1,
-      "num": 2000
-    },
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定2",
-      "ranking": 2,
-      "num": 1200
-    },
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定3",
-      "ranking": 3,
-      "num": 1100
-    }
-  ],
-  "newList":[
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定1",
-      "ranking": 1,
-      "num": 2000
-    },
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定2",
-      "ranking": 2,
-      "num": 1200
-    },
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定3",
-      "ranking": 3,
-      "num": 1100
-    },
-    {
-      "cover":"https://qiniu.aiyxlib.com/bg.png",
-      "nbName": "大个子狗与小个子猫",
-      "nbAuthor": "高小定4",
-      "ranking": 4,
-      "num": 1100
-    }
-  ]
-}
--- a/src/views/data1.json
+++ b/src/views/data1.json
@ -1,166 +0,0 @@
-{
-  "listData":[
-    [
-      {
-        "id":1
-      }
-    ],
-    { "id": 2 },
-    { "id": 3 },
-    { "id": 4 },
-    { "id": 5 }
-  ],
-  "bookList":[
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定1",
-      "ranking": 1,
-      "num": 2000
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定2",
-      "ranking": 2,
-      "num": 1200
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定3",
-      "ranking": 3,
-      "num": 1100
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定1",
-      "ranking": 1,
-      "num": 2000
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定2",
-      "ranking": 2,
-      "num": 1200
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定3",
-      "ranking": 3,
-      "num": 1100
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定1",
-      "ranking": 1,
-      "num": 2000
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定2",
-      "ranking": 2,
-      "num": 1200
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定3",
-      "ranking": 3,
-      "num": 1100
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定2",
-      "ranking": 2,
-      "num": 1200
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定3",
-      "ranking": 3,
-      "num": 1100
-    }
-  ],
-  "srcList":[
-    {
-      "title":"武汉云阅读",
-      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a16da710000"
-    },
-    {
-      "title":"在线书城",
-      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a1a50720001"
-    },
-    {
-      "title":"武汉微刊",
-      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a1b1d9e0002"
-    },
-    {
-      "title":"图书馆公开课",
-      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a1bf2870003"
-    }
-  ],
-  "authors":[
-    {
-      "name":"钱钟书",
-      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
-    },
-    {
-      "name":"钱钟书",
-      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
-    },
-    {
-      "name":"钱钟书",
-      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
-    },
-    {
-      "name":"钱钟书",
-      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
-    },
-    {
-      "name":"钱钟书",
-      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》"
-    }
-  ],
-  "rackBook":[
-    {"id":100,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":101,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":102,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":103,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":104,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":105,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":106,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":107,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":109,"title":"大个子狗与小个子猫大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1010,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1011,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1012,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1013,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1014,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1015,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1016,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1017,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1018,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1019,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1020,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1021,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1022,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1023,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1024,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1025,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1026,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1027,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1028,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1029,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1030,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1031,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1032,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}
-  ]
-}
--- a/src/views/hotBook.vue
+++ b/src/views/hotBook.vue
@ -6,48 +6,26 @@
      </router-link>
      <h2>热门图书</h2>
    </div>
-    <BookList :bookdata="bookData" />
+    <BookList />
  </div>
 </template>

 <script>
 import BookList from '@/views/module/bookList.vue'
-import { FetchHotBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
+import { bookListCrud } from './mixins/booklist.js'
 export default {
  name: 'HotBook',
  components: { BookList },
+  mixins: [bookListCrud],
  data() {
    return {
-      bookData: []
    }
  },
  created() {
-    this.getBookData()
+  },
+  mounted() {
  },
  methods: {
-    getBookData() {
-      const params = {
-        libcode: this.libcode,
-        pageNo: 1,
-        pageSize: 22
-      }
-      FetchHotBookRecommend(params).then(res => {
-        res.hotbookList.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>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -15,7 +15,7 @@
        <img src="~@/assets/images/home/nav1.png">
        <p>图书检索</p>
      </li>
-      <li @click="toPath('/HotBook')">
+      <li @click="toPath('/HotBook?bookType=hot')">
        <img src="~@/assets/images/home/nav2.png">
        <p>热门图书</p>
      </li>
@ -54,7 +54,7 @@
        <div class="list-top-title">
          <p>新书推荐</p>
        </div>
-        <span class="more" @click="toPath('/NewBook')">更多<i class="iconfont icon-zuo rotate" /></span>
+        <span class="more" @click="toPath('/NewBook?bookType=new')">更多<i class="iconfont icon-zuo rotate" /></span>
      </div>
      <BookListItem :list-data.sync="newList" :is-new-book="true" />
    </div>
--- a/src/views/mixins/booklist.js
+++ b/src/views/mixins/booklist.js
@ -0,0 +1,93 @@
+import { FetchHotBookRecommend, FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/bookshelf'
+export const bookListCrud = {
+  // 组件共用属性
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
+      bookData: [],
+      page: 1,
+      pageSize: 9,
+      pageCount: 1
+    }
+  },
+  computed: {
+    bookList() {
+      const arr = this.bookData.slice(1)
+      return arr
+    }
+  },
+  // 组件共用方法
+  methods: {
+    // 获取热门/新书图书list
+    getBookData() {
+      const bookType = this.$route.query.bookType
+      const params = {
+        libcode: this.libcode,
+        pageNo: this.page,
+        pageSize: this.pageSize
+      }
+      if (bookType === 'hot') {
+        FetchHotBookRecommend(params).then(res => {
+          this.pageCount = res.page.totalPages
+          res.hotbookList.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+          })
+        }).catch(() => {
+          this.$message.error('接口错误')
+        })
+      } else {
+        FetchNewBookRecommend(params).then(res => {
+          res.newbookList.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+          })
+        }).catch(() => {
+          this.$message.error('接口错误')
+        })
+      }
+    },
+    // 根据isbn查找封面
+    getCoverByISBN(isbn, item) {
+      const params = {
+        isbn: isbn
+      }
+      FetchCoverByISBN(params).then((res) => {
+        item.cover = window.URL.createObjectURL(res)
+        this.bookData.push(item)
+      })
+    },
+    // 滚动加载
+    lazyLoading(e) {
+      const scrollTop = e.target.scrollTop
+      const windowHeight = e.target.clientHeight
+      const scrollHeight = e.target.scrollHeight
+      // 滚动条到底部
+      if (scrollTop + windowHeight === scrollHeight) {
+        this.page++
+        if (this.page > this.pageCount) {
+          this.$message.success('暂无更多数据~')
+          return
+        }
+        this.getBookData()
+      }
+    },
+    // 点击查看详情
+    handleDetails(index) {
+      const params = {
+        isbn: this.bookData[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        if (res) {
+          this.$refs.detailDom.bookData = res
+          this.$refs.detailDom.dialogVisible = true
+        } else {
+          this.$message.error('暂无图书内容~')
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    }
+  },
+  // 组件挂载时的共用方法
+  mounted() {
+  }
+}
--- a/src/views/module/bookList.vue
+++ b/src/views/module/bookList.vue
@ -1,15 +1,15 @@
 <template>
-  <div class="hotbook-box">
+  <div class="hotbook-box" @scroll="lazyLoading">
    <div v-if="bookList.length > 0" class="most-book" @click="handleDetails(0)">
      <div class="most-book-img">
-        <img :src="bookdata[0].cover ? bookdata[0].cover : ''" :onerror="defaultImg">
+        <img :src="bookData[0].cover ? bookData[0].cover : ''" :onerror="defaultImg">
      </div>
      <div class="most-book-txt book-rack">
        <div class="txt">
-          <h3>书名：{{ bookdata[0].nbName || bookdata[0].hbName }}</h3>
-          <p>作者：{{ bookdata[0].nbAuthor || bookdata[0].hbAuthor }}</p>
-          <p>出版社：{{ bookdata[0].nbAuthor || bookdata[0].hbAuthor }}</p>
-          <p>出版时间：{{ bookdata[0].nbPublisherdate || bookdata[0].hbPublisherdate }}</p>
+          <h3>书名：{{ bookData[0].nbName || bookData[0].hbName }}</h3>
+          <p>作者：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p>
+          <p>出版社：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p>
+          <p>出版时间：{{ bookData[0].nbPublisherdate || bookData[0].hbPublisherdate }}</p>
        </div>
      </div>
    </div>
@ -27,47 +27,23 @@

 <script>
 import BookDetails from './bookDetails.vue'
-import { getBookDetailsByISBN } from '@/api/bookshelf'
+import { } from '@/api/bookshelf'
+import { bookListCrud } from '../mixins/booklist.js'
 export default {
  name: 'BookList',
  components: { BookDetails },
-  props: {
-    bookdata: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    }
-  },
+  mixins: [bookListCrud],
  data() {
    return {
-      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
    }
  },
-  computed: {
-    bookList() {
-      const arr = this.bookdata.slice(1)
-      return arr
-    }
+  created() {
+    this.getBookData()
+  },
+  mounted() {
  },
  methods: {
-    handleDetails(index) {
-      const params = {
-        isbn: this.bookdata[index].isbn.replace(/\-/g, '')
-      }
-      getBookDetailsByISBN(params).then(res => {
-        if (res) {
-          this.$refs.detailDom.bookData = res
-          this.$refs.detailDom.dialogVisible = true
-        } else {
-          this.$message.error('暂无图书内容~')
-        }
-      }).catch(() => {
-        this.$message.error('接口错误')
-      })
-    }
  }
-
 }
 </script>

--- a/src/views/newBook.vue
+++ b/src/views/newBook.vue
@ -6,53 +6,28 @@
      </router-link>
      <h2>新书推荐</h2>
    </div>
-    <BookList :bookdata="bookData" />
+    <BookList />
  </div>
 </template>

 <script>
 import BookList from '@/views/module/bookList.vue'
-import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/bookshelf'
+import { bookListCrud } from './mixins/booklist.js'
 export default {
  name: 'NewBook',
  components: { BookList },
+  mixins: [bookListCrud],
  data() {
    return {
-      bookData: []
    }
  },
  created() {
-    this.getBookData()
  },
  methods: {
-    getBookData() {
-      const params = {
-        libcode: this.libcode,
-        pageNo: 1,
-        pageSize: 22
-      }
-      FetchNewBookRecommend(params).then(res => {
-        res.newbookList.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>

 <style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
-
 </style>