添加评论功能

This commit is contained in:
yi-ge 2020-07-17 14:00:01 +08:00
parent 4241d13d33
commit b0c6b81951

View File

@ -30,6 +30,7 @@
img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + item.user_id") img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + item.user_id")
.comment-area .comment-area
.comment-author {{ item.comment_author }} .comment-author {{ item.comment_author }}
span(class="comment-status", v-if="item.comment_approved === '0'")   此内容正在审核中...
.comment-content(v-html="item.comment_content_html") .comment-content(v-html="item.comment_content_html")
.comment-info {{ item.comment_date }} .comment-info {{ item.comment_date }}
span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复 span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复
@ -39,6 +40,7 @@
img(:src="i.comment_author_avatar_url ? i.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + i.user_id") img(:src="i.comment_author_avatar_url ? i.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + i.user_id")
.comment-area .comment-area
.comment-author {{ i.comment_author }} .comment-author {{ i.comment_author }}
span(class="comment-status", v-if="i.comment_approved === '0'")   此内容正在审核中...
.comment-content(v-html="i.comment_content_html") .comment-content(v-html="i.comment_content_html")
.comment-info {{ i.comment_date }} .comment-info {{ i.comment_date }}
span.reply(@click="reply(item.comment_ID, i.comment_ID)" v-if="replyLastID !== i.comment_ID") 回复 span.reply(@click="reply(item.comment_ID, i.comment_ID)" v-if="replyLastID !== i.comment_ID") 回复
@ -123,13 +125,15 @@ export default {
}, },
mounted () { mounted () {
// //
if (process.client) {
this.visitorToken = window.localStorage.visitorToken this.visitorToken = window.localStorage.visitorToken
if (this.visitorToken && window.localStorage.visitorInfo) { if (this.visitorToken && window.localStorage.visitorInfo) {
try { try {
this.visitorInfo = JSON.parse(window.localStorage.visitorInfo) this.visitorInfo = JSON.parse(window.localStorage.visitorInfo)
this.getCommentWithVisitorInfo(this.postID)
} catch (_) { } } catch (_) { }
} }
if (process.client) {
window.setAuthToken = (visitorToken, visitorInfo) => { window.setAuthToken = (visitorToken, visitorInfo) => {
window.localStorage.visitorToken = visitorToken window.localStorage.visitorToken = visitorToken
window.localStorage.visitorInfo = JSON.stringify(visitorInfo) window.localStorage.visitorInfo = JSON.stringify(visitorInfo)
@ -482,7 +486,7 @@ export default {
method: 'post', method: 'post',
url: process.env.baseURL + '/comments/commit', url: process.env.baseURL + '/comments/commit',
headers: { headers: {
Authorization: 'Bearer ' + window.localStorage.visitorToken Authorization: 'Bearer ' + this.visitorToken
}, },
data: { data: {
postID, postID,
@ -496,13 +500,7 @@ export default {
this.replyID = null this.replyID = null
this.replyLastID = null this.replyLastID = null
window.location.hash = '_' window.location.hash = '_'
// this.getCommentWithVisitorInfo(postID)
const tmp = await this.$axios.get(process.env.baseURL + `/public/comments/post?ID=${postID}`)
const comments = tmp.data.result.list || []
const commentAmount = tmp.data.result.amount || 0
this.comments = comments
this.commentAmount = commentAmount
this.setCommentMap()
editorObj.setValue('', true) editorObj.setValue('', true)
this.$nextTick(() => { this.$nextTick(() => {
editorObj.focus() editorObj.focus()
@ -510,6 +508,21 @@ export default {
}) })
} }
}, },
async getCommentWithVisitorInfo (postID) {
//
const tmp = await this.$axios({
method: 'get',
url: process.env.baseURL + `/public/comments/post?ID=${postID}`,
headers: {
Authorization: 'Bearer ' + this.visitorToken
}
})
const comments = tmp.data.result.list || []
const commentAmount = tmp.data.result.amount || 0
this.comments = comments
this.commentAmount = commentAmount
this.setCommentMap()
},
commentLogout () { commentLogout () {
window.localStorage.removeItem('visitorToken') window.localStorage.removeItem('visitorToken')
this.visitorToken = null this.visitorToken = null
@ -693,6 +706,9 @@ export default {
img img
max-width 100% max-width 100%
.comment-status
color #ca7474
.comment-logout .comment-logout
width 51px width 51px
height 100% height 100%