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

更新底部链接

Browse Source
This commit is contained in:
A1300399510
2024-07-17 12:25:33 +08:00
parent b8d2b04a4e
commit 0f833adadb
74 changed files with 1159 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/DetailsArea.vue
View File

@@ -15,14 +15,22 @@
</div>
<div class="floor-left flexacenter">
<div class="item flexacenter" style="cursor: auto;">
<img class="icon" src="@/assets/img/eye-icon.svg" />
<img class="icon" src="@/assets/img/eye-icon-black.svg" />
{{ info["views"] }}
</div>
<div class="item flexacenter" @click="handleLike">
<div class="item flexacenter" style="cursor: auto;">
<img class="icon" src="@/assets/img/riposte-icon.png" />
{{ ripostecount["total"] }}
</div>
<div class="item flexacenter" style="cursor: auto;">
<img class="icon" src="@/assets/img/discuss-icon.png" />
{{ commentComments }}
</div>
<!-- <div class="item flexacenter" @click="handleLike">
<img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
<img class="icon" v-else src="@/assets/img/like-icon.png" />
{{ info["likes"] || "" }}
</div>
</div> -->
<div class="item flexacenter" @click="handleCollect()">
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
<img class="icon" v-else src="@/assets/img/collect-icon.png" />
@@ -58,14 +66,13 @@
</el-popover>
</ClientOnly>
</div>
<div class="floor-middle" ref="floormiddle" @mouseover="closeMouseOver" @mouseout="openAutoCarousel" :class="{ 'floor-middle-respond': respondShowState }">
<div class="flexacenter respond">
<div class="respond-title">给个回应：</div>
<div class="respond-box flex1">
<div class="respond-item" v-for="item in 8" :key="item">&#xc150;</div>
<div class="respond-item" v-for="item in randomBottomEmojis" :key="item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
</div>
<RespondAdd type="bottom" :message="respondShowState" @update:message="respondShowState = $event"></RespondAdd>
<RespondAdd type="bottom" :respondShowState="respondShowState" @update:respondShowState="respondShowState = $event"></RespondAdd>
</div>
<div v-if="!respondShowState" class="flexacenter comment-box">
<img class="avatar" :src="userInfoWin?.avatar" />
@@ -82,6 +89,11 @@
<script setup>
import { ElMessage } from "element-plus"
let props = defineProps({
ripostecount: Object,
commentComments: Number,
})
const respondShowState = ref(false)
let isNeedLogin = inject("isNeedLogin")
@@ -196,15 +208,13 @@ const emit = defineEmits(["closeDiscussInputFields"])
// // 点击底部调用关闭讨论输入框
const closeDiscussInputFields = () => emit("closeDiscussInputFields")
onMounted(() => {
})
onMounted(() => {})
watch(isLoaded, (newValue, oldValue) => {
if (newValue === true) {
openAutoCarousel()
}
});
if (newValue === true) {
openAutoCarousel()
}
})
let floormiddleIndex = 0 // 0起
let floormiddleTimer = null
@@ -227,7 +237,11 @@ const closeMouseOver = () => {
onBeforeUnmount(() => {
clearInterval(floormiddleTimer)
});
})
const randomBottomEmojis = inject("randomBottomEmojis")
const selectEomji = inject("selectEomji")
const jointriposte = inject("jointriposte")
</script>
<style scoped lang="less">
@@ -378,7 +392,7 @@ onBeforeUnmount(() => {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--main-color);
// background-color: var(--main-color);
.respond-add-icon {
width: 16px;

250
components/DetailsComments.vue
View File

@@ -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;

2
components/MyPopup.vue
View File

@@ -226,14 +226,12 @@ let getDetails = inject("getDetails") || null
// 打开详情页
const goDetails = uniqid => {
// return
let path = route["path"] || ""
if (path.indexOf("/details/") != -1) {
clearAllData()
nextTick(() => getDetails())
}
// router.replace(`/details/${uniqid}`)
goToURL(`/details/${uniqid}`, false)
show.value = false
MyPopupState.value = ""

25
components/RespondAdd.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-popover :width="470" trigger="click" popper-class="add-popper" :teleported="false" :offset="10" :show-arrow="false" @show="catState(true)" @hide="catState(false)" v-model:visible="state" :placement="type == 'bottom' ? 'top' : 'bottom' ">
<el-popover ref="addPopper" :width="470" trigger="click" popper-class="add-popper" :teleported="false" :offset="10" :show-arrow="false" @show="catState(true)" @hide="catState(false)" v-model:visible="state" :placement="type == 'bottom' ? 'top' : 'bottom'">
<template #reference>
<div class="respond-add flexcenter" :class="{ 'angle': state }">
<img class="respond-add-icon" src="@/assets/img/plus-sign.svg" />
@@ -9,7 +9,9 @@
<div class="respond-list-box">
<div class="respond-list-title">选择你的回应：</div>
<div class="respond-list">
<div class="respond-item" v-for="item in 18" :key="item">&#xc150;</div>
<template v-for="item in riposteoptions" :key="item">
<div class="respond-item" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click="selectEomji(key)"></div>
</template>
</div>
</div>
</el-popover>
@@ -22,22 +24,33 @@ let props = defineProps({
let state = ref(false)
const emit = defineEmits(['update:message']);
let riposteoptions = inject("riposteoptions")
let selectEomjiPop = inject("selectEomjiPop")
let jointriposte = inject("jointriposte")
const emit = defineEmits(["update:respondShowState"])
const catState = value => {
state.value = value
if (props.type == "bottom") {
console.log(value);
emit('update:message', value);
emit("update:respondShowState", value)
}
}
const addPopper = ref(null)
const selectEomji = key => {
selectEomjiPop(key)
addPopper.value.hide()
}
</script>
<style lang="less" scoped>
.respond-add {
width: 30px;
height: 30px;
background: rgba(114, 219, 134, 1);
background-color: var(--main-color);
// background: rgba(114, 219, 134, 1);
border-radius: 50%;
cursor: pointer;
position: relative;