334 lines
14 KiB
Vue
334 lines
14 KiB
Vue
<template>
|
||
<el-dialog
|
||
id="elDialog"
|
||
title="留言板"
|
||
:visible.sync="dialogVisible"
|
||
fullscreen
|
||
center
|
||
:before-close="handleClose"
|
||
>
|
||
<el-card class="box-card" style="width: 80%;margin-left: 10%;padding: 20px;margin-bottom: 20px;background-color: rgba(255,255,255,0)">
|
||
<div v-if="postCommentList.length">
|
||
<template v-for="(item,i) in postCommentList">
|
||
<div :key="i" style="border: 1px solid #C0C0C0;border-radius: 5px;margin-bottom: 20px;box-shadow: 2px 2px 3px #808080;padding: 10px 20px;background-color: #fff">
|
||
<div style="margin-bottom: 10px;display: flex;align-items: center;">
|
||
<img :src="avatarUrl(item)" class="head_portrait">
|
||
<div style="display: inline-block;margin-right: 20px;margin-left:10px;font-size: 18px;color: #000;">{{ item.creatorNickName }}</div>
|
||
<div style="display: inline-block;">{{ item.createTime }}</div>
|
||
</div>
|
||
<div style="margin-left: 60px;" v-html="$escapeHTML(`${item.content}`)" />
|
||
<div style="width: 100%;display:flex;align-items: center;justify-content: flex-end;">
|
||
<!--<img :src="lickIcon" style="width: 20px;height: auto;margin-right: 30px;">-->
|
||
<!--<img :src="unlikeIcon" style="width: 20px;height: auto;margin-right: 30px;">-->
|
||
<img :src="replyIcon" style="width: 16px;height: auto;margin-right: 30px;" @click="replyLeaveMessage(item.id, i)">
|
||
<img v-if="userId == item.creatorId || superAdmin" :src="deleteIcon" style="width: 16px;height: auto;" @click="deleteMessage(item.id)">
|
||
</div>
|
||
<div v-if="item.comments && item.comments.total > 0" style="background: #F5F5F5;margin-top: 10px; width: calc(100% - 120px);margin-left: 60px; border-radius: 5px;padding: 0 10px 10px;">
|
||
<div v-if="moreMessageId == item.id">
|
||
<template v-for="(elem,j) in allCommentList">
|
||
<div :key="j" style="font-size: 14px">
|
||
<span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
|
||
<span style="margin-right: 15px;">{{ elem.content }}</span>
|
||
<span style="margin-right: 10px;">{{ elem.commentTime }}</span>
|
||
<el-button type="text" @click="replyLeaveMessage(item.id, i,elem.id)">回复</el-button>
|
||
<el-button v-if="userId == elem.userId || superAdmin" type="text" @click="deleteComment(item.id, i, elem.id)">删除</el-button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div v-else>
|
||
<template v-for="(elem,j) in item.comments.list">
|
||
<div :key="j" style="font-size: 14px">
|
||
<span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
|
||
<span style="margin-right: 15px;">{{ elem.content }}</span>
|
||
<span style="margin-right: 10px;">{{ elem.commentTime }}</span>
|
||
<el-button type="text" @click="replyLeaveMessage(item.id, i,elem.id)">回复</el-button>
|
||
<el-button v-if="userId == elem.userId || superAdmin" type="text" @click="deleteComment(item.id, i, elem.id)">删除</el-button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div v-if="item.comments.total > 10 && moreMessageId != item.id">
|
||
<span class="view_more" @click="viewMoreComment(item)">{{ `共${item.comments.total}条回复,点击查看更多>>` }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="replyMessageId == item.id" style="width: 80%;margin-left: 10%;text-align: center;">
|
||
<el-input :id="'answerInput' + item.id" v-model="commentContent" type="textarea" placeholder="请输入内容" maxlength="300" style="margin-top: 10px;" :autosize="{ minRows: 2, maxRows: 4}" show-word-limit />
|
||
<div style="margin-top: 10px;">
|
||
<el-button type="danger" size="small" @click="commentMessage">回复</el-button>
|
||
<el-button size="small" @click="cancelComment">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div v-else style="text-align: center;width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #ccc;">
|
||
<span>暂无留言</span>
|
||
</div>
|
||
<div style="width: 100%;text-align: center;">
|
||
<el-pagination
|
||
:current-page.sync="pageNum"
|
||
:page-size="pageSize"
|
||
layout="total, prev, pager, next,jumper"
|
||
:total="total"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" placeholder="请输入内容" :margin-bottom="20" :unload-img="true" :no-handle-p="true" />
|
||
<span id="boardBottom" class="dialog-footer">
|
||
<el-button @click="handleClear">清空</el-button>
|
||
<el-button type="primary" @click="commitComment">留言</el-button>
|
||
<el-button type="danger" @click="dialogVisible = false">返回</el-button>
|
||
</span>
|
||
<el-button size="mini" type="danger" style="position: fixed; right: 100px;top: 80px;" @click="goSlide">我要留言</el-button>
|
||
<div v-show="imgShow" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.5);cursor: zoom-out;" @click="handelCloseImg">
|
||
<img id="targetImg" src="" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);min-width: 500px;max-height: 80%;height: auto;">
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { answerPost, queryPostPaging, deleteMessageByAdmin, deleteMessageBySelf, commentLevelMessage, commentComents, queryMessageCommentList, deleteCommentByAdmin, deleteCommentBySelf } from '@/api/learn';
|
||
import lick_icon from '@/assets/like.png';
|
||
import unlike_icon from '@/assets/unlike.png';
|
||
import reply_icon from '@/assets/reply.png';
|
||
import delete_icon from '@/assets/delete.png';
|
||
import { superAdmin } from '@/router/index_APP_TARGET';
|
||
export default {
|
||
name: 'MessageBoard',
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
content: '',
|
||
postCommentList: [],
|
||
pageSize: 10,
|
||
pageNum: 0,
|
||
total: 0,
|
||
imgShow: false,
|
||
lickIcon: lick_icon,
|
||
unlikeIcon: unlike_icon,
|
||
replyIcon: reply_icon,
|
||
deleteIcon: delete_icon,
|
||
replyMessageId: '',
|
||
commentContent: '',
|
||
replyCommentId: '',
|
||
replyMessageIndex: '',
|
||
allCommentList: [],
|
||
moreMessageId: ''
|
||
};
|
||
},
|
||
computed: {
|
||
userId() {
|
||
return this.$store.state.user.id;
|
||
},
|
||
superAdmin() {
|
||
return this.$store.state.user.roles.includes(superAdmin);
|
||
}
|
||
},
|
||
created() {
|
||
const that = this;
|
||
window.handleZoomImg = function () {
|
||
that.imgShow = true;
|
||
document.getElementById('targetImg').src = event.target.currentSrc;
|
||
};
|
||
},
|
||
methods: {
|
||
handleClose() {
|
||
this.dialogVisible = false;
|
||
},
|
||
doShow() {
|
||
this.handleCurrentChange();
|
||
this.dialogVisible = true;
|
||
},
|
||
commitComment() {
|
||
const images = this.content.match(/<img/g);
|
||
if (images && images.length > 3) {
|
||
this.$message.error('留言内容使用图片应小于三张！');
|
||
return;
|
||
}
|
||
if (this.content.length > 1000) {
|
||
this.$message.error('留言内容超出最大长度！');
|
||
return;
|
||
}
|
||
answerPost({postId: 1, content: this.content}).then(resp => {
|
||
this.pageNum = Math.ceil(resp.data / this.pageSize);
|
||
this.handleCurrentChange();
|
||
this.content = '';
|
||
}).catch(error => {
|
||
this.$message.error('留言失败 ！');
|
||
console.log(error);
|
||
});
|
||
},
|
||
handleCurrentChange() {
|
||
queryPostPaging(1, {pageSize: this.pageSize, pageNum: this.pageNum}).then(resp => {
|
||
this.postCommentList = [];
|
||
(resp.data.list || []).forEach(item => {
|
||
const value = item.content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
|
||
item.content = value;
|
||
this.postCommentList.push(item);
|
||
});
|
||
this.total = resp.data.total;
|
||
});
|
||
},
|
||
goSlide() {
|
||
const bottom = document.getElementById('boardBottom');
|
||
const element = document.getElementById('elDialog').childNodes[0];
|
||
element.scrollTop = bottom.offsetTop;
|
||
this.$refs.quillEditor.getFocus();
|
||
},
|
||
avatarUrl(val) {
|
||
if (val && val.creatorAvatarPath) {
|
||
return 'https://joylink.club/oss/joylink' + val.creatorAvatarPath;
|
||
} else {
|
||
return 'https://joylink.club/oss/wxmicro_assistant/userhead/defaultuser.png';
|
||
}
|
||
},
|
||
|
||
handleClear() {
|
||
this.content = '';
|
||
},
|
||
handelCloseImg() {
|
||
this.imgShow = false;
|
||
document.getElementById('targetImg').src = '';
|
||
document.getElementById('targetImgInner').src = '';
|
||
},
|
||
replyLeaveMessage(messageId, messageIndex, commentId) {
|
||
this.replyMessageId = messageId;
|
||
this.replyCommentId = commentId;
|
||
this.replyMessageIndex = messageIndex;
|
||
this.$nextTick(()=>{
|
||
document.getElementById('answerInput' + messageId).focus();
|
||
});
|
||
},
|
||
cancelComment() {
|
||
this.replyMessageId = '';
|
||
this.commentContent = '';
|
||
this.replyCommentId = '';
|
||
this.replyMessageIndex = '';
|
||
},
|
||
commentMessage() {
|
||
if (this.replyCommentId) {
|
||
commentComents(this.replyMessageId, this.replyCommentId, {content:this.commentContent}).then(resp => {
|
||
this.getCommentList(this.replyMessageId, this.replyMessageIndex);
|
||
this.replyMessageId = '';
|
||
this.commentContent = '';
|
||
this.replyCommentId = '';
|
||
this.replyMessageIndex = '';
|
||
}).catch(error => {
|
||
this.$message.error('评论留言失败！');
|
||
this.console.error(error);
|
||
});
|
||
} else {
|
||
commentLevelMessage(this.replyMessageId, {content:this.commentContent}).then(resp => {
|
||
this.getCommentList(this.replyMessageId, this.replyMessageIndex);
|
||
this.replyMessageId = '';
|
||
this.commentContent = '';
|
||
this.replyCommentId = '';
|
||
this.replyMessageIndex = '';
|
||
}).catch(error => {
|
||
this.$message.error('评论留言失败！');
|
||
this.console.error(error);
|
||
});
|
||
}
|
||
},
|
||
getCommentList(messageId, messageIndex) {
|
||
queryMessageCommentList(messageId).then(resp => {
|
||
if (this.moreMessageId == messageId) {
|
||
this.allCommentList = resp.data;
|
||
}
|
||
if (resp.data.length > 10) {
|
||
this.postCommentList[messageIndex].comments.list = resp.data.slice(0, 10);
|
||
this.postCommentList[messageIndex].comments.total = resp.data.length;
|
||
} else {
|
||
this.postCommentList[messageIndex].comments.list = resp.data;
|
||
this.postCommentList[messageIndex].comments.total = resp.data.length;
|
||
}
|
||
}).catch(error => {
|
||
this.$message.error('更新回复失败！');
|
||
this.console.error(error);
|
||
});
|
||
},
|
||
computedCommentName(elem) {
|
||
if (elem.replyUserNickName && elem.replyUserId != elem.userId) {
|
||
return `${elem.userNickname} 回复@ ${elem.replyUserNickName}：`;
|
||
} else {
|
||
return elem.userNickname + '：';
|
||
}
|
||
},
|
||
deleteMessage(messageId) {
|
||
if (this.superAdmin) {
|
||
deleteMessageByAdmin(messageId).then(resp => {
|
||
// this.$message.success('删除留言成功！');
|
||
this.handleCurrentChange();
|
||
}).catch(error => {
|
||
this.$message.error('删除留言失败！');
|
||
this.console.error(error);
|
||
});
|
||
} else {
|
||
deleteMessageBySelf(messageId).then(resp => {
|
||
// this.$message.success('删除留言成功！');
|
||
this.handleCurrentChange();
|
||
}).catch(error => {
|
||
this.$message.error('删除留言失败！');
|
||
this.console.error(error);
|
||
});
|
||
}
|
||
},
|
||
deleteComment(messageId, messageIndex, commentId) {
|
||
if (this.superAdmin) {
|
||
deleteCommentByAdmin(commentId).then(resp => {
|
||
this.getCommentList(messageId, messageIndex);
|
||
}).catch(error => {
|
||
this.$message.error('删除回复失败！');
|
||
this.console.error(error);
|
||
});
|
||
} else {
|
||
deleteCommentBySelf(commentId).then(resp => {
|
||
this.getCommentList(messageId, messageIndex);
|
||
}).catch(error => {
|
||
this.$message.error('删除回复失败！');
|
||
this.console.error(error);
|
||
});
|
||
}
|
||
},
|
||
viewMoreComment(data) {
|
||
queryMessageCommentList(data.id).then(resp => {
|
||
this.allCommentList = resp.data;
|
||
this.moreMessageId = data.id;
|
||
}).catch(error => {
|
||
this.console.error(error);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog-footer{
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.head_portrait{
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 25px;
|
||
}
|
||
.view_more {
|
||
cursor: pointer;
|
||
}
|
||
.view_more:hover {
|
||
cursor: pointer;
|
||
color: #409EFF;
|
||
}
|
||
.img-box{
|
||
width: 100px;
|
||
height: auto;
|
||
}
|
||
/deep/.el-dialog.is-fullscreen{
|
||
background-image:url('../../../../assets/bg_board.jpg');
|
||
}
|
||
/deep/.ql-container{
|
||
height: 80%;
|
||
}
|
||
</style>
|