From 948fdc2e121905a5b6b20b54b73d030d2af2aa5c Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 27 Dec 2024 10:42:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=85=8D=E7=BD=AE=E5=A4=96?=
 =?UTF-8?q?=E9=83=A8=E6=96=87=E4=BB=B6/=E5=8F=96=E5=9B=BE=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                  |   1 +
 public/static/config.js            |   4 +
 src/main.js                        |   4 +-
 src/utils/request.js               |   3 +-
 src/views/newBookRecommend-dxh.vue | 231 +++++++++++++++++++++++++++++
 src/views/newBookRecommend.vue     |  13 +-
 6 files changed, 249 insertions(+), 7 deletions(-)
 create mode 100644 public/static/config.js
 create mode 100644 src/views/newBookRecommend-dxh.vue
diff --git a/public/index.html b/public/index.html
index 51aad9c..7ee158c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script type="text/javascript" src="/static/config.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/public/static/config.js b/public/static/config.js
new file mode 100644
index 0000000..c388cd4
--- /dev/null
+++ b/public/static/config.js
@@ -0,0 +1,4 @@
+window.g = {
+  AXIOS_TIMEOUT: 10000,
+  ApiUrl: 'http://192.168.3.5:8080' // 配置服务器地址
+}
diff --git a/src/main.js b/src/main.js
index 8e31454..9bd18e4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,9 +17,9 @@ Vue.use(ElementUI)
 
 import axios from 'axios'
 Vue.prototype.$axios = axios
-// 馆代码
+// 馆代码  1501 江夏图书馆  1201 东西湖图书馆  FTZN 本地
 // Vue.prototype.libcode = 'FTZN'
-Vue.prototype.libcode = '1201'
+Vue.prototype.libcode = '1501'
 
 import { parseTime } from '@/utils/index.js'
 Vue.filter('parseTime', function(time, cFormat) {
diff --git a/src/utils/request.js b/src/utils/request.js
index 732033f..1a6e055 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -3,7 +3,8 @@ 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
+  // baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
+  baseURL: process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/', // api 的 base_url
   timeout: 1000 * 30, // 请求超时时间
   headers: {
     'Content-Type': 'application/json'
diff --git a/src/views/newBookRecommend-dxh.vue b/src/views/newBookRecommend-dxh.vue
new file mode 100644
index 0000000..78ad79c
--- /dev/null
+++ b/src/views/newBookRecommend-dxh.vue
@@ -0,0 +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)
+        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>
diff --git a/src/views/newBookRecommend.vue b/src/views/newBookRecommend.vue
index 78ad79c..35a8eb1 100644
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend.vue
@@ -79,6 +79,7 @@ export default {
       })
     },
     getBookList() {
+      const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
       const params = {
         libcode: this.libcode,
         pageNo: 1,
@@ -86,11 +87,15 @@ export default {
       }
       FetchNewBookRecommend(params).then(res => {
         console.log(res)
-        let data = []
-        data = res.newbookList
-        data.forEach(item => {
-          this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+        this.rankingList = res.newbookList.map((item, index) => {
+          if (item.nbImgPath) {
+            item.cover = linkSrc + '/downloadFile' + item.nbImgPath
+          } else {
+            item.cover = null
+          }
+          return item
         })
+        this.initSwiper()
       }).catch(() => {
         this.$message.error('接口错误')
       })
