inleft
2022-07-29 cb7779098c51922d0d7f26568475d350a9f1fad0
commit | author | age
81c155 1 <template>
846bd0 2     <div>
0b0125 3         <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
ec97e0 4         <a-modal v-model="visible" :title="replyTaget" :footer="null"
e33959 5             :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
5dfef8 6             <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
2f9d3c 7         </a-modal>
0b0125 8
5dfef8 9         <div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0">
846bd0 10             <p>空空如也..</p>
I 11         </div>
2f9d3c 12         <div v-for="temp in commentListData" class="commentList">
I 13             <div class="commentGroup">
14                 <a-comment>
620f75 15                     <div slot="actions" key="comment-nested-reply-to" class="actionList">
I 16                         <span style="cursor: default;padding-right: 6px;" class="myTip">{{temp.createDate}} </span>
ec97e0 17                         <span @click="replyCall(temp)">
620f75 18                             <a-icon type="message" />
ec97e0 19                         </span>
620f75 20                     </div>
ec97e0 21
620f75 22                     <div slot="avatar" style="display: flex;">
I 23                         <div class="myTextDeal">
24                             <a :href="temp.visitorHomePage" target="_blank" v-if="temp.visitorHomePage!=''">
25                                 <a-tooltip placement="bottomLeft" :title="temp.visitorNickName">
26                                     {{temp.visitorNickName}}
27                                 </a-tooltip>
28                             </a>
29                             <a-tooltip placement="bottomLeft" :title="temp.visitorNickName" v-else>
30                                 {{temp.visitorNickName}}
31                             </a-tooltip>
32                         </div>
0b0125 33                         <div class="samllPadding">:</div>
fc0c10 34                     </div>
81c155 35
e45377 36                     <p :id="temp.id" slot="content">{{temp.commentContent}}</p>
2f9d3c 37
e33959 38                     <a-comment v-for="tempData in temp.replyList">
620f75 39                         <div slot="actions" key="comment-nested-reply-to" class="actionList">
I 40                             <span style="cursor: default;padding-right: 6px;" class="myTip">{{tempData.createDate}}
41                             </span>
42                             <span @click="replyCall(tempData)">
43                                 <a-icon type="message" />
44                             </span>
45                         </div>
46                         <div slot="avatar" style="display: flex;">
47                             <div class="myTextDeal">
48                                 <a :href="tempData.visitorHomePage" target="_blank" v-if="tempData.visitorHomePage!=''">
49                                     <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName">
50                                         {{tempData.visitorNickName}}
51                                     </a-tooltip>
52                                 </a>
53                                 <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName" v-else>
54                                     {{tempData.visitorNickName}}
55                                 </a-tooltip>
56                             </div>
0b0125 57                             <div class="samllPadding">:</div>
I 58                             <div class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;">
59                                 @<a :href="tempData.replyUserHomePage" target="_blank"
60                                     v-if="tempData.replyUserHomePage!=''">
61                                     <a-tooltip placement="bottomLeft" :title="tempData.replyUserName">
62                                         {{tempData.replyUserName}}
63                                     </a-tooltip>
64                                 </a>
65                                 <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else>
620f75 66                                     {{tempData.replyUserName}}
I 67                                 </a-tooltip>
0b0125 68                             </div>
2f9d3c 69                         </div>
e45377 70                         <p :id="tempData.id" slot="content">{{tempData.commentContent}}</p>
e33959 71                     </a-comment>
fc0c10 72                 </a-comment>
620f75 73
I 74                 <div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1">
75                     <span>
76                         <a-icon type="down" />展开
77                     </span>
78                 </div>
2f9d3c 79             </div>
I 80         </div>
ec97e0 81         <a-row type="flex" justify="center">
I 82             <div>
83                 <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
84                     :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
85             </div>
86         </a-row>
81c155 87     </div>
I 88 </template>
89
90
91 <script>
2f9d3c 92     import replyBox from "./box13-reply.vue"
ec97e0 93
I 94     import {
e33959 95         queryBlogCommentList,
I 96         queryBlogCommentSubList
ec97e0 97     } from '../../api/blogArticleComment.js'
I 98
81c155 99     export default {
2f9d3c 100         components: {
I 101             replyBox
102         },
103         methods: {
5dfef8 104             updateCommentList(articleId) {
ec97e0 105                 queryBlogCommentList({
I 106                     pageNo: this.page.current,
107                     pageSize: this.page.pageSize,
5dfef8 108                     articleId: articleId
ec97e0 109                 }).then((res) => {
I 110                     this.page.total = Number(res.data.total)
111                     this.page.pageSize = Number(res.data.size);
112                     this.commentListData = res.data.records;
113                 })
5dfef8 114             },
I 115             sendMsg() {
116                 this.visible = false;
117                 this.$message.info("列表刷新中..")
118                 setTimeout(() => {
119                     this.updateCommentList(this.$attrs.articleId);
120                 }, 1000);
121             },
122             onChange(current) {
123                 this.page.current = current;
124                 this.updateCommentList();
2f9d3c 125             },
e33959 126             loadMore(temp) {
I 127                 temp.isHasNext = 0;
128
129                 queryBlogCommentSubList({
130                     commentId: temp.id
131                 }).then((res) => {
132                     if (res.data.length == temp.replyList.length) {
133                         this.$message.info("没有更多了..")
134                     }
135                     temp.replyList = res.data;
136                 })
ec97e0 137             },
I 138             replyCall(obj, replyId) {
2f9d3c 139                 this.visible = true;
e33959 140                 this.replyTaget = "回复Ta @" + obj.visitorNickName;
2f9d3c 141                 var msgInfo = {
ec97e0 142                     useName: obj.visitorNickName,
I 143                     userComment: obj.commentContent,
144                     parentId: obj.parentId == 0 ? obj.id : obj.parentId,
145                     replyId: obj.id
2f9d3c 146                 };
f60b31 147                 this.$nextTick(() => {
I 148                     this.$refs.replyBoxId.getMsgInfo(msgInfo);
149                 });
2f9d3c 150             }
I 151         },
81c155 152         data() {
I 153             return {
ec97e0 154                 page: {
I 155                     size: "small",
156                     total: 1,
620f75 157                     pageSize: 5,
ec97e0 158                     current: 1,
I 159                     defaultPageSize: 10
160                 },
161                 replyTaget: "",
f60b31 162                 visible: false,
620f75 163                 commentListData: [],
81c155 164             }
I 165         }
166     }
167 </script>
168
2f9d3c 169 <style lang="less">
0b0125 170     .samllPadding {
I 171         padding: 0px 3px 5px;
172     }
173
2f9d3c 174     .visitInfo {
I 175         user-select: none;
176     }
177
620f75 178     .myTextDeal {
I 179         // display: -webkit-container;
180         max-width: 80px;
181         -webkit-line-clamp: 1;
182         text-overflow: ellipsis;
183         overflow: hidden;
184         word-wrap: break-word;
185         white-space: nowrap;
186         word-break: break-all;
187     }
188
189     .loadMore {
190         margin: 10px;
191         display: flex;
192         justify-content: center;
193     }
194
195     .loadMore:hover {
196         background-color: #00000021
197     }
198
e33959 199     .ant-drawer-wrapper-body::-webkit-scrollbar,
I 200     .ant-modal-body::-webkit-scrollbar {
201         display: none;
620f75 202     }
I 203
204     .actionList {
205         display: flex;
206         justify-content: flex-end;
e33959 207     }
I 208
2f9d3c 209     .commentList {
ec97e0 210         a {
I 211             color: black;
212         }
2f9d3c 213
I 214         img {
215             user-select: none;
ec97e0 216         }
I 217
218         .ant-comment-avatar {
219             cursor: default;
2f9d3c 220         }
I 221
222         .ant-comment-actions {
620f75 223
I 224             li {
225                 width: -webkit-fill-available;
226             }
227
228             margin-bottom: 0px;
2f9d3c 229         }
I 230
231         .ant-comment-content-author {
232             margin-bottom: 0px;
233         }
234
235         .ant-comment-inner {
236             padding: 10px 10px 0px;
0b0125 237             flex-direction: column;
2f9d3c 238         }
I 239
240         .commentGroup {
241             border-top: 1px solid #e5e9ef;
620f75 242             margin-bottom: 5px;
I 243             padding-bottom: 0px;
2f9d3c 244         }
I 245
246         .ant-comment-content-detail {
0b0125 247             padding-left: 50px;
I 248             padding-top: 5px;
249
2f9d3c 250             p {
I 251                 margin-bottom: 0px;
252             }
253         }
254     }
81c155 255 </style>