加入点赞

Author: microzz

src/components/Content/Article.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="article-detail">
+  <div @scroll="toScroll($event)" class="article-detail">
 
     <div v-show="!isLoading" class="body">
 
@@ -33,7 +33,8 @@
                 <router-link :to="{name: 'user', params: {name: item.author && item.author.loginname}}">{{item.author.loginname}}</router-link>
                   {{index+1}}楼 • {{changeTime(item.create_at)}}
                   <span @click="currentIndex=index" class="reply-at">回复</span>
-                  <i @click="ups(index)" :class="[currentUps===index ? 'ups-yes' : 'ups-no']" class="icon-reply-at"></i>
+                  <i @click="ups(index, item.id, item)" :class="[item.ups.indexOf(userInfo.id) !== -1 ? 'ups-yes' : 'ups-no']" class="icon-reply-at"></i>
+                  <span class="ups-count">{{ item.ups.length }}</span>
               </div>
             </div>
           </div>
@@ -76,9 +77,11 @@ export default {
       replyOneContent: '',
       isReplyOne: false,
       isUps: false,
+      flag: true,
+      up: 0,
       currentIndex: null, // 回复某个人的 index
-      currentUps: null
-
+      currentUps: null,
+      oArticleDetail: {}
     }
   },
   created() {
@@ -88,7 +91,6 @@ export default {
     this.axios.get('https://cnodejs.org/api/v1/topic/' + this.id)
       .then(result => result.data.data)
       .then(data => this.infos = data)
-      .then(data => console.log('data', data))
       .then(() => this.$store.commit('viewArcticle', false))
       .then(() => {
         this.oImgs = document.querySelector('.md').querySelectorAll('img');
@@ -97,6 +99,9 @@ export default {
         }
       })
   },
+  mounted() {
+    this.oArticleDetail = document.getElementById('article-detail');
+  },
   computed: {
     isLoading() {
       return this.$store.state.isLoading;
@@ -126,6 +131,9 @@ export default {
 
   },
   methods: {
+    toScroll(event) {
+      this.oArticleDetail = event.target;
+    },
     collect() {
       if (!this.ak) {
         this.$store.commit('showLogin', true);
@@ -152,6 +160,7 @@ export default {
         })
       }
     },
+
     reply(id, name) {
       if (!this.ak) {
         this.$store.commit('showLogin', true);
@@ -161,18 +170,48 @@ export default {
         this.axios.post(`https://cnodejs.org/api/v1/topic/${this.id}/replies`, {
           accesstoken: this.ak,
           content: this.replyContent
-        }).then(() => location.reload())
+        }).then(() => {
+          this.axios.get('https://cnodejs.org/api/v1/topic/' + this.id)
+            .then(result => result.data.data)
+            .then(data => this.infos = data)
+            .then(() => {
+              this.oArticleDetail.scrollTop = this.oArticleDetail.scrollHeight;
+              this.replyContent ='';
+          })
+        })
       } else {
-        console.log('id', id);
         this.axios.post(`https://cnodejs.org/api/v1/topic/${this.id}/replies`, {
           accesstoken: this.ak,
           content: '@' + name + ' ' + this.replyOneContent,
           reply_id: id
-        }).then(() => location.reload())
+        }).then(() => {
+          this.axios.get('https://cnodejs.org/api/v1/topic/' + this.id)
+            .then(result => result.data.data)
+            .then(data => this.infos = data)
+            .then(() => {
+              this.oArticleDetail.scrollTop = this.oArticleDetail.scrollHeight;
+              this.currentIndex = null;
+              this.replyOneContent = ''
+            })
+        })
       }
     },
-    ups(index) {
-      this.currentUps === index ? this.currentUps = null : this.currentUps = index;
+
+    //点赞
+    ups(index, upsId, item) {
+      if (item.author.loginname === this.userInfo.loginname) {
+        alert('不能自己为自己点赞哦😯')
+        return;
+      }
+      this.axios.post(`https://cnodejs.org/api/v1/reply/${upsId}/ups`, {accesstoken: this.ak})
+        .then(result => {
+          if (result.data.success) {
+            this.axios.get('https://cnodejs.org/api/v1/topic/' + this.id)
+              .then(result => result.data.data)
+              .then(data => this.infos = data)
+          }
+        })
+
     }
   }
 }
@@ -309,11 +348,11 @@ export default {
                   padding-left: 10px;
                   .reply-at {
                     position: absolute;
-                    right: 50px;
+                    right: 70px;
                   }
                   .icon-reply-at {
                     position: absolute;
-                    right: 20px;
+                    right: 35px;
                     top: -2px;
                     display: inline-block;
                     width: 20px;
@@ -328,6 +367,10 @@ export default {
                     background: url('../../common/icons/icon-ups-no.svg') no-repeat;
                     background-size: contain;
                   }
+                  span.ups-count {
+                    position: absolute;
+                    right: 20px;
+                  }
                 }
               }
             }