| 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" /> | |
| 26 | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> | |
| 27 | </span> | |
| 28 | </div> | |
| 29 | <div class="post-on"> | |
| 30 | <span class="entry-date"> | |
| 31 | <a-icon type="calendar" /> | |
| 32 | <a href="#" rel="bookmark"> | |
| 33 | {{item.publishDate}} | |
| 34 | </a> | |
| 35 | </span> | |
| 36 | </div> | |
| 38a800 | 37 | </div> |
| I | 38 | </div> |
| 39 | </div> | |
| 40 | </div> | |
| 41 | </div> | |
| 42 | <a-row type="flex" justify="center"> | |
| 43 | <div> | |
| 44 | <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" | |
| 45 | :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" /> | |
| 46 | </div> | |
| 47 | </a-row> | |
| 48 | </div> | |
| 49 | ||
| 50 | </template> | |
| 51 | <script> | |
| 52 | import { | |
| 53 | api as viewerApi | |
| 54 | } from "v-viewer" | |
| 55 | ||
| 56 | import { | |
| 57 | platform | |
| 58 | } from '../../api/blogArticle.js' | |
| 59 | ||
| 60 | import myConstant from "../../config/myConstant.js" | |
| 80476f | 61 | import optionsConfig from "../../config/v-viewer-Config.js" |
| 38a800 | 62 | |
| I | 63 | export default { |
| 64 | data() { | |
| 65 | return { | |
| 80476f | 66 | options: optionsConfig, |
| 38a800 | 67 | page: { |
| I | 68 | size: "small", |
| 69 | total: 1, | |
| 70 | pageSize: 6, | |
| 71 | current: 1, | |
| 72 | defaultPageSize: 6 | |
| 73 | }, | |
| 74 | data: [], | |
| 80476f | 75 | img404: myConstant.img404, |
| 38a800 | 76 | } |
| I | 77 | }, |
| 78 | mounted() { | |
| 79 | this.onChange(this.page.current); | |
| 80 | }, | |
| 81 | methods: { | |
| 82 | onChange(current) { | |
| 83 | this.page.current = current; | |
| 84 | platform({ | |
| 85 | pageNo: current, | |
| 86 | pageSize: this.page.pageSize, | |
| 80476f | 87 | activeKey: this.$attrs.activeKey |
| 38a800 | 88 | }).then((res) => { |
| I | 89 | this.page.total = Number(res.data.total) |
| 90 | this.page.pageSize = Number(res.data.size); | |
| 91 | this.data = res.data.records; | |
| 92 | return res | |
| 93 | }) | |
| 94 | }, | |
| 95 | show(param) { | |
| 96 | viewerApi({ | |
| 97 | options: this.options, | |
| 98 | images: param | |
| 99 | }) | |
| 100 | } | |
| 101 | } | |
| 102 | ||
| 103 | } | |
| 104 | </script> | |
