tnbapp/src/views/user/Follower.vue

<template>
  <div>
    <el-row>
      <el-col :md="4">
        <el-menu
          :default-active="this.$route.path"
          router
          class="el-menu-vertical-demo"
        >
          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :md="20">
        <el-row v-for="(user, index) in followerList" :key="index" :md="16" :sm="12" :xs="12">
          <router-link target="_blank" :to="`/user/` + user.userId">
            <el-col :md="1">
              <el-avatar>
                <el-image :src="user.avatarUrl" />
              </el-avatar>
            </el-col>
            <el-col :md="15">
              <span>{{ user.screenName }}</span>
            </el-col>
          </router-link>
          <el-col :md="4">
            <el-button
              type="danger"
              size="mini"
              :icon="followButton.icon"
              @click="followUser(user.userId)"
            >
              <span>{{followButton.text}}</span>
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserInfo, getUserFollower } from "@/api/user";

export default {
  name: 'Follower',
  data() {
    return {
      userId: -1,
      navList: [],
      followerList: [],
      followButton: {
        icon: 'el-icon-plus',
        text: '关注'
      },
    }
  },
  created() {
    this.userId = this.$route.params.id
    this.navList = this.getNavList(this.userId)
    getUserInfo(this.userId).then(res => {
      if (res.code === 0) {
        this.user = res.data
        document.title = this.user.screenName + '的关注列表'
      }
    })

    getUserFollower(this.userId).then(res => {
      if (res.code === 0) {
        this.followerList = res.data
      }
    })
  },
  methods: {
    getNavList(userId) {
      return [
        { path: '/user/' + userId + '/following', name: '关注', icon: 'el-icon-user' },
        { path: '/user/' + userId + '/follower', name: '粉丝', icon: 'el-icon-user' }
      ]
    },
    followUser(userId) {
      if (this.followButton.text === '关注') {
        console.log('关注用户')
        this.followButton.text = '已关注'
        this.followButton.icon = 'el-icon-check'
      } else {
        console.log('取消关注用户')
        this.followButton.text = '关注'
        this.followButton.icon = 'el-icon-plus'
      }
    },
  }
}
</script>