inleft
2022-08-16 f07ea7f9ce1e213addb9df00aec053945e909d3f
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="天涯共此时.." :footer="null"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
            <!-- <template #actions>
                <a-button>
                    未读
                    <a-icon type="bell" />
                </a-button>
            </template> -->
            <a-list item-layout="horizontal" :data-source="dataList">
                <template slot="renderItem" slot-scope="item">
                    <a-list-item>
                        <a-list-item-meta :description="item.commentContent">
                            <template #avatar>
                                <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''">
                                    <a-tooltip placement="bottomLeft" :title="item.visitorNickName">
                                        <span class="myTip">{{item.visitorNickName}} :</span>
                                    </a-tooltip>
                                </a>
                                <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else>
                                    <span class="myTip">{{item.visitorNickName}} :</span>
                                </a-tooltip>
                            </template>
                            <template #title>
                                在
                                <router-link to="/comment" @click.native="handleCancel()" v-if="item.commentType==1">
                                    {{item.articleTitle}}
                                </router-link>
                                <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}"
                                    :title="item.articleTitle" @click.native="handleCancel()" v-else>
                                    {{item.articleTitle}}
                                </router-link>
                                中留言
                            </template>
 
                        </a-list-item-meta>
                        <!-- <template #extra>
                            {{item.createDate}}
                        </template> -->
                    </a-list-item>
                </template>
                <template #loadMore>
                    <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                        <a-button @click="loadMore" :disabled="refresh" v-if="showButton">
                            加载更多
                        </a-button>
                        <a-button disabled v-else>
                            更多记录就不展示啦..
                        </a-button>
                        <span style="margin: 20px;">
                            <a-button @click="reload" :disabled="refresh">
                                <a-icon type="redo" />
                            </a-button>
                        </span>
                    </div>
                </template>
            </a-list>
 
        </a-modal>
    </div>
 
</template>
 
<script>
    import {
        history
    } from '../../api/blogArticleComment.js'
 
    export default {
        data() {
            return {
                dataList: [],
                visible: false,
                loading: false,
                pageNo: 1,
                pageSize: 4,
                showButton: true,
                refresh: false,
            }
        },
        beforeMount() {},
        mounted() {
            this.loadMore()
        },
        methods: {
            loadMore() {
                this.$message.info("拉取信息中..")
                this.loadData()
            },
            reload() {
                this.$message.info("重新拉取信息..")
                this.pageNo = 1;
                this.pageSize = 4;
                this.showButton = true;
                this.dataList = [];
                setTimeout(() => {
                    this.loadData()
                }, 100);
            },
            loadData() {
                this.refresh = true;
                setTimeout(() => {
                    this.refresh = false;
                }, 1000);
 
                history({
                    pageNo: this.pageNo++,
                    pageSize: this.pageSize
                }).then((res) => {
                    if (res.code == 200) {
                        this.dataList = this.dataList.concat(res.data.records);
                        if (res.data.pages <= this.pageNo - 1) {
                            this.showButton = false
                        }
 
                    } else {
                        this.$notification.error({
                            message: '好像哪里不对劲..',
                            description: res.message,
                            placement: 'bottomRight'
                        });
                    }
                })
            },
            showModal() {
                this.visible = true;
            },
            handleCancel(e) {
                this.visible = false;
            },
 
        },
    }
</script>
<style scoped>
    .loadmore-list {
        min-height: 350px;
    }
 
    .ant-list-item-meta-avatar {
        width: 65px;
 
    }
 
 
    a {
        color: black;
    }
</style>