| commit | author | age | ||
| 81c155 | 1 | <template> |
| I | 2 | <div class="myFriend"> |
| b1336e | 3 | <replyBox ref="commentBoxId"></replyBox> |
| 2f9d3c | 4 | <a-modal v-model="visible" title="回复Ta @xx" on-ok="handleOk" |
| I | 5 | :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> |
| b1336e | 6 | <!-- <template slot="footer"> |
| I | 7 | <a-button key="reset" @click="reset" type="danger"> |
| 2f9d3c | 8 | 擦掉重来 |
| I | 9 | </a-button> |
| 10 | <a-button key="back" @click="handleCancel"> | |
| 11 | 歇会 | |
| 12 | </a-button> | |
| 13 | <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> | |
| 14 | 完事<span style="font-size: 10px;">儿</span>.. | |
| b1336e | 15 | </a-button> |
| I | 16 | </template> --> |
| 2f9d3c | 17 | <replyBox ref="replyBoxId"></replyBox> |
| I | 18 | </a-modal> |
| fc0c10 | 19 | |
| 2f9d3c | 20 | <div v-for="temp in commentListData" class="commentList"> |
| 81c155 | 21 | |
| 2f9d3c | 22 | <div class="commentGroup"> |
| I | 23 | <a-comment> |
| 24 | <span slot="actions" key="comment-nested-reply-to" @click="replyCall"> | |
| 25 | <a-icon type="edit" />回复 | |
| 26 | </span> | |
| 27 | ||
| 28 | <div slot="avatar"> | |
| 29 | {{temp.userName}} : | |
| fc0c10 | 30 | </div> |
| 81c155 | 31 | |
| 2f9d3c | 32 | <p slot="content">{{temp.userComment}}</p> |
| I | 33 | |
| 34 | <a-comment v-for="tempData in temp.replyList.listData"> | |
| 35 | <span slot="actions" key="comment-nested-reply-to" @click="replyCall"> | |
| 36 | <a-icon type="edit" />回复 | |
| 37 | </span> | |
| 38 | <div slot="avatar"> | |
| 39 | {{tempData.userName}} @ {{tempData.replyUserName}} : | |
| 40 | </div> | |
| 41 | <p slot="content">{{tempData.userComment}}</p> | |
| 42 | </a-comment> | |
| 43 | ||
| 44 | ||
| 45 | <div class="loadMore" @click="loadMore()"> | |
| 46 | <a-icon type="down" /><span>更多...</span> | |
| 47 | </div> | |
| fc0c10 | 48 | </a-comment> |
| 2f9d3c | 49 | </div> |
| I | 50 | </div> |
| 81c155 | 51 | </div> |
| I | 52 | </template> |
| 53 | ||
| 54 | ||
| 55 | <script> | |
| 2f9d3c | 56 | import replyBox from "./box13-reply.vue" |
| 81c155 | 57 | export default { |
| 2f9d3c | 58 | components: { |
| I | 59 | replyBox |
| 60 | }, | |
| 61 | methods: { | |
| b1336e | 62 | handleOk(e) {}, |
| 2f9d3c | 63 | loadMore() { |
| I | 64 | this.commentListData[0].replyList.listData = this.commentListData[0].replyList.listData.concat(this |
| 65 | .commentListData[0].replyList.listData) | |
| 66 | }, | |
| 67 | replyCall() { | |
| 68 | this.visible = true; | |
| 69 | var msgInfo = { | |
| 70 | useName: "22", | |
| 71 | userComment: "11", | |
| 72 | }; | |
| 73 | this.$refs.replyBoxId.getMsgInfo(msgInfo); | |
| 74 | } | |
| 75 | }, | |
| 81c155 | 76 | data() { |
| I | 77 | return { |
| b1336e | 78 | visible: true, |
| 2f9d3c | 79 | commentListData: [{ |
| I | 80 | userName: "bimo", |
| 81 | userComment: "1+1=2?", | |
| 82 | commentTime: "2022-02-22 22:22:22", | |
| 83 | id: "1", | |
| 84 | parentId: null, | |
| 85 | replyId: null, | |
| 86 | replyUserName: null, | |
| 87 | replyList: { | |
| 88 | total: "3", | |
| 89 | current: "1", | |
| 90 | listData: [{ | |
| 91 | userName: "inleft", | |
| 92 | userComment: "2", | |
| 93 | commentTime: "2022-02-22 23:22:22", | |
| 94 | id: "2", | |
| 95 | parentId: "1", | |
| 96 | replyId: "1", | |
| 97 | replyUserName: "bimo", | |
| 98 | }, { | |
| 99 | userName: "air", | |
| 100 | userComment: "不对是3", | |
| 101 | commentTime: "2022-02-23 13:13:13", | |
| 102 | id: "3", | |
| 103 | parentId: "1", | |
| 104 | replyId: "2", | |
| 105 | replyUserName: "inleft", | |
| 106 | }] | |
| 107 | }, | |
| b1336e | 108 | }, { |
| 2f9d3c | 109 | userName: "bimo", |
| I | 110 | userComment: "1+1=2?", |
| 111 | commentTime: "2022-02-22 22:22:22", | |
| 112 | id: "1", | |
| 113 | parentId: null, | |
| 114 | replyId: null, | |
| 115 | replyUserName: null, | |
| 116 | replyList: { | |
| 117 | total: "3", | |
| 118 | current: "1", | |
| 119 | listData: [{ | |
| 120 | userName: "inleft", | |
| 121 | userComment: "2", | |
| 122 | commentTime: "2022-02-22 23:22:22", | |
| 123 | id: "2", | |
| 124 | parentId: "1", | |
| 125 | replyId: "1", | |
| 126 | replyUserName: "bimo", | |
| 127 | }, { | |
| 128 | userName: "air", | |
| 129 | userComment: "不对是3", | |
| 130 | commentTime: "2022-02-23 13:13:13", | |
| 131 | id: "3", | |
| 132 | parentId: "1", | |
| 133 | replyId: "2", | |
| 134 | replyUserName: "inleft", | |
| 135 | }] | |
| 136 | }, | |
| 137 | }], | |
| 138 | ||
| 81c155 | 139 | } |
| I | 140 | } |
| 141 | } | |
| 142 | </script> | |
| 143 | ||
| 2f9d3c | 144 | <style lang="less"> |
| I | 145 | .visitInfo { |
| 146 | user-select: none; | |
| 147 | } | |
| 148 | ||
| 149 | .commentList { | |
| 150 | ||
| 151 | img { | |
| 152 | user-select: none; | |
| 153 | } | |
| 154 | ||
| 155 | .ant-comment-actions { | |
| 156 | display: flex; | |
| 157 | justify-content: flex-end; | |
| 158 | } | |
| 159 | ||
| 160 | .ant-comment-content-author { | |
| 161 | margin-bottom: 0px; | |
| 162 | } | |
| 163 | ||
| 164 | .ant-comment-inner { | |
| 165 | padding: 10px 10px 0px; | |
| 166 | } | |
| 167 | ||
| 168 | .commentGroup { | |
| 169 | border-top: 1px solid #e5e9ef; | |
| 170 | margin-bottom: 10px; | |
| 171 | padding-bottom: 15px; | |
| 172 | ||
| 173 | ||
| 174 | .loadMore:hover { | |
| 175 | color: skyblue; | |
| 176 | } | |
| 177 | } | |
| 178 | ||
| 179 | .ant-comment-content-detail { | |
| 180 | p { | |
| 181 | margin-bottom: 0px; | |
| 182 | } | |
| 183 | } | |
| 184 | } | |
| 81c155 | 185 | </style> |
