|
|
|
@ -52,23 +52,23 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import $ from 'jquery'; |
|
|
|
import $ from "jquery"; |
|
|
|
import authorization from '@/utils/authorization' |
|
|
|
import authorization from "@/utils/authorization"; |
|
|
|
import { ref, watchEffect } from 'vue'; |
|
|
|
import { ref, watchEffect } from "vue"; |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "CommentView", |
|
|
|
name: "CommentView", |
|
|
|
props: { |
|
|
|
props: { |
|
|
|
article: { |
|
|
|
article: { |
|
|
|
required: true, |
|
|
|
required: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
setup(props) { |
|
|
|
setup(props) { |
|
|
|
// 所有评论 |
|
|
|
// 所有评论 |
|
|
|
let comments = ref([]); |
|
|
|
let comments = ref([]); |
|
|
|
// 评论控件绑定的文本和占位符 |
|
|
|
// 评论控件绑定的文本和占位符 |
|
|
|
let message = ref(''); |
|
|
|
let message = ref(""); |
|
|
|
let placeholder = ref('说点啥吧...'); |
|
|
|
let placeholder = ref("说点啥吧..."); |
|
|
|
// 评论的评论 |
|
|
|
// 评论的评论 |
|
|
|
let parentId = ref(null); |
|
|
|
let parentId = ref(null); |
|
|
|
// 发表评论 |
|
|
|
// 发表评论 |
|
|
|
@ -76,25 +76,25 @@ export default { |
|
|
|
authorization().then((response) => { |
|
|
|
authorization().then((response) => { |
|
|
|
if (response[0]) { |
|
|
|
if (response[0]) { |
|
|
|
$.ajax({ |
|
|
|
$.ajax({ |
|
|
|
url: 'http://127.0.0.1:6789/api/comment/', |
|
|
|
url: "http://127.0.0.1:6789/api/comment/", |
|
|
|
type: 'POST', |
|
|
|
type: "POST", |
|
|
|
data: { |
|
|
|
data: { |
|
|
|
content: message.value, |
|
|
|
content: message.value, |
|
|
|
article_id: props.article.id, |
|
|
|
article_id: props.article.id, |
|
|
|
parent_id: parentId.value, |
|
|
|
parent_id: parentId.value, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
headers: { |
|
|
|
headers: { |
|
|
|
authorization: "Bearer " + localStorage.getItem('access_blog') |
|
|
|
authorization: |
|
|
|
|
|
|
|
"Bearer " + localStorage.getItem("access_blog"), |
|
|
|
}, |
|
|
|
}, |
|
|
|
success(resp) { |
|
|
|
success(resp) { |
|
|
|
// 将新评论添加到顶部 |
|
|
|
// 将新评论添加到顶部 |
|
|
|
comments.value.unshift(resp); |
|
|
|
comments.value.unshift(resp); |
|
|
|
message.value = ''; |
|
|
|
message.value = ""; |
|
|
|
window.alert("留言成功"); |
|
|
|
window.alert("留言成功"); |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
}); |
|
|
|
}else { |
|
|
|
} else { |
|
|
|
window.alert("请登录后再评论!"); |
|
|
|
window.alert("请登录后再评论!"); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -102,16 +102,17 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
const replyTo = (comment) => { |
|
|
|
const replyTo = (comment) => { |
|
|
|
parentId.value = comment.id; |
|
|
|
parentId.value = comment.id; |
|
|
|
placeholder.value = '对' + comment.author.username + '说'; |
|
|
|
placeholder.value = "对" + comment.author.username + "说"; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const formatted_time = (iso_date_string) => { |
|
|
|
const formatted_time = (iso_date_string) => { |
|
|
|
const date = new Date(iso_date_string); |
|
|
|
const date = new Date(iso_date_string); |
|
|
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString(); |
|
|
|
return date.toLocaleDateString() + " " + date.toLocaleTimeString(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
watchEffect(() => { |
|
|
|
comments.value = props.article !== null ? props.article.comments : []; |
|
|
|
comments.value = |
|
|
|
|
|
|
|
props.article !== null ? props.article.comments : []; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
return { |
|
|
|
@ -122,7 +123,7 @@ export default { |
|
|
|
submit, |
|
|
|
submit, |
|
|
|
replyTo, |
|
|
|
replyTo, |
|
|
|
formatted_time, |
|
|
|
formatted_time, |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
