<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>
|
