新讨论测试

2025-02-17 19:01:20 +08:00 · 2025-02-17 19:01:20 +08:00 · 740ec94346
commit 740ec94346
parent 6af52632ba
5 changed files with 276 additions and 24 deletions
--- 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;
--- 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;
--- 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>

--- 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)
-}
+}
--- 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>