封面问题

.env.development

@@ -1,19 +1,15 @@
-ENV = 'development'
-
-# 接口地址
-
-#内网服务地址
-#VUE_APP_BASE_API  = 'http://120.76.47.59:8080'
-VUE_APP_BASE_API  = 'http://192.168.99.84:8080'
-VUE_APP_WS_API = 'ws://192.168.99.84:8080'
-
-# 刘力-本地服地址
-#VUE_APP_BASE_API  = 'http://192.168.99.65:7070'
-#VUE_APP_WS_API = 'ws://192.168.99.65:7071'
-
-# 许镇-本地服地址
-#VUE_APP_BASE_API  = 'http://192.168.99.84:7070'
-#VUE_APP_WS_API = 'ws://192.168.99.84:7070'
-
-# 是否启用 babel-plugin-dynamic-import-node插件
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
+ENV = 'development'
+
+# 接口地址
+
+#内网服务地址
+#VUE_APP_BASE_API  = 'http://120.76.47.59:8080'
+# VUE_APP_BASE_API  = 'http://192.168.99.84:8080'
+# VUE_APP_WS_API = 'ws://192.168.99.84:8080'
+
+# 许镇-本地服地址
+VUE_APP_BASE_API  = 'http://192.168.99.67:8080'
+VUE_APP_WS_API = 'ws://192.168.99.67:8081'
+
+# 是否启用 babel-plugin-dynamic-import-node插件
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/inquiryMachine.js

@@ -1,66 +1,66 @@
-import request from '@/utils/request'
-// import qs from 'qs'
-
-// 活动资讯/活动预告
-export function activityInquiry(params) {
-  return request({
-    url: '/dxhtsg/activityInquiry',
-    method: 'get',
-    params: params
-  })
-}
-
-// 图书馆简介
-export function libraryIntro(params) {
-  return request({
-    url: '/dxhtsg/libraryIntro',
-    method: 'get',
-    params: params
-  })
-}
-
-// 数字资源
-export function initNumberResoures(params) {
-  return request({
-    url: '/dxhtsg/initNumberResoures',
-    method: 'get',
-    params: params
-  })
-}
-
-// 新书推荐
-export function FetchNewBookRecommend(params) {
-  return request({
-    url: '/dxhtsg/newBookRecommend',
-    method: 'get',
-    params: params
-  })
-}
-
-// 通过isbn获取图书封面
-export function FetchCoverByISBN(params) {
-  return request({
-    url: '/dxhtsg/getCoverByISBN',
-    method: 'get',
-    params: params,
-    responseType: 'blob'
-  })
-}
-
-// 图书详情
-export function getBookDetailsByISBN(params) {
-  return request({
-    url: '/dxhtsg/getBookDetailsByISBN',
-    method: 'get',
-    params: params
-  })
-}
-
-export default {
-  activityInquiry,
-  libraryIntro,
-  FetchNewBookRecommend,
-  FetchCoverByISBN,
-  initNumberResoures,
-  getBookDetailsByISBN
-}
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 活动资讯/活动预告
+export function activityInquiry(params) {
+  return request({
+    url: '/dxhtsg/activityInquiry',
+    method: 'get',
+    params: params
+  })
+}
+
+// 图书馆简介
+export function libraryIntro(params) {
+  return request({
+    url: '/dxhtsg/libraryIntro',
+    method: 'get',
+    params: params
+  })
+}
+
+// 数字资源
+export function initNumberResoures(params) {
+  return request({
+    url: '/dxhtsg/initNumberResoures',
+    method: 'get',
+    params: params
+  })
+}
+
+// 新书推荐
+export function FetchNewBookRecommend(params) {
+  return request({
+    url: '/dxhtsg/newBookRecommend',
+    method: 'get',
+    params: params
+  })
+}
+
+// 通过isbn获取图书封面
+export function FetchCoverByISBN(params) {
+  return request({
+    url: '/dxhtsg/getCoverByISBN',
+    method: 'get',
+    params: params
+    // responseType: 'blob'
+  })
+}
+
+// 图书详情
+export function getBookDetailsByISBN(params) {
+  return request({
+    url: '/dxhtsg/getBookDetailsByISBN',
+    method: 'get',
+    params: params
+  })
+}
+
+export default {
+  activityInquiry,
+  libraryIntro,
+  FetchNewBookRecommend,
+  FetchCoverByISBN,
+  initNumberResoures,
+  getBookDetailsByISBN
+}

src/utils/request.js

@@ -1,52 +1,54 @@
-import axios from 'axios'
-import { Message } from 'element-ui'
-
-// 创建axios实例
-const service = axios.create({
-  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
-  timeout: 1000 * 30, // 请求超时时间
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
-
-// request拦截器
-service.interceptors.request.use(
-  config => {
-    // if (getToken()) {
-    //   config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-    // }
-    const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉
-    config.headers['Authorization'] = token || ''
-    return config
-  },
-  error => {
-    console.error('error: ', error)
-    Promise.reject(error)
-  }
-)
-
-// response 拦截器
-service.interceptors.response.use(
-  response => {
-    const errorMsg = response.data.errMsg
-    if (response.status === 200) {
-      // console.log(response.data.data)
-      if (response.data instanceof Blob) {
-        return response.data
-      } else {
-        return response.data.data
-      }
-    } else {
-      Message.error({
-        message: errorMsg,
-        duration: 5000
-      })
-      Promise.reject()
-    }
-  },
-  error => {
-    return Promise.reject(error)
-  }
-)
-export default service
+import axios from 'axios'
+import { Message } from 'element-ui'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
+  timeout: 1000 * 30, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    // if (getToken()) {
+    //   config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉
+    config.headers['Authorization'] = token || ''
+    return config
+  },
+  error => {
+    console.error('error: ', error)
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    const errorMsg = response.data.errMsg
+    if (response.status === 200) {
+      // console.log(response.data.data)
+      if (response.data instanceof Blob) {
+        return response.data
+      } else if (response.data.data) {
+        return response.data.data
+      } else {
+        return response.data
+      }
+    } else {
+      Message.error({
+        message: errorMsg,
+        duration: 5000
+      })
+      Promise.reject()
+    }
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+export default service

src/views/newBookRecommend.vue

@@ -1,230 +1,231 @@
-<template>
-  <!-- 新书推荐 -->
-  <div class="content-main new-main">
-    <div class="swiper-container">
-      <div class="swiper-wrapper new-book-list">
-        <div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)">
-          <div class="book-list-item">
-            <div class="book-img">
-              <img :src="item.cover" :onerror="defaultImg">
-            </div>
-            <div class="book-info">
-              <h4 class="title-item">{{ item.nbName }}</h4>
-              <p>作者：{{ item.nbAuthor }}</p>
-              <p>出版社：{{ item.nbPublisher }}</p>
-              <p>出版年份：{{ item.nbPublisherdate }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="icon iconfont prev-btn">
-        <svg class="icon svg-icon" aria-hidden="true">
-          <use xlink:href="#icon-zuohua" />
-        </svg>
-      </div>
-      <div class="icon iconfont next-btn">
-        <svg class="icon svg-icon" aria-hidden="true">
-          <use xlink:href="#icon-youhua" />
-        </svg>
-      </div>
-    </div>
-    <BookDetails ref="detailDom" />
-  </div>
-</template>
-
-<script>
-import { Swiper } from 'vue-awesome-swiper'
-import 'swiper/swiper-bundle.css'
-import { FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine'
-import BookDetails from './module/bookDetails.vue'
-export default {
-  name: 'NewBookRecommend',
-  components: {
-    BookDetails
-  },
-  data() {
-    return {
-      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
-      coverUrl: null,
-      rankingList: []
-    }
-  },
-  created() {
-    this.getBookList()
-  },
-  mounted() {
-  },
-  methods: {
-    initSwiper() {
-      this.$nextTick(() => {
-        new Swiper('.swiper-container', {
-          touchEventsTarget: '.swiper-container',
-          slidesPerView: 5,
-          spaceBetween: 20,
-          centeredSlides: true,
-          observer: true,
-          // loop: true,
-          centeredSlidesBounds: true,
-          watchSlidesVisibility: true,
-          navigation: {
-            nextEl: '.next-btn',
-            prevEl: '.prev-btn'
-          }
-          // on: {
-          //   click: function() {
-          //     alert(this.clickedIndex)
-          //   }
-          // }
-        })
-      })
-    },
-    getBookList() {
-      const params = {
-        libcode: this.libcode,
-        pageNo: 1,
-        pageSize: 10
-      }
-      FetchNewBookRecommend(params).then(res => {
-        console.log(res)
-        let data = []
-        data = res.newbookList
-        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.rankingList.push(item)
-        this.initSwiper()
-      })
-    },
-    // 详情
-    handleDetails(index) {
-      const params = {
-        isbn: this.rankingList[index].isbn.replace(/\-/g, '')
-      }
-      getBookDetailsByISBN(params).then(res => {
-        this.$refs.detailDom.bookData = res
-        this.$refs.detailDom.dialogVisible = true
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "~@/assets/styles/index.scss";
-.new-main{
-  position: relative;
-  padding: 0 50px;
-}
-.new-book-list{
-  color: #333;
-  .book-list-item{
-    width: 100%;
-    box-shadow: 0px 0px 20px 1px #D2D2D2;
-    border-radius: 2px 2px 2px 2px;
-  }
-  .book-img{
-    height: 6.575rem;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    img{
-      display: block;
-      width: 100%;
-      // height: 100%;
-    }
-  }
-  .book-info{
-    padding: 10px 20px;
-    h4{
-      font-weight: normal;
-      margin-bottom: 20px;
-    }
-    p{
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.icon{
-  height: 1.1em;
-}
-.prev-btn,
-.next-btn{
-  position: absolute;
-  bottom: 60px;
-  font-size: 60px;
-  // color: #71C09E;
-  z-index: 999;
-}
-
-.prev-btn{
-  left: 100px;
-}
-
-.next-btn{
-  right: 100px;
-}
-
-.swiper-container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.swiper-slide {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  transition: 300ms;
-  transform: scale(0.84);
-  .book-info{
-    line-height: 20px;
-    font-size: 16px;
-    h4{
-      font-size: 20px;
-    }
-  }
-}
-
-.swiper-slide.swiper-slide-prev,
-.swiper-slide.swiper-slide-next {
-    font-size: 28px;
-    transform: scale(0.9);
-    .book-info{
-      line-height: 28px;
-      font-size: 22px;
-      h4{
-        font-size: 28px;
-      }
-    }
-}
-
-.swiper-slide-active,.swiper-slide-duplicate-active {
-  transform: scaleX(1);
-  .book-info{
-    line-height: 40px;
-    font-size: 28px;
-    h4{
-      font-size: 40px;
-    }
-  }
-}
-</style>
+<template>
+  <!-- 新书推荐 -->
+  <div class="content-main new-main">
+    <div class="swiper-container">
+      <div class="swiper-wrapper new-book-list">
+        <div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)">
+          <div class="book-list-item">
+            <div class="book-img">
+              <img :src="item.cover" :onerror="defaultImg">
+            </div>
+            <div class="book-info">
+              <h4 class="title-item">{{ item.nbName }}</h4>
+              <p>作者：{{ item.nbAuthor }}</p>
+              <p>出版社：{{ item.nbPublisher }}</p>
+              <p>出版年份：{{ item.nbPublisherdate }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="icon iconfont prev-btn">
+        <svg class="icon svg-icon" aria-hidden="true">
+          <use xlink:href="#icon-zuohua" />
+        </svg>
+      </div>
+      <div class="icon iconfont next-btn">
+        <svg class="icon svg-icon" aria-hidden="true">
+          <use xlink:href="#icon-youhua" />
+        </svg>
+      </div>
+    </div>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+import { FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine'
+import BookDetails from './module/bookDetails.vue'
+export default {
+  name: 'NewBookRecommend',
+  components: {
+    BookDetails
+  },
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
+      coverUrl: null,
+      rankingList: []
+    }
+  },
+  created() {
+    this.getBookList()
+  },
+  mounted() {
+  },
+  methods: {
+    initSwiper() {
+      this.$nextTick(() => {
+        new Swiper('.swiper-container', {
+          touchEventsTarget: '.swiper-container',
+          slidesPerView: 5,
+          spaceBetween: 20,
+          centeredSlides: true,
+          observer: true,
+          // loop: true,
+          centeredSlidesBounds: true,
+          watchSlidesVisibility: true,
+          navigation: {
+            nextEl: '.next-btn',
+            prevEl: '.prev-btn'
+          }
+          // on: {
+          //   click: function() {
+          //     alert(this.clickedIndex)
+          //   }
+          // }
+        })
+      })
+    },
+    getBookList() {
+      const params = {
+        libcode: this.libcode,
+        pageNo: 1,
+        pageSize: 10
+      }
+      FetchNewBookRecommend(params).then(res => {
+        console.log(res)
+        let data = []
+        data = res.newbookList
+        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)
+        item.cover = res
+        this.rankingList.push(item)
+        this.initSwiper()
+      })
+    },
+    // 详情
+    handleDetails(index) {
+      const params = {
+        isbn: this.rankingList[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        this.$refs.detailDom.bookData = res
+        this.$refs.detailDom.dialogVisible = true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.new-main{
+  position: relative;
+  padding: 0 50px;
+}
+.new-book-list{
+  color: #333;
+  .book-list-item{
+    width: 100%;
+    box-shadow: 0px 0px 20px 1px #D2D2D2;
+    border-radius: 2px 2px 2px 2px;
+  }
+  .book-img{
+    height: 6.575rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    img{
+      display: block;
+      width: 100%;
+      // height: 100%;
+    }
+  }
+  .book-info{
+    padding: 10px 20px;
+    h4{
+      font-weight: normal;
+      margin-bottom: 20px;
+    }
+    p{
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.icon{
+  height: 1.1em;
+}
+.prev-btn,
+.next-btn{
+  position: absolute;
+  bottom: 60px;
+  font-size: 60px;
+  // color: #71C09E;
+  z-index: 999;
+}
+
+.prev-btn{
+  left: 100px;
+}
+
+.next-btn{
+  right: 100px;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.swiper-slide {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  transition: 300ms;
+  transform: scale(0.84);
+  .book-info{
+    line-height: 20px;
+    font-size: 16px;
+    h4{
+      font-size: 20px;
+    }
+  }
+}
+
+.swiper-slide.swiper-slide-prev,
+.swiper-slide.swiper-slide-next {
+    font-size: 28px;
+    transform: scale(0.9);
+    .book-info{
+      line-height: 28px;
+      font-size: 22px;
+      h4{
+        font-size: 28px;
+      }
+    }
+}
+
+.swiper-slide-active,.swiper-slide-duplicate-active {
+  transform: scaleX(1);
+  .book-info{
+    line-height: 40px;
+    font-size: 28px;
+    h4{
+      font-size: 40px;
+    }
+  }
+}
+</style>