留言板调整

src/api/learn.js

@@ -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'
+    });
+}

src/utils/baseUrl.js

@@ -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'; // 杜康

src/views/newMap/displayNew/demon/messageBoard.vue

@@ -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;