add comment module
parent
628f922fe6
commit
95f26e2dd2
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<h2 class="title"><el-icon style="vertical-align: -10%"><comment /></el-icon> 评论</h2>
|
||||
<div class="content paragraph">
|
||||
<div style="padding: 3px;display: flex;justify-content: center;align-items: end;flex-direction: column">
|
||||
<el-input
|
||||
v-model="newComment.commentContent"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
placeholder="请友善交流，文明用语"
|
||||
/>
|
||||
<div>
|
||||
<el-checkbox v-model="hideMyself" label="1" size="small">匿名</el-checkbox>
|
||||
<el-button
|
||||
size="small" @click="addComment"
|
||||
style="position: relative;float: right;margin: 3px"
|
||||
type="primary" color="#63a35c">发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar max-height="20vh">
|
||||
<div v-for="item in comments" class="main-comment">
|
||||
<div class="comment-user">
|
||||
<el-avatar :src="item.userAvatar" :size="30"></el-avatar>
|
||||
<span style="padding: 0 10px 0 10px;display: flex;align-items: center">{{item.userUsername}}<el-tag :type="identityType(item.userIdentity)" effect="dark" size="small">{{ userIdentity(item.userIdentity) }}</el-tag></span>
|
||||
</div>
|
||||
<div style="padding: 10px 10px 10px 40px" class="comment-box">
|
||||
<div style="width: 100%">{{item.commentContent}}</div>
|
||||
</div>
|
||||
<div class="comment-buttons">
|
||||
<el-icon class="comment-button" @click="openComment(item,item)"><chat-line-square /></el-icon>
|
||||
</div>
|
||||
<div class="side-comment" v-if="item.hasComment">
|
||||
<div v-for="i in item.comments" class="comment-box">
|
||||
<div style="width: 100%"><span style="font-weight: bold;color: #56AD93">{{ i.userUsername }}</span> {{i.commentContent}}</div>
|
||||
<div class="comment-buttons">
|
||||
<el-icon class="comment-button" @click="openComment(i,item)"><chat-line-square /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-comment" :class="{'hide-float-comment':!showFloatComment}">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;width: 100%">
|
||||
<span>回复:{{commentUsername}}</span>
|
||||
<el-icon style="vertical-align: -10%" class="comment-button" @click="showFloatComment=false"><close /></el-icon>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="newCommentToComment.commentContent"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
placeholder="请友善交流，文明用语"
|
||||
/>
|
||||
<div>
|
||||
<el-checkbox v-model="hideMyself" label="1" size="small">匿名</el-checkbox>
|
||||
<el-button
|
||||
size="small" @click="showFloatComment=false"
|
||||
style="position: relative;float: right;margin: 3px"
|
||||
plain color="#63a35c">关闭</el-button>
|
||||
<el-button
|
||||
size="small" @click="addCommentToComment"
|
||||
style="position: relative;float: right;margin: 3px"
|
||||
type="primary" color="#63a35c">发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onMounted, reactive, ref, watch} from "vue";
|
||||
import axios from "axios";
|
||||
import {Comment,ChatLineSquare,Close} from "@element-plus/icons-vue"
|
||||
import qs from "qs";
|
||||
import {useUserStore} from "@/store/user";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const userStore = useUserStore()
|
||||
const showFloatComment = ref(false)
|
||||
const hideMyself = ref(false)
|
||||
const commentUsername= ref('')
|
||||
|
||||
const props = defineProps({
|
||||
blogId: {
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
let comments=ref([
|
||||
{
|
||||
commentId:"1",
|
||||
commentTarget:1,
|
||||
commentTargetId:"1505910717547618306",
|
||||
commentUserId:"-1",
|
||||
userUsername:"匿名",
|
||||
userAvatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
|
||||
userIdentity:-1,
|
||||
commentContent:"数据加载中",
|
||||
gmtCreate:null,
|
||||
gmtModified:null,
|
||||
hasComment:false,
|
||||
comments:[{
|
||||
commentUserId:"-1",
|
||||
commentContent:"",
|
||||
userUsername:"匿名",
|
||||
userAvatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
|
||||
userIdentity:-1
|
||||
}]
|
||||
}
|
||||
])
|
||||
|
||||
const newComment=reactive({
|
||||
commentTarget:1,
|
||||
commentTargetId:"",
|
||||
commentUserId:"-1",
|
||||
commentContent:"",
|
||||
})
|
||||
|
||||
const newCommentToComment=reactive({
|
||||
commentTarget:2,
|
||||
commentTargetId:"",
|
||||
commentUserId:"-1",
|
||||
commentContent:"",
|
||||
})
|
||||
|
||||
const openComment=(comment:any,bigComment:any)=>{
|
||||
commentUsername.value=comment.userUsername
|
||||
newCommentToComment.commentTargetId=bigComment.commentId
|
||||
showFloatComment.value=true
|
||||
}
|
||||
|
||||
const getComments=()=>{
|
||||
axios.get("/comment/getCommentByBlogId?blogId="+props.blogId)
|
||||
.then((res)=>{
|
||||
comments.value=res.data
|
||||
for(let comment of comments.value)
|
||||
{
|
||||
if(comment.commentUserId!=='-1')
|
||||
{
|
||||
axios.get("/user/getUserById?userId="+comment.commentUserId)
|
||||
.then((result)=>{
|
||||
comment.userUsername=result.data.userUsername
|
||||
comment.userAvatar=result.data.userAvatar
|
||||
comment.userIdentity=result.data.userIdentity
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
comment.userUsername="匿名";
|
||||
comment.userAvatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
|
||||
}
|
||||
axios.get("/comment/getCommentByCommentId?commentId="+comment.commentId)
|
||||
.then((result)=>{
|
||||
comment.comments=result.data
|
||||
comment.hasComment = comment.comments.length !== 0
|
||||
for(let item of comment.comments)
|
||||
{
|
||||
if(item.commentUserId!=='-1')
|
||||
{
|
||||
axios.get("/user/getUserById?userId="+comment.commentUserId)
|
||||
.then((result)=>{
|
||||
item.userUsername=result.data.userUsername
|
||||
item.userAvatar=result.data.userAvatar
|
||||
item.userIdentity=result.data.userIdentity
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
item.userUsername="匿名";
|
||||
item.userAvatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addComment=()=>{
|
||||
newComment.commentTarget=1
|
||||
newComment.commentTargetId=props.blogId
|
||||
newComment.commentUserId=userStore.userId
|
||||
if(hideMyself.value)
|
||||
{
|
||||
newComment.commentUserId='-1'
|
||||
}
|
||||
axios.post("/comment/addComment",qs.stringify(newComment))
|
||||
.then((res)=>{
|
||||
if(res.data=="notLogin")
|
||||
{
|
||||
ElMessage.error("没有登录不可评论！")
|
||||
}
|
||||
else if(res.data=="fail")
|
||||
{
|
||||
ElMessage.error("评论发布失败")
|
||||
}
|
||||
else
|
||||
{
|
||||
ElMessage.success("发布成功!")
|
||||
newComment.commentContent=""
|
||||
getComments()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addCommentToComment=()=>{
|
||||
newCommentToComment.commentTarget=2
|
||||
newCommentToComment.commentUserId=userStore.userId
|
||||
newCommentToComment.commentContent='回复 @'+commentUsername.value+": "+newCommentToComment.commentContent
|
||||
if(hideMyself.value)
|
||||
{
|
||||
newCommentToComment.commentUserId='-1'
|
||||
}
|
||||
axios.post("/comment/addComment",qs.stringify(newCommentToComment))
|
||||
.then((res)=>{
|
||||
if(res.data=="notLogin")
|
||||
{
|
||||
ElMessage.error("没有登录不可评论！")
|
||||
}
|
||||
else if(res.data=="fail")
|
||||
{
|
||||
ElMessage.error("评论发布失败")
|
||||
}
|
||||
else
|
||||
{
|
||||
ElMessage.success("发布成功!")
|
||||
newCommentToComment.commentContent=""
|
||||
showFloatComment.value=false
|
||||
getComments()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const identityType = (userIdentity:any)=>{
|
||||
if(userIdentity==0)
|
||||
{
|
||||
return "warning"
|
||||
}
|
||||
else if(userIdentity==1)
|
||||
{
|
||||
return "success"
|
||||
}
|
||||
else if(userIdentity==5)
|
||||
{
|
||||
return ""
|
||||
}
|
||||
else
|
||||
{
|
||||
return "info"
|
||||
}
|
||||
}
|
||||
|
||||
const userIdentity = (userIdentity:any)=>{
|
||||
if(userIdentity==0)
|
||||
{
|
||||
return "站长"
|
||||
}
|
||||
else if(userIdentity==1)
|
||||
{
|
||||
return "管理员"
|
||||
}
|
||||
else if(userIdentity==5)
|
||||
{
|
||||
return "普通用户"
|
||||
}
|
||||
else
|
||||
{
|
||||
return "游客"
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.blogId,
|
||||
() => {
|
||||
getComments()
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
getComments()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-comment{
|
||||
background-color: #F7F7F7;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.side-comment{
|
||||
background-color: #E3E3E3;
|
||||
margin: 5px 5px 5px 40px ;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.comment-user{
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
word-wrap:break-word;
|
||||
white-space:pre-wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.comment-buttons{
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.comment-button{
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment-button:hover{
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.float-comment{
|
||||
background-color: white;
|
||||
padding: 0 10px 10px 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 40vh;
|
||||
z-index: 101;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
|
||||
width: 300px;
|
||||
transition-property:opacity,transform;
|
||||
transition-duration:0.3s;
|
||||
transition-timing-function:ease;
|
||||
}
|
||||
|
||||
.hide-float-comment{
|
||||
transform: translateX(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue