From ee4be3a0b9cac5cdc2dc8b6e9df3a3e926b6f1eb Mon Sep 17 00:00:00 2001
From: yi-ge <a@wyr.me>
Date: Thu, 9 Jul 2020 18:16:27 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E8=AE=A8=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/post/_id.vue | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/pages/post/_id.vue b/pages/post/_id.vue
index af7b8f9..90e23cb 100644
--- a/pages/post/_id.vue
+++ b/pages/post/_id.vue
@@ -22,24 +22,24 @@ div
     .articelContent(v-html='articels.post_content')
     .tools
       .reward(@click="reward") 打赏
-    .comment
+    .comment(id="comment")
       .comment-title 交流区
         span(v-if="comments.length") ({{commentAmount}})
-      .comment-item(v-for="(item, index) in comments" :key="index")
+      .comment-item(v-for="(item, index) in comments", :id="'comment_ID_' + item.comment_ID", :key="index")
         .comment-avatar
           img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + item.user_id")
         .comment-area
           .comment-author {{ item.comment_author }}
-          .comment-content {{ item.comment_content }}
+          .comment-content(v-html="item.comment_content_html")
           .comment-info {{ item.comment_date }}
             span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复
             span.reply(@click="reply(item.comment_ID, null)" v-else) 回复
-        .comment-item(v-for="(i, inx) in item.children", :key="inx", style="margin-top: 15px; margin-left: 50px; background-color: #eeeeee; border-radius: 4px;")
+        .comment-item(v-for="(i, inx) in item.children", :id="'comment_ID_' + i.comment_ID", :key="inx", style="margin-top: 15px; margin-left: 50px; background-color: #eeeeee; border-radius: 4px;")
           .comment-avatar
             img(:src="i.comment_author_avatar_url ? i.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + i.user_id")
           .comment-area
             .comment-author {{ i.comment_author }}
-            .comment-content {{ i.comment_content }}
+            .comment-content(v-html="i.comment_content_html")
             .comment-info {{ i.comment_date }}
               span.reply(@click="reply(item.comment_ID, i.comment_ID)" v-if="replyLastID !== i.comment_ID") 回复
               span.reply(@click="reply(item.comment_ID, i.comment_ID, true)" v-else) 取消回复
@@ -50,7 +50,7 @@ div
             img(:src="'https://picsum.photos/100/100/?blur=1'")
           .comment-nickname 张三
         #editor
-      .comment-default-commit(v-show="replyID")
+      .comment-default-commit(id="editor-reply", v-show="replyID")
         #editor-reply
     ins.adsbygoogle(style="display:block; text-align:center; margin-top:20px;", data-ad-layout="in-article", data-ad-format="fluid", data-ad-client="ca-pub-2143583075951360", data-ad-slot="4741804954")
     .articelRightToc(v-show="articels.post_toc_show && showRightToc", @click="articelRightTocClick")
@@ -89,6 +89,7 @@ export default {
     return {
       articels: result,
       comments,
+      commentsMap: new Map(),
       commentAmount,
       showRightToc: false,
       tocIds: result.post_toc_ids,
@@ -143,13 +144,23 @@ export default {
             pin: true
           },
           cache: {
-            enable: true
+            enable: false
           },
           placeholder: '我们书写的不是代码，而是人生'
         }
         window.editorObj = new window.Vditor('editor', editorConfig)
         window.editorReplyObj = new window.Vditor('editor-reply', editorConfig)
       }
+
+      const comments = this.comments
+      for (let i = 0; i < comments.length; i++) {
+        this.commentsMap.set(comments[i].comment_ID, comments[i])
+        if (comments[i].children) {
+          for (let j = 0; j < comments[i].children.length; j++) {
+            this.commentsMap.set(comments[i].children[j].comment_ID, comments[i].children[j])
+          }
+        }
+      }
     }
 
     this.$finishLoad()
@@ -328,12 +339,23 @@ export default {
       })
     },
     reply (id, replyLastID, cancel) {
+      const editorReplyObject = document.getElementById('editor-reply')
       if (cancel) {
         this.replyID = null
         this.replyLastID = null
+        document.getElementById('comment').appendChild(editorReplyObject)
       } else {
         this.replyID = id
         this.replyLastID = replyLastID
+        document.getElementById('comment_ID_' + id).appendChild(editorReplyObject)
+        const comment = this.commentsMap.get(replyLastID)
+        window.editorReplyObj.setValue('', true)
+        window.editorReplyObj.focus()
+        if (replyLastID !== null) {
+          window.editorReplyObj.insertValue('> ' + comment.comment_content + '  \n\n\n', true)
+          // window.editorReplyObj.getCursorPosition()
+          // window.editorReplyObj.setSelectionRange(pos, pos)
+        }
       }
     }
   },
@@ -477,6 +499,9 @@ export default {
     margin-top 10px
     margin-bottom 10px
 
+#editor-reply
+  margin 10px 0 10px 50px
+
 .btnFooter
   font-size 12px
   margin-top 25px