1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
    <div>
        <div style="min-height: 500px;">
            <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="{name:'mdDetail',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" />
                                    {{item.articleTypeName}}
                                </span>
                            </div>
                            <div class="post-on">
                                <span class="entry-date">
                                    <a-icon type="calendar" />
                                    {{item.publishDate}}
                                </span>
                            </div>
                        </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"
    import optionsConfig from "../../config/v-viewer-Config.js"
 
    export default {
        data() {
            return {
                options: optionsConfig,
                page: {
                    size: "small",
                    total: 1,
                    pageSize: 6,
                    current: 1,
                    defaultPageSize: 6
                },
                data: [],
                img404: myConstant.img404,
            }
        },
        mounted() {
            this.onChange(this.page.current);
        },
        methods: {
            onChange(current) {
                this.page.current = current;
                platform({
                    pageNo: current,
                    pageSize: this.page.pageSize,
                    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>