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

no message

Browse Source
This commit is contained in:
A1300399510
2024-01-04 17:12:58 +08:00
parent 664598e56b
commit 8fac6121c2
30 changed files with 305 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
pages/details/[id].vue
View File

@@ -129,7 +129,7 @@
</div>
<!-- 讨论 -->
<div class="comment-box">
<div class="comment-box" ref="commentBoxRef">
<div class="comment-title flexacenter">
讨论
<div class="value">{{ commentComments || "" }}</div>
@@ -147,7 +147,7 @@
<template v-else>
<div class="comment-list">
<div class="comment-item flexflex" v-for="(item, index) in commentList" :key="item.id">
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false">
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="item['popoverState']">
<template #reference>
<img class="comment-avatar" :src="item['avatar']" />
</template>
@@ -166,7 +166,7 @@
<div class="comment-content flex1">
<div class="comment-header flexacenter">
<div class="comment-header-left flexacenter">
<div class="comments-username">{{ item["nickname"] }}</div>
<div class="comments-username" @click="openAvatarPopover(index)">{{ item["nickname"] }}</div>
<div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
<div class="comments-identity" v-if="item['isauthor']">作者</div>
</div>
@@ -175,7 +175,7 @@
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
<div class="report-box flexcenter" @click="report(item['token'])">举报</div>
</div>
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" />
<img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index)">
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
@@ -183,7 +183,7 @@
</div>
</div>
</div>
<div class="comment-text">{{ item["content"] }}</div>
<div class="comment-text" @click="openAnswerCommentsChild(index)">{{ item["content"] }}</div>
<!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> -->
<div class="comments-input-box flexacenter" v-if="item['childState']">
<div class="comments-input flexflex">
@@ -196,13 +196,13 @@
<div class="child-comments" v-if="item['child'].length > 0">
<div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="ite.id">
<!-- <img class="comment-avatar" :src="ite['avatar']" /> -->
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false">
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="ite['popoverState']">
<template #reference>
<img class="comment-avatar" :src="ite['avatar']" />
</template>
<div class="avatar-box flexflex" v-if="item['uin']">
<a class="av atar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
<div class="avatar-box flexflex" v-if="ite['uin']">
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
发送信息
</a>
@@ -215,7 +215,7 @@
<div class="comment-content flex1">
<div class="comment-header flexacenter">
<div class="comment-header-left flexacenter">
<div class="comments-username">{{ ite["nickname"] }}</div>
<div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite["nickname"] }}</div>
<div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div>
<div class="comments-identity" v-if="ite['isauthor']">作者</div>
</div>
@@ -224,7 +224,7 @@
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
<div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
</div>
<img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
<img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index, i)">
<img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
@@ -232,7 +232,7 @@
</div>
</div>
</div>
<div class="comment-text">
<div class="comment-text" @click="openAnswerCommentsChild(index, i)">
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
{{ ite["content"] }}
</div>
@@ -268,7 +268,7 @@
<img class="icon" v-else src="@/assets/img/like-icon.png" />
{{ info["likenum"] || "" }}
</div>
<div class="item flexacenter"><img class="icon" src="@/assets/img/comment-icon.png" />{{ commentComments }}</div>
<div class="item flexacenter" @click="handleScrollComments()"><img class="icon" src="@/assets/img/comment-icon.png" />{{ commentComments }}</div>
<div class="item flexacenter" @click="handleCollect()">
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
@@ -999,6 +999,53 @@ const handleListScroll = e => {
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 40) return
getRelatedlistHttp()
}
const commentBoxRef = ref(null)
// 点进滚动到评论
const handleScrollComments = () => {
const element = commentBoxRef.value
if (!element) return
window.scrollTo({
top: element.offsetTop - 85 || 0,
behavior: "smooth",
})
return
const rect = element.getBoundingClientRect()
// console.log(rect.top, "rect.top")
console.log(rect, window.innerHeight)
let elementTop = 0
elementTop = rect.top - window.innerHeight / 2
if (rect.top > window.innerHeight) {
elementTop = rect.top - window.innerHeight / 2
window.scrollTo({
top: elementTop || 0,
behavior: "smooth",
})
} else {
// console.log(rect)
elementTop = window.innerHeight / 2 + rect.top / 2
console.log(elementTop, "elementTop")
window.scrollTo({
top: elementTop || 0,
behavior: "smooth",
})
}
// console.log(elementTop);
// window.scrollTo({
// top: elementTop,
// behavior: "smooth",
// })
}
// 打开评论的 信息框
const openAvatarPopover = (index, i) => {
if (i != null) commentList.value[index]["child"][i]["popoverState"] = true
else commentList.value[index]["popoverState"] = true
}
</script>
<style lang="less" scoped>
@@ -1197,7 +1244,7 @@ const handleListScroll = e => {
position: relative;
.header {
padding: 30px 45px 25px;
padding: 30px 30px 25px 45px;
border-bottom: 1px solid #ebebeb;
.titletitle {
font-size: 24px;
@@ -1423,6 +1470,7 @@ const handleListScroll = e => {
height: 20px;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.comment-content {
@@ -1445,6 +1493,7 @@ const handleListScroll = e => {
.comments-username {
color: #555;
margin-right: 10px;
cursor: pointer;
}
.comments-time {
@@ -1534,6 +1583,7 @@ const handleListScroll = e => {
margin-bottom: 10px;
word-break: break-all;
min-height: 22px;
cursor: pointer;
.comments-reply {
color: #92a1bf;
display: inline;
@@ -1631,6 +1681,7 @@ const handleListScroll = e => {
color: #d7d7d7;
text-align: center;
margin-bottom: 118px;
padding-right: 30px;
}
}
}