| commit | author | age | ||
| 00e46d | 1 | <template> |
| I | 2 | <div class="myModal"> |
| 6461f5 | 3 | <a-modal v-drag-modal v-model="visible" title="天涯共此时.." :footer="null" |
| 00e46d | 4 | :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> |
| I | 5 | |
| 054cde | 6 | <div class="myComment" v-for="item in dataList" style="display: flex;padding: 0px 10px 10px 10px;"> |
| I | 7 | <div style="min-width: 15%;"> |
| 8 | <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''"> | |
| 9 | <a-tooltip placement="bottomLeft" :title="item.visitorNickName"> | |
| 10 | <span class="myTip">{{item.visitorNickName}} :</span> | |
| 11 | </a-tooltip> | |
| 12 | </a> | |
| 13 | <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else> | |
| 14 | <span class="myTip">{{item.visitorNickName}} :</span> | |
| 15 | </a-tooltip> | |
| 16 | </div> | |
| 17 | <div> | |
| 18 | <div style="padding-bottom: 10px;"> | |
| 19 | 在 | |
| 20 | <router-link to="/comment" @click.native="handleCancel()" v-if="item.commentType==1"> | |
| 21 | {{item.articleTitle}} | |
| 22 | </router-link> | |
| 23 | <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}" :title="item.articleTitle" | |
| 24 | @click.native="handleCancel()" v-else> | |
| 25 | {{item.articleTitle}} | |
| 26 | </router-link> | |
| 27 | 中留言 | |
| 00e46d | 28 | </div> |
| 054cde | 29 | <div class="commentContent" v-html="parseContent(item.commentContent)"></div> |
| I | 30 | </div> |
| 31 | </div> | |
| 00e46d | 32 | |
| 054cde | 33 | <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"> |
| I | 34 | <a-button @click="loadMore" :disabled="refresh" v-if="showButton"> |
| 35 | 加载更多 | |
| 36 | </a-button> | |
| 37 | <a-button disabled v-else> | |
| 38 | 更多记录就不展示啦.. | |
| 39 | </a-button> | |
| 40 | <span style="margin: 20px;"> | |
| 41 | <a-button @click="reload" :disabled="refresh"> | |
| 42 | <a-icon type="redo" /> | |
| 43 | </a-button> | |
| 44 | </span> | |
| 45 | </div> | |
| 00e46d | 46 | </a-modal> |
| I | 47 | </div> |
| 48 | ||
| 49 | </template> | |
| 50 | ||
| 51 | <script> | |
| 52 | import { | |
| 53 | history | |
| 54 | } from '../../api/blogArticleComment.js' | |
| 054cde | 55 | import OwOjsonConfig from '../../assets/OwO.json' |
| 00e46d | 56 | export default { |
| I | 57 | data() { |
| 58 | return { | |
| 59 | dataList: [], | |
| 60 | visible: false, | |
| 61 | loading: false, | |
| 62 | pageNo: 1, | |
| 054cde | 63 | pageSize: 3, |
| 00e46d | 64 | showButton: true, |
| I | 65 | refresh: false, |
| 054cde | 66 | myOwOConfig: {}, |
| I | 67 | re: new RegExp(":&\\(\\S*?\\)", "g"), |
| 00e46d | 68 | } |
| I | 69 | }, |
| 70 | beforeMount() {}, | |
| 71 | mounted() { | |
| 0dd41b | 72 | this.loadMore() |
| 054cde | 73 | |
| I | 74 | let packages = Object.keys(OwOjsonConfig) |
| 75 | for (let i = 0; i < packages.length; i++) { | |
| 76 | let opackage = OwOjsonConfig[packages[i]].container | |
| 77 | let type = OwOjsonConfig[packages[i]].type | |
| 78 | for (let j = 0; j < opackage.length; j++) { | |
| 79 | if (type == 'image') { | |
| 80 | this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css + | |
| 81 | `" src="` + opackage[j].icon + `">` | |
| 82 | } | |
| 83 | } | |
| 84 | } | |
| 00e46d | 85 | }, |
| I | 86 | methods: { |
| 054cde | 87 | parseContent(content) { |
| I | 88 | let tempStrArray = content.match(this.re); |
| 89 | ||
| 90 | if (tempStrArray == null) { | |
| 91 | return content; | |
| 92 | } | |
| 93 | ||
| 94 | for (var i = 0; i < tempStrArray.length; i++) { | |
| 95 | if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) { | |
| 96 | continue; | |
| 97 | } | |
| 98 | content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]]) | |
| 99 | } | |
| 100 | ||
| 101 | return content; | |
| 102 | }, | |
| 00e46d | 103 | loadMore() { |
| I | 104 | this.$message.info("拉取信息中..") |
| 105 | this.loadData() | |
| 106 | }, | |
| 2795be | 107 | reload() { |
| I | 108 | this.$message.info("重新拉取信息..") |
| 109 | this.pageNo = 1; | |
| 054cde | 110 | this.pageSize = 3; |
| 2795be | 111 | this.showButton = true; |
| I | 112 | this.dataList = []; |
| 113 | setTimeout(() => { | |
| 114 | this.loadData() | |
| 115 | }, 100); | |
| 116 | }, | |
| 00e46d | 117 | loadData() { |
| I | 118 | this.refresh = true; |
| 119 | setTimeout(() => { | |
| 120 | this.refresh = false; | |
| 121 | }, 1000); | |
| 122 | ||
| 123 | history({ | |
| 124 | pageNo: this.pageNo++, | |
| 125 | pageSize: this.pageSize | |
| 126 | }).then((res) => { | |
| 127 | if (res.code == 200) { | |
| 128 | this.dataList = this.dataList.concat(res.data.records); | |
| 129 | if (res.data.pages <= this.pageNo - 1) { | |
| 130 | this.showButton = false | |
| 131 | } | |
| 132 | ||
| 133 | } else { | |
| 134 | this.$notification.error({ | |
| 135 | message: '好像哪里不对劲..', | |
| 136 | description: res.message, | |
| 137 | placement: 'bottomRight' | |
| 138 | }); | |
| 139 | } | |
| 140 | }) | |
| 141 | }, | |
| 142 | showModal() { | |
| 143 | this.visible = true; | |
| 144 | }, | |
| 145 | handleCancel(e) { | |
| 146 | this.visible = false; | |
| 147 | }, | |
| 148 | ||
| 149 | }, | |
| 150 | } | |
| 151 | </script> | |
| 054cde | 152 | <style lang="less"> |
| 00e46d | 153 | .loadmore-list { |
| I | 154 | min-height: 350px; |
| 155 | } | |
| 156 | ||
| 054cde | 157 | .commentContent { |
| 00e46d | 158 | |
| 054cde | 159 | * { |
| I | 160 | max-width: 100% !important; |
| 161 | } | |
| a23166 | 162 | |
| 00e46d | 163 | } |
| I | 164 | |
| 054cde | 165 | .myComment { |
| I | 166 | a { |
| 167 | color: black; | |
| 168 | font-size: 15px; | |
| 169 | } | |
| 00e46d | 170 | |
| 054cde | 171 | img { |
| I | 172 | margin-bottom: 0.2rem; |
| 937681 | 173 | height: 2rem; |
| 054cde | 174 | } |
| 00e46d | 175 | } |
| a23166 | 176 | |
| I | 177 | .myComment:hover { |
| 178 | // background: #d0d7dc; | |
| 179 | background: #f5f8fa; | |
| 180 | border-radius: 14px; | |
| 181 | } | |
| 00e46d | 182 | </style> |
