joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

留言板调整

Browse Source
This commit is contained in:
fan 2020-11-17 16:55:05 +08:00
parent df386dcb75
commit 19a03ab258
7 changed files with 243 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/api/learn.js
View File

@ -16,3 +16,54 @@ export function answerPost(data) {
data: data
});
}
// 评论留言
export function commentLevelMessage(messageId, data) {
return request({
url: `/api/learn/${messageId}/comment`,
method: 'post',
data: data
});
}
// 评论 留言的评论
export function commentComents(messageId, commentId, data) {
return request({
url: `/api/learn/${messageId}/${commentId}/comment`,
method: 'post',
data: data
});
}
// 管理员删除留言
export function deleteMessageByAdmin(messageId) {
return request({
url: `/api/learn/${messageId}/delete/admin`,
method: 'delete'
});
}
// 用户自己删除留言
export function deleteMessageBySelf(messageId) {
return request({
url: `/api/learn/${messageId}/delete/user`,
method: 'delete'
});
}
// 查询留言的评论列表
export function queryMessageCommentList(messageId) {
return request({
url: `/api/learn/${messageId}/list`,
method: 'get'
});
}
// 删除评论回复管理员
export function deleteCommentByAdmin(commentId) {
return request({
url: `/api/learn/${commentId}/delete/admin`,
method: 'delete'
});
}
// 删除评论回复用户
export function deleteCommentBySelf(commentId) {
return request({
url: `/api/learn/${commentId}/delete/user`,
method: 'delete'
});
}

BIN
src/assets/delete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/like.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/reply.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/unlike.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

4
src/utils/baseUrl.js
View File

@ -1,11 +1,11 @@
export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
BASE_API = 'https://joylink.club/jlcloud';
// BASE_API = 'https://joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.8.107:9000'; // 袁琪
// BASE_API = 'http://192.168.8.129:9000'; // 旭强
// BASE_API = 'http://192.168.8.119:9000'; // 张赛
BASE_API = 'http://192.168.8.119:9000'; // 张赛
// BASE_API = 'http://192.168.8.110:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip';
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康

197
src/views/newMap/displayNew/demon/messageBoard.vue
View File

@ -10,18 +10,58 @@
<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;background-color: #fff">
<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>
<span>暂无留言</span>
</div>
<div style="width: 100%;text-align: center;">
<el-pagination
@ -33,21 +73,26 @@
/>
</div>
</el-card>
<quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" placeholder="请输入内容" :margin-bottom="20" :unload-img="true" :noHandleP="true" />
<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);" @click="handelCloseImg">
<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 } from '@/api/learn';
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() {
@ -58,9 +103,27 @@ export default {
pageSize: 10,
pageNum: 0,
total: 0,
imgShow: false
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 () {
@ -82,12 +145,17 @@ export default {
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.$message.success('留言成功 ！');
this.content = '';
}).catch(error => {
this.$message.error('留言失败 ！');
console.log(error);
});
},
handleCurrentChange() {
@ -121,6 +189,114 @@ export default {
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);
});
}
}
};
@ -137,6 +313,13 @@ export default {
height: 50px;
border-radius: 25px;
}
.view_more {
cursor: pointer;
}
.view_more:hover {
cursor: pointer;
color: #409EFF;
}
.img-box{
width: 100px;
height: auto;