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) }}
</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-else src="@/assets/img/like-yes.png" /> -->
- <img class="data-item-icon" src="@/assets/img/expression-icon.svg" />
- {{ item["ripostes"] || 0 }}
+ <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" />
+ {{ item["likenum"] || 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" />
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 @@
<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
- 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 = {}
</script>
<style lang="less" scoped>