| 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 | }; | |
| f60b31 | 73 | this.$nextTick(() => { |
| I | 74 | |
| 75 | this.$refs.replyBoxId.getMsgInfo(msgInfo); | |
| 76 | }); | |
| 2f9d3c | 77 | } |
| I | 78 | }, |
| 81c155 | 79 | data() { |
| I | 80 | return { |
| f60b31 | 81 | visible: false, |
| 2f9d3c | 82 | commentListData: [{ |
| I | 83 | userName: "bimo", |
| 84 | userComment: "1+1=2?", | |
| 85 | commentTime: "2022-02-22 22:22:22", | |
| 86 | id: "1", | |
| 87 | parentId: null, | |
| 88 | replyId: null, | |
| 89 | replyUserName: null, | |
| 90 | replyList: { | |
| 91 | total: "3", | |
| 92 | current: "1", | |
| 93 | listData: [{ | |
| 94 | userName: "inleft", | |
| 95 | userComment: "2", | |
| 96 | commentTime: "2022-02-22 23:22:22", | |
| 97 | id: "2", | |
| 98 | parentId: "1", | |
| 99 | replyId: "1", | |
| 100 | replyUserName: "bimo", | |
| 101 | }, { | |
| 102 | userName: "air", | |
| 103 | userComment: "不对是3", | |
| 104 | commentTime: "2022-02-23 13:13:13", | |
| 105 | id: "3", | |
| 106 | parentId: "1", | |
| 107 | replyId: "2", | |
| 108 | replyUserName: "inleft", | |
| 109 | }] | |
| 110 | }, | |
| b1336e | 111 | }, { |
| 2f9d3c | 112 | userName: "bimo", |
| I | 113 | userComment: "1+1=2?", |
| 114 | commentTime: "2022-02-22 22:22:22", | |
| 115 | id: "1", | |
| 116 | parentId: null, | |
| 117 | replyId: null, | |
| 118 | replyUserName: null, | |
| 119 | replyList: { | |
| 120 | total: "3", | |
| 121 | current: "1", | |
| 122 | listData: [{ | |
| 123 | userName: "inleft", | |
| 124 | userComment: "2", | |
| 125 | commentTime: "2022-02-22 23:22:22", | |
| 126 | id: "2", | |
| 127 | parentId: "1", | |
| 128 | replyId: "1", | |
| 129 | replyUserName: "bimo", | |
| 130 | }, { | |
| 131 | userName: "air", | |
| 132 | userComment: "不对是3", | |
| 133 | commentTime: "2022-02-23 13:13:13", | |
| 134 | id: "3", | |
| 135 | parentId: "1", | |
| 136 | replyId: "2", | |
| 137 | replyUserName: "inleft", | |
| 138 | }] | |
| 139 | }, | |
| 140 | }], | |
| 141 | ||
| 81c155 | 142 | } |
| I | 143 | } |
| 144 | } | |
| 145 | </script> | |
| 146 | ||
| 2f9d3c | 147 | <style lang="less"> |
| I | 148 | .visitInfo { |
| 149 | user-select: none; | |
| 150 | } | |
| 151 | ||
| 152 | .commentList { | |
| 153 | ||
| 154 | img { | |
| 155 | user-select: none; | |
| 156 | } | |
| 157 | ||
| 158 | .ant-comment-actions { | |
| 159 | display: flex; | |
| 160 | justify-content: flex-end; | |
| 161 | } | |
| 162 | ||
| 163 | .ant-comment-content-author { | |
| 164 | margin-bottom: 0px; | |
| 165 | } | |
| 166 | ||
| 167 | .ant-comment-inner { | |
| 168 | padding: 10px 10px 0px; | |
| 169 | } | |
| 170 | ||
| 171 | .commentGroup { | |
| 172 | border-top: 1px solid #e5e9ef; | |
| 173 | margin-bottom: 10px; | |
| 174 | padding-bottom: 15px; | |
| 175 | ||
| 176 | ||
| 177 | .loadMore:hover { | |
| 178 | color: skyblue; | |
| 179 | } | |
| 180 | } | |
| 181 | ||
| 182 | .ant-comment-content-detail { | |
| 183 | p { | |
| 184 | margin-bottom: 0px; | |
| 185 | } | |
| 186 | } | |
| 187 | } | |
| 81c155 | 188 | </style> |
