feat(article/detail): 点赞 reviewed by 张文文

@@ -16,9 +16,9 @@
       </div>
 
       <div class="note-container">
-        <div class="note-content" v-html="content"></div>
+        <div v-if="content" class="note-content" v-html="content"></div>
         <div class="note-date">{{detailInfo.publishTimeStr.split(' ')[0]}}</div>
-        <div class="praise-wrapper">
+        <div class="praise-wrapper" @click="onPraise(detailInfo)">
           <div class="praise-border"></div>
           <div class="praise-div">
             <div :class="detailInfo.hasPraise === 'Y' ? 'praise-icon praised-icon' : 'praise-icon'"></div>
@@ -44,7 +44,7 @@ import ArticleVideo from './components/article-video';
 import ArticleImage from './components/article-image';
 import AssociatedItem from './components/associated-item';
 
-const { mapState } = createNamespacedHelpers('article/articleDetail');
+const { mapState, mapActions } = createNamespacedHelpers('article/articleDetail');
 
 export default {
   name: 'articleDetail',
@@ -69,6 +69,11 @@ export default {
     },
     content({detailInfo: {blockList = [], atUserInfo = {}}}) {
       const contentBlock = blockList.find(block => block.templateKey === 'text');
+
+      if (!contentBlock) {
+        return '';
+      }
+
       const content = contentBlock.contentData || '';
 
       return content.replace(/@(\d*)#|(\r\n|\n)/gm, (match, p1, p2)=> {
@@ -86,6 +91,21 @@ export default {
     return store.dispatch('article/articleDetail/fetchDetailInfo', {articleId});
   },
   activated() {
+  },
+  methods: {
+    ...mapActions(['updatePraiseStatus']),
+    async onPraise({articleId, hasPraise}) {
+      const user = await this.$sdk.getUser(true);
+
+      if (user && user.uid) {
+        this.updatePraiseStatus({
+          articleId,
+          status: hasPraise === 'Y' ? 1 : 0
+        });
+      } else {
+        this.$yoho.auth();
+      }
+    }
   }
 };
 </script>

-export const FETCH_DETAIL_INFO = 'FETCH_DETAIL_INFO';
+const FETCH_DETAIL_INFO = 'FETCH_DETAIL_INFO';
+const UPDATE_ARTICLE_PRAISE_INFO = 'UPDATE_ARTICLE_PRAISE_INFO';
 
 export default function() {
   return {
@@ -17,7 +18,17 @@ export default function() {
 
         if (res.code === 200) {
           // 历史原因返回为List
-          commit('FETCH_DETAIL_INFO', res.data.detailList[0] || {});
+          commit(FETCH_DETAIL_INFO, res.data.detailList[0] || {});
+        }
+      },
+      async updatePraiseStatus({commit}, {articleId, status}) {
+        const res = await this.$api.get('/api/grass/updateArticlePraise', {
+          articleId,
+          status
+        });
+
+        if (res.code === 200) {
+          commit(UPDATE_ARTICLE_PRAISE_INFO);
         }
       }
     },
@@ -25,6 +36,15 @@ export default function() {
       // 获取详情
       [FETCH_DETAIL_INFO](state, detailInfo) {
         state.detailInfo = detailInfo;
+      },
+      [UPDATE_ARTICLE_PRAISE_INFO](state) {
+        let {hasPraise, praiseCount} = state.detailInfo;
+
+        state.detailInfo = {
+          ...state.detailInfo,
+          hasPraise: hasPraise === 'Y' ? 'N' : 'Y',
+          praiseCount: hasPraise === 'Y' ? praiseCount - 1 : praiseCount + 1
+        };
       }
     },
     getters: {