1.添加用户关注页面

2.更新用户帐号页面
3.更新用户主页页面
4.更新用户状态页面

src/router/index.js

@@ -12,8 +12,10 @@ const ArticleIndex = () => import('views/home/Article')
 const Search = () => import('views/home/Search')
 const VideoPage = () => import('views/home/VideoPage')
 const HomeIndex = () => import('views/user/Home')
-const FollowIndex = () => import('views/user/follow')
+const FollowingIndex = () => import('views/user/Following')
+const FollowerIndex = () => import('views/user/Follower')
 const ProfileIndex = () => import('views/user/Profile')
+const AvatarIndex = () => import('views/user/Avatar')
 const CollectionIndex = () => import('views/user/Collection')
 const HistoryIndex = () => import('views/user/History')
 const PostList = () => import('views/post/PostList')
@@ -74,15 +76,25 @@ const routes = [
     component: HomeIndex
   },
   {
-    path: '/user/:id/follow',
-    name: 'FollowIndex',
-    component: FollowIndex
+    path: '/user/:id/following',
+    name: 'FollowingIndex',
+    component: FollowingIndex
+  },
+  {
+    path: '/user/:id/follower',
+    name: 'FollowerIndex',
+    component: FollowerIndex
   },
   {
     path: '/u/profile',
     name: 'ProfileIndex',
     component: ProfileIndex
   },
+  {
+    path: '/u/avatar',
+    name: 'AvatarIndex',
+    component: AvatarIndex
+  },
   {
     path: '/u/collection',
     name: 'CollectionIndex',

src/views/home/Status.vue

@@ -1,16 +1,34 @@
 <template>
   <div>
-    <el-row>
+    <el-row class="movie-list">
       <el-col :md="18">
         <text-card />
       </el-col>
-      <el-col :md="6">
+<!--      <el-col :md="6">
         <hot-list />
-      </el-col>
+      </el-col>-->
     </el-row>
-    <el-row id="movie-list">
+    <el-row class="movie-list">
+      <el-col :md="18">
+        <el-tabs v-model="activeName" @tab-click='tabClick'>
+          <el-tab-pane label="视频" name="video">
+            <div v-if="activeName === 'video'">
+              <el-row v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+                <video-card :video="video" />
+              </el-row>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="状态" name="status">
+            <div v-if="activeName === 'status'">
+              <el-row v-for="(status, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
+                <status-card :status="status" />
+              </el-row>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
       <el-col :md="18">
-        <el-row v-for="(video, index) in videoList" :key="index" :md="16" :sm="12" :xs="12">
+        <el-row v-for="(video, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
           <status-card :status="video" />
         </el-row>
       </el-col>
@@ -21,20 +39,23 @@
 <script>
 import TextCard from '@/components/card/TextCard'
 import StatusCard from '@/components/card/StatusCard'
+import VideoCard from '@/components/card/VideoCard'
 import HotList from '@/components/hotlist/HotList'
 import { getUserInfo } from '@/utils/auth'
-import { statusRecommend } from '@/api/status'
+import { statusTimeline, videoTimeline } from '@/api/timeline'
 
 export default {
   name: 'Status',
-  components: { TextCard, StatusCard, HotList },
+  components: { TextCard, StatusCard, VideoCard, HotList },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       videoInfo: null,
-      videoList: []
+      statusList: [],
+      videoList: [],
+      activeName: 'video'
     }
   },
   created() {
@@ -44,12 +65,13 @@ export default {
     }
 
     this.currentPage = 1
-    statusRecommend(this.currentPage).then(res => {
+    this.videoTimelineWrapper(this.currentPage)
+    /*statusTimeline(0, this.currentPage).then(res => {
       if (res.code === 0) {
         const resData = res.data
-        this.videoList = resData.list
+        this.statusList = resData.list
       }
-    })
+    })*/
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -67,13 +89,37 @@ export default {
       this.$store.dispatch('getPageBean')
       // 回到顶部
       scrollTo(0, 0)
+    },
+    statusTimelineWrapper(pageNumber) {
+      statusTimeline(0, this.currentPage).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.statusList = resData.list
+        }
+      })
+    },
+    videoTimelineWrapper(pageNumber) {
+      videoTimeline(0, this.currentPage).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.videoList = resData.list
+        }
+      })
+    },
+    tabClick(tab) {
+      const  tabName = tab.name
+      if (tabName === 'video') {
+        this.videoTimelineWrapper(this.currentPage)
+      } else if (tabName === 'status') {
+        this.statusTimelineWrapper(this.currentPage)
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-#movie-list {
+.movie-list {
   padding-top: 15px;
   padding-left: 3%;
   padding-right: 3%;
@@ -81,7 +127,7 @@ export default {
 
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
-  #movie-list {
+  .movie-list {
     padding-top: 8px;
     padding-left: 0.5%;
     padding-right: 0.5%;

src/views/user/Avatar.vue

@@ -0,0 +1,46 @@
+<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">
+        <span>头像管理</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/utils/auth'
+
+export default {
+  name: 'Profile',
+  data() {
+    return {
+      userId: -1,
+      navList: [
+        { path: '/u/profile', name: '帐号', icon: 'el-icon-user' },
+        { path: '/u/avatar', name: '头像', icon: 'el-icon-user' }
+      ]
+    }
+  },
+  created() {
+    const userInfo = getUserInfo()
+    if (userInfo != null) {
+      document.title = userInfo.username + '的帐号主页'
+    }
+  },
+  methods: {
+  }
+}
+</script>

src/views/user/follow.vue → src/views/user/Follow.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <el-row>
-      <span>账户主页</span>
+      <span>关注主页</span>
     </el-row>
   </div>
 </template>
 
 <script>
-import { getUserInfo } from '@/utils/auth'
-// import { getUserInfo } from "@/api/user";
+// import { getUserInfo } from '@/utils/auth'
+import { getUserInfo } from "@/api/user";
 
 export default {
   name: 'Profile',
@@ -21,16 +21,13 @@ export default {
     }
   },
   created() {
-    const userInfo = getUserInfo()
-    if (userInfo != null) {
-      document.title = userInfo.username + '的帐号主页'
-    }
-    /*getUserInfo(10001).then(res => {
+    const userId = this.$route.params.id
+    getUserInfo(userId).then(res => {
       if (res.code === 0) {
         this.user = res.data
-        document.title = this.user.screenName + '的帐号主页'
+        document.title = this.user.screenName + '的关注列表'
       }
-    })*/
+    })
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度

src/views/user/Follower.vue

@@ -0,0 +1,96 @@
+<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>

src/views/user/Following.vue

@@ -0,0 +1,96 @@
+<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, getUserFollowing } from "@/api/user";
+
+export default {
+  name: 'Following',
+  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 + '的关注列表'
+      }
+    })
+
+    getUserFollowing(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>

src/views/user/Home.vue

@@ -5,27 +5,31 @@
         <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
           <div slot="header" class="clearfix">
             <el-row>
-              <el-avatar>
-                <el-image :src="user.avatarUrl" />
-              </el-avatar>
-              <span>{{ user.screenName }}</span>
-              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <el-button
-                type="danger"
-                size="mini"
-                :icon="followButton.icon"
-                @click="followUser(user.userId)"
-              >
-                <span>{{followButton.text}}</span>
-              </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-message"
-                @click="sendMessage(user.userId)"
-              >
-                <span>发消息</span>
-              </el-button>
+              <el-col :md="1">
+                <el-avatar>
+                  <el-image :src="user.avatarUrl" />
+                </el-avatar>
+              </el-col>
+              <el-col :md="23">
+                <span>{{ user.screenName }}</span>
+                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
+                <el-button
+                  type="danger"
+                  size="mini"
+                  :icon="followButton.icon"
+                  @click="followUser(user.userId)"
+                >
+                  <span>{{followButton.text}}</span>
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-message"
+                  @click="sendMessage(user.userId)"
+                >
+                  <span>发消息</span>
+                </el-button>
+              </el-col>
             </el-row>
             <el-row>
               <span v-if="user.intro !== null">{{user.intro}}</span>
@@ -89,7 +93,7 @@
 <script>
 import StatusCard from '@/components/card/StatusCard'
 import VideoCard from '@/components/card/VideoCard'
-import { getUserInfo } from "@/api/user";
+import { getUserInfo, checkRelation, followUser, unfollowUser } from "@/api/user";
 import { userVideoList } from "@/api/video";
 import { userStatus } from "@/api/status";
 
@@ -103,8 +107,8 @@ export default {
       user: null,
       userId: null,
       followButton: {
-        icon: 'el-icon-check',
-        text: '已关注'
+        icon: 'el-icon-plus',
+        text: '关注'
       },
       activeName: 'video',
       currentPage: 1,
@@ -116,9 +120,7 @@ export default {
     }
   },
   created() {
-    const path = this.$route.path
     this.userId = this.$route.params.id
-    //this.activeName = path.split('/user/' + this.userId + '/')[1]
     getUserInfo(this.userId).then(res => {
       if (res.code === 0) {
         this.user = res.data
@@ -126,6 +128,16 @@ export default {
       }
     })
 
+    checkRelation(this.userId).then(res => {
+      console.log(res)
+      if (res.code === 0) {
+        if (res.data) {
+          this.followButton.text = '已关注'
+          this.followButton.icon = 'el-icon-check'
+        }
+      }
+    })
+
     this.userVideoListWrapper(1, this.userId)
   },
   mounted() {
@@ -172,13 +184,19 @@ export default {
     },
     followUser(userId) {
       if (this.followButton.text === '关注') {
-        console.log('关注用户')
-        this.followButton.text = '已关注'
-        this.followButton.icon = 'el-icon-check'
+        followUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '已关注'
+            this.followButton.icon = 'el-icon-check'
+          }
+        })
       } else {
-        console.log('取消关注用户')
-        this.followButton.text = '关注'
-        this.followButton.icon = 'el-icon-plus'
+        unfollowUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '关注'
+            this.followButton.icon = 'el-icon-plus'
+          }
+        })
       }
     },
     sendMessage(userId) {
@@ -192,7 +210,7 @@ export default {
           this.totalPages = resData.totalPages
           this.lastId = resData.lastId
 
-          if (this.videoList .length !== 0) {
+          if (this.videoList.length !== 0) {
             this.showEmpty = false
           } else {
             this.showEmpty = true

src/views/user/Profile.vue

@@ -1,23 +1,37 @@
 <template>
   <div>
     <el-row>
-      <span>账户主页</span>
+      <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">
+        <span>帐号信息</span>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
 import { getUserInfo } from '@/utils/auth'
-// import { getUserInfo } from "@/api/user";
 
 export default {
   name: 'Profile',
   data() {
     return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      user: null,
-      userId: null,
+      userId: -1,
+      navList: [
+        { path: '/u/profile', name: '帐号', icon: 'el-icon-user' },
+        { path: '/u/avatar', name: '头像', icon: 'el-icon-user' }
+      ]
     }
   },
   created() {
@@ -25,45 +39,8 @@ export default {
     if (userInfo != null) {
       document.title = userInfo.username + '的帐号主页'
     }
-    /*getUserInfo(10001).then(res => {
-      if (res.code === 0) {
-        this.user = res.data
-        document.title = this.user.screenName + '的帐号主页'
-      }
-    })*/
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
   },
   methods: {
   }
 }
 </script>
-
-<style scoped>
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-
-.pagination {
-  text-align: center;
-  padding: 10px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-</style>