<template>
|
<div class="myModal">
|
<a-modal v-drag-modal v-model="visible" title="天涯共此时.." :footer="null"
|
:bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
|
|
<div class="myComment" v-for="item in dataList" style="display: flex;padding: 0px 10px 10px 10px;">
|
<div style="min-width: 15%;">
|
<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>
|
</div>
|
<div>
|
<div style="padding-bottom: 10px;">
|
在
|
<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>
|
中留言
|
</div>
|
<div class="commentContent" v-html="parseContent(item.commentContent)"></div>
|
</div>
|
</div>
|
|
<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>
|
</a-modal>
|
</div>
|
|
</template>
|
|
<script>
|
import {
|
history
|
} from '../../api/blogArticleComment.js'
|
import OwOjsonConfig from '../../assets/OwO.json'
|
export default {
|
data() {
|
return {
|
dataList: [],
|
visible: false,
|
loading: false,
|
pageNo: 1,
|
pageSize: 3,
|
showButton: true,
|
refresh: false,
|
myOwOConfig: {},
|
re: new RegExp(":&\\(\\S*?\\)", "g"),
|
}
|
},
|
beforeMount() {},
|
mounted() {
|
this.loadMore()
|
|
let packages = Object.keys(OwOjsonConfig)
|
for (let i = 0; i < packages.length; i++) {
|
let opackage = OwOjsonConfig[packages[i]].container
|
let type = OwOjsonConfig[packages[i]].type
|
for (let j = 0; j < opackage.length; j++) {
|
if (type == 'image') {
|
this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css +
|
`" src="` + opackage[j].icon + `">`
|
}
|
}
|
}
|
},
|
methods: {
|
parseContent(content) {
|
let tempStrArray = content.match(this.re);
|
|
if (tempStrArray == null) {
|
return content;
|
}
|
|
for (var i = 0; i < tempStrArray.length; i++) {
|
if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) {
|
continue;
|
}
|
content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]])
|
}
|
|
return content;
|
},
|
loadMore() {
|
this.$message.info("拉取信息中..")
|
this.loadData()
|
},
|
reload() {
|
this.$message.info("重新拉取信息..")
|
this.pageNo = 1;
|
this.pageSize = 3;
|
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 lang="less">
|
.loadmore-list {
|
min-height: 350px;
|
}
|
|
.commentContent {
|
|
* {
|
max-width: 100% !important;
|
}
|
}
|
|
.myComment {
|
a {
|
color: black;
|
font-size: 15px;
|
}
|
|
img {
|
margin-bottom: 0.2rem;
|
min-height: 5rem;
|
height: 2em;
|
}
|
}
|
</style>
|
