视频/封面api

src/api/library.js

@@ -64,6 +64,25 @@ export function FetchHalfYearBRNum(params) {
   })
 }
 
+// 大屏幕播放文件
+export function FetchShowFileList(params) {
+  return request({
+    url: '/dxhtsg/showFileList',
+    method: 'get',
+    params: params
+  })
+}
+
+// 通过isbn获取图书封面
+export function FetchCoverByISBN(params) {
+  return request({
+    url: '/dxhtsg/getCoverByISBN',
+    method: 'get',
+    params: params,
+    responseType: 'blob'
+  })
+}
+
 export default {
   FetchHalfYearBorrowNum,
   FetchBorrowRank,
@@ -71,5 +90,6 @@ export default {
   FetchNewBookRecommend,
   FetchInitNotice,
   FetchInitIntoNum,
-  FetchHalfYearBRNum
+  FetchHalfYearBRNum,
+  FetchShowFileList
 }

src/views/index.vue

@@ -8,11 +8,7 @@
       </div>
       <div class="screen-middle">
         <AccessToLibrary :is-self-service="false" />
-        <div class="video-box">
-          <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
-            <source :src="src" type="video/mp4">
-          </video>
-        </div>
+        <Video />
         <ReadStar />
       </div>
       <div class="screen-right">
@@ -28,6 +24,7 @@ import Header from '@/views/header/index.vue'
 import TotalLending from '@/views/totalLending/index.vue'
 import LengingRanking from '@/views/lengingRanking/index.vue'
 import AccessToLibrary from '@/views/accessToLibrary/index.vue'
+import Video from '@/views/video/index.vue'
 import Notice from '@/views/notice/index.vue'
 import NewBookRecommend from '@/views/newBookRecommend/index.vue'
 import ReadStar from '@/views/readStar/index.vue'
@@ -38,16 +35,14 @@ export default {
     TotalLending,
     LengingRanking,
     AccessToLibrary,
+    Video,
     ReadStar,
     Notice,
     NewBookRecommend
   },
   data() {
     return {
-      headerTitle: '东西湖区图书馆',
-      poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
-      // src: 'https://hbrbvod.chinamcache.com/hbrb/vod/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/d0b5a55806fd45d2b4232e2fc3c7f257_h264_1000k_mp4.mp4'
-      src: 'https://qiniu.aiyxlib.com/1658104739000.mp4'
+      headerTitle: '东西湖区图书馆'
     }
   },
   created() {

src/views/indexSelfService.vue

@@ -8,11 +8,7 @@
       </div>
       <div class="screen-middle">
         <AccessToLibrary :is-self-service="true" />
-        <div class="video-box">
-          <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
-            <source :src="src" type="video/mp4">
-          </video>
-        </div>
+        <Video />
         <ReadStar />
       </div>
       <div class="screen-right">
@@ -28,6 +24,7 @@ import Header from '@/views/header/index.vue'
 import TodayBorrowed from '@/views/todayBorrowed/index.vue'
 import LengingRanking from '@/views/lengingRanking/index.vue'
 import AccessToLibrary from '@/views/accessToLibrary/index.vue'
+import Video from '@/views/video/index.vue'
 import Notice from '@/views/notice/index.vue'
 import NewBookRecommend from '@/views/newBookRecommend/index.vue'
 import ReadStar from '@/views/readStar/index.vue'
@@ -38,15 +35,14 @@ export default {
     TodayBorrowed,
     LengingRanking,
     AccessToLibrary,
+    Video,
     ReadStar,
     Notice,
     NewBookRecommend
   },
   data() {
     return {
-      headerTitle: '24小时自助图书馆',
-      poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
-      src: 'https://qiniu.aiyxlib.com/1658104739000.mp4'
+      headerTitle: '24小时自助图书馆'
     }
   },
   created() {

src/views/lengingRanking/index.vue

@@ -13,7 +13,7 @@
         class="book-list-item"
       >
         <div class="book-img">
-          <img :src="item.cover" :onerror="defaultImg">
+          <img :src="coverUrl" :onerror="defaultImg">
         </div>
         <div class="book-info">
           <h4 class="title-item">{{ item.bookName }}</h4>
@@ -37,14 +37,15 @@
 </template>
 
 <script>
-import { FetchBorrowRank } from '@/api/library'
+import { FetchBorrowRank, FetchCoverByISBN } from '@/api/library'
 
 export default {
   name: 'LengingRanking',
   data() {
     return {
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
-      rankingList: []
+      rankingList: [],
+      coverUrl: null
     }
   },
   computed: {
@@ -55,7 +56,8 @@ export default {
       }
     }
   },
-  created() {},
+  created() {
+  },
   mounted() {
     this.getBorrowRank()
   },
@@ -64,10 +66,21 @@ export default {
       FetchBorrowRank().then((res) => {
         if (res.errCode === 0) {
           this.rankingList = res.data
+          res.data.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''))
+          })
         } else {
           this.$message.error('接口错误')
         }
       })
+    },
+    getCoverByISBN(isbn) {
+      const params = {
+        isbn: isbn
+      }
+      FetchCoverByISBN(params).then((res) => {
+        this.coverUrl = window.URL.createObjectURL(res)
+      })
     }
   }
 }

src/views/newBookRecommend/index.vue

@@ -7,7 +7,7 @@
         <swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
           <div class="book-list-item">
             <div class="book-img">
-              <img :src="item.cover" :onerror="defaultImg">
+              <img :src="coverUrl" :onerror="defaultImg">
             </div>
             <div class="book-info">
               <h4 class="title-item">{{ item.nbName }}</h4>
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { FetchNewBookRecommend } from '@/api/library'
+import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
 
@@ -47,6 +47,7 @@ export default {
     return {
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       rankingList: [],
+      coverUrl: null,
       swiperOptionThumbs: {
         direction: 'vertical',
         autoplay: true,
@@ -73,10 +74,21 @@ export default {
       FetchNewBookRecommend().then(res => {
         if (res.errCode === 0) {
           this.rankingList = res.data
+          res.data.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''))
+          })
         } else {
           this.$message.error('接口错误')
         }
       })
+    },
+    getCoverByISBN(isbn) {
+      const params = {
+        isbn: isbn
+      }
+      FetchCoverByISBN(params).then((res) => {
+        this.coverUrl = window.URL.createObjectURL(res)
+      })
     }
   }
 }

src/views/video/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="video-box">
+    <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
+      <source :src="src" type="video/mp4">
+    </video>
+  </div>
+</template>
+
+<script>
+import { FetchShowFileList } from '@/api/library'
+export default {
+  name: 'Video',
+  components: {
+  },
+  data() {
+    return {
+      poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
+      src: ''
+    }
+  },
+  created() {
+    this.getShowFile()
+  },
+  mounted() {
+  },
+  methods: {
+    getShowFile() {
+      const params = {
+        libcode: 'FTZN'
+      }
+      FetchShowFileList(params).then(res => {
+        if (res.errCode === 0) {
+          this.src = res.data[0].filePath
+        } else {
+          this.$message.error('接口错误')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>