完成音频、视频、图片详情页面模板

src/pages/NewsViewDetail/NewsViewDetailAudio.vue

@@ -60,17 +60,17 @@ export default {
       this.playFileId = file.contentFileFileId
     },
     init () {
-            let vueSelf = this;
-            vueSelf.isLoading = true;
+      let vueSelf = this
+      vueSelf.isLoading = true
       axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
-                let data = resp.data;
-                vueSelf.title = data.newsContentTitle;
-                vueSelf.playFileId = data.fileList[0].contentFileFileId;
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.playFileId = data.fileList[0].contentFileFileId
         if (data.newsContentCoverList.length > 0 &&
           data.newsContentCoverList[0].contentCoverId) {
           vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
         }
-                vueSelf.fileList = data.fileList;
+        vueSelf.fileList = data.fileList
       }).catch(resp => {
         console.error(resp)
       }).finally(() => {
@@ -83,11 +83,11 @@ export default {
       return `${common.url}route/file/download/true/${this.playFileId}`
     },
     getPosterSrc () {
-            return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
-        },
+      return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-audio.jpeg`
+    }
   },
   mounted () {
-        this.init();
+    this.init()
   }
 }
 </script>
@@ -102,6 +102,7 @@ export default {
   align-items center
   font-family '宋体'
   background-color #3e3e3e
+
   .title
     font-size 20px
     color #fff
@@ -109,29 +110,35 @@ export default {
     line-height 35px
     text-align center
     padding 10px 0
+
   .player
     display flex
     justify-content center
+
     .video
       video
         width 100%
         height 100%
         background-color #000
         outline none
+
     .list
       background-color #343434
       display flex
       flex-direction column
+
       .play-title
         font-size 18px
         color #f9f6f6
         text-align center
         border-bottom 2px solid #797777
         padding 10px
+
       .play-buttons
         display flex
         flex-wrap wrap
         padding 5px 0 5px 5px
+
         a
           width 44px
           height 34px
@@ -140,13 +147,17 @@ export default {
           background-color #3a3a3a
           color #FFF
           margin 0 5px 5px 0
+
         a:hover
           background-color #A0333B
+
         .active
           background-color #A0333B
+
 @media (min-width: 1200px)
   .title
     width 1200px
+
   .player
     width 1200px
     flex-direction row
@@ -154,12 +165,15 @@ export default {
     .video
       width 800px
       height 600px
+
     .list
       width 300px
       min-height 600px
+
 @media (max-width: 1200px)
   .title
     width 600px
+
   .player
     width 600px
     flex-direction column
@@ -167,6 +181,7 @@ export default {
     .video
       width 100%
       height 450px
+
     .list
       width 100%
       min-height 150px

src/pages/NewsViewDetail/NewsViewDetailImage.vue

@@ -5,14 +5,16 @@
     <div class="container">
       <div class="title">{{ title }}</div>
       <div class="swiper-container-outer">
-                <swiper ref="swiperMain" class="swiper-outer" v-if="fileList.length > 0" :options="swiperOptions">
-                    <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
+        <swiper ref="swiperMain" class="swiper-outer" :options="swiperOptionsMain">
+          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="index">
             <img alt="暂无图片" :src="getSrc(file)">
           </swiper-slide>
           <div class="swiper-pagination" slot="pagination"></div>
+          <div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="onSwiperMainSlidePrev()"></div>
+          <div class="swiper-button-next swiper-button-white" slot="button-next" @click="onSwiperMainSlideNext()"></div>
         </swiper>
         <swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
-                    <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
+          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="'s_'+ index">
             <img alt="暂无图片" class="banner-img" :src="getSrc(file)">
           </swiper-slide>
         </swiper>
@@ -40,6 +42,7 @@ export default {
     Nav
   },
   data () {
+    let vueSelf = this
     return {
       isLoading: false,
       navs: [
@@ -52,47 +55,68 @@ export default {
         }
       ],
       title: '',
-            swiperOptions: {
+      swiperMain: null,
+      swiperOptionsMain: {
         pagination: '.swiper-pagination',
         paginationClickable: true,
-                loop: true,
-                loopedSlides: 8,
+        loop: false,
+        loopedSlides: 0,
         spaceBetween: 10,
         autoplay: 3000,
         navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev'
+        },
+        onSlideChangeStart (swiper) {
+          if (vueSelf.swiperThumbs) {
+            vueSelf.swiperThumbs.slideTo(swiper.activeIndex, 300, false)
+          }
         }
       },
+      swiperThumbs: null,
       swiperOptionThumbs: {
-                loop: true,
+        loop: false,
+        loopedSlides: 0,
         spaceBetween: 10,
         centeredSlides: true,
         slidesPerView: 4,
         touchRatio: 1,
         slideToClickedSlide: true,
+        watchSlidesVisibility: true,
+        onSlideChangeStart (swiper) {
+          if (vueSelf.swiperMain) {
+            vueSelf.swiperMain.slideTo(swiper.activeIndex, 300, false)
+          }
+        }
       },
       fileList: []
     }
   },
   methods: {
+    onSwiperMainSlidePrev () {
+      if (this.swiperMain) {
+        this.swiperMain.slidePrev()
+      }
+    },
+    onSwiperMainSlideNext () {
+      if (this.swiperMain) {
+        this.swiperMain.slideNext()
+      }
+    },
     getSrc (file) {
       return `${common.url}route/file/download/false/${file.contentFileFileId}`
     },
     init () {
-            let vueSelf = this;
-            vueSelf.isLoading = true;
+      let vueSelf = this
+      vueSelf.isLoading = true
       axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
-                let data = resp.data;
-                vueSelf.title = data.newsContentTitle;
-                vueSelf.fileList = data.fileList;
-                vueSelf.$nextTick(() => {
-                    const swiperMain = vueSelf.$refs.swiperMain.swiper
-                    const swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
-                    console.log(vueSelf.$refs)
-                    swiperMain.controller.control = swiperThumbs
-                    swiperThumbs.controller.control = swiperMain
-                })
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.fileList = data.fileList
+        setTimeout(() => {
+          vueSelf.swiperMain = vueSelf.$refs.swiperMain.swiper
+          vueSelf.swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
+        }, 1000)
       }).catch(resp => {
         console.error(resp)
       }).finally(() => {
@@ -103,8 +127,7 @@ export default {
   computed: {
   },
   mounted () {
-        
-        this.init();
+    this.init()
   }
 }
 </script>
@@ -119,6 +142,7 @@ export default {
   align-items center
   font-family '宋体'
   background-color #5b5b5b
+
   .title
     font-size 20px
     color #fff
@@ -126,45 +150,57 @@ export default {
     line-height 35px
     text-align center
     padding 10px 0
+
   .swiper-container-outer
     position relative
     box-sizing border-box
     background-color #3e3e3e
     padding 10px
+
     .swiper-outer
       width 1180px
       height 500px
       background-color #000
+
       .swiper-box
         cursor pointer
+
       img
         width 100%
         height 100%
         object-fit scale-down
+
     .swiper-thumbs
       height 200px
       box-sizing border-box
       margin-top 10px
+
       .swiper-box
         width 25%
         height 100%
         opacity 0.4
         cursor pointer
+
       .swiper-slide-active
         opacity 1
+
       img
         width 100%
         height 100%
         background-color #000
         object-fit scale-down
+
 @media (min-width: 1200px)
   .title
     width 1200px
+
   .swiper-container-outer
     width 1200px
+
 @media (max-width: 1200px)
   .title
     width 600px
+
   .swiper-container-outer
     width 600px
 </style>

src/pages/NewsViewDetail/NewsViewDetailVideo.vue

@@ -60,17 +60,17 @@ export default {
       this.playFileId = file.contentFileFileId
     },
     init () {
-            let vueSelf = this;
-            vueSelf.isLoading = true;
+      let vueSelf = this
+      vueSelf.isLoading = true
       axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
-                let data = resp.data;
-                vueSelf.title = data.newsContentTitle;
-                vueSelf.playFileId = data.fileList[0].contentFileFileId;
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.playFileId = data.fileList[0].contentFileFileId
         if (data.newsContentCoverList.length > 0 &&
           data.newsContentCoverList[0].contentCoverId) {
           vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
         }
-                vueSelf.fileList = data.fileList;
+        vueSelf.fileList = data.fileList
       }).catch(resp => {
         console.error(resp)
       }).finally(() => {
@@ -83,11 +83,11 @@ export default {
       return `${common.url}route/file/download/true/${this.playFileId}`
     },
     getPosterSrc () {
-            return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
-        },
+      return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-video.jpeg`
+    }
   },
   mounted () {
-        this.init();
+    this.init()
   }
 }
 </script>
@@ -102,6 +102,7 @@ export default {
   align-items center
   font-family '宋体'
   background-color #3e3e3e
+
   .title
     font-size 20px
     color #fff
@@ -109,29 +110,35 @@ export default {
     line-height 35px
     text-align center
     padding 10px 0
+
   .player
     display flex
     justify-content center
+
     .video
       video
         width 100%
         height 100%
         background-color #000
         outline none
+
     .list
       background-color #343434
       display flex
       flex-direction column
+
       .play-title
         font-size 18px
         color #f9f6f6
         text-align center
         border-bottom 2px solid #797777
         padding 10px
+
       .play-buttons
         display flex
         flex-wrap wrap
         padding 5px 0 5px 5px
+
         a
           width 44px
           height 34px
@@ -140,13 +147,17 @@ export default {
           background-color #3a3a3a
           color #FFF
           margin 0 5px 5px 0
+
         a:hover
           background-color #A0333B
+
         .active
           background-color #A0333B
+
 @media (min-width: 1200px)
   .title
     width 1200px
+
   .player
     width 1200px
     flex-direction row
@@ -154,12 +165,15 @@ export default {
     .video
       width 800px
       height 600px
+
     .list
       width 300px
       min-height 600px
+
 @media (max-width: 1200px)
   .title
     width 600px
+
   .player
     width 600px
     flex-direction column
@@ -167,6 +181,7 @@ export default {
     .video
       width 100%
       height 450px
+
     .list
       width 100%
       min-height 150px