<template>
|
<div>
|
<div class="gridClass">
|
<div class="entry-preview" v-for="item in data">
|
<div class="thumbnail_box">
|
<div class="thumbnail" @click="show(item.pictureUrlList)">
|
<img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404">
|
</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>
|
</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>
|
</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-row type="flex" justify="center">
|
<div>
|
<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
|
:defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
|
</div>
|
</a-row>
|
</div>
|
|
</template>
|
<script>
|
import {
|
api as viewerApi
|
} from "v-viewer"
|
|
import {
|
platform
|
} from '../../api/blogArticle.js'
|
|
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.1, // 鼠标滚动时的缩放比例，默认0.1
|
'minZoomRatio': 0.3, // 最小缩放比例，默认0.01
|
'maxZoomRatio': 2.0, // 最大缩放比例，默认100
|
// 'url': 'data-source' // 设置大图片的 url
|
},
|
page: {
|
size: "small",
|
total: 1,
|
pageSize: 6,
|
current: 1,
|
defaultPageSize: 6
|
},
|
data: [],
|
img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
|
}
|
},
|
mounted() {
|
this.onChange(this.page.current);
|
},
|
methods: {
|
onChange(current) {
|
this.page.current = current;
|
platform({
|
pageNo: current,
|
pageSize: this.page.pageSize,
|
fileType: 9,
|
typeId: 99,
|
activeKey:this.$attrs.activeKey
|
}).then((res) => {
|
this.page.total = Number(res.data.total)
|
this.page.pageSize = Number(res.data.size);
|
this.data = res.data.records;
|
return res
|
})
|
},
|
show(param) {
|
viewerApi({
|
options: this.options,
|
images: param
|
})
|
}
|
}
|
|
}
|
</script>
|
