no message
This commit is contained in:
A1300399510
parent
5a890aaee5
commit
8b5d8f4523
585
app.vue
585
app.vue
@ -162,7 +162,7 @@
|
||||
</div>
|
||||
|
||||
<div class="details-box flexflex">
|
||||
<div v-if="emojiState" class="emoji-box-mask" @click="closeEmoji()"></div>
|
||||
<div v-if="emojiMaskState" class="emoji-box-mask" @click="closeEmoji()"></div>
|
||||
|
||||
<div class="close-box">
|
||||
<div class="close-circle flexcenter" @click="closeDetailMode()">
|
||||
@ -244,179 +244,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="answer-discuss">
|
||||
<div class="header flexacenter">
|
||||
回答&讨论
|
||||
<span class="num">{{ 17 }}</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" :class="{ 'placeholder': isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder" @blur="setPlaceholder" @paste="handleInputPaste"></div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': emojiState }">
|
||||
<img class="icon" src="/img/smiling-face.png" @click="openEmoji()" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<input class="file" type="file" @change="handleFileUpload" accept=".png, .jpg, .jpeg" />
|
||||
<img class="icon" src="/img/picture-icon.png" alt="" />
|
||||
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comments-box">
|
||||
<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>
|
||||
<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'])">
|
||||
<img class="avatar-icon" src="@/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter" @click="handleMenuState(index)">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box">
|
||||
<img class="like-icon" v-if="item['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-icon-colours.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
<div class="comments-text">{{ item["content"] }}</div>
|
||||
<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': isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder" @blur="setPlaceholder" @paste="handleInputPaste(event, index)"></div>
|
||||
</div>
|
||||
<div class="picture-box" v-if="item.picture?.url">
|
||||
<div class="picture">
|
||||
<img class="close" @click="closeFileUpload" src="/img/close-icon.png" />
|
||||
<img class="img" :src="picture.base64 || picture.url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': emojiState }">
|
||||
<img class="icon" src="/img/smiling-face.png" @click="openEmoji()" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<input class="file" type="file" @change="handleFileUpload" accept=".png, .jpg, .jpeg" />
|
||||
<img class="icon" src="/img/picture-icon.png" alt="" />
|
||||
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="comments-input-box flexacenter" v-if="item['childState']">
|
||||
<div class="comments-input flexflex">
|
||||
<textarea class="flex1" placeholder="回复" v-model="item['commentInput']"></textarea>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div>
|
||||
</div>
|
||||
<img class="forkfork" src="./img/cross-icon.png" @click="closeAnswerCommentsChild(index)" />
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="child-comments" v-if="item['child'].length != 0">
|
||||
<div class="comments-item" v-for="ite 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>
|
||||
<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="avatar-box flexflex" v-if="ite['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank">
|
||||
<img class="avatar-icon" src="@/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank">
|
||||
<img class="avatar-icon" src="@/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box">
|
||||
<img class="like-icon" v-if="ite['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-icon-colours.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
<div class="comments-text">
|
||||
<div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ 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>
|
||||
</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>
|
||||
<img class="also-icon" src="./img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<commentList v-if="isCommentList"></commentList>
|
||||
<!-- 一共多少 -->
|
||||
<div class="answer-total-amount">共 {{ detailsInfo["answers"] }} 个回答</div>
|
||||
<!-- <div v-if="false" class="answer-total-amount">共 {{ detailsInfo["answers"] }} 个回答</div> -->
|
||||
|
||||
<!-- 回答-数据 -->
|
||||
<div class="answer-box-item" v-for="(item, index) in answerList" :key="index">
|
||||
<!-- <div class="answer-box-item" v-for="(item, index) in answerList" :key="index">
|
||||
<img class="aa" src="@/img/A.png" />
|
||||
|
||||
<div class="edit-btn flexcenter" v-if="item['ismyself'] == 1" @click="openIAnswer(index)">
|
||||
@ -550,7 +383,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template v-if="item['commentState']"> -->
|
||||
<div class="comments-area" v-if="item.tab == 'comment'">
|
||||
<div class="post-comment-box">
|
||||
<div class="post-comment flexacenter" :class="{ 'post-comment-radius': item.commentnum == 0 }">
|
||||
@ -559,7 +391,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评论 -->
|
||||
<div class="comments-box" :class="{ 'show-one-comment': item['showOneCommentState'] }" v-if="item['commentList'] && item['commentList'].length != 0">
|
||||
<div class="comments-item" v-for="(it, ind) in item['commentList']" :key="ind">
|
||||
<div class="comments-header flexacenter">
|
||||
@ -660,50 +491,41 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- {{ item["commentnum"] + ' ' + item["commentList"].length }} -->
|
||||
<!-- <div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentnum'] != item['commentList'].length"> -->
|
||||
<!-- <div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentCount'] != item['commentList'].length">
|
||||
显示全部
|
||||
<img class="arrow-circular" src="./img/arrow-circular-gray.png" />
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="more-comments flexcenter" @click="showComments(index)"> -->
|
||||
<div class="more-comments flexcenter" @click="handleAllComment(index)" v-if="item['showOneCommentState'] && item.commentnum > 2">
|
||||
更多讨论
|
||||
<img class="more-comments-icon" src="@/img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- · 著作权归作者所有 · -->
|
||||
<div class="copyright flexcenter" v-if="answerList.length > 0">· 著作权归作者所有 ·</div>
|
||||
|
||||
<!-- <div class="copyright flexcenter" v-if="answerList.length > 0">· 著作权归作者所有 ·</div> -->
|
||||
<!-- 你的答案 -->
|
||||
<div class="your-answer-box" v-if="!isNeedLogin">
|
||||
<div class="your-answer-header flexacenter">您的答案</div>
|
||||
<div class="your-answer-textarea" :class="{ placeholder: yourAnswerPlaceholderState }" contenteditable="true" @paste="handlePaste($event, 'you')" v-html="yourAnswer['text']" @input="handleInputYou"></div>
|
||||
<!-- <div class="your-answer-box" v-if="!isNeedLogin">
|
||||
<div class="your-answer-header flexacenter">您的答案</div>
|
||||
<div class="your-answer-textarea" :class="{ placeholder: yourAnswerPlaceholderState }" contenteditable="true" @paste="handlePaste($event, 'you')" v-html="yourAnswer['text']" @input="handleInputYou"></div>
|
||||
|
||||
<div class="flexacenter your-answer-bottom">
|
||||
<div class="option-box flexacenter" @click="cutYourAnswerAnonymous()">
|
||||
<img class="option-icon" v-if="yourAnswer['anonymous'] == 0" src="./img/tick-no.svg" />
|
||||
<img class="option-icon" v-else src="./img/tick-option.svg" />
|
||||
匿名发表
|
||||
<div class="flexacenter your-answer-bottom">
|
||||
<div class="option-box flexacenter" @click="cutYourAnswerAnonymous()">
|
||||
<img class="option-icon" v-if="yourAnswer['anonymous'] == 0" src="./img/tick-no.svg" />
|
||||
<img class="option-icon" v-else src="./img/tick-option.svg" />
|
||||
匿名发表
|
||||
</div>
|
||||
<div class="your-answer-submit flexcenter" @click="handleYourAnswer">提交回答</div>
|
||||
</div>
|
||||
<div class="your-answer-submit flexcenter" @click="handleYourAnswer">提交回答</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 回答-没有数据 -->
|
||||
<div class="answer-empty-box flexcenter" v-if="isNeedLogin && answerList.length == 0">
|
||||
<div class="empty-box flexcenter">
|
||||
<div class="dot-list flexacenter">
|
||||
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3" :key="item" />
|
||||
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3" :key="item" />
|
||||
<!-- <div class="answer-empty-box flexcenter" v-if="isNeedLogin && answerList.length == 0">
|
||||
<div class="empty-box flexcenter">
|
||||
<div class="dot-list flexacenter">
|
||||
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3" :key="item" />
|
||||
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3" :key="item" />
|
||||
</div>
|
||||
<img class="empty-icon" src="./img/empty-icon.svg" />
|
||||
</div>
|
||||
<img class="empty-icon" src="./img/empty-icon.svg" />
|
||||
</div>
|
||||
<div class="empty-hint">我在等待你的回答</div>
|
||||
</div>
|
||||
<div class="empty-hint">我在等待你的回答</div>
|
||||
</div> -->
|
||||
|
||||
<div class="mobile-phone-check flexcenter">
|
||||
<img class="QRCode-icon" src="./img/QRCode-icon.svg" alt />
|
||||
@ -1115,7 +937,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
provide("$ajax", $ajax)
|
||||
provide("$ajaxGET", $ajaxGET)
|
||||
|
||||
let isNeedLogin = ref(true) // 是否需要有登录
|
||||
provide("isNeedLogin", isNeedLogin)
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return
|
||||
@ -1441,13 +1268,17 @@ export default {
|
||||
pageListHeight.value = window.innerHeight - pageHeaderHeight.value
|
||||
}
|
||||
|
||||
let isCommentList = ref(false)
|
||||
|
||||
let detailsInfo = ref({}) // 详情信息
|
||||
let detailsIsanswered = ref(0) // 详情信息
|
||||
let detailsIscollection = ref(0) // 详情信息
|
||||
let detailsIsmyself = ref(0) // 详情信息
|
||||
let detailsToken = "" // 详情信息
|
||||
let detailsToken2 = ref("") // 详情信息
|
||||
let detailShare = ref({}) // 详情信息
|
||||
let detailLoading = ref(false) // 详情加载
|
||||
provide("detailsToken", detailsToken2)
|
||||
|
||||
// 获取详情
|
||||
const getDetails = (uniqid, index, isOpenAnswer) => {
|
||||
@ -1477,7 +1308,9 @@ export default {
|
||||
detailsIscollection.value = data["iscollection"] || 0
|
||||
detailsIsmyself.value = data["ismyself"] || 0
|
||||
detailsToken = data["token"] || ""
|
||||
detailsToken2.value = data["token"] || ""
|
||||
detailShare.value = data["share"] || {}
|
||||
|
||||
islike.value = data["islike"] || 0
|
||||
|
||||
type.value = "details"
|
||||
@ -1512,7 +1345,7 @@ export default {
|
||||
|
||||
handleInsertRelatedlist(uniqid)
|
||||
|
||||
getComment()
|
||||
isCommentList.value = true
|
||||
})
|
||||
.finally(() => (detailLoading.value = false))
|
||||
}
|
||||
@ -1544,7 +1377,7 @@ export default {
|
||||
|
||||
if (!valve) {
|
||||
let content = ""
|
||||
if (info["content"].indexOf("<img") == -1) content = info["content"]
|
||||
if (info?.["content"]?.indexOf("<img") == -1) content = info["content"]
|
||||
content = content.replace(/<[^>]*>/g, "")
|
||||
content = content.replace(/ /g, "")
|
||||
|
||||
@ -1570,6 +1403,7 @@ export default {
|
||||
|
||||
// 获取详情的回答数据
|
||||
const getAnswerList = () => {
|
||||
return
|
||||
if (answerLoading || answerPage.value == 0) return
|
||||
answerLoading = true
|
||||
|
||||
@ -1800,167 +1634,6 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
// 提交回答-评论
|
||||
const submitAnswerComments = (index, ind, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
const targetAnswerList = [...answerList.value]
|
||||
|
||||
let content = ""
|
||||
let parentid = null
|
||||
let token = targetAnswerList[index]["token"]
|
||||
|
||||
if (i != null) {
|
||||
content = targetAnswerList[index]["commentList"][ind]["child"][i]["commentInput"]
|
||||
parentid = targetAnswerList[index]["commentList"][ind]["child"][i]["id"]
|
||||
} else if (ind != null) {
|
||||
content = targetAnswerList[index]["commentList"][ind]["commentInput"]
|
||||
parentid = targetAnswerList[index]["commentList"][ind]["id"]
|
||||
} else content = targetAnswerList[index]["commentInput"]
|
||||
|
||||
$ajax("/api/comment/submit", {
|
||||
content,
|
||||
token,
|
||||
parentid,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
if (i != null) {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
reply: {
|
||||
nickname: targetAnswerList[index]["commentList"][ind]["child"][i]["nickname"],
|
||||
},
|
||||
...data,
|
||||
}
|
||||
|
||||
targetAnswerList[index]["commentList"][ind]["child"][i]["commentInput"] = ""
|
||||
targetAnswerList[index]["commentList"][ind]["child"].unshift(targetData)
|
||||
targetAnswerList[index]["commentList"][ind]["childnum"]++
|
||||
} else if (ind != null) {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
reply: [],
|
||||
...data,
|
||||
}
|
||||
targetAnswerList[index]["commentList"][ind]["child"].unshift(targetData)
|
||||
targetAnswerList[index]["commentList"][ind]["childnum"]++
|
||||
targetAnswerList[index]["commentList"][ind]["commentInput"] = ""
|
||||
} else {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
...data,
|
||||
child: [],
|
||||
}
|
||||
targetAnswerList[index]["commentList"].unshift(targetData)
|
||||
targetAnswerList[index]["commentCount"]++
|
||||
targetAnswerList[index]["commentInput"] = ""
|
||||
}
|
||||
|
||||
targetAnswerList[index]["commentnum"] = data["count"]
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
handleMsg("success", res["message"] || "操作成功")
|
||||
})
|
||||
}
|
||||
|
||||
// 回答-评论 点赞
|
||||
const operateAnswerCommentsLike = (token, index, ind, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
$ajax("/api/comment/like", {
|
||||
token,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
|
||||
let data = res.data
|
||||
const targetAnswerList = [...answerList.value]
|
||||
|
||||
if (i == null) {
|
||||
targetAnswerList[index]["commentList"][ind]["islike"] = data["status"]
|
||||
targetAnswerList[index]["commentList"][ind]["likenum"] = data["likenum"]
|
||||
} else {
|
||||
targetAnswerList[index]["commentList"][ind]["child"][i]["islike"] = data["status"]
|
||||
targetAnswerList[index]["commentList"][ind]["child"][i]["likenum"] = data["likenum"]
|
||||
}
|
||||
answerList.value = targetAnswerList
|
||||
|
||||
handleMsg("success", res["message"] || "操作成功")
|
||||
})
|
||||
}
|
||||
|
||||
// 打开 回答-评论 的子评论
|
||||
const openAnswerCommentsChild = (index, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
if (i == null) commentList.value[index]["childState"] = true
|
||||
else commentList.value[index]["child"][i]["childState"] = true
|
||||
}
|
||||
|
||||
// 关闭 回答-评论 的子评论
|
||||
const closeAnswerCommentsChild = () => {
|
||||
const targetAnswerList = [...answerList.value]
|
||||
|
||||
commentList.value.forEach(ele => {
|
||||
ele["childState"] = false
|
||||
if (ele["child"] && ele["child"].length != 0) {
|
||||
ele["child"].forEach(el => {
|
||||
el["childState"] = false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
answerList.value = targetAnswerList
|
||||
}
|
||||
|
||||
// 获取剩下的子评论
|
||||
const alsoCommentsData = (index, ind) => {
|
||||
const targetAnswerList = [...answerList.value]
|
||||
const parentid = targetAnswerList[index]["commentList"][ind]["id"]
|
||||
const token = targetAnswerList[index]["token"]
|
||||
|
||||
$ajax("/api/comment/childrenList", {
|
||||
token,
|
||||
parentid,
|
||||
limit: 20,
|
||||
page: 1,
|
||||
childlimit: 1,
|
||||
}).then(res => {
|
||||
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))]
|
||||
|
||||
targetAnswerList[index]["commentList"][ind]["child"] = merged1
|
||||
answerList.value = targetAnswerList
|
||||
})
|
||||
}
|
||||
|
||||
let myType = ref("") // collect answers questions
|
||||
// 专门处理 我的 弹窗数据
|
||||
const handleMy = key => {
|
||||
@ -2416,6 +2089,8 @@ export default {
|
||||
return result
|
||||
}
|
||||
|
||||
provide("handleDate", handleDate)
|
||||
|
||||
let questionsTransmitState = ref(false) // 问题的转发 弹窗状态
|
||||
let questionsTransmitMaskState = ref(false) // 问题的转发 弹窗蒙版状态状态
|
||||
|
||||
@ -2516,6 +2191,8 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
provide("uploadImg", uploadImg)
|
||||
|
||||
// 回答 的 placeholder 状态
|
||||
let questionPlaceholderState = ref(false)
|
||||
let yourAnswerPlaceholderState = ref(true) // 您的答案的 placeholder 状态
|
||||
@ -2544,6 +2221,8 @@ export default {
|
||||
msg.value["text"] = text
|
||||
}
|
||||
|
||||
provide("handleMsg", handleMsg)
|
||||
|
||||
// 修改提示框类型
|
||||
const boxClass = () => {
|
||||
msgShowTimer()
|
||||
@ -2718,16 +2397,13 @@ export default {
|
||||
}
|
||||
|
||||
// 打开举报
|
||||
const handleMenuState = (index, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
if (i === undefined) reportToken = commentList.value[index]["token"]
|
||||
else reportToken = commentList.value[index]["child"][i]["token"]
|
||||
const handleMenuState = (token) => {
|
||||
reportToken = token
|
||||
alertShow.value = true
|
||||
}
|
||||
|
||||
provide("handleMenuState", handleMenuState)
|
||||
|
||||
// 举报 token
|
||||
let reportToken = ""
|
||||
const reasonList = ["广告", "辱骂", "重复发送", "不良信息", "其他"]
|
||||
@ -3405,167 +3081,8 @@ export default {
|
||||
}
|
||||
|
||||
const commentList = ref([])
|
||||
let commentCount = ref(0)
|
||||
let commentTotalCount = ref(0)
|
||||
let commentPage = ref(1)
|
||||
let isgetCommentSate = false // 请求评论状态
|
||||
let alreadyCommentIdList = []
|
||||
|
||||
const getComment = () => {
|
||||
console.log("getComment")
|
||||
|
||||
if (commentPage.value == 0 || isgetCommentSate) return
|
||||
isgetCommentSate = true
|
||||
console.log("getComment")
|
||||
// https://offer.gter.net/miniprogramApi/offer/comments/lists
|
||||
$ajax("/api/comment/lists", {
|
||||
token: detailsToken,
|
||||
page: commentPage.value,
|
||||
limit: 1000,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
data.data.forEach((element, index) => {
|
||||
element["isReplyBoxShow"] = 0
|
||||
// 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
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (commentPage.value > 1) {
|
||||
let alreadyCommentIdList = alreadyCommentIdList
|
||||
for (let index = 0; index < data.data.length; index++) {
|
||||
if (alreadyCommentIdList.includes(data.data[index].id)) {
|
||||
data.data.splice(index, 1)
|
||||
index--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
commentList.value = commentList.value.concat(data.data)
|
||||
console.log("commentList", commentList.value)
|
||||
|
||||
commentCount.value = data.count
|
||||
commentTotalCount.value = data.comments
|
||||
commentPage.value = data.count > commentList.length ? commentPage.value + 1 : 0
|
||||
|
||||
// console.log("commentList", commentList)
|
||||
// this.setData({
|
||||
// commentList,
|
||||
// commentCount: data.count,
|
||||
// commentTotalCount: data.comments,
|
||||
// commentPage: data.count > commentList.length ? this.data.commentPage + 1 : 0,
|
||||
// })
|
||||
})
|
||||
.finally(() => {
|
||||
isgetCommentSate = false
|
||||
})
|
||||
}
|
||||
|
||||
let picture = ref({})
|
||||
|
||||
const handleFileUpload = event => {
|
||||
closeEmoji()
|
||||
const file = event.target.files[0] // 获取选择的文件
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const base64 = e.target.result
|
||||
uploadImg(base64).then(res => {
|
||||
picture.value = {
|
||||
base64,
|
||||
...res,
|
||||
}
|
||||
handleMsg("success", "上传成功")
|
||||
})
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除上传的图片
|
||||
const closeFileUpload = () => {
|
||||
picture.value = {}
|
||||
}
|
||||
|
||||
//
|
||||
let emojiState = ref(false)
|
||||
|
||||
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"]
|
||||
|
||||
// 打开 Emoji
|
||||
const openEmoji = () => {
|
||||
emojiState.value = true
|
||||
}
|
||||
|
||||
// 关闭 Emoji
|
||||
const closeEmoji = () => {
|
||||
emojiState.value = false
|
||||
}
|
||||
|
||||
// 选择 Emoji
|
||||
const selectEmoji = key => {
|
||||
closeEmoji()
|
||||
|
||||
console.log("key", key)
|
||||
}
|
||||
|
||||
let isPlaceholderVisible = ref(true)
|
||||
|
||||
const clearPlaceholder = () => {
|
||||
isPlaceholderVisible.value = false // 聚焦时隐藏占位符
|
||||
}
|
||||
|
||||
const setPlaceholder = event => {
|
||||
if (event.target.innerHTML == "<br>") event.target.innerHTML = ""
|
||||
const html = event.target.innerHTML
|
||||
if (!html) isPlaceholderVisible.value = true
|
||||
}
|
||||
|
||||
const handleInputPaste = (event, index, i) => {
|
||||
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() // 获取文件
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const base64 = e.target.result
|
||||
uploadImg(base64).then(res => {
|
||||
console.log(index)
|
||||
const obj = {
|
||||
base64,
|
||||
...res,
|
||||
}
|
||||
|
||||
console.log(commentList.value);
|
||||
|
||||
if (index == undefined) {
|
||||
picture.value = obj
|
||||
} else if (i >= 0) {
|
||||
commentList.value[index].child[i]["picture"] = obj
|
||||
} else {
|
||||
commentList.value[index]["picture"] = obj
|
||||
}
|
||||
handleMsg("success", "上传成功")
|
||||
})
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// const selectEomji = key => {}
|
||||
|
||||
return { handleInputPaste, setPlaceholder, clearPlaceholder, isPlaceholderVisible, openEmoji, emojiState, closeEmoji, selectEmoji, emojiData, closeFileUpload, picture, handleFileUpload, commentList, islike, handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, handleYourAnswer, yourAnswer, handleLogo, inTheEndState, setItemUrl, seo, originUrl, handleMenuState, reasonList, checkList, alertShow, alertText, selectRadio, alertSubmit, cutType, dialogSrc, answerPage, handleDetailsScroll, replaceState, copyText, boxClass, questionPlaceholderState, yourAnswerPlaceholderState, handleInput, handlePaste, itemStyle, listStyle, listBoxStyle, myType, type, pitchIndex, cut, list, keyword, keywordText, getList, total, typeList, typePitch, getDetails, detailsInfo, detailsIsanswered, detailsIscollection, detailsIsmyself, detailShare, detailLoading, answerList, operateLike, operateCollect, IAnswerState, IAnswerEditState, IAnswerInfo, amendIAnswer, openIAnswer, closeIAnswer, submitAnswer, openCommentState, submitAnswerComments, operateAnswerCommentsLike, openAnswerCommentsChild, closeAnswerCommentsChild, alsoCommentsData, handleAllComment, myCollectionList, myCollectionCount, myQuestionsList, myQuestionsCount, myAnswerList, myAnswerCount, cutAnswerPopupState, handleDate, handleCollectionScroll, handleAnswersScroll, handleQuestionsScroll, cancelCollection, getMyCollection, questionsSetp, questionsObj, cutAnonymous, cutQuestionsSetp, cutQuestionsPopupState, questionsTypeList, postingIssue, choosingTheme, handleMy, changeAnonymous, changeAnonymousQuestions, pageHeaderHeight, pageListHeight, questionsTransmitState, questionsTransmitMaskState, closeAllTransmitState, closeTransmitState, handleAnswerTransmitList, closeDetailMode, tabListFixeState, handleListScroll, historicalSearchState, historicalSearchList, searchFocus, searchBlur, searchClick, handleClickHistoricalItem, handleClickClear, isSearchMode, questionsInit, myCount, msg, myOpenDetails, handleAnswerText, getCurrentUrl, loading, showComments, jointriposte, randomEmojis, selectEomji, openRespondDetails, respondPopState, respondDetail, respondPopObj, closePopList, coinAmount, openInsert, insertcoinsState, insert, coinMessage, coinSelectAmountDispose, closeInsert, postCoinSbmit, cutOperate, insertcoinsNoState }
|
||||
return { isCommentList, commentList, islike, handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, handleYourAnswer, yourAnswer, handleLogo, inTheEndState, setItemUrl, seo, originUrl, handleMenuState, reasonList, checkList, alertShow, alertText, selectRadio, alertSubmit, cutType, dialogSrc, answerPage, handleDetailsScroll, replaceState, copyText, boxClass, questionPlaceholderState, yourAnswerPlaceholderState, handleInput, handlePaste, itemStyle, listStyle, listBoxStyle, myType, type, pitchIndex, cut, list, keyword, keywordText, getList, total, typeList, typePitch, getDetails, detailsInfo, detailsIsanswered, detailsIscollection, detailsIsmyself, detailShare, detailLoading, answerList, operateLike, operateCollect, IAnswerState, IAnswerEditState, IAnswerInfo, amendIAnswer, openIAnswer, closeIAnswer, submitAnswer, openCommentState, handleAllComment, myCollectionList, myCollectionCount, myQuestionsList, myQuestionsCount, myAnswerList, myAnswerCount, cutAnswerPopupState, handleDate, handleCollectionScroll, handleAnswersScroll, handleQuestionsScroll, cancelCollection, getMyCollection, questionsSetp, questionsObj, cutAnonymous, cutQuestionsSetp, cutQuestionsPopupState, questionsTypeList, postingIssue, choosingTheme, handleMy, changeAnonymous, changeAnonymousQuestions, pageHeaderHeight, pageListHeight, questionsTransmitState, questionsTransmitMaskState, closeAllTransmitState, closeTransmitState, handleAnswerTransmitList, closeDetailMode, tabListFixeState, handleListScroll, historicalSearchState, historicalSearchList, searchFocus, searchBlur, searchClick, handleClickHistoricalItem, handleClickClear, isSearchMode, questionsInit, myCount, msg, myOpenDetails, handleAnswerText, getCurrentUrl, loading, showComments, jointriposte, randomEmojis, selectEomji, openRespondDetails, respondPopState, respondDetail, respondPopObj, closePopList, coinAmount, openInsert, insertcoinsState, insert, coinMessage, coinSelectAmountDispose, closeInsert, postCoinSbmit, cutOperate, insertcoinsNoState }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
557
components/commentList.vue
Normal file
557
components/commentList.vue
Normal file
@ -0,0 +1,557 @@
|
||||
<template>
|
||||
<div class="answer-discuss">
|
||||
<div class="header flexacenter">
|
||||
回答&讨论
|
||||
<span class="num">{{ 17 }}</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>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': emojiState }">
|
||||
<img class="icon" src="/img/smiling-face.png" @click="openEmoji()" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<input class="file" type="file" @change="handleFileUpload($event)" 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()">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comments-box">
|
||||
<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>
|
||||
<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'])">
|
||||
<img class="avatar-icon" src="@/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter" @click="openMenuState(index)">
|
||||
<img class="menu-icon" src="/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="/img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(item.token, index)">
|
||||
<img class="like-icon" v-if="item['islike'] == 0" src="/img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="/img/like-icon-colours.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ 'pitch': item.emojiState }">
|
||||
<img class="icon" src="/img/smiling-face.png" @click="openEmoji(index)" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index)" 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)">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="child-comments" v-if="item['child'].length != 0">
|
||||
<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>
|
||||
<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="avatar-box flexflex" v-if="ite['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank">
|
||||
<img class="avatar-icon" src="@/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank">
|
||||
<img class="avatar-icon" src="@/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="/img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite.token, index, i)">
|
||||
<img class="like-icon" v-if="ite['islike'] == 0" src="/img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="/img/like-icon-colours.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
<div class="comments-text">
|
||||
<div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ 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>
|
||||
</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>
|
||||
<img class="also-icon" src="/img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
token: String,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getComment()
|
||||
})
|
||||
|
||||
const $ajax = inject("$ajax")
|
||||
const $ajaxGET = inject("$ajaxGET")
|
||||
const detailsToken = inject("detailsToken")
|
||||
const handleDate = inject("handleDate")
|
||||
const isNeedLogin = inject("isNeedLogin")
|
||||
const handleMsg = inject("handleMsg")
|
||||
const uploadImg = inject("uploadImg")
|
||||
|
||||
const commentList = ref([])
|
||||
let commentCount = ref(0)
|
||||
let commentTotalCount = ref(0)
|
||||
let commentPage = ref(1)
|
||||
let isgetCommentSate = false // 请求评论状态
|
||||
let alreadyCommentIdList = []
|
||||
|
||||
const getComment = () => {
|
||||
if (commentPage.value == 0 || isgetCommentSate) return
|
||||
isgetCommentSate = true
|
||||
$ajax("/api/comment/lists", {
|
||||
token: detailsToken.value,
|
||||
page: commentPage.value,
|
||||
limit: 1000,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (commentPage.value > 1) {
|
||||
let alreadyCommentIdList = alreadyCommentIdList
|
||||
for (let index = 0; index < data.data.length; index++) {
|
||||
if (alreadyCommentIdList.includes(data.data[index].id)) {
|
||||
data.data.splice(index, 1)
|
||||
index--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
commentList.value = commentList.value.concat(data.data)
|
||||
console.log("commentList", commentList.value)
|
||||
|
||||
commentCount.value = data.count
|
||||
commentTotalCount.value = data.comments
|
||||
commentPage.value = data.count > commentList.length ? commentPage.value + 1 : 0
|
||||
|
||||
// console.log("commentList", commentList)
|
||||
// this.setData({
|
||||
// commentList,
|
||||
// commentCount: data.count,
|
||||
// commentTotalCount: data.comments,
|
||||
// commentPage: data.count > commentList.length ? this.data.commentPage + 1 : 0,
|
||||
// })
|
||||
})
|
||||
.finally(() => {
|
||||
isgetCommentSate = false
|
||||
})
|
||||
}
|
||||
|
||||
let picture = ref({})
|
||||
|
||||
const handleFileUpload = (event, index, i) => {
|
||||
closeEmoji()
|
||||
const file = event.target.files[0] // 获取选择的文件
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const base64 = e.target.result
|
||||
uploadImg(base64).then(res => {
|
||||
console.log("base64", base64)
|
||||
|
||||
const obj = {
|
||||
base64,
|
||||
...res,
|
||||
}
|
||||
|
||||
if (i != undefined) commentList.value[index].child[i]["picture"] = obj
|
||||
else if (index != undefined) commentList.value[index]["picture"] = obj
|
||||
else picture.value = obj
|
||||
|
||||
handleMsg("success", "上传成功")
|
||||
})
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除上传的图片
|
||||
const closeFileUpload = (index, i) => {
|
||||
if (i != undefined) commentList.value[index].child[i]["picture"] = {}
|
||||
else if (index != undefined) commentList.value[index]["picture"] = {}
|
||||
else picture.value = {}
|
||||
}
|
||||
|
||||
//
|
||||
let emojiState = ref(false)
|
||||
let emojiMaskState = ref(false)
|
||||
|
||||
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"]
|
||||
|
||||
// 打开 Emoji
|
||||
const openEmoji = (index, i) => {
|
||||
if (i != undefined) commentList.value[index].child[i]["emojiState"] = true
|
||||
else if (index != undefined) commentList.value[index]["emojiState"] = true
|
||||
else emojiState.value = true
|
||||
|
||||
emojiMaskState.value = true
|
||||
}
|
||||
|
||||
// 关闭 Emoji
|
||||
const closeEmoji = (index, i) => {
|
||||
commentList.value.forEach(ele => {
|
||||
ele["emojiState"] = false
|
||||
if (ele["child"] && ele["child"].length != 0) {
|
||||
ele["child"].forEach(el => {
|
||||
el["emojiState"] = false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
emojiState.value = false
|
||||
emojiMaskState.value = false
|
||||
}
|
||||
|
||||
// 选择 Emoji
|
||||
const selectEmoji = (key, index, i) => {
|
||||
closeEmoji()
|
||||
console.log("key", key)
|
||||
if (i != undefined) {
|
||||
commentList.value[index].child[i]["isPlaceholderVisible"] = false
|
||||
} else if (index != undefined) {
|
||||
commentList.value[index]["isPlaceholderVisible"] = false
|
||||
} else {
|
||||
inputTextareaRef.value.innerHTML += key
|
||||
isPlaceholderVisible.value = false
|
||||
}
|
||||
}
|
||||
|
||||
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 handleInputPaste = (event, index, i) => {
|
||||
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() // 获取文件
|
||||
const reader = new FileReader()
|
||||
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"] = {}
|
||||
else picture.value = obj
|
||||
|
||||
handleMsg("success", "上传成功")
|
||||
})
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let inputTextareaRef = ref(null)
|
||||
|
||||
// 提交回答-评论
|
||||
const submitAnswerComments = (index, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
let content = ""
|
||||
let parentid = null
|
||||
let token = detailsToken.value
|
||||
let image = []
|
||||
|
||||
if (i != null) {
|
||||
const commentInput = document.querySelector(".comments-box .input-textarea")
|
||||
content = commentInput.innerText
|
||||
parentid = commentList.value[index]["child"][i]["id"]
|
||||
} else if (index != null) {
|
||||
const commentInput = document.querySelector(".comments-box .input-textarea")
|
||||
content = commentInput.innerText
|
||||
parentid = commentList.value[index]["id"]
|
||||
} else {
|
||||
content = inputTextareaRef.value.innerText
|
||||
image = picture.value
|
||||
}
|
||||
|
||||
console.log("content", content)
|
||||
|
||||
$ajax("/api/comment/submit", {
|
||||
content,
|
||||
token,
|
||||
parentid,
|
||||
image,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
if (i != null) {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
reply: {
|
||||
nickname: commentList.value[index]["child"][i]["nickname"],
|
||||
},
|
||||
...data,
|
||||
isPlaceholderVisible: true,
|
||||
image,
|
||||
}
|
||||
|
||||
commentList.value[index]["child"].unshift(targetData)
|
||||
commentList.value[index]["childnum"]++
|
||||
} else if (index != null) {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
reply: [],
|
||||
...data,
|
||||
isPlaceholderVisible: true,
|
||||
image,
|
||||
}
|
||||
commentList.value[index]["child"].unshift(targetData)
|
||||
commentList.value[index]["childnum"]++
|
||||
} else {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
...data,
|
||||
child: [],
|
||||
isPlaceholderVisible: true,
|
||||
image,
|
||||
}
|
||||
commentList.value.unshift(targetData)
|
||||
commentCount.value++
|
||||
inputTextareaRef.value.innerHTML = ""
|
||||
picture.value = {}
|
||||
}
|
||||
|
||||
// targetAnswerList[index]["commentnum"] = data["count"]
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
handleMsg("success", res["message"] || "操作成功")
|
||||
})
|
||||
}
|
||||
|
||||
// 回答-评论 点赞
|
||||
const operateAnswerCommentsLike = (token, index, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
$ajax("/api/comment/like", {
|
||||
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"]
|
||||
} else {
|
||||
commentList.value[index]["islike"] = data["status"]
|
||||
commentList.value[index]["likenum"] = data["likenum"]
|
||||
}
|
||||
|
||||
handleMsg("success", res["message"] || "操作成功")
|
||||
})
|
||||
}
|
||||
|
||||
// 打开 回答-评论 的子评论
|
||||
const openAnswerCommentsChild = (index, i) => {
|
||||
console.log("isNeedLogin", isNeedLogin)
|
||||
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
if (i == null) commentList.value[index]["childState"] = true
|
||||
else commentList.value[index]["child"][i]["childState"] = true
|
||||
}
|
||||
|
||||
// 关闭 回答-评论 的子评论
|
||||
const closeAnswerCommentsChild = () => {
|
||||
commentList.value.forEach(ele => {
|
||||
ele["childState"] = false
|
||||
if (ele["child"] && ele["child"].length != 0) {
|
||||
ele["child"].forEach(el => {
|
||||
el["childState"] = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取剩下的子评论
|
||||
const alsoCommentsData = (index, ind) => {
|
||||
return
|
||||
const targetAnswerList = [...answerList.value]
|
||||
const parentid = targetAnswerList[index]["commentList"][ind]["id"]
|
||||
const token = targetAnswerList[index]["token"]
|
||||
|
||||
$ajax("/api/comment/childrenList", {
|
||||
token,
|
||||
parentid,
|
||||
limit: 20,
|
||||
page: 1,
|
||||
childlimit: 1,
|
||||
}).then(res => {
|
||||
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))]
|
||||
|
||||
targetAnswerList[index]["commentList"][ind]["child"] = merged1
|
||||
answerList.value = targetAnswerList
|
||||
})
|
||||
}
|
||||
|
||||
const handleMenuState = inject("handleMenuState")
|
||||
|
||||
const openMenuState = (index, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
let reportToken = ""
|
||||
if (i === undefined) reportToken = commentList.value[index]["token"]
|
||||
else reportToken = commentList.value[index]["child"][i]["token"]
|
||||
handleMenuState(reportToken)
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -666,7 +666,6 @@ a {
|
||||
display: block;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-discuss {
|
||||
width: 627px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 10px;
|
||||
@ -1344,6 +1343,10 @@ a {
|
||||
color: #92a1bf;
|
||||
display: inline;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .comments-box .comments-item .comments-content .comments-img {
|
||||
width: 75px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .comments-box .comments-item .comments-content .comments-input-box {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
@ -835,7 +835,6 @@ a {
|
||||
}
|
||||
|
||||
.answer-discuss {
|
||||
width: 627px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 10px;
|
||||
@ -1625,6 +1624,11 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.comments-img {
|
||||
width: 75px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.comments-input-box {
|
||||
margin-top: 13px;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user