更新底部链接
This commit is contained in:
A1300399510
@@ -1,143 +1,145 @@
|
||||
<template>
|
||||
<div class="comment-title flexacenter">
|
||||
讨论
|
||||
<span class="comment-amount">{{ commentComments || "" }}</span>
|
||||
</div>
|
||||
<!-- <div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus':
|
||||
<div class="comment-box">
|
||||
<div class="comment-title flexacenter">
|
||||
讨论
|
||||
<span class="comment-amount">{{ commentComments || "" }}</span>
|
||||
</div>
|
||||
<!-- <div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus':
|
||||
postCommentFocusState }" @click="loginJudgment()"> -->
|
||||
<div class="post-comment" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
|
||||
<div class="post-comment-input">
|
||||
<el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" :maxlength="500" show-word-limit placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
|
||||
<div class="post-comment" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
|
||||
<div class="post-comment-input">
|
||||
<el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" :maxlength="500" show-word-limit placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
|
||||
</div>
|
||||
|
||||
<div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
|
||||
</div>
|
||||
|
||||
<div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
|
||||
</div>
|
||||
<div class="empty-box" v-if="isEmptyState">
|
||||
<Empty hint="说说你的观点吧"></Empty>
|
||||
</div>
|
||||
<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" v-model:visible="item['popoverState']">
|
||||
<template #reference>
|
||||
<img class="comment-avatar" :src="item['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="empty-box" v-if="isEmptyState">
|
||||
<Empty hint="说说你的观点吧"></Empty>
|
||||
</div>
|
||||
<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" v-model:visible="item['popoverState']">
|
||||
<template #reference>
|
||||
<img class="comment-avatar" :src="item['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="avatar-box flexflex" v-if="item['uin']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username" @click="openAvatarPopover(index)">{{ item["nickname"] }}</div>
|
||||
<div class="comments-time">{{ item["timestampnow"] || handleDate(item["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor']">作者</div>
|
||||
<img class="comments-title" v-if="item['groupid'] === 14" src="@/assets/img/title.png" />
|
||||
<div class="avatar-box flexflex" v-if="item['uin']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter" @click="report(item['token'])">举报</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username" @click="openAvatarPopover(index)">{{ item["nickname"] }}</div>
|
||||
<div class="comments-time">{{ item["timestampnow"] || handleDate(item["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor']">作者</div>
|
||||
<img class="comments-title" v-if="item['groupid'] === 14" src="@/assets/img/title.png" />
|
||||
</div>
|
||||
<!-- <img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> -->
|
||||
<img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" 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" />
|
||||
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- shutAnswerCommentsChild openAnswerCommentsChild -->
|
||||
<div class="comment-text" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()">{{ item["content"] }}</div>
|
||||
<div class="alreadyVoted" v-if="item.voteoption">已投：{{ item.voteoption }}</div>
|
||||
<div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="item['childState']"></div>
|
||||
<div class="comments-input-box" :class="{ 'comments-input-box-show': item['childState'] }">
|
||||
<div class="comments-input">
|
||||
<el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
|
||||
<div class="operate-bottom flexacenter">
|
||||
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 子评论 -->
|
||||
<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">
|
||||
<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="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>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter" @click="report(item['token'])">举报</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite["nickname"] }}</div>
|
||||
<div class="comments-time">{{ ite["timestampnow"] || handleDate(ite["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor']">作者</div>
|
||||
<img class="comments-title" v-if="ite['groupid'] == 14" src="@/assets/img/title.png" />
|
||||
<!-- <img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> -->
|
||||
<img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" 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" />
|
||||
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- shutAnswerCommentsChild openAnswerCommentsChild -->
|
||||
<div class="comment-text" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()">{{ item["content"] }}</div>
|
||||
<div class="alreadyVoted" v-if="item.voteoption">已投：{{ item.voteoption }}</div>
|
||||
<div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="item['childState']"></div>
|
||||
<div class="comments-input-box" :class="{ 'comments-input-box-show': item['childState'] }">
|
||||
<div class="comments-input">
|
||||
<el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
|
||||
<div class="operate-bottom flexacenter">
|
||||
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 子评论 -->
|
||||
<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">
|
||||
<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="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>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite["nickname"] }}</div>
|
||||
<div class="comments-time">{{ ite["timestampnow"] || handleDate(ite["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor']">作者</div>
|
||||
<img class="comments-title" v-if="ite['groupid'] == 14" src="@/assets/img/title.png" />
|
||||
</div>
|
||||
<img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" 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" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<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" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" 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" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-text" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()">
|
||||
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
|
||||
{{ ite["content"] }}
|
||||
</div>
|
||||
<div class="alreadyVoted" v-if="ite.voteoption">已投：{{ ite.voteoption }}</div>
|
||||
<div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="ite['childState']"></div>
|
||||
<div class="comments-input-box" :class="{ 'comments-input-box-show': ite['childState'] }">
|
||||
<div class="comments-input">
|
||||
<el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
|
||||
<div class="operate-bottom flexacenter">
|
||||
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index, i)">发送</div>
|
||||
<div class="comment-text" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()">
|
||||
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
|
||||
{{ ite["content"] }}
|
||||
</div>
|
||||
<div class="alreadyVoted" v-if="ite.voteoption">已投：{{ ite.voteoption }}</div>
|
||||
<div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="ite['childState']"></div>
|
||||
<div class="comments-input-box" :class="{ 'comments-input-box-show': ite['childState'] }">
|
||||
<div class="comments-input">
|
||||
<el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
|
||||
<div class="operate-bottom flexacenter">
|
||||
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index, i)">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 还有几个 -->
|
||||
<div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index)">
|
||||
<div class="">还有{{ item["childnum"] - item["child"].length }}条回复</div>
|
||||
<img class="also-icon" src="@/assets/img/arrow-circular-gray.png" />
|
||||
<!-- 还有几个 -->
|
||||
<div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index)">
|
||||
<div class="">还有{{ item["childnum"] - item["child"].length }}条回复</div>
|
||||
<img class="also-icon" src="@/assets/img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-end" v-if="commentPage == 0 && commentList.length != 0">· End ·</div>
|
||||
</template>
|
||||
<div class="comment-end" v-if="commentPage == 0 && commentList.length != 0">· End ·</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<Report v-if="reportAlertShow" :reportToken="reportToken"></Report>
|
||||
|
||||
@@ -185,6 +187,8 @@ let commentList = ref([])
|
||||
let commentLoading = false
|
||||
let isEmptyState = ref(false) // 评论是否为空
|
||||
|
||||
const emit = defineEmits(["update:commentComments"])
|
||||
|
||||
// 获取详情评论数据
|
||||
const getCommentList = () => {
|
||||
if (commentPage.value == 0 || commentLoading || !props.token) return
|
||||
@@ -208,6 +212,8 @@ const getCommentList = () => {
|
||||
|
||||
commentComments.value = data["comments"]
|
||||
|
||||
emit("update:commentComments", data["comments"])
|
||||
|
||||
if (commentList.value.length == data["count"]) commentPage.value = 0
|
||||
else commentPage.value++
|
||||
})
|
||||
@@ -501,6 +507,10 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.comment-box {
|
||||
padding-top: 22px;
|
||||
padding-left: 42px;
|
||||
}
|
||||
.comment-title {
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
|
||||
Reference in New Issue
Block a user