From 39c14ed9bb62bae0c58336fdf501eac2975bc737 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Tue, 30 Jan 2024 19:08:34 +0800
Subject: [PATCH] no message

---
 app.vue                 |   6 +-
 pages/details/[id].vue  | 127 ++++++++++++++++++++++++++++++++++------
 pages/publish/index.vue |   8 +--
 3 files changed, 112 insertions(+), 29 deletions(-)

diff --git a/app.vue b/app.vue
index 4b31875..553f377 100644
--- a/app.vue
+++ b/app.vue
@@ -28,10 +28,10 @@ const isProduction = process.env.NODE_ENV === "production"
 // })
 
 onMounted(() => {
-    // if (!isProduction) isNeedLogin.value = false
-    // else determineIsLogin()
+    if (!isProduction) isNeedLogin.value = false
+    else determineIsLogin()
 
-    determineIsLogin()
+    // determineIsLogin()
     // isNeedLogin.value = false
 
     // if (true) determineIsLogin()
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index 1bf46d6..c13b3a9 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -171,8 +171,11 @@
                         讨论
                         <div class="value">{{ commentComments || "" }}</div>
                     </div>
-                    <div class="post-comment flexacenter" @click="loginJudgment()">
-                        <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
+                    <div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
+                        <div class="post-comment-input">
+                            <!-- <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></textarea> -->
+                            <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()">发送</div>
                     </div>
 
@@ -213,7 +216,7 @@
                                                 <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
                                                 <div class="report-box flexcenter" @click="report(item['token'])">举报</div>
                                             </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" />
@@ -221,15 +224,18 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- <div class="comment-text" @click="openAnswerCommentsChild(index)">{{ item["content"] }}</div> -->
-                                    <div class="comment-text" @click="openAnswerCommentsChild(index)" v-html="item['content']"></div>
-                                    <!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> -->
-                                    <div class="comments-input-box flexacenter" v-if="item['childState']">
+                                    <div class="comment-text" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" v-html="item['content']"></div>
+                                    <!-- <div class="comments-input-box flexacenter" v-if="item['childState']" :class="{ 'comments-input-box-show': item['childState'] }"> -->
+                                    <div class="comments-input-box flexacenter" :class="{ 'comments-input-box-show': item['childState'] }">
                                         <div class="comments-input flexflex">
-                                            <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
-                                            <div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div>
+                                            <!-- <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea> -->
+                                            <el-input type="textarea" v-model="commentInput" placeholder="回复" :maxlength="500" show-word-limit></el-input>
+                                            <!-- <div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div> -->
+                                            <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>
-                                        <img class="forkfork" @click="closeAnswerCommentsChild(index)" src="@/assets/img/cross-icon.png" />
                                     </div>
                                     <!-- 子评论 -->
                                     <div class="child-comments" v-if="item['child'].length > 0">
@@ -265,7 +271,7 @@
                                                             <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="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
+                                                        <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" />
@@ -273,7 +279,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="comment-text" @click="openAnswerCommentsChild(index, i)">
+                                                <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>
@@ -282,7 +288,7 @@
                                                         <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
                                                         <div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
                                                     </div>
-                                                    <img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" />
+                                                    <!-- <img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" /> -->
                                                 </div>
                                             </div>
                                         </div>
@@ -807,7 +813,7 @@ const openAnswerCommentsChild = (index, i) => {
     closeAnswerCommentsChild()
     if (i == null) commentList.value[index]["childState"] = true
     else commentList.value[index]["child"][i]["childState"] = true
-    commentInput.value = ""
+    // commentInput.value = ""
 }
 
 // 关闭 回答-评论 的子评论
@@ -1309,6 +1315,21 @@ let labelObj = {
     thread: "帖子",
     ask: "回答",
 }
+
+let postCommentFocusState = ref(false)
+
+const postInputRef = ref(null)
+
+const postCommentFocusBlur = () => {
+    const refref = postInputRef.value
+    setTimeout(() => {
+        postCommentFocusState.value = false
+        nextTick(() => {
+            let targetDom = refref.querySelector(".el-textarea__inner")
+            targetDom.style.height = "41px"
+        })
+    }, 200)
+}
 </script>
 
 <style lang="less" scoped>
@@ -1765,19 +1786,50 @@ let labelObj = {
             }
             .post-comment {
                 width: 749px;
-                height: 60px;
+                // height: 60px;
                 background-color: rgba(255, 255, 255, 1);
                 border: 1px solid rgba(215, 215, 215, 1);
                 border-radius: 6px;
                 margin-bottom: 30px;
 
+                transition: all 5s;
+                overflow: hidden;
+                position: relative;
+                &.post-comment-focus {
+                    .post-input {
+                        /deep/ .el-textarea__inner {
+                            width: 468px;
+                            min-height: 200px !important;
+                            max-height: 80vh;
+                            padding-bottom: 52px;
+                        }
+
+                        /deep/ .el-input__count {
+                            display: block;
+                            left: 10px;
+                        }
+                    }
+                    .post-ok {
+                        height: 32px;
+                        bottom: 10px;
+                        right: 10px;
+                    }
+                    .post-comment-input {
+                        width: 749px;
+                    }
+                }
+
+                .post-comment-input {
+                    width: 690px;
+                }
+
                 .post-input {
                     height: 100%;
                     border: none;
                     outline: none;
                     background-color: transparent;
                     outline-color: rgba(98, 177, 255, 1);
-                    padding: 10px;
+                    // padding: 10px;
                     font-size: 14px;
                     resize: none;
 
@@ -1792,14 +1844,50 @@ let labelObj = {
                     -ms-overflow-style: none;
                 }
 
+                .post-input {
+                    background-color: transparent;
+                    font-size: 14px;
+                    resize: none;
+                    transition: all 0.5s;
+
+                    &::placeholder {
+                        color: #aaaaaa;
+                    }
+                    &::-webkit-scrollbar {
+                        width: 0 !important;
+                    }
+
+                    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;
+                    }
+
+                    /deep/ .el-input__count {
+                        display: none;
+                    }
+                }
+
                 .post-ok {
                     width: 60px;
-                    height: 60px;
+                    height: 62px;
                     background-color: rgba(98, 177, 255, 1);
                     color: #fff;
                     font-size: 14px;
                     cursor: pointer;
                     border-radius: 6px;
+                    transition: all 0.5s;
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
                 }
             }
 
@@ -1858,7 +1946,8 @@ let labelObj = {
                                     margin-right: 10px;
                                 }
 
-                                .floor-left .comments-identity {
+                                // .floor-left .comments-identity {
+                                .comments-identity {
                                     font-size: 12px;
                                     color: #7f7f7f;
                                     padding: 0 3px;
@@ -1957,7 +2046,7 @@ let labelObj = {
                                 height: 60px;
                                 border: 1px solid rgba(215, 215, 215, 1);
                                 border-radius: 8px;
-                                margin-right: 16px;
+                                // margin-right: 16px;
                                 position: relative;
                                 z-index: 1;
 
diff --git a/pages/publish/index.vue b/pages/publish/index.vue
index 3c08f01..c176b5d 100644
--- a/pages/publish/index.vue
+++ b/pages/publish/index.vue
@@ -115,12 +115,7 @@
 import { ElMessage } from "element-plus"
 import zhCn from "element-plus/dist/locale/zh-cn.mjs"
 const router = useRouter()
-useHead({
-    script: [
-        // { src: "https://app.gter.net/bottom?tpl=header&menukey=mj" },
-        { src: "https://app.gter.net/bottom?tpl=footer", body: true },
-    ],
-})
+useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
 
 const setDisabled = time => {
     return time.getTime() > Date.now() // 可选历史天、可选当前天、不可选未来天
@@ -536,7 +531,6 @@ const abandonSaving = () => {
     }
 }
 
-
 .save-box {
     font-size: 14px;
     color: #666666;