添加粉丝或关注者展示卡片

Author: Longgererer

src/components/followCard.vue

@@ -1,36 +1,100 @@
 <template>
   <div class="follow-card">
-    <v-avatar class="avatar">
-      <v-img src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
+    <v-avatar class="avatar pointer" :color="userInfo.userPicture?'':'primary'" @click="viewUserProfile">
+      <v-img :src="qiNiuImgLink+userInfo.userPicture" v-if="userInfo.userPicture" :alt="userInfo.name"></v-img>
+      <span class="white--text text-h4" v-else>{{userInfo.name|preNickname}}</span>
     </v-avatar>
     <div class="follow-user-info">
       <div class="d-flex flex-ai">
-        <span class="text-bold text-md">Tom Rich</span>
+        <span class="text-bold text-md">{{userInfo.name}}</span>
         <v-spacer></v-spacer>
-        <v-btn small color="#333333" depressed v-if="following">取消关注</v-btn>
-        <v-btn small color="primary" depressed v-else>关注</v-btn>
+        <v-btn small color="#3C3C3C" depressed v-if="userInfo.myFollow" width="80" :loading="unFollowLoading"
+          @click="unFollow">取消关注</v-btn>
+        <v-btn small color="primary" depressed v-else width="80" :loading="followLoading" @click="follow">关注</v-btn>
       </div>
-      <span class="about text-describe text-sm">这是他的个人简介...这是他的个人简介...这是他的个人简介...</span>
+      <span class="about text-describe text-sm">{{userInfo.description||'ta还没想好怎么描述自己...'}}</span>
       <div class="text-sm num">
-        <span class="instances">实例: 123</span>
-        <span class="follower">粉丝: 456</span>
+        <span class="instances">实例: {{userInfo.works|formatNumber}}</span>
+        <span class="follower">粉丝: {{userInfo.fan|formatNumber}}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex'
+import { qiNiuImgLink } from '@utils/publicData'
 export default {
   props: {
-    following: {
-      type: Boolean,
-      default: false,
-    },
+    userInfo: Object,
+    cardIndex: Number,
   },
   data() {
-    return {}
+    return {
+      qiNiuImgLink,
+      followLoading: false,
+      unFollowLoading: false,
+    }
+  },
+  computed: {
+    ...mapState(['loginState', 'loginInfo']),
+    ...mapGetters(['isSelfProfile']),
+  },
+  methods: {
+    viewUserProfile() {
+      // 查看用户主页
+      this.$router.push(`/user/${this.userInfo.username}`)
+    },
+    async follow() {
+      if (!this.loginState) {
+        this.$message.info('请登录后再进行相关操作！')
+        return void 0
+      }
+      this.followLoading = true
+      try {
+        const res = await this.$http.addFollow({
+          username: this.loginInfo.username,
+          followUsername: this.userInfo.username,
+        })
+        if (res.state) {
+          this.$message.success('关注成功！')
+          this.$emit('setFollow', true, this.cardIndex)
+        } else {
+          this.$message.error('关注失败！')
+        }
+      } catch (err) {
+        console.log(err)
+      }
+      this.followLoading = false
+    },
+    async unFollow() {
+      if (!this.loginState) {
+        this.$message.info('请登录后再进行相关操作！')
+        return void 0
+      }
+      this.unFollowLoading = true
+      try {
+        const res = await this.$http.delFollow({
+          username: this.loginInfo.username,
+          followUsername: this.userInfo.username,
+        })
+        if (res.state) {
+          this.$message.success('取消关注成功！')
+          // 如果在自己的主页的关注页面取消关注，则重新查询关注列表
+          if (this.isSelfProfile && this.$route.name === 'Following') {
+            this.$emit('search')
+          } else {
+            this.$emit('setFollow', false, this.cardIndex)
+          }
+        } else {
+          this.$message.error('取消关注失败！')
+        }
+      } catch (err) {
+        console.log(err)
+      }
+      this.unFollowLoading = false
+    },
   },
-  methods: {},
   components: {},
 }
 </script>
@@ -53,6 +117,7 @@ export default {
     .about {
       margin-top: 5px;
       display: block;
+      height: 40px;
       @include texts-ellipsis(2);
     }
     .num {