mirror of https://github.com/halo-dev/halo-admin
Complete journal comment list.
ruibaby
parent
4bfb865f07
commit
3d7956413a
|
|
@ -35,4 +35,11 @@ journalApi.delete = journalId => {
|
|||
})
|
||||
}
|
||||
|
||||
journalApi.commentTree = journalId => {
|
||||
return service({
|
||||
url: `${baseUrl}/${journalId}/comments/tree_view`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default journalApi
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import service from '@/utils/service'
|
||||
|
||||
const baseUrl = '/api/admin/journals/comments'
|
||||
|
||||
const journalCommentApi = {}
|
||||
|
||||
journalCommentApi.create = (comment) => {
|
||||
return service({
|
||||
url: baseUrl,
|
||||
data: comment,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
journalCommentApi.delete = commentId => {
|
||||
return service({
|
||||
url: `${baseUrl}/${commentId}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export default journalCommentApi
|
||||
|
|
@ -65,9 +65,7 @@
|
|||
>
|
||||
<template slot="actions">
|
||||
<span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
>
|
||||
<a href="javascript:void(0);">
|
||||
<a-icon
|
||||
type="like-o"
|
||||
style="margin-right: 8px"
|
||||
|
|
@ -151,6 +149,31 @@
|
|||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-if="selectComment"
|
||||
:title="'回复给：'+selectComment.author"
|
||||
v-model="selectCommentVisible"
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
@click="handleReplyComment"
|
||||
>
|
||||
回复
|
||||
</a-button>
|
||||
</template>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 8 }"
|
||||
v-model="replyComment.content"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-drawer
|
||||
title="评论列表"
|
||||
:width="isMobile()?'100%':'460'"
|
||||
|
|
@ -164,75 +187,26 @@
|
|||
align="middle"
|
||||
>
|
||||
<a-col :span="24">
|
||||
<blockquote>
|
||||
<a-comment>
|
||||
<template slot="actions">
|
||||
<span>
|
||||
<a-icon type="like" />
|
||||
<span style="padding-left: '8px';cursor: 'auto'">
|
||||
{{ journal.likes }}
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<a-icon type="message" />
|
||||
<span style="padding-left: '8px';cursor: 'auto'">
|
||||
{{ journal.commentCount }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-avatar
|
||||
:src="user.avatar"
|
||||
:alt="user.nickname"
|
||||
slot="avatar"
|
||||
/>
|
||||
<p slot="content">{{ journal.content }}</p>
|
||||
<a-comment>
|
||||
<a-avatar
|
||||
:src="user.avatar"
|
||||
:alt="user.nickname"
|
||||
slot="avatar"
|
||||
/>
|
||||
<p slot="content">{{ journal.content }}</p>
|
||||
|
||||
<span slot="datetime">{{ journal.createTime | moment }}</span>
|
||||
</a-comment>
|
||||
</blockquote>
|
||||
<span slot="datetime">{{ journal.createTime | moment }}</span>
|
||||
</a-comment>
|
||||
</a-col>
|
||||
<a-divider />
|
||||
<a-col :span="24">
|
||||
<a-comment>
|
||||
<span slot="actions">回复</span>
|
||||
<a slot="author"> {{ user.nickname }} </a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
:src="user.avatar"
|
||||
:alt="user.nickname"
|
||||
/>
|
||||
<p slot="content">{{ journal.content }}</p>
|
||||
<a-comment>
|
||||
<span slot="actions">回复</span>
|
||||
<a slot="author"> {{ user.nickname }} </a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
:src="user.avatar"
|
||||
:alt="user.nickname"
|
||||
/>
|
||||
<p slot="content">{{ journal.content }}</p>
|
||||
<a-comment>
|
||||
<span slot="actions">回复</span>
|
||||
<a slot="author"> {{ user.nickname }} </a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
:src="user.avatar"
|
||||
:alt="user.nickname"
|
||||
/>
|
||||
<p slot="content">{{ journal.content }}</p>
|
||||
</a-comment>
|
||||
<a-comment>
|
||||
<span slot="actions">回复</span>
|
||||
<a slot="author"> {{ user.nickname }} </a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
:src="user.avatar"
|
||||
:alt="user.nickname"
|
||||
/>
|
||||
<p slot="content">{{ journal.content }}</p>
|
||||
</a-comment>
|
||||
</a-comment>
|
||||
</a-comment>
|
||||
<journal-comment-tree
|
||||
v-for="(comment,index) in comments"
|
||||
:key="index"
|
||||
:comment="comment"
|
||||
@reply="handleCommentReplyClick"
|
||||
@delete="handleCommentDelete"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-drawer>
|
||||
|
|
@ -240,18 +214,22 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import JournalCommentTree from './components/JournalCommentTree'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import journalApi from '@/api/journal'
|
||||
import journalCommentApi from '@/api/journalComment'
|
||||
import userApi from '@/api/user'
|
||||
|
||||
export default {
|
||||
mixins: [mixin, mixinDevice],
|
||||
components: { JournalCommentTree },
|
||||
data() {
|
||||
return {
|
||||
title: '发表',
|
||||
listLoading: false,
|
||||
visible: false,
|
||||
commentVisiable: false,
|
||||
selectCommentVisible: false,
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
|
|
@ -264,7 +242,10 @@ export default {
|
|||
keyword: null
|
||||
},
|
||||
journals: [],
|
||||
comments: [],
|
||||
journal: {},
|
||||
selectComment: null,
|
||||
replyComment: {},
|
||||
user: {}
|
||||
}
|
||||
},
|
||||
|
|
@ -310,7 +291,31 @@ export default {
|
|||
},
|
||||
handleCommentShow(journal) {
|
||||
this.journal = journal
|
||||
this.commentVisiable = true
|
||||
journalApi.commentTree(this.journal.id).then(response => {
|
||||
this.comments = response.data.data.content
|
||||
this.commentVisiable = true
|
||||
})
|
||||
},
|
||||
handleCommentReplyClick(comment) {
|
||||
this.selectComment = comment
|
||||
this.selectCommentVisible = true
|
||||
this.replyComment.parentId = comment.id
|
||||
this.replyComment.postId = this.journal.id
|
||||
},
|
||||
handleReplyComment() {
|
||||
journalCommentApi.create(this.replyComment).then(response => {
|
||||
this.$message.success('回复成功！')
|
||||
this.replyComment = {}
|
||||
this.selectComment = {}
|
||||
this.selectCommentVisible = false
|
||||
this.handleCommentShow(this.journal)
|
||||
})
|
||||
},
|
||||
handleCommentDelete(comment) {
|
||||
journalCommentApi.delete(comment.id).then(response => {
|
||||
this.$message.success('删除成功！')
|
||||
this.handleCommentShow(this.journal)
|
||||
})
|
||||
},
|
||||
createOrUpdateJournal() {
|
||||
if (this.journal.id) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-comment>
|
||||
<span
|
||||
slot="actions"
|
||||
@click="handleReplyClick"
|
||||
>回复</span>
|
||||
<a-popconfirm
|
||||
:title="'你确定要永久删除该评论？'"
|
||||
@confirm="handleDeleteClick"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
slot="actions"
|
||||
>
|
||||
<span>删除</span>
|
||||
</a-popconfirm>
|
||||
<a slot="author"> {{ comment.author }} </a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
:src="avatar"
|
||||
:alt="comment.author"
|
||||
/>
|
||||
<p slot="content">{{ comment.content }}</p>
|
||||
|
||||
<template v-if="comment.children">
|
||||
<journal-comment-tree
|
||||
v-for="(child, index) in comment.children"
|
||||
:key="index"
|
||||
:comment="child"
|
||||
@reply="handleSubReply"
|
||||
@delete="handleSubDelete"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</a-comment>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JournalCommentTree',
|
||||
props: {
|
||||
comment: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
return `//gravatar.loli.net/avatar/${this.comment.gavatarMd5}/?s=256&d=mp`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleReplyClick() {
|
||||
this.$emit('reply', this.comment)
|
||||
},
|
||||
handleSubReply(comment) {
|
||||
this.$emit('reply', comment)
|
||||
},
|
||||
handleDeleteClick() {
|
||||
this.$emit('delete', this.comment)
|
||||
},
|
||||
handleSubDelete(comment) {
|
||||
this.$emit('delete', comment)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue