| commit | author | age | ||
| 38a800 | 1 | <template> |
| I | 2 | <div> |
| 80476f | 3 | <div style="min-height: 500px;"> |
| I | 4 | <div class="gridClass"> |
| 5 | <div class="entry-preview" v-for="item in data"> | |
| 6 | <div class="thumbnail_box"> | |
| 7 | <div class="thumbnail" @click="show(item.pictureUrlList)"> | |
| 8 | <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404"> | |
| 38a800 | 9 | </div> |
| I | 10 | </div> |
| 80476f | 11 | <div class="entry-post"> |
| I | 12 | <div class="entry-header"> |
| 13 | <h5 class="entry-title"> | |
| c6793e | 14 | <router-link :to="{name:'mdDetail',query:{id:item.id}}" :title="item.title"> |
| 80476f | 15 | {{item.title}} |
| I | 16 | </router-link> |
| 17 | </h5> | |
| 18 | <div class="post_content"> | |
| 19 | {{item.introduce}} | |
| 20 | </div> | |
| 38a800 | 21 | </div> |
| 80476f | 22 | <div class="entry-meta"> |
| I | 23 | <div class="post-categories"> |
| 24 | <span class="tag vcard"> | |
| 25 | <a-icon type="customer-service" /> | |
| fa1bd9 | 26 | {{item.articleTypeName}} |
| 80476f | 27 | </span> |
| I | 28 | </div> |
| 29 | <div class="post-on"> | |
| 30 | <span class="entry-date"> | |
| 31 | <a-icon type="calendar" /> | |
| fa1bd9 | 32 | {{item.publishDate}} |
| 80476f | 33 | </span> |
| I | 34 | </div> |
| 38a800 | 35 | </div> |
| I | 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" | |
| 80476f | 59 | import optionsConfig from "../../config/v-viewer-Config.js" |
| 38a800 | 60 | |
| I | 61 | export default { |
| 62 | data() { | |
| 63 | return { | |
| 80476f | 64 | options: optionsConfig, |
| 38a800 | 65 | page: { |
| I | 66 | size: "small", |
| 67 | total: 1, | |
| 68 | pageSize: 6, | |
| 69 | current: 1, | |
| 70 | defaultPageSize: 6 | |
| 71 | }, | |
| 72 | data: [], | |
| 80476f | 73 | img404: myConstant.img404, |
| 38a800 | 74 | } |
| I | 75 | }, |
| 76 | mounted() { | |
| 77 | this.onChange(this.page.current); | |
| 78 | }, | |
| 79 | methods: { | |
| 80 | onChange(current) { | |
| 81 | this.page.current = current; | |
| 82 | platform({ | |
| 83 | pageNo: current, | |
| 84 | pageSize: this.page.pageSize, | |
| 80476f | 85 | activeKey: this.$attrs.activeKey |
| 38a800 | 86 | }).then((res) => { |
| I | 87 | this.page.total = Number(res.data.total) |
| 88 | this.page.pageSize = Number(res.data.size); | |
| 89 | this.data = res.data.records; | |
| 90 | return res | |
| 91 | }) | |
| 92 | }, | |
| 93 | show(param) { | |
| 94 | viewerApi({ | |
| 95 | options: this.options, | |
| 96 | images: param | |
| 97 | }) | |
| 98 | } | |
| 99 | } | |
| 100 | ||
| 101 | } | |
| 102 | </script> | |
