inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
81c155 1 <template>
846bd0 2     <div>
859ec7 3         <a-collapse v-if="foldReply">
I 4             <a-collapse-panel key="replyPanel" header="回复">
5                 <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
6             </a-collapse-panel>
7         </a-collapse>
8         <div v-else>
054cde 9             <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
859ec7 10         </div>
I 11
ec97e0 12         <a-modal v-model="visible" :title="replyTaget" :footer="null"
c14e32 13             :bodyStyle="{'overflow':'overlay','height': '700px','scrollbarWidth': 'none'}">
I 14             <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()" :parseContent="parseContent"
15                 :visible="visible"></replyBox>
2f9d3c 16         </a-modal>
0b0125 17
00e46d 18         <div class="mySecret" style="max-height:250px ;" v-if="commentListData.length==0">
846bd0 19             <p>空空如也..</p>
I 20         </div>
2f9d3c 21         <div v-for="temp in commentListData" class="commentList">
I 22             <div class="commentGroup">
23                 <a-comment>
620f75 24                     <div slot="actions" key="comment-nested-reply-to" class="actionList">
I 25                         <span style="cursor: default;padding-right: 6px;" class="myTip">{{temp.createDate}} </span>
ec97e0 26                         <span @click="replyCall(temp)">
620f75 27                             <a-icon type="message" />
ec97e0 28                         </span>
620f75 29                     </div>
ec97e0 30
620f75 31                     <div slot="avatar" style="display: flex;">
I 32                         <div class="myTextDeal">
33                             <a :href="temp.visitorHomePage" target="_blank" v-if="temp.visitorHomePage!=''">
34                                 <a-tooltip placement="bottomLeft" :title="temp.visitorNickName">
35                                     {{temp.visitorNickName}}
36                                 </a-tooltip>
37                             </a>
38                             <a-tooltip placement="bottomLeft" :title="temp.visitorNickName" v-else>
39                                 {{temp.visitorNickName}}
40                             </a-tooltip>
41                         </div>
0b0125 42                         <div class="samllPadding">:</div>
fc0c10 43                     </div>
81c155 44
c14e32 45                     <p :id="temp.id" slot="content" v-html="parseContent(temp.commentContent)" class="myContent"></p>
2f9d3c 46
e33959 47                     <a-comment v-for="tempData in temp.replyList">
620f75 48                         <div slot="actions" key="comment-nested-reply-to" class="actionList">
I 49                             <span style="cursor: default;padding-right: 6px;" class="myTip">{{tempData.createDate}}
50                             </span>
51                             <span @click="replyCall(tempData)">
52                                 <a-icon type="message" />
53                             </span>
54                         </div>
55                         <div slot="avatar" style="display: flex;">
56                             <div class="myTextDeal">
57                                 <a :href="tempData.visitorHomePage" target="_blank" v-if="tempData.visitorHomePage!=''">
58                                     <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName">
59                                         {{tempData.visitorNickName}}
60                                     </a-tooltip>
61                                 </a>
62                                 <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName" v-else>
63                                     {{tempData.visitorNickName}}
64                                 </a-tooltip>
65                             </div>
0b0125 66                             <div class="samllPadding">:</div>
I 67                             <div class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;">
68                                 @<a :href="tempData.replyUserHomePage" target="_blank"
69                                     v-if="tempData.replyUserHomePage!=''">
70                                     <a-tooltip placement="bottomLeft" :title="tempData.replyUserName">
71                                         {{tempData.replyUserName}}
72                                     </a-tooltip>
73                                 </a>
74                                 <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else>
620f75 75                                     {{tempData.replyUserName}}
I 76                                 </a-tooltip>
0b0125 77                             </div>
2f9d3c 78                         </div>
c14e32 79                         <p :id="tempData.id" slot="content" v-html="parseContent(tempData.commentContent)"></p>
e33959 80                     </a-comment>
fc0c10 81                 </a-comment>
620f75 82
I 83                 <div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1">
84                     <span>
85                         <a-icon type="down" />展开
86                     </span>
87                 </div>
2f9d3c 88             </div>
I 89         </div>
ec97e0 90         <a-row type="flex" justify="center">
I 91             <div>
92                 <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
93                     :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
94             </div>
95         </a-row>
81c155 96     </div>
I 97 </template>
98
99
100 <script>
2f9d3c 101     import replyBox from "./box13-reply.vue"
ec97e0 102     import {
e33959 103         queryBlogCommentList,
I 104         queryBlogCommentSubList
ec97e0 105     } from '../../api/blogArticleComment.js'
c14e32 106     import OwOjsonConfig from '../../assets/OwO.json'
ec97e0 107
81c155 108     export default {
2f9d3c 109         components: {
c14e32 110             replyBox,
2f9d3c 111         },
859ec7 112         props: {
I 113             "foldReply": {
114                 default: false,
115             },
116         },
054cde 117         mounted() {
I 118             let packages = Object.keys(OwOjsonConfig)
119             for (let i = 0; i < packages.length; i++) {
120                 let opackage = OwOjsonConfig[packages[i]].container
121                 let type = OwOjsonConfig[packages[i]].type
122                 for (let j = 0; j < opackage.length; j++) {
123                     if (type == 'image') {
124                         this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css +
125                             `" src="` + opackage[j].icon + `">`
126                     }
127                 }
128             }
129         },
2f9d3c 130         methods: {
c14e32 131             parseContent(content) {
054cde 132                 let tempStrArray = content.match(this.re);
I 133
134                 if (tempStrArray == null) {
135                     return content;
136                 }
137
138                 for (var i = 0; i < tempStrArray.length; i++) {
139                     if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) {
140                         continue;
141                     }
142                     content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]])
143                 }
144
c14e32 145                 return content;
I 146             },
5dfef8 147             updateCommentList(articleId) {
ec97e0 148                 queryBlogCommentList({
I 149                     pageNo: this.page.current,
150                     pageSize: this.page.pageSize,
5dfef8 151                     articleId: articleId
ec97e0 152                 }).then((res) => {
I 153                     this.page.total = Number(res.data.total)
154                     this.page.pageSize = Number(res.data.size);
155                     this.commentListData = res.data.records;
156                 })
5dfef8 157             },
I 158             sendMsg() {
159                 this.visible = false;
160                 this.$message.info("列表刷新中..")
161                 setTimeout(() => {
162                     this.updateCommentList(this.$attrs.articleId);
163                 }, 1000);
164             },
165             onChange(current) {
166                 this.page.current = current;
167                 this.updateCommentList();
2f9d3c 168             },
e33959 169             loadMore(temp) {
I 170                 temp.isHasNext = 0;
171
172                 queryBlogCommentSubList({
173                     commentId: temp.id
174                 }).then((res) => {
175                     if (res.data.length == temp.replyList.length) {
176                         this.$message.info("没有更多了..")
177                     }
178                     temp.replyList = res.data;
179                 })
ec97e0 180             },
I 181             replyCall(obj, replyId) {
2f9d3c 182                 this.visible = true;
e33959 183                 this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c 184                 var msgInfo = {
ec97e0 185                     useName: obj.visitorNickName,
I 186                     userComment: obj.commentContent,
187                     parentId: obj.parentId == 0 ? obj.id : obj.parentId,
188                     replyId: obj.id
2f9d3c 189                 };
f60b31 190                 this.$nextTick(() => {
I 191                     this.$refs.replyBoxId.getMsgInfo(msgInfo);
192                 });
2f9d3c 193             }
I 194         },
81c155 195         data() {
I 196             return {
ec97e0 197                 page: {
I 198                     size: "small",
199                     total: 1,
620f75 200                     pageSize: 5,
ec97e0 201                     current: 1,
I 202                     defaultPageSize: 10
203                 },
204                 replyTaget: "",
f60b31 205                 visible: false,
620f75 206                 commentListData: [],
054cde 207                 myOwOConfig: {},
I 208                 re: new RegExp(":&\\(\\S*?\\)", "g"),
81c155 209             }
I 210         }
211     }
212 </script>
213
2f9d3c 214 <style lang="less">
054cde 215     img.biaoqing.quyin {
I 216         margin-bottom: 0.2rem;
217         min-height: 2.5rem;
c14e32 218         height: 2em;
b72b2e 219     }
I 220
054cde 221     .ant-comment img,
I 222     .myContent img {
223         margin-bottom: 0.2rem;
224         min-height: 2.5rem;
225         height: 2em;
226     }
227
228     .myContent {
229         * {
230             max-width: 100% !important;
231         }
232     }
233
0b0125 234     .samllPadding {
I 235         padding: 0px 3px 5px;
236     }
237
2f9d3c 238     .visitInfo {
I 239         user-select: none;
240     }
241
620f75 242     .myTextDeal {
I 243         // display: -webkit-container;
244         max-width: 80px;
245         -webkit-line-clamp: 1;
246         text-overflow: ellipsis;
247         overflow: hidden;
248         word-wrap: break-word;
249         white-space: nowrap;
250         word-break: break-all;
251     }
252
253     .loadMore {
254         margin: 10px;
255         display: flex;
256         justify-content: center;
257     }
258
259     .loadMore:hover {
260         background-color: #00000021
261     }
262
e33959 263     .ant-drawer-wrapper-body::-webkit-scrollbar,
I 264     .ant-modal-body::-webkit-scrollbar {
265         display: none;
620f75 266     }
I 267
268     .actionList {
269         display: flex;
270         justify-content: flex-end;
e33959 271     }
I 272
a23166 273
I 274
2f9d3c 275     .commentList {
ec97e0 276         a {
I 277             color: black;
278         }
2f9d3c 279
I 280         img {
281             user-select: none;
ec97e0 282         }
I 283
b72b2e 284         .ant-comment-nested {
I 285             margin-left: 20px;
286         }
287
ec97e0 288         .ant-comment-avatar {
I 289             cursor: default;
2f9d3c 290         }
I 291
292         .ant-comment-actions {
620f75 293
I 294             li {
295                 width: -webkit-fill-available;
296             }
297
298             margin-bottom: 0px;
2f9d3c 299         }
I 300
301         .ant-comment-content-author {
302             margin-bottom: 0px;
303         }
304
305         .ant-comment-inner {
306             padding: 10px 10px 0px;
0b0125 307             flex-direction: column;
2f9d3c 308         }
I 309
310         .commentGroup {
620f75 311             padding-bottom: 0px;
a23166 312             border-bottom: 1px solid #e5e9ef;
I 313         }
314
315         .commentGroup:hover {
316             background: #e5e9ef;
317             border-radius: 14px;
318             border-bottom:none
2f9d3c 319         }
I 320
321         .ant-comment-content-detail {
0b0125 322             padding-left: 50px;
I 323             padding-top: 5px;
324
2f9d3c 325             p {
I 326                 margin-bottom: 0px;
327             }
328         }
a23166 329
I 330
331
332
2f9d3c 333     }
81c155 334 </style>