✨ 关注用户功能

pages/user/_nickname.vue

@@ -12,8 +12,14 @@
           <h3 class="mb-3">{{ user.nickname }}</h3>
           <p class="mb-4" v-html="user.signature"></p>
           <div v-if="oauth && oauth.idUser !== user.idUser">
+            <el-button type="primary" v-if="isFollow" @click="cancelFollowUser(user.idUser)">取消关注</el-button>
+            <el-button type="primary" v-else @click="followUser(user.idUser)">关注</el-button>
             <el-button @click="gotoChats">聊天</el-button>
           </div>
+          <div v-else>
+            <el-button type="primary" @click="login">关注</el-button>
+            <el-button @click="login">聊天</el-button>
+          </div>
         </div>
       </div>
     </el-col>
@@ -67,7 +73,8 @@
   },
   data() {
     return {
-        activeTab: '0'
+      activeTab: '0',
+      isFollow: false
     }
   },
   methods: {
@@ -85,6 +92,50 @@
       _ts.$router.push({
         path: `/chats/${_ts.user.nickname}`
       })
+    },
+    followUser(idUser) {
+      let _ts = this;
+      if (_ts.oauth) {
+        _ts.$axios.$post('/api/follow', {
+          followingId: idUser,
+          followingType: 0
+        }).then(function (res) {
+          _ts.$set(_ts, 'isFollow', res);
+        })
+      } else {
+        _ts.login()
+      }
+    },
+    cancelFollowUser(idUser) {
+      let _ts = this;
+      if (_ts.oauth) {
+        _ts.$axios.$post('/api/follow/cancel-follow', {
+          followingId: idUser,
+          followingType: 0
+        }).then(function (res) {
+          _ts.$set(_ts, 'isFollow', res);
+        })
+      } else {
+        _ts.login()
+      }
+    },
+    login() {
+      this.$router.push({
+        path: '/login'
+      })
+    }
+  },
+  mounted() {
+    let _ts = this;
+    if (_ts.oauth) {
+      _ts.$axios.$get('/api/follow/is-follow', {
+        params: {
+          followingId: _ts.user.idUser,
+          followingType: 0
+        }
+      }).then(function (res) {
+        _ts.$set(_ts, 'isFollow', res);
+      })
     }
   }
 }