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-23 19:10:04 +08:00
parent 9589e95cba
commit 934abd11a4
4 changed files with 176 additions and 1004 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

950
app.vue
View File

File diff suppressed because it is too large Load Diff

145
components/commentList.vue
View File

@ -2,12 +2,12 @@
<div class="answer-discuss"> <div class="answer-discuss">
<div class="header flexacenter"> <div class="header flexacenter">
回答&讨论 回答&讨论
<span class="num">{{ commentCount || '' }}</span> <span class="num">{{ commentTotalCount || "" }}</span>
</div> </div>
<div class="input-box"> <div class="input-box">
<div class="top flexflex"> <div class="top flexflex">
<img class="avatar" src="https://axure-file.lanhuapp.com/md5__61e148c1ead80d48108f4e5a7f93abc3.svg" /> <img class="avatar" v-if="user.avatar" :src="user.avatar" />
<div class="input-textarea flex1" ref="inputTextareaRef" :class="{ 'placeholder': isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder()" @blur="setPlaceholder($event)" @paste="handleInputPaste"></div> <textarea class="input-textarea flex1" maxlength="500" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
</div> </div>
<div class="picture-box" v-if="picture.url"> <div class="picture-box" v-if="picture.url">
<div class="picture"> <div class="picture">
@ -38,11 +38,9 @@
<div class="comments-item" v-for="(item, index) in commentList" :key="index"> <div class="comments-item" v-for="(item, index) in commentList" :key="index">
<div class="comments-header flexacenter"> <div class="comments-header flexacenter">
<div class="comments-header-left flexacenter"> <div class="comments-header-left flexacenter">
<img class="comments-avatar" :src="item['avatar']" /> <img class="comments-avatar" @click="openUserInfo(index)" :src="item['avatar']" />
<div class="comments-username">{{ item["nickname"] }}</div> <div class="comments-username" @click="openUserInfo(index)">{{ item["nickname"] }}</div>
<div class="comments-time">{{ handleDate(item["timestamp"]) }}</div> <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
<!-- <div class="comments-identity" v-if="item['questioner'] == 1">提问者</div>
<div class="comments-identity" v-else-if="item['isauthor'] == 1">回答者</div> -->
<div class="comments-identity" v-if="item['isauthor'] == 1">提问者</div> <div class="comments-identity" v-if="item['isauthor'] == 1">提问者</div>
<div class="avatar-box flexflex" v-if="item['avatarState']"> <div class="avatar-box flexflex" v-if="item['avatarState']">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])"> <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
@ -53,7 +51,7 @@
<img class="avatar-icon" src="@/img/homepage-icon.png" /> <img class="avatar-icon" src="@/img/homepage-icon.png" />
TA的主页 TA的主页
</a> </a>
<div class="avatar-mask"></div> <div class="avatar-mask" @click="closeUserInfo(index)"></div>
</div> </div>
</div> </div>
<div class="comments-header-right flexacenter"> <div class="comments-header-right flexacenter">
@ -75,7 +73,7 @@
<div class="input-box" v-if="item['childState']"> <div class="input-box" v-if="item['childState']">
<img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" /> <img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
<div class="top flexflex"> <div class="top flexflex">
<div class="input-textarea flex1" :class="{ 'placeholder': item.isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder(index)" @blur="setPlaceholder($event, index)" @paste="handleInputPaste($event, index)"></div> <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的看法…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
</div> </div>
<div class="picture-box" v-if="item.picture?.url"> <div class="picture-box" v-if="item.picture?.url">
<div class="picture"> <div class="picture">
@ -105,12 +103,12 @@
<div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id"> <div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id">
<div class="comments-header flexacenter"> <div class="comments-header flexacenter">
<div class="comments-header-left flexacenter"> <div class="comments-header-left flexacenter">
<img class="comments-avatar" :src="ite['avatar']" /> <img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite['avatar']" />
<div class="comments-username">{{ ite["nickname"] }}</div> <div class="comments-username" @click="openUserInfo(index, i)">{{ ite["nickname"] }}</div>
<div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div> <div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div>
<div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div> <!-- <div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div> -->
<div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div> <!-- <div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div> -->
<div class="comments-identity" v-if="ite['isauthor'] == 1">提问者</div>
<div class="avatar-box flexflex" v-if="ite['avatarState']"> <div class="avatar-box flexflex" v-if="ite['avatarState']">
<a class="avatar-item flexcenter" target="_blank"> <a class="avatar-item flexcenter" target="_blank">
<img class="avatar-icon" src="@/img/send-messages-icon.png" /> <img class="avatar-icon" src="@/img/send-messages-icon.png" />
@ -120,7 +118,7 @@
<img class="avatar-icon" src="@/img/homepage-icon.png" /> <img class="avatar-icon" src="@/img/homepage-icon.png" />
TA的主页 TA的主页
</a> </a>
<div class="avatar-mask"></div> <div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
</div> </div>
</div> </div>
<div class="comments-header-right flexacenter"> <div class="comments-header-right flexacenter">
@ -146,8 +144,7 @@
<div class="input-box" v-if="ite['childState']"> <div class="input-box" v-if="ite['childState']">
<img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" /> <img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
<div class="top flexflex"> <div class="top flexflex">
<div class="input-placeholder" v-if="ite.isPlaceholderVisible">回复“{{ ite["nickname"] }}”：</div> <textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" :placeholder="'回复“' + ite['nickname'] + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
<div class="input-textarea flex1" contenteditable="true" @focus="clearPlaceholder(index, i)" @blur="setPlaceholder($event, index, i)" @paste="handleInputPaste($event, index, i)"></div>
</div> </div>
<div class="picture-box" v-if="ite.picture?.url"> <div class="picture-box" v-if="ite.picture?.url">
<div class="picture"> <div class="picture">
@ -202,7 +199,7 @@ const handleMsg = inject("handleMsg")
const uploadImg = inject("uploadImg") const uploadImg = inject("uploadImg")
const handleAnswerText = inject("handleAnswerText") const handleAnswerText = inject("handleAnswerText")
const emojiMaskState = inject("emojiMaskState") const emojiMaskState = inject("emojiMaskState")
const user = inject("user")
const commentList = ref([]) const commentList = ref([])
let commentCount = ref(0) let commentCount = ref(0)
@ -225,14 +222,11 @@ const getComment = () => {
data.data.forEach((element, index) => { data.data.forEach((element, index) => {
element["isReplyBoxShow"] = 0 element["isReplyBoxShow"] = 0
element["isPlaceholderVisible"] = true
// element.timestamp = util.timeformat(element.timestamp, 2) // element.timestamp = util.timeformat(element.timestamp, 2)
if (element.child.length > 0) { if (element.child.length > 0) {
element.child.forEach(el => { element.child.forEach(el => {
// el.timestamp = util.timeformat(el.timestamp, 2) // el.timestamp = util.timeformat(el.timestamp, 2)
el["isReplyBoxShow"] = 0 el["isReplyBoxShow"] = 0
el["isPlaceholderVisible"] = true
}) })
} }
}) })
@ -282,16 +276,23 @@ watch(
let picture = ref({}) let picture = ref({})
const maxSize = 20 * 1024 * 1024 // 20MB
const handleFileUpload = (event, index, i) => { const handleFileUpload = (event, index, i) => {
closeEmoji() closeEmoji()
const file = event.target.files[0] // 获取选择的文件 const file = event.target.files[0] // 获取选择的文件
if (file) {
if (!file) return
if (file.size > maxSize) {
handleMsg("error", "文件大小不能超过 20MB")
return
}
const reader = new FileReader() const reader = new FileReader()
reader.onload = e => { reader.onload = e => {
const base64 = e.target.result const base64 = e.target.result
uploadImg(base64).then(res => { uploadImg(base64).then(res => {
console.log("base64", base64)
const obj = { const obj = {
base64, base64,
...res, ...res,
@ -305,7 +306,6 @@ const handleFileUpload = (event, index, i) => {
}) })
} }
reader.readAsDataURL(file) reader.readAsDataURL(file)
}
} }
// 删除上传的图片 // 删除上传的图片
@ -326,8 +326,6 @@ const openEmoji = (index, i) => {
else if (index != undefined) commentList.value[index]["emojiState"] = true else if (index != undefined) commentList.value[index]["emojiState"] = true
else emojiState.value = true else emojiState.value = true
console.log("emojiMaskState", emojiMaskState)
emojiMaskState.value = true emojiMaskState.value = true
} }
@ -353,56 +351,49 @@ defineExpose({
// 选择 Emoji // 选择 Emoji
const selectEmoji = (key, index, i) => { const selectEmoji = (key, index, i) => {
closeEmoji() closeEmoji()
console.log("key", key)
if (i != undefined) { if (i != undefined) {
const commentInput = document.querySelector(".comments-box .input-textarea") // const commentInput = document.querySelector(".comments-box .input-textarea")
commentInput.innerText += key if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = ""
commentList.value[index].child[i]["isPlaceholderVisible"] = false commentList.value[index]["child"][i]["commentInput"] += key
} else if (index != undefined) { } else if (index != undefined) {
const commentInput = document.querySelector(".comments-box .input-textarea") // const commentInput = document.querySelector(".comments-box .input-textarea")
commentInput.innerText += key if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = ""
commentList.value[index]["isPlaceholderVisible"] = false commentList.value[index]["commentInput"] += key
} else { } else {
inputTextareaRef.value.innerHTML += key inputTextarea.value += key
isPlaceholderVisible.value = false
} }
} }
let isPlaceholderVisible = ref(true) // 自动输入框增高
const autoResize = e => {
const clearPlaceholder = (index, i) => { e.target.style.height = "auto" // 重置高度
if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = false e.target.style.height = `${e.target.scrollHeight}px` // 设置为内容高度
else if (index != undefined) commentList.value[index]["isPlaceholderVisible"] = false
else isPlaceholderVisible.value = false
}
const setPlaceholder = (event, index, i) => {
if (event.target.innerHTML == "<br>") event.target.innerHTML = ""
const html = event.target.innerHTML
if (!html) {
if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = true
else if (index != undefined) commentList.value[index]["isPlaceholderVisible"] = true
else isPlaceholderVisible.value = true
}
} }
const handleInputPaste = (event, index, ii) => { const handleInputPaste = (event, index, ii) => {
const items = event.clipboardData.items // 获取粘贴的内容 const items = event.clipboardData.items // 获取粘贴的内容
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
const item = items[i] const item = items[i]
if (item.type.startsWith("image/")) { if (item.type.startsWith("image/")) {
// 检查是否为图片
event.preventDefault() event.preventDefault()
const file = item.getAsFile() // 获取文件 const file = item.getAsFile() // 获取文件
if (file.size > maxSize) {
handleMsg("error", "文件大小不能超过 20MB")
return
}
const reader = new FileReader() const reader = new FileReader()
reader.onload = e => { reader.onload = e => {
const base64 = e.target.result const base64 = e.target.result
uploadImg(base64).then(res => { uploadImg(base64).then(res => {
const obj = { const obj = {
base64, base64,
...res, ...res,
} }
if (i != undefined) commentList.value[index].child[ii]["picture"] = obj if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
else if (index != undefined) commentList.value[index]["picture"] = obj else if (index != undefined) commentList.value[index]["picture"] = obj
else picture.value = obj else picture.value = obj
handleMsg("success", "上传成功") handleMsg("success", "上传成功")
@ -413,7 +404,7 @@ const handleInputPaste = (event, index, ii) => {
} }
} }
let inputTextareaRef = ref(null) let inputTextarea = ref("")
// 提交回答-评论 // 提交回答-评论
const submitAnswerComments = (index, i) => { const submitAnswerComments = (index, i) => {
@ -428,25 +419,25 @@ const submitAnswerComments = (index, i) => {
let image = {} let image = {}
if (i != null) { if (i != null) {
const commentInput = document.querySelector(".comments-box .input-textarea") content = commentList.value[index]["child"][i]["commentInput"]
content = commentInput.innerText
parentid = commentList.value[index]["child"][i]["id"] parentid = commentList.value[index]["child"][i]["id"]
image = commentList.value[index]["child"][i]["picture"] image = commentList.value[index]["child"][i]["picture"]
} else if (index != null) { } else if (index != null) {
const commentInput = document.querySelector(".comments-box .input-textarea") content = commentList.value[index]["commentInput"]
content = commentInput.innerText
parentid = commentList.value[index]["id"] parentid = commentList.value[index]["id"]
image = commentList.value[index]["picture"] image = commentList.value[index]["picture"]
} else { } else {
content = inputTextareaRef.value.innerText content = inputTextarea.value
image = picture.value image = picture.value
} }
console.log("content", content, "1111", commentList.value[index])
$ajax("/api/comment/submit", { $ajax("/api/comment/submit", {
content, content,
token, token,
parentid, parentid,
image, image: image ? { aid: image.aid, url: image.url } : null,
}).then(res => { }).then(res => {
if (res.code != 200) return if (res.code != 200) return
let data = res.data let data = res.data
@ -462,7 +453,6 @@ const submitAnswerComments = (index, i) => {
nickname: commentList.value[index]["child"][i]["nickname"], nickname: commentList.value[index]["child"][i]["nickname"],
}, },
...data, ...data,
isPlaceholderVisible: true,
image, image,
} }
@ -477,7 +467,6 @@ const submitAnswerComments = (index, i) => {
likenum: 0, likenum: 0,
reply: [], reply: [],
...data, ...data,
isPlaceholderVisible: true,
image, image,
} }
commentList.value[index]["child"].unshift(targetData) commentList.value[index]["child"].unshift(targetData)
@ -491,15 +480,16 @@ const submitAnswerComments = (index, i) => {
likenum: 0, likenum: 0,
...data, ...data,
child: [], child: [],
isPlaceholderVisible: true,
image, image,
} }
commentList.value.unshift(targetData) commentList.value.unshift(targetData)
commentCount.value++ // commentCount.value++
inputTextareaRef.value.innerHTML = "" inputTextarea.value = ""
picture.value = {} picture.value = {}
} }
commentTotalCount.value = data.count || 0
// targetAnswerList[index]["commentnum"] = data["count"] // targetAnswerList[index]["commentnum"] = data["count"]
closeAnswerCommentsChild() closeAnswerCommentsChild()
@ -519,11 +509,8 @@ const operateAnswerCommentsLike = (token, index, i) => {
token, token,
}).then(res => { }).then(res => {
if (res.code != 200) return if (res.code != 200) return
let data = res.data let data = res.data
console.log("i", i)
if (i != undefined) { if (i != undefined) {
commentList.value[index].child[i]["islike"] = data["status"] commentList.value[index].child[i]["islike"] = data["status"]
commentList.value[index].child[i]["likenum"] = data["likenum"] commentList.value[index].child[i]["likenum"] = data["likenum"]
@ -572,21 +559,15 @@ const alsoCommentsData = (index, i) => {
$ajax("/api/comment/childrenList", { $ajax("/api/comment/childrenList", {
token, token,
parentid, parentid,
limit: 20, limit: 2000,
page: 1, page: 1,
childlimit: 1, childlimit: 3,
}).then(res => { }).then(res => {
if (res.code != 200) return if (res.code != 200) return
let data = res.data let data = res.data
let merged = [...commentList.value[index]["child"], ...data.data.filter(item2 => !commentList.value[index]["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))]
console.log("merged1", merged)
merged.forEach(element => {
element["isPlaceholderVisible"] = true
})
commentList.value[index]["child"] = merged commentList.value[index]["child"] = merged
// answerList.value = targetAnswerList // answerList.value = targetAnswerList
}) })
@ -604,5 +585,15 @@ const openMenuState = (index, i) => {
else reportToken = commentList.value[index]["child"][i]["token"] else reportToken = commentList.value[index]["child"][i]["token"]
handleMenuState(reportToken) handleMenuState(reportToken)
} }
const openUserInfo = (index, i) => {
if (i != undefined && commentList.value[index].child[i]["uin"] > 0) commentList.value[index].child[i]["avatarState"] = true
else if (index != undefined && commentList.value[index]["uin"] > 0) commentList.value[index]["avatarState"] = true
}
const closeUserInfo = (index, i) => {
if (i != undefined) commentList.value[index].child[i]["avatarState"] = false
else if (index != undefined) commentList.value[index]["avatarState"] = false
}
</script> </script>
<style scoped></style> <style scoped></style>

24
css/index.css
View File

@ -373,7 +373,7 @@ a {
right: -5px; right: -5px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background-image: url("img/triangle-icon.svg"); background-image: url("/img/triangle-icon.svg");
} }
#answer-app .main .list-box .list .item.pitch .content { #answer-app .main .list-box .list .item.pitch .content {
border: none; border: none;
@ -401,6 +401,7 @@ a {
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
line-height: 22px; line-height: 22px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
} }
#answer-app .main .list-box .list .item .content .issue-title .issue em { #answer-app .main .list-box .list .item .content .issue-title .issue em {
color: #ff0000; color: #ff0000;
@ -422,6 +423,7 @@ a {
font-size: 13px; font-size: 13px;
text-decoration: none; text-decoration: none;
margin-top: 8px; margin-top: 8px;
font-weight: 400;
} }
#answer-app .main .list-box .list .item .content .answer * { #answer-app .main .list-box .list .item .content .answer * {
white-space: nowrap; white-space: nowrap;
@ -540,6 +542,7 @@ a {
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
position: relative; position: relative;
padding-bottom: 200px;
} }
#answer-app .main .details-area-box .details-box .emoji-box-mask { #answer-app .main .details-area-box .details-box .emoji-box-mask {
position: absolute; position: absolute;
@ -721,10 +724,20 @@ a {
min-height: 80px; min-height: 80px;
padding-bottom: 11px; padding-bottom: 11px;
} }
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea.placeholder::after { #answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea * {
content: "说说你的看法…"; background: transparent !important;
color: #7f7f7f; color: #000 !important;
pointer-events: none; border: none !important;
outline: none !important;
font-size: 14px !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea img {
display: none !important;
} }
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .picture-box { #answer-app .main .details-area-box .details-box .answer-discuss .input-box .picture-box {
padding-bottom: 10px; padding-bottom: 10px;
@ -1504,6 +1517,7 @@ a {
color: #7f7f7f; color: #7f7f7f;
cursor: pointer; cursor: pointer;
height: 53px; height: 53px;
line-height: 54px;
} }
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item:not(:first-of-type) { #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item:not(:first-of-type) {
margin-left: 36px; margin-left: 36px;

31
css/index.less
View File

@ -461,7 +461,7 @@ a {
right: -5px; right: -5px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background-image: url("./img/triangle-icon.svg"); background-image: url("/img/triangle-icon.svg");
} }
.content { .content {
@ -512,6 +512,7 @@ a {
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
line-height: 22px; line-height: 22px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
em { em {
color: #ff0000; color: #ff0000;
@ -538,6 +539,7 @@ a {
font-size: 13px; font-size: 13px;
text-decoration: none; text-decoration: none;
margin-top: 8px; margin-top: 8px;
font-weight: 400;
& * { & * {
white-space: nowrap; white-space: nowrap;
@ -688,6 +690,7 @@ a {
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
position: relative; position: relative;
padding-bottom: 200px;
.emoji-box-mask { .emoji-box-mask {
position: absolute; position: absolute;
@ -891,10 +894,27 @@ a {
background-color: transparent; background-color: transparent;
min-height: 80px; min-height: 80px;
padding-bottom: 11px; padding-bottom: 11px;
&.placeholder::after { // &.placeholder::after {
content: "说说你的看法…"; // content: "说说你的看法…";
color: #7f7f7f; // color: #7f7f7f;
pointer-events: none; // pointer-events: none;
// }
* {
background: transparent !important;
color: #000 !important;
border: none !important;
outline: none !important;
font-size: 14px !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
}
img {
display: none !important;
} }
} }
} }
@ -1816,6 +1836,7 @@ a {
color: #7f7f7f; color: #7f7f7f;
cursor: pointer; cursor: pointer;
height: 53px; height: 53px;
line-height: 54px;
&:not(:first-of-type) { &:not(:first-of-type) {
margin-left: 36px; margin-left: 36px;
} }