no message

2024-01-24 17:20:53 +08:00
parent 809d1d317a
commit 89020a40b7
7 changed files with 283 additions and 190 deletions
--- a/components/DetailsArea.vue
+++ b/components/DetailsArea.vue
@@ -1,7 +1,18 @@
 <template>
    <div class="floor-area flexacenter" :class="{ 'show': isLoaded }">
        <div class="floor-content flexacenter">
-            <!-- {{ isLoaded }} -->
+            <div class="floor-right flexacenter" @mouseenter="handleFloorRight(true)" @mouseleave="handleFloorRight(false)">
+                手机查看该投票
+                <img class="arrows-icon" src="@/assets/img/arrows-icon.png" />
+                <el-popover placement="bottom" width="160px" trigger="hover" v-model:visible="floorRightState" popper-style="padding: 24px;border-radius: 18px;">
+                    <template #reference>
+                        <div class="QR-code-ball flexcenter">
+                            <img class="" src="@/assets/img/QR-code-icon.svg" />
+                        </div>
+                    </template>
+                    <img class="examine-code" :src="qrcode" />
+                </el-popover>
+            </div>
            <div class="floor-left flexacenter">
                <div class="item flexacenter" style="cursor: auto;">
                    <img class="icon" src="@/assets/img/eye-icon.svg" />
@@ -47,29 +58,12 @@
                    </el-popover>
                </ClientOnly>
            </div>
-            <div class="floor-middle flexacenter coin-box" v-if="false">
-                <div class="coin-content flexacenter flex1" @click="openCoinRankList">
-                    <img class="coin-icon" src="@/assets/img/coin-icon.png" />
-                    <div class="coin-text flex1 flexacenter">
-                        已获
-                        <div class="coin-value">{{ info.coins }}</div>
-                        个寄托币
-                    </div>
+            <div class="floor-middle flexacenter comment-box">
+                <img class="avatar" :src="userInfoWin?.avatar" />
+                <input class="comment-input flex1" type="text" v-model="floorCommentInput" @keydown.enter="floorCommentBtn('input')" placeholder="说说你的想法或疑问…" />
+                <div class="comment-btn flexcenter" @click="floorCommentBtn('input')">
+                    <img class="comment-btn-icon" src="@/assets/img/arrow-white.svg" />
                </div>
-                <div class="coin-btn flexcenter" @click="openCoinOperation()">给TA投币</div>
-            </div>
-
-            <div class="floor-right flexacenter" @mouseenter="handleFloorRight(true)" @mouseleave="handleFloorRight(false)">
-                手机查看该投票
-                <img class="arrows-icon" src="@/assets/img/arrows-icon.png" />
-                <el-popover placement="bottom" width="160px" trigger="hover" v-model:visible="floorRightState" popper-style="padding: 24px;border-radius: 18px;">
-                    <template #reference>
-                        <div class="QR-code-ball flexcenter">
-                            <img class="" src="@/assets/img/QR-code-icon.svg" />
-                        </div>
-                    </template>
-                    <img class="examine-code" :src="qrcode" />
-                </el-popover>
            </div>
        </div>
    </div>
@@ -80,6 +74,7 @@ import { ElMessage } from "element-plus"

 let isNeedLogin = inject("isNeedLogin")
 const goLogin = inject("goLogin")
+const userInfoWin = inject("userInfoWin")

 let info = inject("info")
 let islike = inject("islike")
@@ -178,6 +173,9 @@ const handleLike = () => {

 // 底部转发弹窗显示 状态
 let transmitBoxState = ref(false)
+
+const floorCommentInput = inject("floorCommentInput")
+const floorCommentBtn = inject("floorCommentBtn")
 </script>

 <style scoped lang="less">
@@ -190,7 +188,9 @@ let transmitBoxState = ref(false)
    min-width: 1200px;
    height: 70px;
    z-index: 1;
-    background-color: rgba(255, 255, 255, 1);
+    background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
+    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
    -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
@@ -209,6 +209,7 @@ let transmitBoxState = ref(false)
        display: flex;
        justify-content: space-between;
        .floor-left {
+            margin-left: 30px;
            .item {
                cursor: pointer;
                color: #aaaaaa;
@@ -235,45 +236,6 @@ let transmitBoxState = ref(false)
            }
        }

-        .floor-middle {
-            min-width: 300px;
-            height: 40px;
-            background-color: rgba(246, 246, 246, 1);
-            border-radius: 150px;
-            .coin-content {
-                padding: 0 13px;
-                height: 100%;
-                cursor: pointer;
-
-                .coin-icon {
-                    width: 20px;
-                    height: 24px;
-                    margin-right: 5px;
-                    margin-top: -2px;
-                }
-
-                .coin-text {
-                    font-size: 13px;
-                    color: #333333;
-                    .coin-value {
-                        font-family: "Arial-Black", "Arial Black", sans-serif;
-                        font-weight: 900;
-                        margin: 0 5px;
-                    }
-                }
-            }
-
-            .coin-btn {
-                width: 97px;
-                height: 40px;
-                background-color: rgba(114, 219, 134, 1);
-                border-radius: 150px;
-                color: #ffffff;
-                font-size: 13px;
-                cursor: pointer;
-            }
-        }
-
        .floor-right {
            color: #7f7f7f;
            font-size: 13px;
@@ -293,6 +255,40 @@ let transmitBoxState = ref(false)
                cursor: pointer;
            }
        }
+
+        .floor-middle {
+            width: 471px;
+            height: 40px;
+            border-radius: 152px;
+            background-color: #fff;
+            border: 1px solid rgba(215, 215, 215, 1);
+            .avatar {
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                margin-left: 6px;
+            }
+
+            .comment-input {
+                height: 100%;
+                border: none;
+                outline: none;
+                padding: 0 12px;
+                font-size: 14px;
+            }
+
+            .comment-btn {
+                width: 40px;
+                height: 40px;
+                background-color: rgba(172, 183, 46, 1);
+                border-radius: 20px;
+                cursor: pointer;
+                .comment-btn-icon {
+                    width: 14px;
+                    height: 15px;
+                }
+            }
+        }
    }
 }

@@ -385,24 +381,8 @@ let transmitBoxState = ref(false)
    height: 113px;
 }

-@keyframes anima {
-    0% {
-        width: 16px;
-    }
-
-    40% {
-        width: 20px;
-    }
-
-    100% {
-        width: 16px;
-    }
-}
-
@keyframes animafloor {
    0% {
-        // left: -100%;
-        // opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

@@ -411,8 +391,6 @@ let transmitBoxState = ref(false)
    }

    100% {
-        // left: 0;
-        // opacity: 1;
        transform: translateZ(0);
    }
 }
--- a/components/DetailsComments.vue
+++ b/components/DetailsComments.vue
@@ -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>
--- a/components/MyPopup.vue
+++ b/components/MyPopup.vue
@@ -101,7 +101,6 @@ const getCollect = () => {
            showList.value = collectList
            // showList.value = showList.value.concat(data.data)

-            console.log(collectList.length, data["count"])
            if (collectList.length < data["count"]) collectPage++
            else collectPage = 0