From 89020a40b7b936fecbe494b5969c9a49d757f707 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Wed, 24 Jan 2024 17:20:53 +0800
Subject: [PATCH] no message

---
 app.vue                        |  21 ++++-
 assets/img/arrow-white.svg     |   6 ++
 components/DetailsArea.vue     | 140 +++++++++++++----------------
 components/DetailsComments.vue | 156 +++++++++++++++++++++++++++------
 components/MyPopup.vue         |   1 -
 pages/details/[id].vue         | 147 ++++++++++++++-----------------
 utils/http.js                  |   2 +-
 7 files changed, 283 insertions(+), 190 deletions(-)
 create mode 100644 assets/img/arrow-white.svg

diff --git a/app.vue b/app.vue
index ffc7adf..5e8da1a 100644
--- a/app.vue
+++ b/app.vue
@@ -15,12 +15,28 @@ const isProduction = process.env.NODE_ENV === "production"
 // console.log(process.env.NODE_ENV, "NODE_ENV")
 onMounted(() => {
     // isNeedLogin.value = false
-    if (!isProduction) isNeedLogin.value = false
-    else determineIsLogin()
+    // if (!isProduction) isNeedLogin.value = false
+    // else determineIsLogin()
+
+    window["userInfoWin"] = {
+        "username": "",
+        "uid": 256624,
+        "uin": 4171117,
+        "avatar": "https://oss.gter.net/avatar/97KwEWQHYuMQGDnFqkimXF9SHKuGwVV5zW-tYWFjYQ~~?istype=1&random=HHfurzyTXnzb",
+        "messagenum": 0,
+        "newprompt": 0,
+        "todaysigned": 0,
+    }
+
+    determineIsLogin()
 })
 
 let isNeedLogin = ref(true) // 是否需要登录状态
 
+let userInfoWin = ref({})
+
+provide("userInfoWin", userInfoWin)
+
 // 判断是否登录状态
 const determineIsLogin = () => {
     let count = 0
@@ -28,6 +44,7 @@ const determineIsLogin = () => {
         if (Object.keys(window["userInfoWin"]).length !== 0) {
             clearInterval(timer)
             if (window["userInfoWin"]["uid"]) isNeedLogin.value = false
+            userInfoWin.value = window["userInfoWin"]
         }
         count++
         if (count >= 10) clearInterval(timer)
diff --git a/assets/img/arrow-white.svg b/assets/img/arrow-white.svg
new file mode 100644
index 0000000..a918232
--- /dev/null
+++ b/assets/img/arrow-white.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="15px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1534 -28 )">
+    <path d="M 13.648097826087 6.63350449293967  C 13.8826992753623 6.8581514762516  14 7.14698331193838  14 7.5  C 14 7.84659820282413  13.8826992753623 8.13863928112965  13.648097826087 8.37612323491656  L 7.45652173913044 14.6437740693196  C 7.20923913043478 14.8812580231065  6.92074275362319 15  6.59103260869565 15  C 6.26766304347826 15  5.98233695652174 14.8812580231065  5.73505434782609 14.6437740693196  L 5.02173913043478 13.9216944801027  C 4.78079710144928 13.6777920410783  4.66032608695652 13.3857509627728  4.66032608695652 13.0455712451861  C 4.66032608695652 12.7053915275995  4.78079710144928 12.413350449294  5.02173913043478 12.1694480102696  L 7.80842391304348 9.34852374839538  L 1.11277173913043 9.34852374839538  C 0.783061594202899 9.34852374839538  0.515172101449275 9.22817715019255  0.309103260869565 8.98748395378691  C 0.103034420289855 8.74679075738126  0 8.45635430038511  0 8.11617458279846  L 0 6.88382541720154  C 0 6.54364569961489  0.103034420289855 6.25320924261874  0.309103260869565 6.01251604621309  C 0.515172101449275 5.77182284980745  0.783061594202899 5.65147625160462  1.11277173913043 5.65147625160462  L 7.80842391304348 5.65147625160462  L 5.02173913043478 2.8209242618742  C 4.78079710144928 2.58985879332478  4.66032608695652 2.301026957638  4.66032608695652 1.95442875481386  C 4.66032608695652 1.60783055198973  4.78079710144928 1.31899871630295  5.02173913043478 1.08793324775353  L 5.73505434782609 0.365853658536586  C 5.97599637681159 0.121951219512194  6.26132246376812 0  6.59103260869565 0  C 6.92708333333333 0  7.21557971014493 0.121951219512194  7.45652173913044 0.365853658536586  L 13.648097826087 6.63350449293967  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1534 28 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/components/DetailsArea.vue b/components/DetailsArea.vue
index 7b71341..3e42274 100644
--- 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);
     }
 }
diff --git a/components/DetailsComments.vue b/components/DetailsComments.vue
index bfe1d9d..8a7b9ca 100644
--- 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>
diff --git a/components/MyPopup.vue b/components/MyPopup.vue
index 2e44582..4b6a53c 100644
--- 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
 
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index 02a279b..7c8f988 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -52,43 +52,30 @@
             <div class="message">{{ info.message }}</div>
 
             <div class="hint">{{ info.status == 1 && isvote == 0 ? `已有 ${info.votes || 0} 人参与，` : `共有 ${info.votes || 0} 人参与` }} {{ `${isvote == 1 ? "你已投票" : info.status == 1 ? "参与投票即可查看实时结果" : ""}` }}</div>
-
-            <div class="option-list flexflex" v-if="info['status'] == 1 && isvote == 0">
-                <div class="option-item flexflex" v-for="(item, index) in option" :key="item.id" @click="handleVote(item.id, index)">
-                    <div class="serial flexcenter">{{ index + 1 }}</div>
-                    <span class="flex1">{{ item.value }} </span>
-                </div>
-            </div>
-            <div class="option-area" v-else>
-                <div class="option-item flexflex" :class="{ 'pitch': item.selected }" v-for="(item, index) in option" :key="item.id" @click="handleUnvoteVote(index, item.selected)">
-                    <div class="flexflex" style="padding: 2px 0px;">
-                        <div class="option-number flexcenter">{{ index + 1 }}</div>
-                        <img class="tick-icon" src="@/assets/img/tick-black.svg" />
-                        <div class="option-content flex1">{{ item.value }}</div>
-                    </div>
-                    <div class="option-progress flexacenter">
-                        <div class="option-progress-step" :style="{ width: item.percentage + '%' }"></div>
-                        <div class="option-progress-value">{{ item.count }}</div>
+            <ClientOnly>
+                <div class="option-list flexflex" v-if="info['status'] == 1 && isvote == 0">
+                    <div class="option-item flexflex" v-for="(item, index) in option" :key="item.id" @click="handleVote(item.id, index)">
+                        <div class="serial flexcenter">{{ index + 1 }}</div>
+                        <span class="flex1">{{ item.value }} </span>
                     </div>
                 </div>
-            </div>
+                <div class="option-area" v-else>
+                    <div class="option-item flexflex" :class="{ 'pitch': item.selected }" v-for="(item, index) in option" :key="item.id" @click="handleUnvoteVote(index, item.selected)">
+                        <div class="flexflex" style="padding: 2px 0px;">
+                            <div class="option-number flexcenter">{{ index + 1 }}</div>
+                            <img class="tick-icon" src="@/assets/img/tick-black.svg" />
+                            <div class="option-content flex1">{{ item.value }}</div>
+                        </div>
+                        <div class="option-progress flexacenter">
+                            <div class="option-progress-step" :style="{ width: item.percentage + '%' }"></div>
+                            <div class="option-progress-value">{{ item.count }}</div>
+                        </div>
+                    </div>
+                </div>
+            </ClientOnly>
         </div>
         <div class="right"><DetailsComments ref="commentsRef" :token="token"></DetailsComments></div>
         <DetailsArea></DetailsArea>
-
-        <!-- 投票后自动评论 -->
-        <template v-if="false">
-            <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">已投：还是申点其他的保底吧</div>
-                </div>
-                <el-input class="automatic-input" placeholder="请输入…" v-model="aaaaa" type="textarea"></el-input>
-                <div class="automatic-bottom flexflex">
-                    <div class="automatic-send flexcenter">发送</div>
-                </div>
-            </el-dialog>
-        </template>
     </div>
 
     <el-dialog class="default-popup options-popup" v-model="cancelPopoverState" width="488px" align-center>
@@ -116,10 +103,6 @@ let id = route.params.id
 const uniqidEnd = id.charAt(id.length - 1)
 const uniqidIndex = base62ToDecimal(uniqidEnd) % 6
 
-let aaaaa = ref("")
-
-let reviewsPopoverState = ref(true)
-
 onMounted(() => {
     getDetails()
     clearBottom()
@@ -136,6 +119,7 @@ let option = ref([])
 let token = ref("")
 let cancelPopoverState = ref(false) // 取消投票弹窗
 let isLoaded = ref(false) // 是否加载了
+let haveVotedValue = ref("") // 已投的值
 
 provide("info", info)
 provide("islike", islike)
@@ -143,6 +127,7 @@ provide("iscollection", iscollection)
 provide("token", token)
 provide("qrcode", qrcode)
 provide("isLoaded", isLoaded)
+provide("haveVotedValue", haveVotedValue)
 
 const getDetails = () => {
     detailsHttp({ uniqid: id }).then(res => {
@@ -153,6 +138,7 @@ const getDetails = () => {
         }
 
         let data = res.data
+
         info.value = data["info"]
         isvote.value = data["isvote"]
         iscollection.value = data["iscollection"]
@@ -162,7 +148,13 @@ const getDetails = () => {
         qrcode.value = data.share?.qrcode
         token.value = data["token"]
         seo.value = data.seo
+
         isLoaded.value = true
+
+        data["option"].forEach(element => {
+            if (element.selected) haveVotedValue.value = element.value
+        })
+        // haveVotedValue
     })
 }
 
@@ -192,6 +184,13 @@ provide("TAHomePage", TAHomePage)
 const commentsRef = ref(null)
 let voteLoading = false
 
+// 处理点击投票的中转
+const handleVotesTransfer = index => {
+    const target = option.value[index]
+    if (info.value.status == 1 && isvote.value == 0) handleVote(target.id, index)
+    else handleUnvoteVote(index)
+}
+
 // 处理点击投票
 const handleVote = (token, index) => {
     if (isNeedLogin.value) {
@@ -211,15 +210,21 @@ const handleVote = (token, index) => {
             }
             let data = res.data
             let optionList = data["optionList"] || []
+            optionList.forEach(element => {
+                element["selected"] = 0
+            })
             optionList[index]["selected"] = 1
             option.value = optionList
             isvote.value = 1
             info.value.votes = data["votes"]
 
             const value = optionList[index]["value"]
+            haveVotedValue.value = value
             commentsRef.value.changeCommentVoteoption(value)
 
             ElMessage.success(res.message)
+
+            if (index != optionList.length - 1) commentsRef.value.reviewsComment(optionList[index]["value"])
         })
         .finally(() => (voteLoading = false))
 }
@@ -256,7 +261,10 @@ const unvoteVote = () => {
             }
             let data = res.data
             let optionList = data["optionList"] || []
-            optionList[unvoteVoteIndex]["selected"] = 0
+            // optionList[unvoteVoteIndex]["selected"] = 0
+            optionList.forEach(element => {
+                element["selected"] = 0
+            })
             option.value = optionList
             isvote.value = 0
             info.value.votes = data["votes"]
@@ -312,6 +320,18 @@ const clearBottom = () => {
 let topHeadRef = ref(null)
 provide("topHeadRef", topHeadRef)
 
+// 底部导航栏 的 点击评论输入值
+let floorCommentInput = ref("")
+
+// 底部导航栏 的 点击发送评论  type input  back
+const floorCommentBtn = type => {
+    if (type == "input") commentsRef.value.bottomNavigationBar(floorCommentInput.value)
+    else floorCommentInput.value = ""
+}
+
+provide("floorCommentInput", floorCommentInput)
+provide("floorCommentBtn", floorCommentBtn)
+
 try {
     if (process.server) {
         await detailsHttp({ uniqid: id }).then(res => {
@@ -500,6 +520,12 @@ try {
                     margin-top: 3px;
                     margin-right: 6px;
                 }
+
+                .option-progress,
+                .option-number,
+                .tick-icon {
+                    display: none;
+                }
             }
         }
         .option-area {
@@ -533,6 +559,10 @@ try {
                     }
                 }
 
+                .serial {
+                    display: none;
+                }
+
                 .option-number {
                     font-size: 11px;
                     color: #ffffff;
@@ -625,6 +655,7 @@ try {
                 background-color: rgba(249, 93, 93, 1);
                 border-color: rgba(249, 93, 93, 1);
                 color: #fff;
+                margin-left: 20px;
             }
             &.options-no {
                 background-color: #fff;
@@ -634,46 +665,4 @@ try {
         }
     }
 }
-
-.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: 10px;
-        .automatic-send {
-            background-color: var(--main-color);
-            color: #fff;
-            font-size: 16px;
-            width: 100px;
-            height: 40px;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-    }
-}
 </style>
diff --git a/utils/http.js b/utils/http.js
index c8b8f83..cebb408 100644
--- a/utils/http.js
+++ b/utils/http.js
@@ -10,7 +10,7 @@ axios.defaults.withCredentials = true
 axios.interceptors.request.use( //响应拦截
     async config => {
         // 开发时登录用的，可以直接替换小程序的 authorization
-        config['headers']['authorization'] = process.env.NODE_ENV !== "production" && "be0e96a37a79c3ab16851b9a4318b03a"
+        config['headers']['authorization'] = process.env.NODE_ENV !== "production" && "8982b87c1dd25cbfde7ea187235351c8"
         // config['headers']['authorization'] = "bee67e306e40b7d273d894657043eeb0"
         return config;
     },