A1300399510/PC-vote
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-24 17:20:53 +08:00
parent 809d1d317a
commit 89020a40b7
7 changed files with 283 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
components/DetailsComments.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="comment-title flexacenter">
讨论 {{ postCommentFocusState }}
讨论
<span class="comment-amount">{{ commentComments || "" }}</span>
</div>
<div class="post-comment flexacenter" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
<textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @focus="postCommentFocusState = true"></textarea>
<div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
<div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
<el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
<div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
</div>
<div class="empty-box" v-if="isEmptyState">
@@ -56,7 +56,7 @@
<div class="comments-input-box flexacenter" v-if="item['childState']">
<div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
<div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div>
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
</div>
<img class="forkfork" @click="closeAnswerCommentsChild(index)" src="@/assets/img/cross-icon.png" />
</div>
@@ -109,7 +109,7 @@
<div class="comments-input-box flexacenter" v-if="ite['childState']">
<div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
<div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index, i)">发送</div>
</div>
<img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" />
</div>
@@ -128,12 +128,26 @@
</template>
<Report v-if="reportAlertShow" :reportToken="reportToken"></Report>
<!-- 投票后自动评论 -->
<el-dialog class="default-popup automatic-reviews-popup" v-model="reviewsPopoverState" width="720px" align-center autosize>
<div class="automatic-header">
<div class="automatic-title">说说您的投票理由</div>
<div class="automatic-have">已投：{{ haveVotedValue }}</div>
</div>
<el-input class="automatic-input" placeholder="请输入…" v-model="reviewsPopoverInput" type="textarea"></el-input>
<div class="automatic-bottom flexflex">
<div class="automatic-send flexcenter" @click="submitAnswerComments(reviewsPopoverInput)">发送</div>
</div>
</el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus"
import { isEmpty } from "element-plus/es/utils"
let haveVotedValue = inject("haveVotedValue")
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
@@ -161,7 +175,7 @@ let isEmptyState = ref(false) // 评论是否为空
// 获取详情评论数据
const getCommentList = () => {
if (commentPage.value == 0 || commentLoading) return
if (commentPage.value == 0 || commentLoading || !props.token) return
commentLoading = true
commentListHttp({
@@ -243,18 +257,18 @@ let commentInputTop = ref("")
let commentInput = ref("")
// 提交回答-评论
const submitAnswerComments = (index, i) => {
const submitAnswerComments = (content, index, i) => {
if (isNeedLogin.value) {
goLogin()
return
}
const targetCommentList = [...commentList.value]
let content = ""
// let content = ""
let parentid = null
if (index == null) content = commentInputTop.value
else content = commentInput.value
// if (index == null) content = commentInputTop.value
// else content = commentInput.value
if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
else if (index != null) parentid = targetCommentList[index]["id"]
@@ -273,6 +287,7 @@ const submitAnswerComments = (index, i) => {
ElMessage.error(res.message)
return
}
let data = res.data
if (i != null) {
@@ -285,6 +300,7 @@ const submitAnswerComments = (index, i) => {
reply: {
nickname: targetCommentList[index]["child"][i]["nickname"],
},
voteoption: haveVotedValue.value || null,
...data,
}
@@ -299,6 +315,7 @@ const submitAnswerComments = (index, i) => {
likenum: 0,
...data,
child: [],
voteoption: haveVotedValue.value || null,
}
if (index != null) {
targetCommentList[index]["child"].unshift(targetData)
@@ -315,10 +332,17 @@ const submitAnswerComments = (index, i) => {
// 请求 输入框的数据
commentInputTop.value = ""
commentInput.value = ""
reviewsPopoverInput.value = ""
reviewsPopoverState.value = false
isEmptyState.value = false // 取消有可能的 没有评论
closeAnswerCommentsChild()
if (bottomNavigationState) {
bottomNavigationState = false
floorCommentBtn("back")
}
ElMessage.success(res.message)
})
}
@@ -426,7 +450,35 @@ const wipeCommentVoteoption = () => {
})
}
defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
let reviewsPopoverState = ref(false) // 自动投票弹窗状态
let reviewsPopoverInput = ref("") // 自动投票理由
// 调用自动评论
const reviewsComment = value => {
reviewsPopoverState.value = true
}
let bottomNavigationState = false
// 底部导航栏的 评论
const bottomNavigationBar = value => {
bottomNavigationState = true
submitAnswerComments(value)
}
const floorCommentBtn = inject("floorCommentBtn")
const postInputRef = ref(null)
const postCommentFocusBlur = () => {
postCommentFocusState.value = false
const refref = postInputRef.value
nextTick(() => {
let targetDom = refref.querySelector(".el-textarea__inner")
targetDom.style.height = ""
})
}
defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, bottomNavigationBar })
</script>
<style scoped lang="less">
@@ -443,21 +495,25 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
}
.post-comment {
min-height: 60px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(215, 215, 215, 1);
border-right-width: 0;
// border-right-width: 0;
border-radius: 6px;
margin-bottom: 30px;
margin-right: 30px;
transition: all 0.5s;
transition: all 5s;
justify-content: space-between;
overflow: hidden;
&.post-comment-focus {
border-right-width: 1px;
min-height: 200px;
// border-right-width: 1px;
flex-direction: column;
.post-input {
width: 100%;
/deep/ .el-textarea__inner {
width: 468px;
min-height: 148px !important;
max-height: 80vh;
// height: 100% !important;
}
}
.post-ok {
align-self: flex-end;
@@ -468,11 +524,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
}
.post-input {
height: 100%;
border: none;
outline: none;
background-color: transparent;
padding: 10px;
font-size: 14px;
resize: none;
transition: all 0.5s;
@@ -486,11 +538,22 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
scrollbar-width: none;
-ms-overflow-style: none;
border: none;
/deep/ .el-textarea__inner {
border: none;
box-shadow: none;
resize: none;
min-height: 60px !important;
// height: 60px !important;
padding: 10px;
transition: all 0.5s;
}
}
.post-ok {
width: 60px;
height: 60px;
height: 62px;
background-color: var(--main-color);
color: #fff;
font-size: 14px;
@@ -526,7 +589,6 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
.comment-header {
display: flex;
justify-content: space-between;
// padding-right: 30px;
margin-bottom: 10px;
.comment-header-left {
@@ -547,7 +609,6 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
.comments-time {
color: #aaaaaa;
// margin-right: 8px;
margin-right: 10px;
}
@@ -754,3 +815,46 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
padding: 80px 0 110px;
}
</style>
<style>
.automatic-reviews-popup {
border-radius: 10px;
.automatic-header {
padding: 20px;
border-bottom: 1px dotted #ebebeb;
.automatic-title {
font-weight: 650;
font-size: 18px;
color: #000000;
margin-bottom: 12px;
}
.automatic-have {
background-color: rgba(246, 246, 246, 1);
font-size: 12px;
color: #aaa;
width: fit-content;
}
}
.automatic-input {
.el-textarea__inner {
min-height: 256px !important;
box-shadow: none;
padding: 20px;
resize: none;
}
}
.automatic-bottom {
justify-content: flex-end;
padding: 0 10px 10px;
.automatic-send {
background-color: var(--main-color);
color: #fff;
font-size: 16px;
width: 100px;
height: 40px;
border-radius: 6px;
cursor: pointer;
}
}
}
</style>