点赞功能

@@ -22,7 +22,7 @@
                 <img :src="item.authorHeadIco">
               </div>
               <p class="user-name">{{item.authorName}}</p>
-              <div class="zan-container">
+              <div class="zan-container" :data-praised="item.hasPraised" :data-index="index" :data-id="item.articleId" @click="updatePraise">
                 <i :class="[item.hasPraised === 'Y' ? 'iconzan-fill' : 'iconzan_n', 'iconfont', 'btn-zan']"></i>
                 <p class="zan-count">{{item.praiseCount ? item.praiseCount : '赞'}}</p>
               </div>
@@ -45,11 +45,11 @@ export default {
   name: 'waterFallList',
   components: {WaterFall},
   props: {
-    listData: {
+    listData: { // 列表数据
       type: Array,
       default: []
     },
-    listInfo: {
+    listInfo: { // 列表基础信息
       type: Object,
       default: {}
     },
@@ -61,7 +61,7 @@ export default {
       type: Number,
       default: 18
     },
-    isLoading: {
+    isLoading: { // 是否正在调用列表接口
       type: Boolean,
       default: false
     }
@@ -69,9 +69,10 @@ export default {
   data() {
     return {
       col: 2,
-      scrollTop: 0,
-      isLogin: false,
-      loadText: ''
+      scrollTop: 0, // 页面滚动高度
+      isLogin: false, // 是否登录
+      loadText: '', // 加载新列表提示文字
+      isUpdatingPraise: false, // 是否正在调用点赞接口
     };
   },
   computed: {
@@ -104,17 +105,15 @@ export default {
       this.isLogin = val;
     },
     isLoading(newVal) {
-      console.log('isLoading', newVal);
       if (newVal === true) {
         this.loadText = '加载中...';
       } else {
         this.loadText = '';
       }
-      console.log(this.loadText);
     }
   },
   methods: {
-    ...mapActions(['articleAddLike']),
+    ...mapActions(['updateArticlePraise']),
     loadMore() {
       this.$emit('load-more');
     },
@@ -141,6 +140,16 @@ export default {
           }
         });
       }
+    },
+    updatePraise(e) {
+      let articleId = e.currentTarget.dataset.id;
+      let index = e.currentTarget.dataset.index;
+      let status = e.currentTarget.dataset.praised === 'Y' ? 1 : 0;
+
+      console.log(articleId,index, status);
+      this.updateArticlePraise({articleId, status, index}).then(result => {
+        console.log(result);
+      });
     }
   }
 };

@@ -45,7 +45,18 @@ export default {
       commit(Types.FETCH_ARTICLE_LIST_FAILED);
     }
   },
-  async articleAddLike({commit}, {articleId}) {
 
+  // 点赞
+  async updateArticlePraise({commit}, {articleId, status, index}) {
+    let result = await this.$api.get('/api/grass/updateArticlePraise', {
+      articleId,
+      status
+    });
+
+    if (result.code === 200) {
+      commit(Types.UPDATE_ARTICLE_PRAISE, {articleId, status, index});
+    }
+
+    return result;
   }
 };

@@ -23,5 +23,25 @@ export default {
     }
     delete result.data.list;
     state.articleListInfo = result.data;
+  },
+
+  // 更新点赞
+  [Types.UPDATE_ARTICLE_PRAISE](state, {articleId, status, index}) {
+    let article = state.articleList[index];
+
+    if (article.articleId === parseInt(articleId, 10)) {
+      if (article.praiseCount === 0 && status === 0) {
+        article.praiseCount += 1;
+        article.hasPraised = 'Y';
+      } else if (article.praiseCount > 0) {
+        if (status === 0) {
+          article.praiseCount += 1;
+          article.hasPraised = 'Y';
+        } else {
+          article.praiseCount -= 1;
+          article.hasPraised = 'N';
+        }
+      }
+    }
   }
 };

 export const FETCH_ARTICLE_LIST_SUCCESS = 'FETCH_ARTICLE_LIST_SUCCESS';
 export const FETCH_ARTICLE_LIST_REQUEST = 'FETCH_ARTICLE_LIST_REQUEST';
 export const FETCH_ARTICLE_LIST_FAILED = 'FETCH_ARTICLE_LIST_FAILED';
+export const UPDATE_ARTICLE_PRAISE = 'UPDATE_ARTICLE_PRAISE';