视频/封面api

2 years ago · 1cd7391bde
6 changed files with 105 additions and 24 deletions
--- a/src/api/library.js
+++ b/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
 }
--- a/src/views/index.vue
+++ b/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() {
--- a/src/views/indexSelfService.vue
+++ b/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() {
--- a/src/views/lengingRanking/index.vue
+++ b/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)
+      })
    }
  }
 }
--- a/src/views/newBookRecommend/index.vue
+++ b/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)
+      })
    }
  }
 }
--- a/src/views/video/index.vue
+++ b/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>