src/components/group/platformGroup.vue

@@ -1,208 +1,70 @@
<template>

   <div class="gridClass">
      <div class="entry-preview" v-for="item in data">
         <div class="thumbnail_box">

            <div class="thumbnail" @click="show(item.coverFileURL)">
               <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy">
            </div>

         </div>
         <div class="entry-post">
            <div class="entry-header">
               <h5 class="entry-title">
                  <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                     {{item.title}}
                  </router-link>
                  <!-- {{item.title}} -->
               </h5>
               <div class="post_content">
                  {{item.introduce}}
               </div>
            </div>
            <div class="entry-meta">
               <div class="post-categories">
                  <span class="tag vcard">
                     <a-icon type="customer-service" />
                     <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                  </span>
                  <!-- <span class="tag-list">
                           <a href="#" rel="tag">影评</a>
                           <a href="#" rel="tag">电影</a>
                           <a href="#" rel="tag">蜘蛛侠</a>
                        </span> -->
               </div>
               <div class="post-on">
                  <span class="entry-date">
                     <a-icon type="calendar" />
                     <a href="#" rel="bookmark">
                        {{item.publishDate}}
                     </a>
                  </span>
               </div>
            </div>
         </div>

      </div>

   </div>
	
   <a-tabs :defaultActiveKey="activeKey" @change="changeKey"
      :tabBarStyle="{'display': 'flex','justify-content': 'center'}">
      <a-tab-pane :key="keyType.type_1" tab="片刻">
         <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
      </a-tab-pane>
      <a-tab-pane :key="keyType.type_2" tab="流影">
         <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
      </a-tab-pane>
      <a-tab-pane :key="keyType.type_3" tab="谱库">
         <photoShow :activeKey="activeKey"></photoShow>
      </a-tab-pane>
   </a-tabs>

</template>

<script>
   import {
      api as viewerApi
   } from "v-viewer"
   import videoList from "../mini/box14-video.vue"
   import photoShow from "../mini/box18-photoShow.vue"
   import myConstant from "../../config/myConstant.js"

   export default {
      data() {
         return {
            options: {
               'inline': false, // 是否启用inline模式
               'button': true, // 是否显示右上角关闭按钮
               'navbar': true, // 是否显示缩略图底部导航栏
               'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
               'toolbar': false, // 是否显示工具栏
               'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
               'fullscreen': true, // 播放时是否全屏，默认true
               'loading': true, // 加载图片时是否显示loading图标，默认true
               'loop': true, // 是否可以循环查看图片，默认true
               'movable': true, // 是否可以拖得图片，默认true
               'zoomable': true, // 是否可以缩放图片，默认true
               'rotatable': true, // 是否可以旋转图片，默认true
               'scalable': true, // 是否可以翻转图片，默认true
               'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
               'transition': true, // 使用 CSS3 过度，默认true
               'keyboard': true, // 是否支持键盘，默认true
               'zoomRatio': 0.2, // 鼠标滚动时的缩放比例，默认0.1
               'minZoomRatio': 0.5, // 最小缩放比例，默认0.01
               'maxZoomRatio': 2.0, // 最大缩放比例，默认100
               // 'url': 'data-source' // 设置大图片的 url
            },
            data: [{
               "id": "1560643564944228354",
               "title": "把他们全部驱逐出去,一只不剩!",
               "articleFileURL": null,
               "coverFileURL": "http://t.inleft.com/blog//cover/1560643556949884929.jpg",
               "articleFileType": 3,
               "articleTypeId": "10",
               "articleTypeName": "前方高能",
               "introduce": "出处：进击的巨人第一季第25集\r\n时间点：10分左右",
               "lastEditorDate": null,
               "publishDate": "2022-08-19",
               "updateDate": "2022-08-19",
               "isTop": 0,
               "authStatus": 1,
               "isAllowedComment": 1,
               "isAnyUpdate": 0,
               "jumpURL": null,
               "previousRecord": null,
               "nextRecord": null
            }, {
               "id": "1560637549020446722",
               "title": "名场面之兵长砍猴",
               "articleFileURL": null,
               "coverFileURL": "http://t.inleft.com/blog//cover/1560637517290536962.jpg",
               "articleFileType": 3,
               "articleTypeId": "10",
               "articleTypeName": "前方高能",
               "introduce": "出处：进击的巨人第三季第17集\r\n时间点：5分左右",
               "lastEditorDate": null,
               "publishDate": "2022-08-19",
               "updateDate": "2022-08-19",
               "isTop": 0,
               "authStatus": 1,
               "isAllowedComment": 1,
               "isAnyUpdate": 0,
               "jumpURL": null,
               "previousRecord": null,
               "nextRecord": null
            }, {
               "id": "1560251661752991748",
               "title": "艾尔文团长的冲锋",
               "articleFileURL": null,
               "coverFileURL": "http://t.inleft.com/blog//cover/1560331526686638082.jpg",
               "articleFileType": 3,
               "articleTypeId": "10",
               "articleTypeName": "前方高能",
               "introduce": "出处：进击的巨人第三季第16集\r\n时间点：21分左右",
               "lastEditorDate": null,
               "publishDate": "2022-08-18",
               "updateDate": "2022-08-18",
               "isTop": 0,
               "authStatus": 1,
               "isAllowedComment": 1,
               "isAnyUpdate": 0,
               "jumpURL": null,
               "previousRecord": null,
               "nextRecord": null
            }, {
               "id": "1560251661752991747",
               "title": "我今日就要带她走,我睇下边个敢拦胆我!",
               "articleFileURL": null,
               "coverFileURL": "http://t.inleft.com/blog//cover/1560332612973625346.jpg",
               "articleFileType": 3,
               "articleTypeId": "10",
               "articleTypeName": "前方高能",
               "introduce": "出处：刺客伍六七第一季第9集\r\n时间点：13分左右",
               "lastEditorDate": null,
               "publishDate": "2022-08-18",
               "updateDate": "2022-08-18",
               "isTop": 0,
               "authStatus": 1,
               "isAllowedComment": 1,
               "isAnyUpdate": 0,
               "jumpURL": null,
               "previousRecord": null,
               "nextRecord": null
            }, {
               "id": "1560251661752991746",
               "title": "Death Note",
               "articleFileURL": null,
               "coverFileURL": "http://t.inleft.com/blog//cover/1560251636746551298.jpg",
               "articleFileType": 3,
               "articleTypeId": "10",
               "articleTypeName": "前方高能",
               "introduce": "出处：Death Note7集\r\n时间点：12分左右",
               "lastEditorDate": null,
               "publishDate": "2022-08-18",
               "updateDate": "2022-08-18",
               "isTop": 0,
               "authStatus": 1,
               "isAllowedComment": 1,
               "isAnyUpdate": 0,
               "jumpURL": null,
               "previousRecord": null,
               "nextRecord": null
            }, {
               "id": "1560239309611597825",
               "title": "罪恶王冠·王的黑化",
               "articleFileURL": null,
               "coverFileURL": "http://t.inleft.com/blog//cover/1560241671403208705.jpg",
               "articleFileType": 3,
               "articleTypeId": "10",
               "articleTypeName": "前方高能",
               "introduce": "出处：罪恶王冠15集\r\n时间点：16分左右\r\n",
               "lastEditorDate": null,
               "publishDate": "2022-08-18",
               "updateDate": "2022-08-18",
               "isTop": 0,
               "authStatus": 1,
               "isAllowedComment": 1,
               "isAnyUpdate": 0,
               "jumpURL": null,
               "previousRecord": null,
               "nextRecord": null
            }]
         }
      components: {
         videoList,
         photoShow,
      },
      created() {
         this.getActiveKey()
      },
      watch: {
         '$route'(to, from) {
            if ("platform" === to.name) {
               this.getActiveKey()
            }
         },
      },
      methods: {
         show(param) {
            console.log(111);
            viewerApi({
               options: this.options,
               image: param
            })
         getActiveKey() {
            if (this.$route.query.activeKey != "" && this.$route.query.activeKey != undefined) {
               this.activeKey = this.$route.query.activeKey;
            } else {
               //随机三选一
               var random = Math.floor(Math.random() * 10);
               this.activeKey = random >= 8 ?
                  this.keyType.type_3 : (random <= 3 ? this.keyType.type_2 : this.keyType.type_1)
						
               this.$router.replace({query:{activeKey:this.activeKey}})
            }
         },
         changeKey(key) {
            this.activeKey = key
            this.$router.replace({query:{activeKey:this.activeKey}})
         }
      }
      },
      data() {
         return {
            activeKey: "moment",
            keyType: myConstant.activeKeyType
         }
      },

   }
</script>

<style lang="less">
   .ant-tabs-tab {
      user-select: none;
   }
</style>