diff --git a/assets/css/details.css b/assets/css/details.css index 2f177f6..89cb533 100644 --- a/assets/css/details.css +++ b/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; diff --git a/assets/css/details.less b/assets/css/details.less index ad909fd..8d860d6 100644 --- a/assets/css/details.less +++ b/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 @@ } } } + diff --git a/components/Item.vue b/components/Item.vue index 63acd32..4d3d77b 100644 --- a/components/Item.vue +++ b/components/Item.vue @@ -31,10 +31,11 @@ {{ formatNumberWithCommas(item["views"] || 0) }}
- - - {{ item["ripostes"] || 0 }} + + + {{ item["likenum"] || 0 }} +
diff --git a/composables/api.js b/composables/api.js index f19a4c9..b7d0e2f 100644 --- a/composables/api.js +++ b/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) diff --git a/pages/details/[id].vue b/pages/details/[id].vue index 8b0d12d..54bdf88 100644 --- a/pages/details/[id].vue +++ b/pages/details/[id].vue @@ -154,15 +154,15 @@
学校
- {{ info["school"]?.name }} + {{ info["school"]?.name }}
专业
-
{{ info["profession"] }}
+
{{ info["profession"] }}
项目
-
{{ info["project"] }}
+
{{ info["project"] }}
@@ -215,6 +215,43 @@
+ +
+
+
编辑评论
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ +
+
{{ item }}
+
+
+
+ + + 最多可上传1张图片，支持在输入框中直接粘贴图片。 +
+
+
+
+
+
取消
+
发送
+
+
+
讨论
{{ commentComments || "" }}
@@ -293,7 +330,7 @@
举报
-
编辑
+
编辑
删除
@@ -381,7 +418,7 @@
举报
-
编辑
+
编辑
删除
@@ -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 - else if (index != undefined) commentList.value[index]["picture"] = obj - else picture.value = obj - ElMessage({ - message: "上传成功", - type: "success", - }) + 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.success("上传成功") }) } reader.readAsDataURL(file) @@ -1929,13 +1968,12 @@ const handleFileUpload = (event, index, i) => { ...res, } - if (i != undefined) { - commentList.value[index].child[i]["picture"] = obj - } else if (index != undefined) { - commentList.value[index]["picture"] = obj - } else picture.value = obj - - console.log("obj", 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: "上传成功", @@ -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 = {}