| commit | author | age | ||
| 81c155 | 1 | <template> |
| I | 2 | <div class="myFriend"> |
| 2f9d3c | 3 | <replyBox></replyBox> |
| I | 4 | <a-modal v-model="visible" title="回复Ta @xx" on-ok="handleOk" |
| 5 | :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> | |
| 6 | <template slot="footer"> | |
| 7 | <!-- <a-button key="reset" @click="reset" type="danger"> | |
| 8 | 擦掉重来 | |
| 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>.. | |
| 15 | </a-button> --> | |
| 16 | </template> | |
| 17 | <replyBox ref="replyBoxId"></replyBox> | |
| 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: { | |
| 62 | loadMore() { | |
| 63 | this.commentListData[0].replyList.listData = this.commentListData[0].replyList.listData.concat(this | |
| 64 | .commentListData[0].replyList.listData) | |
| 65 | }, | |
| 66 | replyCall() { | |
| 67 | this.visible = true; | |
| 68 | var msgInfo = { | |
| 69 | useName: "22", | |
| 70 | userComment: "11", | |
| 71 | }; | |
| 72 | this.$refs.replyBoxId.getMsgInfo(msgInfo); | |
| 73 | } | |
| 74 | }, | |
| 81c155 | 75 | data() { |
| I | 76 | return { |
| 2f9d3c | 77 | visible: false, |
| I | 78 | commentListData: [{ |
| 79 | userName: "bimo", | |
| 80 | userComment: "1+1=2?", | |
| 81 | commentTime: "2022-02-22 22:22:22", | |
| 82 | id: "1", | |
| 83 | parentId: null, | |
| 84 | replyId: null, | |
| 85 | replyUserName: null, | |
| 86 | replyList: { | |
| 87 | total: "3", | |
| 88 | current: "1", | |
| 89 | listData: [{ | |
| 90 | userName: "inleft", | |
| 91 | userComment: "2", | |
| 92 | commentTime: "2022-02-22 23:22:22", | |
| 93 | id: "2", | |
| 94 | parentId: "1", | |
| 95 | replyId: "1", | |
| 96 | replyUserName: "bimo", | |
| 97 | }, { | |
| 98 | userName: "air", | |
| 99 | userComment: "不对是3", | |
| 100 | commentTime: "2022-02-23 13:13:13", | |
| 101 | id: "3", | |
| 102 | parentId: "1", | |
| 103 | replyId: "2", | |
| 104 | replyUserName: "inleft", | |
| 105 | }] | |
| 106 | }, | |
| 107 | },{ | |
| 108 | userName: "bimo", | |
| 109 | userComment: "1+1=2?", | |
| 110 | commentTime: "2022-02-22 22:22:22", | |
| 111 | id: "1", | |
| 112 | parentId: null, | |
| 113 | replyId: null, | |
| 114 | replyUserName: null, | |
| 115 | replyList: { | |
| 116 | total: "3", | |
| 117 | current: "1", | |
| 118 | listData: [{ | |
| 119 | userName: "inleft", | |
| 120 | userComment: "2", | |
| 121 | commentTime: "2022-02-22 23:22:22", | |
| 122 | id: "2", | |
| 123 | parentId: "1", | |
| 124 | replyId: "1", | |
| 125 | replyUserName: "bimo", | |
| 126 | }, { | |
| 127 | userName: "air", | |
| 128 | userComment: "不对是3", | |
| 129 | commentTime: "2022-02-23 13:13:13", | |
| 130 | id: "3", | |
| 131 | parentId: "1", | |
| 132 | replyId: "2", | |
| 133 | replyUserName: "inleft", | |
| 134 | }] | |
| 135 | }, | |
| 136 | }], | |
| 137 | ||
| 81c155 | 138 | } |
| I | 139 | } |
| 140 | } | |
| 141 | </script> | |
| 142 | ||
| 2f9d3c | 143 | <style lang="less"> |
| I | 144 | .visitInfo { |
| 145 | user-select: none; | |
| 146 | } | |
| 147 | ||
| 148 | .commentList { | |
| 149 | ||
| 150 | img { | |
| 151 | user-select: none; | |
| 152 | } | |
| 153 | ||
| 154 | .ant-comment-actions { | |
| 155 | display: flex; | |
| 156 | justify-content: flex-end; | |
| 157 | } | |
| 158 | ||
| 159 | .ant-comment-content-author { | |
| 160 | margin-bottom: 0px; | |
| 161 | } | |
| 162 | ||
| 163 | .ant-comment-inner { | |
| 164 | padding: 10px 10px 0px; | |
| 165 | } | |
| 166 | ||
| 167 | .commentGroup { | |
| 168 | border-top: 1px solid #e5e9ef; | |
| 169 | margin-bottom: 10px; | |
| 170 | padding-bottom: 15px; | |
| 171 | ||
| 172 | ||
| 173 | .loadMore:hover { | |
| 174 | color: skyblue; | |
| 175 | } | |
| 176 | } | |
| 177 | ||
| 178 | .ant-comment-content-detail { | |
| 179 | p { | |
| 180 | margin-bottom: 0px; | |
| 181 | } | |
| 182 | } | |
| 183 | } | |
| 81c155 | 184 | </style> |
