From 809d1d317ab034e5bc19b187af1d103ac3f7fd1d Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Tue, 23 Jan 2024 19:10:57 +0800
Subject: [PATCH] no message

---
 app.vue                        | 12 ++---
 components/DetailsArea.vue     | 85 +++++++++++++++++++++++++-------
 components/DetailsComments.vue | 43 +++++++++++++----
 components/MyPopup.vue         |  1 +
 components/top-head.vue        |  4 +-
 composables/api.js             |  2 +-
 nuxt.config.ts                 |  2 +-
 pages/details/[id].vue         | 88 +++++++++++++++++++++++++++++-----
 pages/index.html/index.vue     |  5 +-
 pages/publish/index.vue        | 19 ++++----
 10 files changed, 202 insertions(+), 59 deletions(-)

diff --git a/app.vue b/app.vue
index bf6fd7f..ffc7adf 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <!-- 
-    讨论测试一下
+    首页搜索不行
     我发起的投票不能修改 匿名状态
     我发起的投票不确定能下拉加载
  -->
@@ -11,12 +11,12 @@
 <script setup>
 const route = useRoute()
 // 是否是 生产环境
-const isProduction = import.meta.env.NODE_ENV === "production"
-
+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()
+    // isNeedLogin.value = false
+    if (!isProduction) isNeedLogin.value = false
+    else determineIsLogin()
 })
 
 let isNeedLogin = ref(true) // 是否需要登录状态
diff --git a/components/DetailsArea.vue b/components/DetailsArea.vue
index 26644f6..7b71341 100644
--- a/components/DetailsArea.vue
+++ b/components/DetailsArea.vue
@@ -1,29 +1,30 @@
 <template>
-    <div class="floor-area flexacenter">
+    <div class="floor-area flexacenter" :class="{ 'show': isLoaded }">
         <div class="floor-content flexacenter">
+            <!-- {{ isLoaded }} -->
             <div class="floor-left flexacenter">
-                <!-- <div class="item flexacenter" v-if="isBrowser" style="cursor: auto;">
-                    <img class="icon" src="@/assets/img/eye-icon-black.svg" />
+                <div class="item flexacenter" style="cursor: auto;">
+                    <img class="icon" src="@/assets/img/eye-icon.svg" />
                     {{ info["views"] }}
-                </div> -->
+                </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 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" />
+                    {{ info["favs"] || "收藏" }}
+                </div>
                 <ClientOnly>
-                    <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 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" />
-                        {{ info["favs"] || "收藏" }}
-                    </div>
                     <el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
                         <template #reference>
                             <div class="item flexacenter" @click="handleShare"><img class="icon" src="@/assets/img/transmit-icon.png" />转发</div>
                         </template>
 
                         <div class="transmit-box flexflex">
-                            <img class="cross-icon" @click="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
+                            <img class="cross-icon" @click.stop="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
                             <div class="transmit-left transmit-web">
                                 <div class="transmit-title">转发网页版</div>
                                 <div class="transmit-content">
@@ -86,6 +87,7 @@ let iscollection = inject("iscollection")
 let qrcode = inject("qrcode")
 let token = inject("token")
 const topHeadRef = inject("topHeadRef")
+const isLoaded = inject("isLoaded")
 
 // 获取完整 url
 const getFullUrl = () => {
@@ -159,7 +161,7 @@ const handleLike = () => {
         ElMessage.error("不可取消点赞")
         return
     }
-    
+
     operateLikeHttp({ token: token.value }).then(res => {
         if (res.code != 200) {
             ElMessage.error(res.message)
@@ -173,6 +175,9 @@ const handleLike = () => {
         ElMessage.success(res.message)
     })
 }
+
+// 底部转发弹窗显示 状态
+let transmitBoxState = ref(false)
 </script>
 
 <style scoped lang="less">
@@ -180,6 +185,7 @@ const handleLike = () => {
     position: fixed;
     left: 0;
     bottom: 0;
+    // bottom: 50%;
     width: 100vw;
     min-width: 1200px;
     height: 70px;
@@ -188,6 +194,13 @@ const handleLike = () => {
     -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);
+    display: none;
+    &.show {
+        display: flex;
+        animation: animafloor 1s forwards;
+        animation-timing-function: cubic-bezier(0.98, -0.2, 0.55, 0.97); /* 先快后慢的时间曲线 */
+        animation-fill-mode: both;
+    }
     .floor-content {
         width: 1200px;
         height: 100%;
@@ -204,8 +217,16 @@ const handleLike = () => {
                 .icon {
                     width: 16px;
                     margin-right: 5px;
+                    // animation: anima 1s forwards;
                 }
 
+                // :nth-of-type(1) {
+                //     animation-delay: 1s;
+                // }
+                // :nth-of-type(2) {
+                //     animation-delay: 2s;
+                // }
+
                 &.operate-item {
                     position: relative;
                     display: flex;
@@ -363,4 +384,36 @@ const handleLike = () => {
     width: 113px;
     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);
+    }
+
+    90% {
+        left: 20px;
+    }
+
+    100% {
+        // left: 0;
+        // opacity: 1;
+        transform: translateZ(0);
+    }
+}
 </style>
diff --git a/components/DetailsComments.vue b/components/DetailsComments.vue
index 08f3d88..bfe1d9d 100644
--- a/components/DetailsComments.vue
+++ b/components/DetailsComments.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="comment-title flexacenter">
-        讨论
+        讨论 {{ postCommentFocusState }}
         <span class="comment-amount">{{ commentComments || "" }}</span>
     </div>
-    <div class="post-comment flexacenter" @click="loginJudgment()">
-        <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
+    <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>
 
@@ -150,6 +150,8 @@ onMounted(() => window.addEventListener("scroll", handleScroll))
 const sendMessage = inject("sendMessage")
 const TAHomePage = inject("TAHomePage")
 
+let postCommentFocusState = ref(false)
+
 let commentCount = ref(0)
 let commentComments = ref(0) // 所有的评论数
 let commentPage = ref(1)
@@ -221,6 +223,7 @@ const openAnswerCommentsChild = (index, i) => {
         goLogin()
         return
     }
+
     closeAnswerCommentsChild(false)
     if (i == null) commentList.value[index]["childState"] = true
     else commentList.value[index]["child"][i]["childState"] = true
@@ -228,10 +231,7 @@ const openAnswerCommentsChild = (index, i) => {
 }
 
 // 关闭 回答-评论 的子评论  isempty 是否需要清空输入框 默认需要清空
-const closeAnswerCommentsChild = (isempty = true) => {
-    console.log("isempty", isempty)
-    // if (isempty) commentInput.value = ""
-    commentInput.value = ""
+const closeAnswerCommentsChild = () => {
     commentList.value.forEach(ele => {
         ele["childState"] = false
         if (ele["child"] && ele["child"].length != 0) ele["child"].forEach(el => (el["childState"] = false))
@@ -259,6 +259,11 @@ const submitAnswerComments = (index, i) => {
     if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
     else if (index != null) parentid = targetCommentList[index]["id"]
 
+    if (!content) {
+        ElMessage.error("请填写评论内容")
+        return
+    }
+
     detailsSubmitommentListHttp({
         content,
         token: props.token,
@@ -438,14 +443,29 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
 }
 
 .post-comment {
-    // width: 100%;
-    height: 60px;
+    min-height: 60px;
     background-color: rgba(255, 255, 255, 1);
     border: 1px solid rgba(215, 215, 215, 1);
-    border-right: none;
+    border-right-width: 0;
     border-radius: 6px;
     margin-bottom: 30px;
     margin-right: 30px;
+    transition: all 0.5s;
+
+    &.post-comment-focus {
+        border-right-width: 1px;
+        min-height: 200px;
+        flex-direction: column;
+        .post-input {
+            width: 100%;
+        }
+        .post-ok {
+            align-self: flex-end;
+            height: 32px;
+            margin-bottom: 10px;
+            margin-right: 10px;
+        }
+    }
 
     .post-input {
         height: 100%;
@@ -455,6 +475,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
         padding: 10px;
         font-size: 14px;
         resize: none;
+        transition: all 0.5s;
 
         &::placeholder {
             color: #aaaaaa;
@@ -475,6 +496,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
         font-size: 14px;
         cursor: pointer;
         border-radius: 6px;
+        transition: all 0.5s;
     }
 }
 
@@ -665,6 +687,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
                         resize: none;
                         padding: 11px 16px;
                         border-radius: 7px 0 0 7px;
+                        font-size: 14px;
                     }
 
                     .comments-btn {
diff --git a/components/MyPopup.vue b/components/MyPopup.vue
index 4b6a53c..2e44582 100644
--- a/components/MyPopup.vue
+++ b/components/MyPopup.vue
@@ -101,6 +101,7 @@ 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/components/top-head.vue b/components/top-head.vue
index 7043a95..866d196 100644
--- a/components/top-head.vue
+++ b/components/top-head.vue
@@ -107,8 +107,8 @@ const setHistoricalSearchList = () => {
 
 // 搜索点击事件
 const searchClick = () => {
-    router.push(`/index.html?keyword=${keyword.value || ""}`)
-    // goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
+    // router.push(`/index.html?keyword=${keyword.value || ""}`)
+    goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
     setHistoricalSearchList()
     searchBlur()
 }
diff --git a/composables/api.js b/composables/api.js
index b6c1a75..1622d32 100644
--- a/composables/api.js
+++ b/composables/api.js
@@ -97,5 +97,5 @@ export const MyUserCollectHttp = query => {
 
 // 评论相关 - 举报 Comment related
 export const commentReportHttp = query => {
-    return Http.post("/api/operate/report", query)
+    return Http.post("/api/comment/report", query)
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6bc2257..3109339 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     ssr: true,
-    devtools: { enabled: true },
+    devtools: { enabled: false },
     modules: ["@element-plus/nuxt"],
     app: {
         head: {
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index d220955..02a279b 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -8,12 +8,12 @@
     <div class="content flexflex" :style="{ '--main-color': colourValue[uniqidIndex]['main'], '--bg-color': colourValue[uniqidIndex]['bg'], '--bc-color': colourValue[uniqidIndex]['bc'] }">
         <div class="header flexacenter">
             <span>{{ info.title }}</span>
-            <ClientOnly>
+            <!-- <ClientOnly>
                 <span class="views flexcenter">
                     <img class="eye-icon" src="@/assets/img/eye-icon.svg" />
                     {{ info.views }}
                 </span>
-            </ClientOnly>
+            </ClientOnly> -->
         </div>
         <div class="left">
             <div class="info flexacenter">
@@ -38,7 +38,7 @@
                         </div>
                     </el-popover>
 
-                    <div class="post-time">{{ handleDate(info.releasetime) }}发布</div>
+                    <div class="post-time" v-if="info.releasetime">{{ handleDate(info.releasetime) }}发布</div>
                 </div>
                 <div class="info-right flexacenter" v-if="info['status'] == 1">
                     <div class="cut-off">{{ handleDeadline(info.deadline) }}结束</div>
@@ -74,10 +74,24 @@
             </div>
         </div>
         <div class="right"><DetailsComments ref="commentsRef" :token="token"></DetailsComments></div>
-    </div>
-    <DetailsArea></DetailsArea>
+        <DetailsArea></DetailsArea>
 
-    <el-dialog class="options-popup" v-model="cancelPopoverState" width="488px" align-center>
+        <!-- 投票后自动评论 -->
+        <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>
         <div class="options-popup-text">您要取消投票吗？</div>
         <div class="options-popup-btn flexflex">
             <div class="options-popup-item options-no flexcenter" @click="unvoteVote">取消投票</div>
@@ -102,6 +116,10 @@ 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()
@@ -117,12 +135,14 @@ let isvote = ref(0) // 是否已经投票
 let option = ref([])
 let token = ref("")
 let cancelPopoverState = ref(false) // 取消投票弹窗
+let isLoaded = ref(false) // 是否加载了
 
 provide("info", info)
 provide("islike", islike)
 provide("iscollection", iscollection)
 provide("token", token)
 provide("qrcode", qrcode)
+provide("isLoaded", isLoaded)
 
 const getDetails = () => {
     detailsHttp({ uniqid: id }).then(res => {
@@ -142,6 +162,7 @@ const getDetails = () => {
         qrcode.value = data.share?.qrcode
         token.value = data["token"]
         seo.value = data.seo
+        isLoaded.value = true
     })
 }
 
@@ -566,8 +587,7 @@ try {
 </style>
 
 <style lang="less">
-.options-popup {
-    border-radius: 10px;
+.default-popup {
     .el-dialog__header {
         padding: 0;
         .el-dialog__headerbtn {
@@ -575,10 +595,14 @@ try {
             height: 36px;
         }
     }
-    padding: 44px 74px;
     .el-dialog__body {
         padding: 0;
     }
+}
+
+.options-popup {
+    border-radius: 10px;
+    padding: 44px 74px;
 
     .options-popup-text {
         font-size: 14px;
@@ -598,8 +622,8 @@ try {
             cursor: pointer;
 
             &.options-yes {
-                background-color: rgba(114, 219, 134, 1);
-                border-color: rgba(114, 219, 134, 1);
+                background-color: rgba(249, 93, 93, 1);
+                border-color: rgba(249, 93, 93, 1);
                 color: #fff;
             }
             &.options-no {
@@ -610,4 +634,46 @@ 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/pages/index.html/index.vue b/pages/index.html/index.vue
index edcc570..e9779de 100644
--- a/pages/index.html/index.vue
+++ b/pages/index.html/index.vue
@@ -135,10 +135,7 @@ const handleLike = (token, index) => {
 }
 
 // 点击关闭搜索
-const closeKeyword = () => {
-    // keyword.value = ""
-    router.push("./index.html")
-}
+const closeKeyword = () => router.push("./index.html")
 
 watch(
     () => route.query,
diff --git a/pages/publish/index.vue b/pages/publish/index.vue
index 09f2fdb..a5898ad 100644
--- a/pages/publish/index.vue
+++ b/pages/publish/index.vue
@@ -87,7 +87,7 @@
                             </div>
                         </div>
                         <div class="flexcenter" style="padding-right: 26px;">
-                            <div class="add-box flexcenter" @click="addOption()">
+                            <div class="add-box flexcenter" @click="addOption()" v-if="optionList.length < 15">
                                 <img class="add-icon" src="@/assets/img/add-green-icon.svg" />
                                 添加选项
                             </div>
@@ -251,7 +251,7 @@ onMounted(() => {
 const getinit = () => {
     publishInitHttp().then(res => {
         if (res.code != 200) {
-            ElMessage.error(res.message || '报错了，刷新一下')
+            ElMessage.error(res.message || "报错了，刷新一下")
             if (res.code == 401) goLogin()
             return
         }
@@ -265,17 +265,20 @@ const getinit = () => {
                 optionList.value.push({ id: index, message: "" })
             }
         } else {
-            while (option.length < 2) {
-                option.push(null)
-            }
-
             option.forEach((message, index) => {
-                optionList.value.push({ id: index, message })
+                if (message !== "不懂，围观学习") {
+                    optionList.value.push({ id: index, message })
+                }
             })
+            while (optionList.value.length < 2) {
+                optionList.value.push({ id: optionList.value.length, message: "" })
+            }
         }
 
         let deadline = data["info"]["deadline"] || 0
-        if (deadline) data["info"]["deadline"] = handleDate(deadline)
+        console.log("deadline", deadline)
+        if (deadline > 100000) data["info"]["deadline"] = handleDate(deadline)
+        else data["info"]["deadline"] = null
 
         info.value = data.info
         token = data.token