更新用户个人主页

src/components/card/UserCard.vue

@@ -0,0 +1,184 @@
+<template>
+  <el-row>
+    <el-col>
+      <router-link target="_blank" :to="`/user/` + user.userId">
+        <el-avatar>
+          <el-image :src="user.avatarUrl" />
+        </el-avatar>
+      </router-link>
+    </el-col>
+    <el-col>
+      <el-row>
+        <span>{{ user.screenName }}</span>
+      </el-row>
+      <el-row>
+        <span>关注 22</span>
+        <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
+        <span>粉丝 33</span>
+      </el-row>
+      <el-row>
+        <span>生死有命</span>
+      </el-row>
+      <el-row>
+        <el-button
+          type="danger"
+          size="mini"
+          :icon="followButton.icon"
+          @click="followUser(user.userId)"
+        >
+          <span>{{followButton.text}}</span>
+        </el-button>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
+
+export default {
+  name: 'UserCard',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  props: {
+    user: {
+      type: Object,
+      default: null
+    },
+    // 时间前的描述
+    dateTit: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      followButton: {
+        icon: 'el-icon-plus',
+        text: '关注'
+      },
+    }
+  },
+  methods: {
+    followUser(userId) {
+      if (this.followButton.text === '关注') {
+        followUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '已关注'
+            this.followButton.icon = 'el-icon-check'
+          }
+        })
+      } else {
+        unfollowUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '关注'
+            this.followButton.icon = 'el-icon-plus'
+          }
+        })
+      }
+    },
+    sendMessage(userId) {
+      console.log('发送消息')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
+</style>

src/components/card/VideoCard.vue

@@ -28,7 +28,7 @@
             <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.title | ellipsis }}</span>
           </router-link>
         </div>
-        <div style="padding: 14px">
+        <div v-if="video.user !== undefined && video.user !== null" style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
             <router-link target="_blank" :to="`/user/${video.user.userId}`"><i class="el-icon-user"> {{ video.user.screenName }} </i></router-link> · {{ convertTimestamp(video.pubDate) }}
           </span>

src/router/index.js

@@ -12,8 +12,6 @@ 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 FollowingIndex = () => import('views/user/Following')
-const FollowerIndex = () => import('views/user/Follower')
 const ProfileIndex = () => import('views/user/Profile')
 const AvatarIndex = () => import('views/user/Avatar')
 const VipIndex = () => import('views/user/Vip')
@@ -77,16 +75,6 @@ const routes = [
     name: 'HomeIndex',
     component: HomeIndex
   },
-  {
-    path: '/user/:id/following',
-    name: 'FollowingIndex',
-    component: FollowingIndex
-  },
-  {
-    path: '/user/:id/follower',
-    name: 'FollowerIndex',
-    component: FollowerIndex
-  },
   {
     path: '/u/profile',
     name: 'ProfileIndex',

src/views/home/VideoPage.vue

@@ -161,10 +161,11 @@
 </template>
 
 <script>
-import { similarVideo, videoInfo, getVideoComment } from '@/api/video'
 import VideoPlayer from 'components/VideoPlayer'
 import Comment from 'components/comment/Comment'
 import VideoCard from 'components/card/VideoCard'
+import { similarVideo, videoInfo, getVideoComment } from '@/api/video'
+import { collectVideo } from "@/api/collect";
 
 export default {
   name: 'VideoPage',
@@ -324,37 +325,23 @@ export default {
 				}
 			}, */
     // 用户点击收藏
-    collection(vid) {
-      // 1.判断用户是否登录
-      // 1.1 通过cookie获取用户
-      const user = this.$user
-      if (user) {
-        // 用户已登录
-        // console.log(user);
-        // 添加收藏
-        /* userCollection(user.uid, vid).then((res) => {
-          // console.log(res);
-          if (res === 1) {
-            this.collectionNum++
-            this.isCollection = true
-            // 收藏成功
-            this.$notify.success({
-              title: '收藏成功',
-              duration: 2000
-            })
-          }
-        })*/
-      } else {
-        // 用户未登录，给出提示
-        this.$notify({
-          title: '提示',
-          message: '要登录后才可以收藏哦！',
-          type: 'warning',
-          duration: 3000
-        })
-      }
+    collection(videoId) {
+      collectVideo({videoId: videoId}).then(res => {
+        if (res.code === 0) {
+          this.$notify.success({
+            title: '已收藏',
+            duration: 2000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      })
     }
-
   }
 }
 </script>

src/views/user/Follow.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <el-row>
-      <span>关注主页</span>
-    </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,
-    }
-  },
-  created() {
-    const userId = this.$route.params.id
-    getUserInfo(userId).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>

src/views/user/Follower.vue

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

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

@@ -36,13 +36,9 @@
               <span v-if="user.intro === undefined || user.intro === null">此用户没有签名</span>
             </el-row>
             <el-row>
-              <router-link target="_blank" :to="`/user/` + user.userId + '/following'">
-                <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
-              </router-link>
+              <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
               <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <router-link target="_blank" :to="`/user/` + user.userId + '/follower'">
-                <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
-              </router-link>
+              <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
             </el-row>
           </div>
         </el-card>
@@ -65,6 +61,20 @@
               </el-row>
             </div>
           </el-tab-pane>
+          <el-tab-pane label="Ta 的关注" name="following">
+            <div v-if="activeName === 'following'">
+              <el-col v-for="(user, index) in followingList" :key="index" :md="6" :sm="12" :xs="12">
+                <user-card :user="user"></user-card>
+              </el-col>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="Ta 的粉丝" name="follower">
+            <div v-if="activeName === 'follower'">
+              <el-col v-for="(user, index) in followerList" :key="index" :md="6" :sm="12" :xs="12">
+                <user-card :user="user"></user-card>
+              </el-col>
+            </div>
+          </el-tab-pane>
         </el-tabs>
       </el-col>
       <el-col :span="24" class="pagination">
@@ -91,15 +101,16 @@
 </template>
 
 <script>
+import UserCard from '@/components/card/UserCard'
 import StatusCard from '@/components/card/StatusCard'
 import VideoCard from '@/components/card/VideoCard'
-import { getUserInfo, checkRelation, followUser, unfollowUser } from "@/api/user";
+import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
 import { userVideoList } from "@/api/video";
 import { userStatus } from "@/api/status";
 
 export default {
   name: 'Home',
-  components: { StatusCard, VideoCard },
+  components: { UserCard, StatusCard, VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -116,6 +127,8 @@ export default {
       totalPages: 0,
       videoList: [],
       statusList: [],
+      followerList: [],
+      followingList: [],
       showEmpty: false
     }
   },
@@ -169,7 +182,6 @@ export default {
       if (tabName === 'video') {
         console.log('获取视频')
       } else if (tabName === 'status') {
-        console.log('获取状态')
         userStatus(this.userId, 1).then(res => {
           if (res.code === 0) {
             this.statusList = res.data.list
@@ -180,6 +192,18 @@ export default {
             }
           }
         })
+      } else if (tabName === 'following') {
+        getUserFollowing(this.userId).then(res => {
+          if (res.code === 0) {
+            this.followingList = res.data
+          }
+        })
+      } else if (tabName === 'follower') {
+        getUserFollower(this.userId).then(res => {
+          if (res.code === 0) {
+            this.followerList = res.data
+          }
+        })
       }
     },
     followUser(userId) {