更新用户关注页

src/components/card/UserAvatarCard.vue

@@ -29,12 +29,22 @@
         <el-row>
           <el-col :md="18">
             <el-button
+              v-if="userAvatar.followed"
               type="danger"
               size="mini"
-              :icon="followButton.icon"
+              icon="el-icon-check"
+              @click="unfollowUser(userAvatar.userId)"
+            >
+              <span>已关注</span>
+            </el-button>
+            <el-button
+              v-else
+              type="danger"
+              size="mini"
+              icon="el-icon-plus"
               @click="followUser(userAvatar.userId)"
             >
-              <span>{{ followButton.text }}</span>
+              <span>关注</span>
             </el-button>
             <el-button
               type="danger"
@@ -52,7 +62,7 @@
 </template>
 
 <script>
-import { checkRelation, followUser, unfollowUser } from '@/api/user'
+import { followUser, unfollowUser } from '@/api/user'
 
 export default {
   name: 'UserAvatarCard',
@@ -89,21 +99,18 @@ export default {
   },
   methods: {
     followUser(userId) {
-      if (this.followButton.text === '关注') {
-        followUser(userId).then(resp => {
-          if (resp.code === 0) {
-            this.followButton.text = '已关注'
-            this.followButton.icon = 'el-icon-check'
-          }
-        })
-      } else {
-        unfollowUser(userId).then(resp => {
-          if (resp.code === 0) {
-            this.followButton.text = '关注'
-            this.followButton.icon = 'el-icon-plus'
-          }
-        })
-      }
+      followUser(userId).then(resp => {
+        if (resp.code === 0) {
+          this.userAvatar.followed = true
+        }
+      })
+    },
+    unfollowUser(userId) {
+      unfollowUser(userId).then(resp => {
+        if (resp.code === 0) {
+          this.userAvatar.followed = false
+        }
+      })
     },
     sendMessage(userId) {
       this.$notify.info({

src/views/user/UserRelation.vue

@@ -56,7 +56,7 @@
             </span>
             <div v-if="activeName === 'follower'">
               <el-col v-for="(user, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-                <user-card :user="user" />
+                <user-avatar-card :user-avatar="user" />
               </el-col>
             </div>
           </el-tab-pane>
@@ -77,7 +77,7 @@
         />
       </el-col>
     </el-row>
-    <el-row v-if="showEmpty" class="not-result">
+    <el-row v-if="dataList.length === 0" class="not-result">
       <el-col :span="12" :offset="6">
         <img src="@/assets/img/icon/not-collection.png">
         <div>该用户还没关注任何人呢</div>