From 740ec94346fae034edc651093613699b6ddce9db Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Mon, 17 Feb 2025 19:01:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E8=AE=A8=E8=AE=BA=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/DetailsComments.css  |  48 +++++++++
 assets/css/DetailsComments.less |  54 ++++++++++
 components/DetailsComments.vue  | 183 ++++++++++++++++++++++++++++----
 composables/api.js              |   9 +-
 pages/index.html/index.vue      |   6 +-
 5 files changed, 276 insertions(+), 24 deletions(-)

diff --git a/assets/css/DetailsComments.css b/assets/css/DetailsComments.css
index 565671d..a41d58a 100644
--- a/assets/css/DetailsComments.css
+++ b/assets/css/DetailsComments.css
@@ -2,6 +2,54 @@
   padding-top: 22px;
   padding-left: 42px;
 }
+.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;
+}
+.comment-box .edit-comment .box {
+  width: 650px;
+  border-radius: 10px;
+  background: #fff;
+  padding: 20px 15px;
+}
+.comment-box .edit-comment .box .text {
+  font-size: 18px;
+  font-weight: 650;
+  margin-bottom: 15px;
+  color: #000;
+}
+.comment-box .edit-comment .box .input-box {
+  margin-right: 0;
+}
+.comment-box .edit-comment .box .input-box .bottom {
+  border-top: 1px solid #ebebeb;
+}
+.comment-box .edit-comment .box .btn-list {
+  padding: 15px 0;
+  justify-content: flex-end;
+}
+.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;
+}
+.comment-box .edit-comment .box .btn-list .btn.send {
+  background-color: #fddf6d;
+  border: 1px solid #fddf6d;
+}
 .comment-title {
   font-weight: 650;
   color: #000000;
diff --git a/assets/css/DetailsComments.less b/assets/css/DetailsComments.less
index b2903a7..41954e8 100644
--- a/assets/css/DetailsComments.less
+++ b/assets/css/DetailsComments.less
@@ -1,6 +1,60 @@
 .comment-box {
     padding-top: 22px;
     padding-left: 42px;
+    .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-weight: 650;
diff --git a/components/DetailsComments.vue b/components/DetailsComments.vue
index c449caf..b45e7fd 100644
--- a/components/DetailsComments.vue
+++ b/components/DetailsComments.vue
@@ -1,5 +1,43 @@
 <template>
     <div class="comment-box">
+        <!-- 编辑评论 -->
+        <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">
             讨论
             <span class="comment-amount">{{ commentComments || "" }}</span>
@@ -13,10 +51,10 @@
             <div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
         </div> -->
 
-        <div class="input-box" v-if="true">
+        <div class="input-box">
             <div class="top flexflex">
                 <img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
-                <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
+                <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
             </div>
             <div class="picture-box" v-if="picture.url">
                 <div class="picture">
@@ -32,7 +70,7 @@
                             <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
                         </div>
                     </div>
-                    <div class="item flexacenter">
+                    <div class="item flexacenter" @click="judgeLogin()">
                         <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
                         <img class="icon" src="@/assets/img/picture-icon.png" alt="" />
                         <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@@ -77,8 +115,8 @@
                                     <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
                                     <div class="operate-box">
                                         <div class="item flexcenter" @click="report(item['token'])">举报</div>
-                                        <div class="item flexcenter" @click="report(item['token'])">编辑</div>
-                                        <div class="item flexcenter" @click="commentDelete(item['token'], index)">删除</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>
                                 <!-- <img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> -->
@@ -164,10 +202,9 @@
                                                 <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" @click="report(ite['token'])">编辑</div>
-                                                    <div class="item flexcenter" @click="commentDelete(ite['token'], index, i)">删除</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> -->
                                             </div>
                                             <img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                             <div class="flexacenter like-box" @click="commentLike(index, i)">
@@ -278,7 +315,14 @@ watch(
 
 onMounted(() => window.addEventListener("scroll", handleScroll))
 
-onMounted(() => {})
+let permissions = ref([])
+
+onMounted(() => {
+    setTimeout(() => {
+        // permissions.value = window["permissions"] || []
+        permissions.value = ["comment.edit", "comment.delete"]
+    }, 1000)
+})
 
 const sendMessage = inject("sendMessage")
 const TAHomePage = inject("TAHomePage")
@@ -634,6 +678,10 @@ const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰
 
 // 打开 Emoji
 const openEmoji = (index, i) => {
+    if (isNeedLogin.value) {
+        goLogin()
+        return
+    }
     if (i != undefined) commentList.value[index].child[i]["emojiState"] = true
     else if (index != undefined) commentList.value[index]["emojiState"] = true
     else {
@@ -658,6 +706,7 @@ const closeEmoji = (index, i) => {
 
     emojiState.value = false
     emojiMaskState.value = false
+    editEmojiState.value = false
 }
 
 // 选择 Emoji
@@ -708,9 +757,14 @@ const handleInputPaste = (event, index, ii) => {
                         base64,
                         ...res,
                     }
-                    if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
-                    else if (index != undefined) commentList.value[index]["picture"] = obj
-                    else picture.value = obj
+
+                    if (editCommentState.value) editPicture.value = obj
+                    else {
+                        if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
+                        else if (index != undefined) commentList.value[index]["picture"] = obj
+                        else picture.value = obj
+                    }
+
                     ElMessage({
                         message: "上传成功",
                         type: "success",
@@ -744,13 +798,12 @@ const handleFileUpload = (event, index, i) => {
                 base64,
                 ...res,
             }
-
-            if (i != undefined) {
-                commentList.value[index].child[i]["picture"] = obj
-            } else if (index != undefined) {
-                commentList.value[index]["picture"] = obj
-            } else picture.value = obj
-
+            if (editCommentState.value) editPicture.value = obj
+            else {
+                if (i != undefined) commentList.value[index].child[i]["picture"] = obj
+                else if (index != undefined) commentList.value[index]["picture"] = obj
+                else picture.value = obj
+            }
             ElMessage({
                 message: "上传成功",
                 type: "success",
@@ -828,6 +881,98 @@ 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(() => {
+        console.log("editInput.value", editInputRef.value)
+        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 = {})
+
 defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, bottomNavigationBar, closeAnswerCommentsChild })
 </script>
 
diff --git a/composables/api.js b/composables/api.js
index d36c0f5..571f03f 100644
--- a/composables/api.js
+++ b/composables/api.js
@@ -1,4 +1,4 @@
-import Http from "@/utils/http";
+import Http from "@/utils/http"
 // 投票, 数据列表 - 列表
 export const getListHttp = params => {
     return Http.post("/api/lists", params)
@@ -29,6 +29,11 @@ export const detailsSubmitommentListHttp = query => {
     return Http.post("/api/comment/submit", query)
 }
 
+// 详情数据 - 提交评论
+export const commentsEditSubmit = query => {
+    return Http.post("/api/comment/commentsEditSubmit", query)
+}
+
 // 发布相关 - 发布问题初始化,编辑
 export const publishInitHttp = query => {
     return Http.post("/api/publish", query)
@@ -122,4 +127,4 @@ export const commonUploadHttp = query => {
 // 评论相关 - 删除评论
 export const commentDeleteHttp = query => {
     return Http.post("/api/comment/commentDelete", query)
-}
\ No newline at end of file
+}
diff --git a/pages/index.html/index.vue b/pages/index.html/index.vue
index 23baba1..b843c80 100644
--- a/pages/index.html/index.vue
+++ b/pages/index.html/index.vue
@@ -39,9 +39,9 @@
                 <div class="vote-data-right flexacenter">
                     <div class="vote-data-item flexacenter"><img class="vote-data-icon" src="@/assets/img/eye-icon.svg" />&nbsp; {{ item.views }}</div>
                     <div class="vote-data-item flexacenter" @click.stop.prevent="handleLike(item['token'], index)">
-                        <!-- <img v-if="item['islike'] == 0" class="vote-data-icon" src="@/assets/img/expression-icon.svg" />
-                        <img v-else class="vote-data-icon" src="@/assets/img/like-yes.png" />&nbsp; {{ item["likes"] }} -->
-                        <img class="vote-data-icon" src="@/assets/img/expression-icon.png" />&nbsp; {{ item["ripostes"] }}
+                        <img v-if="item['islike'] == 0" class="vote-data-icon" src="@/assets/img/like-icon-gray.png" />
+                        <img v-else class="vote-data-icon" src="@/assets/img/like-yes.png" />&nbsp; {{ item["likes"] }}
+                        <!-- <img class="vote-data-icon" src="@/assets/img/expression-icon.png" />&nbsp; {{ item["ripostes"] }} -->
                     </div>
                     <div class="vote-data-item flexacenter"><img class="vote-data-icon" src="@/assets/img/comment-icon.svg" />&nbsp; {{ item["comments"] }}</div>
                 </div>