新讨论测试
This commit is contained in:
A1300399510
parent
2ad6ef4247
commit
8bf8d3ca9a
@ -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;
|
||||
|
||||
@ -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 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user