commit

yyq
Commit 082ac7182001a4eea071ef8dd85694a1cfc4cf93 1 parent cd261429
Showing 6 changed files with 106 additions and 26 deletions
apps/components/comments/comment-item.vue
apps/components/comments/comment-placeholder.js
apps/pages/article/components/detail/article-note.vue
apps/pages/article/components/detail/comment-list.vue
apps/store/yoho/index.js
config/api-map.js
--- a/apps/components/comments/comment-item.vue
View file @082ac71
+++ b/apps/components/comments/comment-item.vue
View file @082ac71
@@ -7,7 +7,8 @@
 					<p class="comment-user-name" @click="toUserPage">
             <span class="name">{{parentComment.userName || '&nbsp;'}}</span>
           </p>
-					<p class="comment-time">{{parentComment.createTime | time}}</p>
+					<p v-if="parentComment.createTime" class="comment-time">{{parentComment.createTime | time}}</p>
+          <p v-else class="comment-time">刚刚</p>
 				</div>
 				<WidgetFav
           class="comment-fav"
@@ -34,10 +35,11 @@
           v-for="(reply, replyIndex) in replayShowList"
           :key="replyIndex"
           :dest-id="reply.id"
+          :root-id="parentComment.id"
           :add-type="1"
           :user="reply.userName"
           :column-type="columnType"
-          @on-comment="() => onReply({destId: parentComment.id})">
+          @on-comment="onReplyChildren">
 					<span class="reply-user">{{reply.userName}}</span>
 					<template v-if="reply.parentUserName">
 						<span>回复</span><em class="reply-to-user">@{{reply.parentUserName}}</em>
@@ -102,8 +104,11 @@ export default {
     onShowMore() {
       this.isShowAllReply = !this.isShowAllReply;
     },
-    async onReply({destId}) {
-      this.$emit('on-reply', {commentId: destId});
+    onReplyChildren(info) {
+      this.$emit('on-reply', info);
+    },
+    async onReply(info) {
+      this.$emit('on-reply', info);
     },
     toUserPage() {
       this.$emit('on-close');
--- a/apps/components/comments/comment-placeholder.js
View file @082ac71
+++ b/apps/components/comments/comment-placeholder.js
View file @082ac71
-import {trim} from 'lodash';
+import {get, trim} from 'lodash';
 import {createNamespacedHelpers} from 'vuex';
 const {mapActions} = createNamespacedHelpers('comment');
 import YAS from 'utils/yas-constants';
@@ -20,7 +20,12 @@ export default {
     },
     share: Boolean,
     posId: Number,
-    articleId: Number
+    articleId: Number,
+    rootId: Number,
+    autoUpdate: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {
@@ -94,13 +99,21 @@ export default {
       };
       if (result.code === 200) {
-        const waitData = this.addType === 0 ? this.fetchArticleUpdate({articleId: this.destId}) : Promise.resolve();
+        if (this.autoUpdate && this.addType === 0) {
+          await this.fetchArticleUpdate({articleId: this.destId});
+        }
-        await waitData;
         this.$emit('on-comment', {
           destId: this.destId,
           addType: this.addType,
-          columnType: this.columnType
+          columnType: this.columnType,
+          comment: {
+            content,
+            destId: get(result, 'data', ''),
+            columnType: this.columnType,
+            parentId: this.addType === 1 ? this.destId : void 0,
+            rootId: this.rootId || void 0
+          }
         });
         this.reportComment(this.destId);
--- a/apps/pages/article/components/detail/article-note.vue
View file @082ac71
+++ b/apps/pages/article/components/detail/article-note.vue
View file @082ac71
@@ -18,7 +18,10 @@
       <ArticleItemTopics class="topics-wrap" :data="topicsData" :share="share"></ArticleItemTopics>
       <p class="publish-time">{{publishTime}}</p>
       <ArticleDetailCommentList ref="commentList" v-if="data.commentCount" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
-      <LayoutTitle v-if="listTitle" class="rec-article-title">{{listTitle}}</LayoutTitle>
+
+      <div v-if="listTitle" class="rec-article-title">
+        <LayoutTitle>{{listTitle}}</LayoutTitle>
+      </div>
     </div>
     <ArticleDetailFooter class="detail-fixed-footer" v-bind="footerData" @on-comment-click="toCommentList">
       <template v-slot:before>
@@ -32,6 +35,7 @@
             :article-id="data.articleId"
             :pos-id="0"
             :column-type="1001"
+            :autoUpdate="false"
             @on-comment="onComment">
             添加评论...
           </CommentPlaceholder>
@@ -150,8 +154,8 @@ export default {
     onChangeSlide({index}) {
       this.slideIndex = index;
     },
-    onComment() {
-
+    onComment({comment}) {
+      this.$refs.commentList && this.$refs.commentList.addComment(comment);
     },
     toCommentList() {
       if (this.data.commentCount) {
@@ -216,7 +220,7 @@ export default {
 }
 .rec-article-title {
-  margin: 14px 0 4px;
+  padding: 14px 0 4px;
   border-top: 1px solid #f0f0f0;
 }
--- a/apps/pages/article/components/detail/comment-list.vue
View file @082ac71
+++ b/apps/pages/article/components/detail/comment-list.vue
View file @082ac71
 <template>
   <div class="comment-context">
-    <p class="comment-title">共{{commentCount}}条评论</p>
+    <p class="comment-title">共{{totalComment}}条评论</p>
     <div class="comment-list">
       <CommentItem
         v-for="comment in commentList"
@@ -15,19 +15,19 @@
       </CommentItem>
     </div>
     <div v-show="showMore" class="more-comment hover-opacity" @click="onFetch">
-      <p class="loading" v-if="onFetching">
+      <p class="loading-wrap" v-if="onFetching">
         <Loading :size="20"></Loading>
         &nbsp;&nbsp;加载中
       </p>
-      <span v-else>展开{{page > 2 ? '更多' : commentCount + '条'}}评论</span>
-
+      <span v-else>展开{{page > 2 ? '更多' : moreCommentNum + '条'}}评论</span>
     </div>
   </div>
 </template>
 <script>
+import {get, forEach, find} from 'lodash';
 import {Loading} from 'cube-ui';
-import {createNamespacedHelpers} from 'vuex';
+import {mapState as mapYohoState, mapActions as mapYohoActions, createNamespacedHelpers} from 'vuex';
 const {mapActions} = createNamespacedHelpers('comment');
@@ -47,13 +47,30 @@ export default {
       commentList: [],
       page: 1,
       onFetching: false,
-      showMore: false
+      showMore: false,
+      addCommentNum: 0,
+      moreCommentNum: 0
     }
   },
   mounted() {
+    if (!this.yoho.context.userHeadIco) {
+      this.$sdk.getUser().then(user => {
+        if (user && user.uid) {
+          this.fetchUserProfile();
+        }
+      });
+    }
+
     this.init();
   },
+  computed: {
+    ...mapYohoState(['yoho']),
+    totalComment() {
+      return this.commentCount + this.addCommentNum;
+    }
+  },
   methods: {
+    ...mapYohoActions(['fetchUserProfile']),
     ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
     init() {
       this.commentList.length = 0;
@@ -62,6 +79,15 @@ export default {
       this.onFetch();
     },
+    updateMoreCommentNum(list = []) {
+      let moreCommentNum = this.commentCount;
+
+      forEach(list, val => {
+        val.childrenComments = val.childrenComments || [];
+        moreCommentNum -= (val.childrenComments.length + 1);
+      });
+      this.moreCommentNum = moreCommentNum;
+    },
     async onFetch() {
       if (this.onFetching || (this.page > 1 && !this.showMore)) {
         return;
@@ -79,16 +105,45 @@ export default {
       setTimeout(() => {
         if (result.code === 200) {
           this.showMore = result.data.totalPage > this.page;
+          this.commentList = this.commentList.concat(result.data.commentInfos || []);
+
+          if (this.page === 1) {
+            this.updateMoreCommentNum(result.data.commentInfos);
+          }
           this.page++;
-          this.commentList = this.commentList.concat(result.data.commentInfos || []);
         }
         this.onFetching = false;
-      }, 800);
+      }, this.page > 1 ? 800 : 0);
     },
-    onReply() {
+    onReply({comment}) {
+      const parentId = comment.rootId || comment.parentId;
+      forEach(this.commentList, (val, index) => {
+        if (val.parentComment && val.parentComment.id == comment.parentId) {
+          this.addCommentNum++;
+          val.childrenComments.unshift(Object.assign(comment, {
+            id: comment.destId,
+            destId: this.articleId,
+            headIco: this.yoho.context.userHeadIco,
+            userName: this.yoho.context.userName,
+            parentUserName: get(find(val.childrenComments, {id: comment.parentId}), 'userName', '')
+          }));
+        }
+      });
+    },
+    addComment(comment) {
+      this.addCommentNum++;
+      this.commentList.unshift({
+        childrenComments: [],
+        parentComment: Object.assign(comment, {
+          id: comment.destId,
+          destId: this.articleId,
+          headIco: this.yoho.context.userHeadIco,
+          userName: this.yoho.context.userName
+        })
+      });
     }
   },
   components: {
@@ -120,7 +175,7 @@ export default {
   align-items: center;
   justify-content: center;
-  .loading {
+  .loading-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
--- a/apps/store/yoho/index.js
View file @082ac71
+++ b/apps/store/yoho/index.js
View file @082ac71
@@ -17,7 +17,8 @@ export default function(state = {}) {
         path: '',
         needLogin: false,
         isLogin: false,
-        userHeadIco: ''
+        userHeadIco: '',
+        userName: ''
       },
       window: {
         statusBarStatus: false,
@@ -92,8 +93,9 @@ export default function(state = {}) {
           state.window.statusBarColor = color || 'black';
         }
       },
-      [Types.FETCH_USER_INFO_SUCCESS](state, {head_ico}) {
+      [Types.FETCH_USER_INFO_SUCCESS](state, {head_ico, nickname}) {
         state.context.userHeadIco = head_ico;
+        state.context.userName = nickname;
       },
       [Types.FETCH_USER_INFO_FAILD](state) {
         state.context.userHeadIco = '';
--- a/config/api-map.js
View file @082ac71
+++ b/config/api-map.js
View file @082ac71
@@ -12,7 +12,8 @@ module.exports = {
     auth: true,
     params: {},
     fields: {
-      head_ico: {default: ''}
+      head_ico: {default: ''},
+      nickname: {default: ''}
     }
   },
   '/api/grass/labelRealtedArticleDetail': {