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