问答去掉回答，改为讨论，删除不必要的代码
This commit is contained in:
A1300399510
parent
9589e95cba
commit
934abd11a4
@ -2,12 +2,12 @@
|
||||
<div class="answer-discuss">
|
||||
<div class="header flexacenter">
|
||||
回答&讨论
|
||||
<span class="num">{{ commentCount || '' }}</span>
|
||||
<span class="num">{{ commentTotalCount || "" }}</span>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div class="top flexflex">
|
||||
<img class="avatar" src="https://axure-file.lanhuapp.com/md5__61e148c1ead80d48108f4e5a7f93abc3.svg" />
|
||||
<div class="input-textarea flex1" ref="inputTextareaRef" :class="{ 'placeholder': isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder()" @blur="setPlaceholder($event)" @paste="handleInputPaste"></div>
|
||||
<img class="avatar" v-if="user.avatar" :src="user.avatar" />
|
||||
<textarea class="input-textarea flex1" maxlength="500" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
|
||||
</div>
|
||||
<div class="picture-box" v-if="picture.url">
|
||||
<div class="picture">
|
||||
@ -38,11 +38,9 @@
|
||||
<div class="comments-item" v-for="(item, index) in commentList" :key="index">
|
||||
<div class="comments-header flexacenter">
|
||||
<div class="comments-header-left flexacenter">
|
||||
<img class="comments-avatar" :src="item['avatar']" />
|
||||
<div class="comments-username">{{ item["nickname"] }}</div>
|
||||
<img class="comments-avatar" @click="openUserInfo(index)" :src="item['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index)">{{ item["nickname"] }}</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="avatar-box flexflex" v-if="item['avatarState']">
|
||||
<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" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask"></div>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
@ -75,7 +73,7 @@
|
||||
<div class="input-box" v-if="item['childState']">
|
||||
<img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
|
||||
<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 class="picture-box" v-if="item.picture?.url">
|
||||
<div class="picture">
|
||||
@ -105,12 +103,12 @@
|
||||
<div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id">
|
||||
<div class="comments-header flexacenter">
|
||||
<div class="comments-header-left flexacenter">
|
||||
<img class="comments-avatar" :src="ite['avatar']" />
|
||||
<div class="comments-username">{{ ite["nickname"] }}</div>
|
||||
<img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index, i)">{{ ite["nickname"] }}</div>
|
||||
<div class="comments-time">{{ handleDate(ite["timestamp"]) }}</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-if="ite['questioner'] == 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']">
|
||||
<a class="avatar-item flexcenter" target="_blank">
|
||||
<img class="avatar-icon" src="@/img/send-messages-icon.png" />
|
||||
@ -120,7 +118,7 @@
|
||||
<img class="avatar-icon" src="@/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask"></div>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
@ -146,8 +144,7 @@
|
||||
<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>
|
||||
<textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" :placeholder="'回复“' + ite['nickname'] + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
|
||||
</div>
|
||||
<div class="picture-box" v-if="ite.picture?.url">
|
||||
<div class="picture">
|
||||
@ -202,7 +199,7 @@ const handleMsg = inject("handleMsg")
|
||||
const uploadImg = inject("uploadImg")
|
||||
const handleAnswerText = inject("handleAnswerText")
|
||||
const emojiMaskState = inject("emojiMaskState")
|
||||
|
||||
const user = inject("user")
|
||||
|
||||
const commentList = ref([])
|
||||
let commentCount = ref(0)
|
||||
@ -225,14 +222,11 @@ const getComment = () => {
|
||||
|
||||
data.data.forEach((element, index) => {
|
||||
element["isReplyBoxShow"] = 0
|
||||
element["isPlaceholderVisible"] = true
|
||||
|
||||
// element.timestamp = util.timeformat(element.timestamp, 2)
|
||||
if (element.child.length > 0) {
|
||||
element.child.forEach(el => {
|
||||
// el.timestamp = util.timeformat(el.timestamp, 2)
|
||||
el["isReplyBoxShow"] = 0
|
||||
el["isPlaceholderVisible"] = true
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -282,16 +276,23 @@ watch(
|
||||
|
||||
let picture = ref({})
|
||||
|
||||
const maxSize = 20 * 1024 * 1024 // 20MB
|
||||
|
||||
const handleFileUpload = (event, index, i) => {
|
||||
closeEmoji()
|
||||
const file = event.target.files[0] // 获取选择的文件
|
||||
if (file) {
|
||||
|
||||
if (!file) return
|
||||
|
||||
if (file.size > maxSize) {
|
||||
handleMsg("error", "文件大小不能超过 20MB")
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const base64 = e.target.result
|
||||
uploadImg(base64).then(res => {
|
||||
console.log("base64", base64)
|
||||
|
||||
const obj = {
|
||||
base64,
|
||||
...res,
|
||||
@ -306,7 +307,6 @@ const handleFileUpload = (event, index, i) => {
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除上传的图片
|
||||
const closeFileUpload = (index, i) => {
|
||||
@ -326,8 +326,6 @@ const openEmoji = (index, i) => {
|
||||
else if (index != undefined) commentList.value[index]["emojiState"] = true
|
||||
else emojiState.value = true
|
||||
|
||||
console.log("emojiMaskState", emojiMaskState)
|
||||
|
||||
emojiMaskState.value = true
|
||||
}
|
||||
|
||||
@ -353,56 +351,49 @@ defineExpose({
|
||||
// 选择 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
|
||||
// const commentInput = document.querySelector(".comments-box .input-textarea")
|
||||
if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = ""
|
||||
commentList.value[index]["child"][i]["commentInput"] += key
|
||||
} else if (index != undefined) {
|
||||
const commentInput = document.querySelector(".comments-box .input-textarea")
|
||||
commentInput.innerText += key
|
||||
commentList.value[index]["isPlaceholderVisible"] = false
|
||||
// const commentInput = document.querySelector(".comments-box .input-textarea")
|
||||
if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = ""
|
||||
commentList.value[index]["commentInput"] += key
|
||||
} else {
|
||||
inputTextareaRef.value.innerHTML += key
|
||||
isPlaceholderVisible.value = false
|
||||
inputTextarea.value += key
|
||||
}
|
||||
}
|
||||
|
||||
let isPlaceholderVisible = ref(true)
|
||||
|
||||
const clearPlaceholder = (index, i) => {
|
||||
if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = false
|
||||
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 autoResize = e => {
|
||||
e.target.style.height = "auto" // 重置高度
|
||||
e.target.style.height = `${e.target.scrollHeight}px` // 设置为内容高度
|
||||
}
|
||||
|
||||
const handleInputPaste = (event, index, ii) => {
|
||||
const items = event.clipboardData.items // 获取粘贴的内容
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i]
|
||||
if (item.type.startsWith("image/")) {
|
||||
// 检查是否为图片
|
||||
event.preventDefault()
|
||||
const file = item.getAsFile() // 获取文件
|
||||
|
||||
if (file.size > maxSize) {
|
||||
handleMsg("error", "文件大小不能超过 20MB")
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const base64 = e.target.result
|
||||
|
||||
uploadImg(base64).then(res => {
|
||||
const obj = {
|
||||
base64,
|
||||
...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 picture.value = obj
|
||||
handleMsg("success", "上传成功")
|
||||
@ -413,7 +404,7 @@ const handleInputPaste = (event, index, ii) => {
|
||||
}
|
||||
}
|
||||
|
||||
let inputTextareaRef = ref(null)
|
||||
let inputTextarea = ref("")
|
||||
|
||||
// 提交回答-评论
|
||||
const submitAnswerComments = (index, i) => {
|
||||
@ -428,25 +419,25 @@ const submitAnswerComments = (index, i) => {
|
||||
let image = {}
|
||||
|
||||
if (i != null) {
|
||||
const commentInput = document.querySelector(".comments-box .input-textarea")
|
||||
content = commentInput.innerText
|
||||
content = commentList.value[index]["child"][i]["commentInput"]
|
||||
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
|
||||
content = commentList.value[index]["commentInput"]
|
||||
parentid = commentList.value[index]["id"]
|
||||
image = commentList.value[index]["picture"]
|
||||
} else {
|
||||
content = inputTextareaRef.value.innerText
|
||||
content = inputTextarea.value
|
||||
image = picture.value
|
||||
}
|
||||
|
||||
console.log("content", content, "1111", commentList.value[index])
|
||||
|
||||
$ajax("/api/comment/submit", {
|
||||
content,
|
||||
token,
|
||||
parentid,
|
||||
image,
|
||||
image: image ? { aid: image.aid, url: image.url } : null,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
@ -462,7 +453,6 @@ const submitAnswerComments = (index, i) => {
|
||||
nickname: commentList.value[index]["child"][i]["nickname"],
|
||||
},
|
||||
...data,
|
||||
isPlaceholderVisible: true,
|
||||
image,
|
||||
}
|
||||
|
||||
@ -477,7 +467,6 @@ const submitAnswerComments = (index, i) => {
|
||||
likenum: 0,
|
||||
reply: [],
|
||||
...data,
|
||||
isPlaceholderVisible: true,
|
||||
image,
|
||||
}
|
||||
commentList.value[index]["child"].unshift(targetData)
|
||||
@ -491,15 +480,16 @@ const submitAnswerComments = (index, i) => {
|
||||
likenum: 0,
|
||||
...data,
|
||||
child: [],
|
||||
isPlaceholderVisible: true,
|
||||
image,
|
||||
}
|
||||
commentList.value.unshift(targetData)
|
||||
commentCount.value++
|
||||
inputTextareaRef.value.innerHTML = ""
|
||||
// commentCount.value++
|
||||
inputTextarea.value = ""
|
||||
picture.value = {}
|
||||
}
|
||||
|
||||
commentTotalCount.value = data.count || 0
|
||||
|
||||
// targetAnswerList[index]["commentnum"] = data["count"]
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
@ -519,11 +509,8 @@ const operateAnswerCommentsLike = (token, index, i) => {
|
||||
token,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
|
||||
let data = res.data
|
||||
|
||||
console.log("i", i)
|
||||
|
||||
if (i != undefined) {
|
||||
commentList.value[index].child[i]["islike"] = data["status"]
|
||||
commentList.value[index].child[i]["likenum"] = data["likenum"]
|
||||
@ -572,21 +559,15 @@ const alsoCommentsData = (index, i) => {
|
||||
$ajax("/api/comment/childrenList", {
|
||||
token,
|
||||
parentid,
|
||||
limit: 20,
|
||||
limit: 2000,
|
||||
page: 1,
|
||||
childlimit: 1,
|
||||
childlimit: 3,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
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
|
||||
// answerList.value = targetAnswerList
|
||||
})
|
||||
@ -604,5 +585,15 @@ const openMenuState = (index, i) => {
|
||||
else reportToken = commentList.value[index]["child"][i]["token"]
|
||||
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>
|
||||
<style scoped></style>
|
||||
|
||||
@ -373,7 +373,7 @@ a {
|
||||
right: -5px;
|
||||
top: 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 {
|
||||
border: none;
|
||||
@ -401,6 +401,7 @@ a {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
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 {
|
||||
color: #ff0000;
|
||||
@ -422,6 +423,7 @@ a {
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .answer * {
|
||||
white-space: nowrap;
|
||||
@ -540,6 +542,7 @@ a {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .emoji-box-mask {
|
||||
position: absolute;
|
||||
@ -721,10 +724,20 @@ a {
|
||||
min-height: 80px;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea.placeholder::after {
|
||||
content: "说说你的看法…";
|
||||
color: #7f7f7f;
|
||||
pointer-events: none;
|
||||
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea * {
|
||||
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;
|
||||
}
|
||||
#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 {
|
||||
padding-bottom: 10px;
|
||||
@ -1504,6 +1517,7 @@ a {
|
||||
color: #7f7f7f;
|
||||
cursor: pointer;
|
||||
height: 53px;
|
||||
line-height: 54px;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item:not(:first-of-type) {
|
||||
margin-left: 36px;
|
||||
|
||||
@ -461,7 +461,7 @@ a {
|
||||
right: -5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: url("./img/triangle-icon.svg");
|
||||
background-image: url("/img/triangle-icon.svg");
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -512,6 +512,7 @@ a {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 22px;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
|
||||
em {
|
||||
color: #ff0000;
|
||||
@ -538,6 +539,7 @@ a {
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
|
||||
& * {
|
||||
white-space: nowrap;
|
||||
@ -688,6 +690,7 @@ a {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.emoji-box-mask {
|
||||
position: absolute;
|
||||
@ -891,10 +894,27 @@ a {
|
||||
background-color: transparent;
|
||||
min-height: 80px;
|
||||
padding-bottom: 11px;
|
||||
&.placeholder::after {
|
||||
content: "说说你的看法…";
|
||||
color: #7f7f7f;
|
||||
pointer-events: none;
|
||||
// &.placeholder::after {
|
||||
// content: "说说你的看法…";
|
||||
// color: #7f7f7f;
|
||||
// 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;
|
||||
cursor: pointer;
|
||||
height: 53px;
|
||||
line-height: 54px;
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user