| commit | author | age | ||
| 38a800 | 1 | <template> |
| I | 2 | <div> |
| 3 | <div class="gridClass"> | |
| 4 | <div class="entry-preview" v-for="item in data"> | |
| 5 | <div class="thumbnail_box"> | |
| 6 | <div class="thumbnail" @click="show(item.pictureUrlList)"> | |
| 7 | <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404"> | |
| 8 | </div> | |
| 9 | </div> | |
| 10 | <div class="entry-post"> | |
| 11 | <div class="entry-header"> | |
| 12 | <h5 class="entry-title"> | |
| 13 | <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title"> | |
| 14 | {{item.title}} | |
| 15 | </router-link> | |
| 16 | </h5> | |
| 17 | <div class="post_content"> | |
| 18 | {{item.introduce}} | |
| 19 | </div> | |
| 20 | </div> | |
| 21 | <div class="entry-meta"> | |
| 22 | <div class="post-categories"> | |
| 23 | <span class="tag vcard"> | |
| 24 | <a-icon type="customer-service" /> | |
| 25 | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> | |
| 26 | </span> | |
| 27 | </div> | |
| 28 | <div class="post-on"> | |
| 29 | <span class="entry-date"> | |
| 30 | <a-icon type="calendar" /> | |
| 31 | <a href="#" rel="bookmark"> | |
| 32 | {{item.publishDate}} | |
| 33 | </a> | |
| 34 | </span> | |
| 35 | </div> | |
| 36 | </div> | |
| 37 | </div> | |
| 38 | </div> | |
| 39 | </div> | |
| 40 | <a-row type="flex" justify="center"> | |
| 41 | <div> | |
| 42 | <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" | |
| 43 | :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" /> | |
| 44 | </div> | |
| 45 | </a-row> | |
| 46 | </div> | |
| 47 | ||
| 48 | </template> | |
| 49 | <script> | |
| 50 | import { | |
| 51 | api as viewerApi | |
| 52 | } from "v-viewer" | |
| 53 | ||
| 54 | import { | |
| 55 | platform | |
| 56 | } from '../../api/blogArticle.js' | |
| 57 | ||
| 58 | import myConstant from "../../config/myConstant.js" | |
| 59 | ||
| 60 | export default { | |
| 61 | data() { | |
| 62 | return { | |
| 63 | options: { | |
| 64 | 'inline': false, // 是否启用inline模式 | |
| 65 | 'button': true, // 是否显示右上角关闭按钮 | |
| 66 | 'navbar': true, // 是否显示缩略图底部导航栏 | |
| 67 | 'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸 | |
| 68 | 'toolbar': false, // 是否显示工具栏 | |
| 69 | 'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true | |
| 70 | 'fullscreen': true, // 播放时是否全屏，默认true | |
| 71 | 'loading': true, // 加载图片时是否显示loading图标，默认true | |
| 72 | 'loop': true, // 是否可以循环查看图片，默认true | |
| 73 | 'movable': true, // 是否可以拖得图片，默认true | |
| 74 | 'zoomable': true, // 是否可以缩放图片，默认true | |
| 75 | 'rotatable': true, // 是否可以旋转图片，默认true | |
| 76 | 'scalable': true, // 是否可以翻转图片，默认true | |
| 77 | 'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true | |
| 78 | 'transition': true, // 使用 CSS3 过度，默认true | |
| 79 | 'keyboard': true, // 是否支持键盘，默认true | |
| 80 | 'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1 | |
| 81 | 'minZoomRatio': 0.3, // 最小缩放比例，默认0.01 | |
| 82 | 'maxZoomRatio': 2.0, // 最大缩放比例，默认100 | |
| 83 | // 'url': 'data-source' // 设置大图片的 url | |
| 84 | }, | |
| 85 | page: { | |
| 86 | size: "small", | |
| 87 | total: 1, | |
| 88 | pageSize: 6, | |
| 89 | current: 1, | |
| 90 | defaultPageSize: 6 | |
| 91 | }, | |
| 92 | data: [], | |
| 93 | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", | |
| 94 | } | |
| 95 | }, | |
| 96 | mounted() { | |
| 97 | this.onChange(this.page.current); | |
| 98 | }, | |
| 99 | methods: { | |
| 100 | onChange(current) { | |
| 101 | this.page.current = current; | |
| 102 | platform({ | |
| 103 | pageNo: current, | |
| 104 | pageSize: this.page.pageSize, | |
| 105 | fileType: 9, | |
| 106 | typeId: 99, | |
| 107 | activeKey:this.$attrs.activeKey | |
| 108 | }).then((res) => { | |
| 109 | this.page.total = Number(res.data.total) | |
| 110 | this.page.pageSize = Number(res.data.size); | |
| 111 | this.data = res.data.records; | |
| 112 | return res | |
| 113 | }) | |
| 114 | }, | |
| 115 | show(param) { | |
| 116 | viewerApi({ | |
| 117 | options: this.options, | |
| 118 | images: param | |
| 119 | }) | |
| 120 | } | |
| 121 | } | |
| 122 | ||
| 123 | } | |
| 124 | </script> | |
