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