inleft
2022-08-29 1b6f1e454fff0187d4d30dcf0d5819d4f57f1787
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>