✨ 粉丝和关注用户列表

components/common/user/list.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="wrapper">
+    <el-row>
+      <el-col :span="12" v-for="user in users.users" :key="user.idUser" style="margin-bottom: 1rem;">
+        <el-col :span="3">
+          <el-avatar size="medium" :src="user.avatarUrl"></el-avatar>
+        </el-col>
+        <el-col :span="21">
+          <div>
+            <el-link rel="nofollow" @click="onRouter(user.nickname)" :underline="false" class="text-default">
+              {{ user.nickname }}
+            </el-link>
+            <small class="d-block text-muted">{{ user.signature }}</small>
+          </div>
+        </el-col>
+      </el-col>
+      <el-col v-show="!users" class="text-center">
+        这里什么都没有!
+      </el-col>
+      <el-col>
+        <div class="vertical-container text-center">
+          <el-pagination :hide-on-single-page="true" v-model="users.pagination"
+                         layout="prev, pager, next"
+                         :current-page="users.pagination.currentPage"
+                         :total="users.pagination.total"
+                         @current-change="currentChange">
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserList",
+  props: {
+    users: Object
+  },
+  methods: {
+    onRouter(data) {
+      this.$router.push({
+        path: `/user/${data}`
+      })
+    },
+    currentChange(page) {
+      this.$emit('currentChange', page);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/user/_nickname.vue

@@ -29,19 +29,27 @@
       <el-row type="flex" justify="center">
         <el-col>
           <el-menu :default-active="activeTab" mode="horizontal" @select="handleToggleTab"
-                   style="padding-left: calc(50vw - 4.8rem);">
+                   style="padding-left: calc(50vw - 11rem);">
             <el-menu-item index="0">文章</el-menu-item>
             <el-menu-item index="1">作品集</el-menu-item>
+            <el-menu-item index="2">关注用户</el-menu-item>
+            <el-menu-item index="3">粉丝</el-menu-item>
           </el-menu>
         </el-col>
       </el-row>
     </el-col>
-    <el-col v-if="activeTab === '0'">
+    <el-col v-if="activeTab === '0'" class="tab-content">
       <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
     </el-col>
-    <el-col v-else>
+    <el-col v-else-if="activeTab === '1'" class="tab-content">
       <portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"></portfolio-list>
     </el-col>
+    <el-col v-else-if="activeTab === '2'" class="tab-content">
+      <user-list :users="followings" @currentChange="currentChangeFollowing"></user-list>
+    </el-col>
+    <el-col v-else-if="activeTab === '3'" class="tab-content">
+      <user-list :users="followers" @currentChange="currentChangeFollower"></user-list>
+    </el-col>
   </el-row>
 </template>
 
@@ -49,10 +57,11 @@
 import {mapState} from 'vuex';
 import ArticleList from "~/components/archive/list";
 import PortfolioList from "~/components/common/portfolio/list";
+import UserList from "~/components/common/user/list";
 
 export default {
   name: "User",
-  components: {ArticleList, PortfolioList},
+  components: {ArticleList, PortfolioList, UserList},
   validate({params, store}) {
     return params.nickname
   },
@@ -62,7 +71,9 @@ export default {
         .dispatch('user/fetchDetail', params)
         .catch(err => error({statusCode: 404})),
       store.dispatch('user/fetchArticleList', params),
-      store.dispatch('user/fetchPortfolioList', params)
+      store.dispatch('user/fetchPortfolioList', params),
+      store.dispatch('user/fetchFollowerList', params),
+      store.dispatch('user/fetchFollowingList', params)
     ])
   },
   computed: {
@@ -70,6 +81,8 @@ export default {
       user: state => state.user.data,
       articles: state => state.user.articles,
       portfolios: state => state.user.portfolios,
+      followers: state => state.user.followers,
+      followings: state => state.user.followings,
       oauth: state => state.oauth
     })
   },
@@ -86,6 +99,12 @@ export default {
     currentChangePortfolio(page) {
       this.$store.dispatch('user/fetchPortfolioList', {page: page, nickname: this.$route.params.nickname})
     },
+    currentChangeFollowing(page) {
+      this.$store.dispatch('user/fetchFollowingList', {page: page, nickname: this.$route.params.nickname})
+    },
+    currentChangeFollower(page) {
+      this.$store.dispatch('user/fetchFollowerList', {page: page, nickname: this.$route.params.nickname})
+    },
     handleToggleTab(key) {
       this.$set(this, 'activeTab', key);
     },
@@ -271,4 +290,8 @@ h3, .h3 {
   padding-right: 0.75rem;
   padding-left: 0.75rem;
 }
+
+.tab-content {
+  min-height: 50vh;
+}
 </style>

store/user.js

@@ -17,6 +17,14 @@ export const state = () => {
     portfolios:  {
       portfolios: [],
       pagination: {}
+    },
+    followers:  {
+      users: [],
+      pagination: {}
+    },
+    followings:  {
+      users: [],
+      pagination: {}
     }
   }
 }
@@ -33,6 +41,12 @@ export const mutations = {
   },
   updatePortfolioList(state, action) {
     state.portfolios = action
+  },
+  updateFollowerList(state, action) {
+    state.followers = action
+  },
+  updateFollowingList(state, action) {
+    state.followings = action
   }
 }
 
@@ -80,5 +94,45 @@ export const actions = {
       .catch(error => {
         commit('updateFetching', false)
       })
+  },
+  fetchFollowerList({commit}, params) {
+    commit('updateFetching', true);
+    commit('updateFollowerList', {
+      users: [],
+      pagination: {}
+    })
+    return this.$axios
+      .$get(`${USER_API_PATH}/${params.nickname}/followers`, {
+        params: {
+          page: params.page
+        }
+      })
+      .then(response => {
+        commit('updateFollowerList', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
+  },
+  fetchFollowingList({commit}, params) {
+    commit('updateFetching', true);
+    commit('updateFollowingList', {
+      users: [],
+      pagination: {}
+    })
+    return this.$axios
+      .$get(`${USER_API_PATH}/${params.nickname}/followings`, {
+        params: {
+          page: params.page
+        }
+      })
+      .then(response => {
+        commit('updateFollowingList', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
   }
 }