A1300399510/PC-questions-answersnuxt
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改回答变讨论

Browse Source
This commit is contained in:
A1300399510
2025-01-21 19:06:13 +08:00
parent 8b5d8f4523
commit 9589e95cba
4 changed files with 190 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
components/commentList.vue
View File

@@ -2,7 +2,7 @@
<div class="answer-discuss">
<div class="header flexacenter">
回答&讨论
<span class="num">{{ 17 }}</span>
<span class="num">{{ commentCount || '' }}</span>
</div>
<div class="input-box">
<div class="top flexflex">
@@ -12,7 +12,7 @@
<div class="picture-box" v-if="picture.url">
<div class="picture">
<img class="close" @click="closeFileUpload()" src="/img/close-icon.png" />
<img class="img" :src="picture.base64 || picture.url" />
<img class="img" @click="handleAnswerText" :src="picture.base64 || picture.url" />
</div>
</div>
@@ -71,7 +71,7 @@
</div>
<div class="comments-content">
<div class="comments-text">{{ item["content"] }}</div>
<img class="comments-img" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" />
<img class="comments-img" @click="handleAnswerText" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" />
<div class="input-box" v-if="item['childState']">
<img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
<div class="top flexflex">
@@ -80,7 +80,7 @@
<div class="picture-box" v-if="item.picture?.url">
<div class="picture">
<img class="close" @click="closeFileUpload(index)" src="/img/close-icon.png" />
<img class="img" :src="item.picture.base64 || item.picture.url" />
<img class="img" @click="handleAnswerText" :src="item.picture.base64 || item.picture.url" />
</div>
</div>
<div class="bottom flexacenter">
@@ -138,21 +138,45 @@
</div>
<div class="comments-content">
<div class="comments-text">
<div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite["reply"]["nickname"] }}</div>
<!-- <div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite["reply"]["nickname"] }}</div> -->
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite["reply"]["nickname"] }}</div>
{{ ite["content"] }}
</div>
<div class="comments-input-box flexacenter" v-if="ite['childState']">
<div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="ite['commentInput']"></textarea>
<div class="comments-btn flexcenter">发送</div>
<img class="comments-img" @click="handleAnswerText" :src="ite.image?.base64 || ite.image?.url" v-if="ite.image?.url" />
<div class="input-box" v-if="ite['childState']">
<img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
<div class="top flexflex">
<div class="input-placeholder" v-if="ite.isPlaceholderVisible">回复“{{ ite["nickname"] }}”：</div>
<div class="input-textarea flex1" contenteditable="true" @focus="clearPlaceholder(index, i)" @blur="setPlaceholder($event, index, i)" @paste="handleInputPaste($event, index, i)"></div>
</div>
<div class="picture-box" v-if="ite.picture?.url">
<div class="picture">
<img class="close" @click="closeFileUpload(index, i)" src="/img/close-icon.png" />
<img class="img" @click="handleAnswerText" :src="ite.picture.base64 || ite.picture.url" />
</div>
</div>
<div class="bottom flexacenter">
<div class="operate flexacenter">
<div class="item" :class="{ 'pitch': ite.emojiState }">
<img class="icon" src="/img/smiling-face.png" @click="openEmoji(index, i)" alt="" />
<div class="emoji-box">
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
</div>
</div>
<div class="item flexacenter">
<input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
<img class="icon" src="/img/picture-icon.png" alt="" />
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
</div>
</div>
<div class="btn" @click="submitAnswerComments(index, i)">发送</div>
</div>
<img class="forkfork" src="/img/cross-icon.png" />
</div>
</div>
</div>
<div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index, ind)">
<div class>还有{{ item["childnum"] - 1 }}条回复</div>
<div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index, i)">
<div class>还有{{ item["childnum"] - item.child.length }}条回复</div>
<img class="also-icon" src="/img/arrow-circular-gray.png" />
</div>
</div>
@@ -166,7 +190,7 @@ const props = defineProps({
})
onMounted(() => {
getComment()
// getComment()
})
const $ajax = inject("$ajax")
@@ -176,6 +200,9 @@ const handleDate = inject("handleDate")
const isNeedLogin = inject("isNeedLogin")
const handleMsg = inject("handleMsg")
const uploadImg = inject("uploadImg")
const handleAnswerText = inject("handleAnswerText")
const emojiMaskState = inject("emojiMaskState")
const commentList = ref([])
let commentCount = ref(0)
@@ -190,7 +217,7 @@ const getComment = () => {
$ajax("/api/comment/lists", {
token: detailsToken.value,
page: commentPage.value,
limit: 1000,
limit: 1500,
})
.then(res => {
if (res.code != 200) return
@@ -221,7 +248,7 @@ const getComment = () => {
}
commentList.value = commentList.value.concat(data.data)
console.log("commentList", commentList.value)
// console.log("commentList", commentList.value)
commentCount.value = data.count
commentTotalCount.value = data.comments
@@ -240,6 +267,19 @@ const getComment = () => {
})
}
// 监听 detailsToken 的变化
watch(
detailsToken,
(newValue, oldValue) => {
if (newValue !== oldValue) {
commentPage.value = 1
commentList.value = []
getComment()
}
},
{ immediate: true }
)
let picture = ref({})
const handleFileUpload = (event, index, i) => {
@@ -277,7 +317,6 @@ const closeFileUpload = (index, i) => {
//
let emojiState = ref(false)
let emojiMaskState = ref(false)
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"]
@@ -287,6 +326,8 @@ const openEmoji = (index, i) => {
else if (index != undefined) commentList.value[index]["emojiState"] = true
else emojiState.value = true
console.log("emojiMaskState", emojiMaskState)
emojiMaskState.value = true
}
@@ -305,13 +346,21 @@ const closeEmoji = (index, i) => {
emojiMaskState.value = false
}
defineExpose({
closeEmoji,
})
// 选择 Emoji
const selectEmoji = (key, index, i) => {
closeEmoji()
console.log("key", key)
if (i != undefined) {
const commentInput = document.querySelector(".comments-box .input-textarea")
commentInput.innerText += key
commentList.value[index].child[i]["isPlaceholderVisible"] = false
} else if (index != undefined) {
const commentInput = document.querySelector(".comments-box .input-textarea")
commentInput.innerText += key
commentList.value[index]["isPlaceholderVisible"] = false
} else {
inputTextareaRef.value.innerHTML += key
@@ -337,7 +386,7 @@ const setPlaceholder = (event, index, i) => {
}
}
const handleInputPaste = (event, index, i) => {
const handleInputPaste = (event, index, ii) => {
const items = event.clipboardData.items // 获取粘贴的内容
for (let i = 0; i < items.length; i++) {
const item = items[i]
@@ -349,16 +398,13 @@ const handleInputPaste = (event, index, i) => {
reader.onload = e => {
const base64 = e.target.result
uploadImg(base64).then(res => {
console.log(index)
const obj = {
base64,
...res,
}
if (i != undefined) commentList.value[index].child[i]["picture"] = {}
else if (index != undefined) commentList.value[index]["picture"] = {}
if (i != undefined) commentList.value[index].child[ii]["picture"] = obj
else if (index != undefined) commentList.value[index]["picture"] = obj
else picture.value = obj
handleMsg("success", "上传成功")
})
}
@@ -379,23 +425,23 @@ const submitAnswerComments = (index, i) => {
let content = ""
let parentid = null
let token = detailsToken.value
let image = []
let image = {}
if (i != null) {
const commentInput = document.querySelector(".comments-box .input-textarea")
content = commentInput.innerText
parentid = commentList.value[index]["child"][i]["id"]
image = commentList.value[index]["child"][i]["picture"]
} else if (index != null) {
const commentInput = document.querySelector(".comments-box .input-textarea")
content = commentInput.innerText
parentid = commentList.value[index]["id"]
image = commentList.value[index]["picture"]
} else {
content = inputTextareaRef.value.innerText
image = picture.value
}
console.log("content", content)
$ajax("/api/comment/submit", {
content,
token,
@@ -420,7 +466,7 @@ const submitAnswerComments = (index, i) => {
image,
}
commentList.value[index]["child"].unshift(targetData)
commentList.value[index]["child"].push(targetData)
commentList.value[index]["childnum"]++
} else if (index != null) {
let targetData = {
@@ -476,7 +522,7 @@ const operateAnswerCommentsLike = (token, index, i) => {
let data = res.data
console.log("i",i)
console.log("i", i)
if (i != undefined) {
commentList.value[index].child[i]["islike"] = data["status"]
@@ -492,7 +538,7 @@ const operateAnswerCommentsLike = (token, index, i) => {
// 打开 回答-评论 的子评论
const openAnswerCommentsChild = (index, i) => {
console.log("isNeedLogin", isNeedLogin)
// console.log("isNeedLogin", isNeedLogin)
if (isNeedLogin.value) {
goLogin()
@@ -518,11 +564,10 @@ const closeAnswerCommentsChild = () => {
}
// 获取剩下的子评论
const alsoCommentsData = (index, ind) => {
return
const targetAnswerList = [...answerList.value]
const parentid = targetAnswerList[index]["commentList"][ind]["id"]
const token = targetAnswerList[index]["token"]
const alsoCommentsData = (index, i) => {
// const targetAnswerList = [...answerList.value]
const parentid = commentList.value[index]["id"]
const token = detailsToken.value
$ajax("/api/comment/childrenList", {
token,
@@ -534,10 +579,16 @@ const alsoCommentsData = (index, ind) => {
if (res.code != 200) return
let data = res.data
let merged1 = [...targetAnswerList[index]["commentList"][ind]["child"], ...data.data.filter(item2 => !targetAnswerList[index]["commentList"][ind]["child"].find(item1 => item1.id == item2.id))]
let merged = [...commentList.value[index]["child"], ...data.data.filter(item2 => !commentList.value[index]["child"].find(item1 => item1.id == item2.id))]
targetAnswerList[index]["commentList"][ind]["child"] = merged1
answerList.value = targetAnswerList
console.log("merged1", merged)
merged.forEach(element => {
element["isPlaceholderVisible"] = true
})
commentList.value[index]["child"] = merged
// answerList.value = targetAnswerList
})
}