新讨论测试

assets/css/details.css

@@ -477,6 +477,54 @@
   padding-top: 40px;
   padding-left: 45px;
 }
+.content .right .comment-box .edit-comment {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 12;
+}
+.content .right .comment-box .edit-comment .box {
+  width: 650px;
+  border-radius: 10px;
+  background: #fff;
+  padding: 20px 15px;
+}
+.content .right .comment-box .edit-comment .box .text {
+  font-size: 18px;
+  font-weight: 650;
+  margin-bottom: 15px;
+  color: #000;
+}
+.content .right .comment-box .edit-comment .box .input-box {
+  margin-right: 0;
+}
+.content .right .comment-box .edit-comment .box .input-box .bottom {
+  border-top: 1px solid #ebebeb;
+}
+.content .right .comment-box .edit-comment .box .btn-list {
+  padding: 15px 0;
+  justify-content: flex-end;
+}
+.content .right .comment-box .edit-comment .box .btn-list .btn {
+  font-size: 14px;
+  color: #333;
+  width: 80px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  border-radius: 43px;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ebebeb;
+  margin-left: 20px;
+}
+.content .right .comment-box .edit-comment .box .btn-list .btn.send {
+  background-color: #fddf6d;
+  border: 1px solid #fddf6d;
+}
 .content .right .comment-box .comment-title {
   font-size: 16px;
   line-height: 20px;

assets/css/details.less

@@ -565,6 +565,62 @@
         .comment-box {
             padding-top: 40px;
             padding-left: 45px;
+
+            .edit-comment {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                background-color: rgba(0, 0, 0, 0.5);
+                z-index: 12;
+                .box {
+                    width: 650px;
+                    // height: 500px;
+                    border-radius: 10px;
+                    background: #fff;
+                    padding: 20px 15px;
+
+                    .text {
+                        font-size: 18px;
+                        font-weight: 650;
+                        margin-bottom: 15px;
+                        color: #000;
+                    }
+
+                    .input-box {
+                        margin-right: 0;
+                        .bottom {
+                            border-top: 1px solid #ebebeb;
+                        }
+                    }
+
+                    .btn-list {
+                        padding: 15px 0;
+                        justify-content: flex-end;
+
+                        .btn {
+                            font-size: 14px;
+                            color: #333;
+                            width: 80px;
+                            height: 28px;
+                            line-height: 28px;
+                            text-align: center;
+                            border-radius: 43px;
+                            cursor: pointer;
+                            background-color: #fff;
+                            border: 1px solid #ebebeb;
+                            margin-left: 20px;
+
+                            &.send {
+                                background-color: #fddf6d;
+                                border: 1px solid #fddf6d;
+                            }
+                        }
+                    }
+                }
+            }
+
             .comment-title {
                 font-size: 16px;
                 line-height: 20px;
@@ -1874,3 +1930,4 @@
         }
     }
 }
+

components/Item.vue

@@ -31,10 +31,11 @@
                     {{ formatNumberWithCommas(item["views"] || 0) }}
                 </div>
                 <div class="data-item flexacenter" @click.prevent="handleLike(item['uniqid'], item['token'], item['islike'])">
-                    <!-- <img class="data-item-icon" v-if="item['islike'] == 0" src="@/assets/img/like-no.svg" />
+                    <img class="data-item-icon" v-if="item['islike'] == 0" src="@/assets/img/like-no.svg" />
-                    <img class="data-item-icon" v-else src="@/assets/img/like-yes.png" /> -->
+                    <img class="data-item-icon" v-else src="@/assets/img/like-yes.png" />
-                    <img class="data-item-icon" src="@/assets/img/expression-icon.svg" />
+                    {{ item["likenum"] || 0 }}
-                    {{ item["ripostes"] || 0 }}
+                    <!-- <img class="data-item-icon" src="@/assets/img/expression-icon.svg" />
+                    {{ item["ripostes"] || 0 }} -->
                 </div>
                 <div class="data-item flexacenter">
                     <img class="data-item-icon" src="@/assets/img/comment-icon.svg" />

composables/api.js

@@ -28,15 +28,22 @@ export const detailsHttp = query => {
 export const detailsCommentListHttp = query => {
     return Http.post("/api/comment/lists", query)
 }
+
 // 详情数据 - 获取子评论数据
 export const detailsChildCommentListHttp = query => {
     return Http.post("/api/comment/childrenList", query)
 }
+
 // 详情数据 - 提交评论
 export const detailsSubmitommentListHttp = query => {
     return Http.post("/api/comment/submit", query)
 }
 
+// 详情数据 - 提交评论
+export const commentsEditSubmit = query => {
+    return Http.post("/api/comment/commentsEditSubmit", query)
+}
+
 // 评论相关 - 评论点赞
 export const detailsLikeCommentHttp = query => {
     return Http.post("/api/comment/like", query)

pages/details/[id].vue

@@ -154,15 +154,15 @@
                         <div class="details-list">
                             <div class="details-list-item flexacenter" v-if="info['school']">
                                 <div class="details-name">学校</div>
-                                <a class="details-value" target="_blank" :href="info['school']?.['url']">{{ info["school"]?.name }}</a>
+                                <a class="details-value flex1" target="_blank" :href="info['school']?.['url']">{{ info["school"]?.name }}</a>
                             </div>
                             <div class="details-list-item flexacenter" v-if="info['profession']">
                                 <div class="details-name">专业</div>
-                                <div class="details-value">{{ info["profession"] }}</div>
+                                <div class="details-value flex1">{{ info["profession"] }}</div>
                             </div>
                             <div class="details-list-item flexacenter" v-if="info['project']">
                                 <div class="details-name">项目</div>
-                                <div class="details-value">{{ info["project"] }}</div>
+                                <div class="details-value flex1">{{ info["project"] }}</div>
                             </div>
                         </div>
                     </div>
@@ -215,6 +215,43 @@
 
                 <!-- 讨论 -->
                 <div class="comment-box" ref="commentBoxRef">
+                    <!-- 编辑评论 -->
+                    <div v-if="editCommentState" class="edit-comment flexcenter">
+                        <div class="box">
+                            <div class="text">编辑评论</div>
+                            <div class="input-box">
+                                <div class="top flexflex">
+                                    <textarea ref="editInputRef" class="input-textarea flex1" maxlength="500" v-model="editInput" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
+                                </div>
+                                <div class="picture-box" v-if="editPicture.url">
+                                    <div class="picture">
+                                        <img class="close" @click="closeEditFileUpload()" src="@/assets/img/close-icon.png" />
+                                        <img class="img" @click="handleAnswerText" :src="editPicture.base64 || editPicture.url" />
+                                    </div>
+                                </div>
+
+                                <div class="bottom flexacenter">
+                                    <div class="operate flexacenter">
+                                        <div class="item" :class="{ 'pitch': editEmojiState }">
+                                            <img class="icon" src="@/assets/img/smiling-face.png" @click="openEditEmoji()" alt="" />
+                                            <div class="emoji-box">
+                                                <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEditEmoji(item)">{{ item }}</div>
+                                            </div>
+                                        </div>
+                                        <div class="item flexacenter" @click="judgeLogin()">
+                                            <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
+                                            <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
+                                            <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="btn-list flexacenter">
+                                <div class="btn" @click="closeEdit()">取消</div>
+                                <div class="btn send" @click="postEditComment()">发送</div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="comment-title flexacenter">
                         讨论
                         <div class="value">{{ commentComments || "" }}</div>
@@ -293,7 +330,7 @@
                                                 <!-- <div class="report-box flexcenter" @click="report(item['token'])">举报</div> -->
                                                 <div class="operate-box">
                                                     <div class="item flexcenter" @click="report(item['token'])">举报</div>
-                                                    <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="report(item['token'])">编辑</div>
+                                                    <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(item['token'], index)">编辑</div>
                                                     <div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
                                                 </div>
                                             </div>
@@ -381,7 +418,7 @@
                                                             <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
                                                             <div class="operate-box">
                                                                 <div class="item flexcenter" @click="report(ite['token'])">举报</div>
-                                                                <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="report(ite['token'])">编辑</div>
+                                                                <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(ite['token'], index, i)">编辑</div>
                                                                 <div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(ite['token'], index, i)">删除</div>
                                                             </div>
                                                             <!-- <div class="report-box flexcenter" @click="report(ite['token'])">举报</div> -->
@@ -1842,6 +1879,7 @@ const closeEmoji = (index, i) => {
 
     emojiState.value = false
     emojiMaskState.value = false
+    editEmojiState.value = false
 }
 
 // 选择 Emoji
@@ -1892,13 +1930,14 @@ const handleInputPaste = (event, index, ii) => {
                         base64,
                         ...res,
                     }
-                    if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
+                    if (editCommentState.value) editPicture.value = obj
-                    else if (index != undefined) commentList.value[index]["picture"] = obj
+                    else {
-                    else picture.value = obj
+                        if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
-                    ElMessage({
+                        else if (index != undefined) commentList.value[index]["picture"] = obj
-                        message: "上传成功",
+                        else picture.value = obj
-                        type: "success",
+                    }
-                    })
+
+                    ElMessage.success("上传成功")
                 })
             }
             reader.readAsDataURL(file)
@@ -1929,13 +1968,12 @@ const handleFileUpload = (event, index, i) => {
                 ...res,
             }
 
-            if (i != undefined) {
+            if (editCommentState.value) editPicture.value = obj
-                commentList.value[index].child[i]["picture"] = obj
+            else {
-            } else if (index != undefined) {
+                if (i != undefined) commentList.value[index].child[i]["picture"] = obj
-                commentList.value[index]["picture"] = obj
+                else if (index != undefined) commentList.value[index]["picture"] = obj
-            } else picture.value = obj
+                else picture.value = obj
-
+            }
-            console.log("obj", obj)
 
             ElMessage({
                 message: "上传成功",
@@ -1997,6 +2035,7 @@ let permissions = ref([])
 onMounted(() => {
     setTimeout(() => {
         permissions.value = window["permissions"] || []
+        // permissions.value = ["comment.edit", "comment.delete"]
     }, 1000)
 })
 
@@ -2033,6 +2072,93 @@ const commentDelete = (token, index, i) => {
 const judgeLogin = () => {
     if (isNeedLogin.value) goLogin()
 }
+
+let editCommentState = ref(false)
+let editToken = ""
+let editPicture = ref({})
+let editInput = ref("")
+let editEmojiState = ref(false)
+const editInputRef = ref(null)
+
+const openEdit = (token, index, i) => {
+    const list = JSON.parse(JSON.stringify(commentList.value))
+    let target = {}
+    if (i != null) target = list[index]["child"][i]
+    else target = list[index]
+    console.log(token, index, i, target)
+    editToken = target.token || ""
+    editInput.value = target.content || ""
+    editPicture.value = target.image || {}
+
+    editCommentState.value = true
+
+    nextTick(() => {
+        editInputRef.value.style.height = `${editInputRef.value.scrollHeight}px`
+    })
+}
+
+const closeEdit = () => {
+    editPicture.value = {}
+    editToken = ""
+    editInput.value = ""
+    editCommentState.value = false
+}
+
+// 打开 Emoji
+const openEditEmoji = (index, i) => {
+    if (isNeedLogin.value) {
+        goLogin()
+        return
+    }
+    editEmojiState.value = true
+}
+
+const selectEditEmoji = key => {
+    closeEmoji()
+    editInput.value += key
+}
+
+const postEditComment = () => {
+    if (isNeedLogin.value) {
+        goLogin()
+        return
+    }
+
+    const image = editPicture.value
+
+    commentsEditSubmit({
+        content: editInput.value,
+        token: editToken,
+        image: image ? { aid: image.aid, url: image.url } : null,
+    }).then(res => {
+        if (res.code != 200) {
+            ElMessage.error(res.message)
+            return
+        }
+
+        commentList.value.forEach(element => {
+            if (element.token == editToken) {
+                element["content"] = editInput.value
+                element["image"] = image
+            }
+            element.child &&
+                element.child.forEach(ele => {
+                    if (ele.token == editToken) {
+                        ele["content"] = editInput.value
+                        ele["image"] = image
+                    }
+                })
+        })
+
+        editPicture.value = {}
+        editToken = ""
+        editCommentState.value = false
+        editEmojiState.value = false
+        ElMessage.success(res.message)
+    })
+}
+
+const closeEditFileUpload = () => editPicture.value = {}
 </script>
 
 <style lang="less" scoped>