问答去掉回答，改为讨论，删除不必要的代码

components/commentList.vue

@@ -2,12 +2,12 @@
     <div class="answer-discuss">
         <div class="header flexacenter">
             回答&讨论
-            <span class="num">{{ commentCount || '' }}</span>
+            <span class="num">{{ commentTotalCount || "" }}</span>
         </div>
         <div class="input-box">
             <div class="top flexflex">
-                <img class="avatar" src="https://axure-file.lanhuapp.com/md5__61e148c1ead80d48108f4e5a7f93abc3.svg" />
-                <div class="input-textarea flex1" ref="inputTextareaRef" :class="{ 'placeholder': isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder()" @blur="setPlaceholder($event)" @paste="handleInputPaste"></div>
+                <img class="avatar" v-if="user.avatar" :src="user.avatar" />
+                <textarea class="input-textarea flex1" maxlength="500" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
             </div>
             <div class="picture-box" v-if="picture.url">
                 <div class="picture">
@@ -38,11 +38,9 @@
             <div class="comments-item" v-for="(item, index) in commentList" :key="index">
                 <div class="comments-header flexacenter">
                     <div class="comments-header-left flexacenter">
-                        <img class="comments-avatar" :src="item['avatar']" />
-                        <div class="comments-username">{{ item["nickname"] }}</div>
+                        <img class="comments-avatar" @click="openUserInfo(index)" :src="item['avatar']" />
+                        <div class="comments-username" @click="openUserInfo(index)">{{ item["nickname"] }}</div>
                         <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
-                        <!-- <div class="comments-identity" v-if="item['questioner'] == 1">提问者</div>
-                                            <div class="comments-identity" v-else-if="item['isauthor'] == 1">回答者</div> -->
                         <div class="comments-identity" v-if="item['isauthor'] == 1">提问者</div>
                         <div class="avatar-box flexflex" v-if="item['avatarState']">
                             <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
@@ -53,7 +51,7 @@
                                 <img class="avatar-icon" src="@/img/homepage-icon.png" />
                                 TA的主页
                             </a>
-                            <div class="avatar-mask"></div>
+                            <div class="avatar-mask" @click="closeUserInfo(index)"></div>
                         </div>
                     </div>
                     <div class="comments-header-right flexacenter">
@@ -75,7 +73,7 @@
                     <div class="input-box" v-if="item['childState']">
                         <img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
                         <div class="top flexflex">
-                            <div class="input-textarea flex1" :class="{ 'placeholder': item.isPlaceholderVisible }" contenteditable="true" @focus="clearPlaceholder(index)" @blur="setPlaceholder($event, index)" @paste="handleInputPaste($event, index)"></div>
+                            <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的看法…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
                         </div>
                         <div class="picture-box" v-if="item.picture?.url">
                             <div class="picture">
@@ -105,12 +103,12 @@
                     <div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id">
                         <div class="comments-header flexacenter">
                             <div class="comments-header-left flexacenter">
-                                <img class="comments-avatar" :src="ite['avatar']" />
-                                <div class="comments-username">{{ ite["nickname"] }}</div>
+                                <img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite['avatar']" />
+                                <div class="comments-username" @click="openUserInfo(index, i)">{{ ite["nickname"] }}</div>
                                 <div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div>
-                                <div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div>
-                                <div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div>
-
+                                <!-- <div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div> -->
+                                <!-- <div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div> -->
+                                <div class="comments-identity" v-if="ite['isauthor'] == 1">提问者</div>
                                 <div class="avatar-box flexflex" v-if="ite['avatarState']">
                                     <a class="avatar-item flexcenter" target="_blank">
                                         <img class="avatar-icon" src="@/img/send-messages-icon.png" />
@@ -120,7 +118,7 @@
                                         <img class="avatar-icon" src="@/img/homepage-icon.png" />
                                         TA的主页
                                     </a>
-                                    <div class="avatar-mask"></div>
+                                    <div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
                                 </div>
                             </div>
                             <div class="comments-header-right flexacenter">
@@ -146,8 +144,7 @@
                             <div class="input-box" v-if="ite['childState']">
                                 <img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
                                 <div class="top flexflex">
-                                    <div class="input-placeholder" v-if="ite.isPlaceholderVisible">回复“{{ ite["nickname"] }}”：</div>
-                                    <div class="input-textarea flex1" contenteditable="true" @focus="clearPlaceholder(index, i)" @blur="setPlaceholder($event, index, i)" @paste="handleInputPaste($event, index, i)"></div>
+                                    <textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" :placeholder="'回复“' + ite['nickname'] + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
                                 </div>
                                 <div class="picture-box" v-if="ite.picture?.url">
                                     <div class="picture">
@@ -202,7 +199,7 @@ const handleMsg = inject("handleMsg")
 const uploadImg = inject("uploadImg")
 const handleAnswerText = inject("handleAnswerText")
 const emojiMaskState = inject("emojiMaskState")
-
+const user = inject("user")
 
 const commentList = ref([])
 let commentCount = ref(0)
@@ -225,14 +222,11 @@ const getComment = () => {
 
             data.data.forEach((element, index) => {
                 element["isReplyBoxShow"] = 0
-                element["isPlaceholderVisible"] = true
-
                 // element.timestamp = util.timeformat(element.timestamp, 2)
                 if (element.child.length > 0) {
                     element.child.forEach(el => {
                         // el.timestamp = util.timeformat(el.timestamp, 2)
                         el["isReplyBoxShow"] = 0
-                        el["isPlaceholderVisible"] = true
                     })
                 }
             })
@@ -282,30 +276,36 @@ watch(
 
 let picture = ref({})
 
+const maxSize = 20 * 1024 * 1024 // 20MB
+
 const handleFileUpload = (event, index, i) => {
     closeEmoji()
     const file = event.target.files[0] // 获取选择的文件
-    if (file) {
-        const reader = new FileReader()
-        reader.onload = e => {
-            const base64 = e.target.result
-            uploadImg(base64).then(res => {
-                console.log("base64", base64)
 
-                const obj = {
-                    base64,
-                    ...res,
-                }
+    if (!file) return
 
-                if (i != undefined) commentList.value[index].child[i]["picture"] = obj
-                else if (index != undefined) commentList.value[index]["picture"] = obj
-                else picture.value = obj
-
-                handleMsg("success", "上传成功")
-            })
-        }
-        reader.readAsDataURL(file)
+    if (file.size > maxSize) {
+        handleMsg("error", "文件大小不能超过 20MB")
+        return
     }
+
+    const reader = new FileReader()
+    reader.onload = e => {
+        const base64 = e.target.result
+        uploadImg(base64).then(res => {
+            const obj = {
+                base64,
+                ...res,
+            }
+
+            if (i != undefined) commentList.value[index].child[i]["picture"] = obj
+            else if (index != undefined) commentList.value[index]["picture"] = obj
+            else picture.value = obj
+
+            handleMsg("success", "上传成功")
+        })
+    }
+    reader.readAsDataURL(file)
 }
 
 // 删除上传的图片
@@ -326,8 +326,6 @@ const openEmoji = (index, i) => {
     else if (index != undefined) commentList.value[index]["emojiState"] = true
     else emojiState.value = true
 
-    console.log("emojiMaskState", emojiMaskState)
-
     emojiMaskState.value = true
 }
 
@@ -353,56 +351,49 @@ defineExpose({
 // 选择 Emoji
 const selectEmoji = (key, index, i) => {
     closeEmoji()
-    console.log("key", key)
     if (i != undefined) {
-        const commentInput = document.querySelector(".comments-box .input-textarea")
-        commentInput.innerText += key
-        commentList.value[index].child[i]["isPlaceholderVisible"] = false
+        // const commentInput = document.querySelector(".comments-box .input-textarea")
+        if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = ""
+        commentList.value[index]["child"][i]["commentInput"] += key
     } else if (index != undefined) {
-        const commentInput = document.querySelector(".comments-box .input-textarea")
-        commentInput.innerText += key
-        commentList.value[index]["isPlaceholderVisible"] = false
+        // const commentInput = document.querySelector(".comments-box .input-textarea")
+        if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = ""
+        commentList.value[index]["commentInput"] += key
     } else {
-        inputTextareaRef.value.innerHTML += key
-        isPlaceholderVisible.value = false
+        inputTextarea.value += key
     }
 }
 
-let isPlaceholderVisible = ref(true)
-
-const clearPlaceholder = (index, i) => {
-    if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = false
-    else if (index != undefined) commentList.value[index]["isPlaceholderVisible"] = false
-    else isPlaceholderVisible.value = false
-}
-
-const setPlaceholder = (event, index, i) => {
-    if (event.target.innerHTML == "<br>") event.target.innerHTML = ""
-    const html = event.target.innerHTML
-    if (!html) {
-        if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = true
-        else if (index != undefined) commentList.value[index]["isPlaceholderVisible"] = true
-        else isPlaceholderVisible.value = true
-    }
+// 自动输入框增高
+const autoResize = e => {
+    e.target.style.height = "auto" // 重置高度
+    e.target.style.height = `${e.target.scrollHeight}px` // 设置为内容高度
 }
 
 const handleInputPaste = (event, index, ii) => {
     const items = event.clipboardData.items // 获取粘贴的内容
+
     for (let i = 0; i < items.length; i++) {
         const item = items[i]
         if (item.type.startsWith("image/")) {
-            // 检查是否为图片
             event.preventDefault()
             const file = item.getAsFile() // 获取文件
+
+            if (file.size > maxSize) {
+                handleMsg("error", "文件大小不能超过 20MB")
+                return
+            }
+
             const reader = new FileReader()
             reader.onload = e => {
                 const base64 = e.target.result
+
                 uploadImg(base64).then(res => {
                     const obj = {
                         base64,
                         ...res,
                     }
-                    if (i != undefined) commentList.value[index].child[ii]["picture"] = obj
+                    if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
                     else if (index != undefined) commentList.value[index]["picture"] = obj
                     else picture.value = obj
                     handleMsg("success", "上传成功")
@@ -413,7 +404,7 @@ const handleInputPaste = (event, index, ii) => {
     }
 }
 
-let inputTextareaRef = ref(null)
+let inputTextarea = ref("")
 
 // 提交回答-评论
 const submitAnswerComments = (index, i) => {
@@ -428,25 +419,25 @@ const submitAnswerComments = (index, i) => {
     let image = {}
 
     if (i != null) {
-        const commentInput = document.querySelector(".comments-box .input-textarea")
-        content = commentInput.innerText
+        content = commentList.value[index]["child"][i]["commentInput"]
         parentid = commentList.value[index]["child"][i]["id"]
         image = commentList.value[index]["child"][i]["picture"]
     } else if (index != null) {
-        const commentInput = document.querySelector(".comments-box .input-textarea")
-        content = commentInput.innerText
+        content = commentList.value[index]["commentInput"]
         parentid = commentList.value[index]["id"]
         image = commentList.value[index]["picture"]
     } else {
-        content = inputTextareaRef.value.innerText
+        content = inputTextarea.value
         image = picture.value
     }
 
+    console.log("content", content, "1111", commentList.value[index])
+
     $ajax("/api/comment/submit", {
         content,
         token,
         parentid,
-        image,
+        image: image ? { aid: image.aid, url: image.url } : null,
     }).then(res => {
         if (res.code != 200) return
         let data = res.data
@@ -462,7 +453,6 @@ const submitAnswerComments = (index, i) => {
                     nickname: commentList.value[index]["child"][i]["nickname"],
                 },
                 ...data,
-                isPlaceholderVisible: true,
                 image,
             }
 
@@ -477,7 +467,6 @@ const submitAnswerComments = (index, i) => {
                 likenum: 0,
                 reply: [],
                 ...data,
-                isPlaceholderVisible: true,
                 image,
             }
             commentList.value[index]["child"].unshift(targetData)
@@ -491,15 +480,16 @@ const submitAnswerComments = (index, i) => {
                 likenum: 0,
                 ...data,
                 child: [],
-                isPlaceholderVisible: true,
                 image,
             }
             commentList.value.unshift(targetData)
-            commentCount.value++
-            inputTextareaRef.value.innerHTML = ""
+            // commentCount.value++
+            inputTextarea.value = ""
             picture.value = {}
         }
 
+        commentTotalCount.value = data.count || 0
+
         // targetAnswerList[index]["commentnum"] = data["count"]
 
         closeAnswerCommentsChild()
@@ -519,11 +509,8 @@ const operateAnswerCommentsLike = (token, index, i) => {
         token,
     }).then(res => {
         if (res.code != 200) return
-
         let data = res.data
 
-        console.log("i", i)
-
         if (i != undefined) {
             commentList.value[index].child[i]["islike"] = data["status"]
             commentList.value[index].child[i]["likenum"] = data["likenum"]
@@ -572,21 +559,15 @@ const alsoCommentsData = (index, i) => {
     $ajax("/api/comment/childrenList", {
         token,
         parentid,
-        limit: 20,
+        limit: 2000,
         page: 1,
-        childlimit: 1,
+        childlimit: 3,
     }).then(res => {
         if (res.code != 200) return
         let data = res.data
 
         let merged = [...commentList.value[index]["child"], ...data.data.filter(item2 => !commentList.value[index]["child"].find(item1 => item1.id == item2.id))]
 
-        console.log("merged1", merged)
-
-        merged.forEach(element => {
-            element["isPlaceholderVisible"] = true
-        })
-
         commentList.value[index]["child"] = merged
         // answerList.value = targetAnswerList
     })
@@ -604,5 +585,15 @@ const openMenuState = (index, i) => {
     else reportToken = commentList.value[index]["child"][i]["token"]
     handleMenuState(reportToken)
 }
+
+const openUserInfo = (index, i) => {
+    if (i != undefined && commentList.value[index].child[i]["uin"] > 0) commentList.value[index].child[i]["avatarState"] = true
+    else if (index != undefined && commentList.value[index]["uin"] > 0) commentList.value[index]["avatarState"] = true
+}
+
+const closeUserInfo = (index, i) => {
+    if (i != undefined) commentList.value[index].child[i]["avatarState"] = false
+    else if (index != undefined) commentList.value[index]["avatarState"] = false
+}
 </script>
 <style scoped></style>

css/index.css

@@ -373,7 +373,7 @@ a {
   right: -5px;
   top: 50%;
   transform: translateY(-50%);
-  background-image: url("img/triangle-icon.svg");
+  background-image: url("/img/triangle-icon.svg");
 }
 #answer-app .main .list-box .list .item.pitch .content {
   border: none;
@@ -401,6 +401,7 @@ a {
   font-size: 14px;
   color: #000000;
   line-height: 22px;
+  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
 }
 #answer-app .main .list-box .list .item .content .issue-title .issue em {
   color: #ff0000;
@@ -422,6 +423,7 @@ a {
   font-size: 13px;
   text-decoration: none;
   margin-top: 8px;
+  font-weight: 400;
 }
 #answer-app .main .list-box .list .item .content .answer * {
   white-space: nowrap;
@@ -540,6 +542,7 @@ a {
   flex-direction: column;
   flex: 1;
   position: relative;
+  padding-bottom: 200px;
 }
 #answer-app .main .details-area-box .details-box .emoji-box-mask {
   position: absolute;
@@ -721,10 +724,20 @@ a {
   min-height: 80px;
   padding-bottom: 11px;
 }
-#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea.placeholder::after {
-  content: "说说你的看法…";
-  color: #7f7f7f;
-  pointer-events: none;
+#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea * {
+  background: transparent !important;
+  color: #000 !important;
+  border: none !important;
+  outline: none !important;
+  font-size: 14px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  border-radius: 0 !important;
+}
+#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea img {
+  display: none !important;
 }
 #answer-app .main .details-area-box .details-box .answer-discuss .input-box .picture-box {
   padding-bottom: 10px;
@@ -1504,6 +1517,7 @@ a {
   color: #7f7f7f;
   cursor: pointer;
   height: 53px;
+  line-height: 54px;
 }
 #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item:not(:first-of-type) {
   margin-left: 36px;

css/index.less

@@ -461,7 +461,7 @@ a {
                             right: -5px;
                             top: 50%;
                             transform: translateY(-50%);
-                            background-image: url("./img/triangle-icon.svg");
+                            background-image: url("/img/triangle-icon.svg");
                         }
 
                         .content {
@@ -512,6 +512,7 @@ a {
                                 font-size: 14px;
                                 color: #000000;
                                 line-height: 22px;
+                                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
 
                                 em {
                                     color: #ff0000;
@@ -538,6 +539,7 @@ a {
                             font-size: 13px;
                             text-decoration: none;
                             margin-top: 8px;
+                            font-weight: 400;
 
                             & * {
                                 white-space: nowrap;
@@ -688,6 +690,7 @@ a {
                 flex-direction: column;
                 flex: 1;
                 position: relative;
+                padding-bottom: 200px;
 
                 .emoji-box-mask {
                     position: absolute;
@@ -891,10 +894,27 @@ a {
                                 background-color: transparent;
                                 min-height: 80px;
                                 padding-bottom: 11px;
-                                &.placeholder::after {
-                                    content: "说说你的看法…";
-                                    color: #7f7f7f;
-                                    pointer-events: none;
+                                // &.placeholder::after {
+                                //     content: "说说你的看法…";
+                                //     color: #7f7f7f;
+                                //     pointer-events: none;
+                                // }
+
+                                * {
+                                    background: transparent !important;
+                                    color: #000 !important;
+                                    border: none !important;
+                                    outline: none !important;
+                                    font-size: 14px !important;
+                                    padding: 0 !important;
+                                    margin: 0 !important;
+                                    width: auto !important;
+                                    height: auto !important;
+                                    border-radius: 0 !important;
+                                }
+
+                                img {
+                                    display: none !important;
                                 }
                             }
                         }
@@ -1816,6 +1836,7 @@ a {
                             color: #7f7f7f;
                             cursor: pointer;
                             height: 53px;
+                            line-height: 54px;
                             &:not(:first-of-type) {
                                 margin-left: 36px;
                             }