feat: journal comment list.

src/views/sheet/internal/JournalList.vue

@@ -85,7 +85,7 @@
                   <span>
                     <a
                       href="javascript:void(0);"
-                      @click="handleCommentShow(item)"
+                      @click="handleShowJournalComments(item)"
                     >
                       <a-icon type="message" />
                       {{ item.commentCount }}
@@ -207,63 +207,33 @@
         </a-form-item>
       </a-form>
     </a-modal>
-
+    <TargetCommentDrawer
-    <!-- 评论列表抽屉 -->
+      :visible="journalCommentVisible"
-    <a-drawer
+      :title="journal.content"
-      title="评论列表"
+      :description="``"
-      :width="isMobile()?'100%':'460'"
+      :target="`journals`"
-      closable
+      :id="journal.id"
-      :visible="commentVisible"
+      @close="onJournalCommentsClose"
-      destroyOnClose
+    />
-      @close="()=>this.commentVisible = false"
-    >
-      <a-row
-        type="flex"
-        align="middle"
-      >
-        <a-col :span="24">
-          <a-comment>
-            <a-avatar
-              :src="user.avatar"
-              :alt="user.nickname"
-              slot="avatar"
-            />
-            <p slot="content">{{ journal.content }}</p>
-
-            <span slot="datetime">{{ journal.createTime | moment }}</span>
-          </a-comment>
-        </a-col>
-        <a-divider />
-        <a-col :span="24">
-          <journal-comment-tree
-            v-for="(comment,index) in comments"
-            :key="index"
-            :comment="comment"
-            @reply="handleCommentReplyClick"
-            @delete="handleCommentDelete"
-          />
-        </a-col>
-      </a-row>
-    </a-drawer>
   </div>
 </template>
 
 <script>
-import JournalCommentTree from './components/JournalCommentTree'
+import TargetCommentDrawer from '../../comment/components/TargetCommentDrawer'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
 import journalApi from '@/api/journal'
 import journalCommentApi from '@/api/journalComment'
 export default {
   mixins: [mixin, mixinDevice],
-  components: { JournalCommentTree },
+  components: { TargetCommentDrawer },
   data() {
     return {
       journalType: journalApi.journalType,
       title: '发表',
       listLoading: false,
       visible: false,
-      commentVisible: false,
+      journalCommentVisible: false,
       selectCommentVisible: false,
       pagination: {
         page: 1,
@@ -323,12 +293,9 @@ export default {
         this.loadJournals()
       })
     },
-    handleCommentShow(journal) {
+    handleShowJournalComments(journal) {
       this.journal = journal
-      journalApi.commentTree(this.journal.id).then(response => {
+      this.journalCommentVisible = true
-        this.comments = response.data.data.content
-        this.commentVisible = true
-      })
     },
     handleCommentReplyClick(comment) {
       this.selectComment = comment
@@ -383,6 +350,10 @@ export default {
       this.pagination.size = pageSize
       this.loadJournals()
     },
+    onJournalCommentsClose() {
+      this.journal = {}
+      this.journalCommentVisible = false
+    },
     resetParam() {
       this.queryParam.keyword = null
       this.queryParam.type = null

src/views/sheet/internal/components/JournalCommentTree.vue

@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <a-comment>
-      <span
-        slot="actions"
-        @click="handleReplyClick"
-      >回复</span>
-      <a-popconfirm
-        :title="'你确定要永久删除该评论？'"
-        @confirm="handleDeleteClick"
-        okText="确定"
-        cancelText="取消"
-        slot="actions"
-      >
-        <span>删除</span>
-      </a-popconfirm>
-      <a slot="author"> {{ comment.author }} </a>
-      <a-avatar
-        slot="avatar"
-        :src="avatar"
-        :alt="comment.author"
-      />
-      <p slot="content">{{ comment.content }}</p>
-
-      <template v-if="comment.children">
-        <journal-comment-tree
-          v-for="(child, index) in comment.children"
-          :key="index"
-          :comment="child"
-          @reply="handleSubReply"
-          @delete="handleSubDelete"
-        />
-      </template>
-
-    </a-comment>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'JournalCommentTree',
-  props: {
-    comment: {
-      type: Object,
-      required: false,
-      default: null
-    }
-  },
-  computed: {
-    avatar() {
-      return `//cn.gravatar.com/avatar/${this.comment.gravatarMd5}/?s=256&d=mp`
-    }
-  },
-  methods: {
-    handleReplyClick() {
-      this.$emit('reply', this.comment)
-    },
-    handleSubReply(comment) {
-      this.$emit('reply', comment)
-    },
-    handleDeleteClick() {
-      this.$emit('delete', this.comment)
-    },
-    handleSubDelete(comment) {
-      this.$emit('delete', comment)
-    }
-  }
-}
-</script>