更新用户管理相关页面路由

src/assets/js/mixin.js

@@ -197,25 +197,25 @@ export const userMixin = {
       })
     },
     goToProfile() {
-      if (this.$route.path === '/user/profile') {
+      if (this.$route.path === '/u/profile') {
         this.$router.go(0)
         return
       }
-      this.$router.push('/user/profile')
+      this.$router.push('/u/profile')
     },
     goToCollection() {
-      if (this.$route.path === '/user/collection') {
+      if (this.$route.path === '/u/collection') {
         this.$router.go(0)
         return
       }
-      this.$router.push('/user/collection')
+      this.$router.push('/u/collection')
     },
     goToHistory() {
-      if (this.$route.path === '/user/history') {
+      if (this.$route.path === '/u/history') {
         this.$router.go(0)
         return
       }
-      this.$router.push('/user/history')
+      this.$router.push('/u/history')
     },
     // 点击注册
     register() {

src/router/index.js

@@ -11,6 +11,7 @@ const ImagePage = () => import('views/home/ImagePage')
 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 ProfileIndex = () => import('views/user/Profile')
 const CollectionIndex = () => import('views/user/Collection')
 const HistoryIndex = () => import('views/user/History')
@@ -68,16 +69,21 @@ const routes = [
   },
   {
     path: '/user/:id',
+    name: 'HomeIndex',
+    component: HomeIndex
+  },
+  {
+    path: '/u/profile',
     name: 'ProfileIndex',
     component: ProfileIndex
   },
   {
-    path: '/user/collection',
+    path: '/u/collection',
     name: 'CollectionIndex',
     component: CollectionIndex
   },
   {
-    path: '/user/history',
+    path: '/u/history',
     name: 'HistoryIndex',
     component: HistoryIndex
   },

src/views/user/Home.vue

@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <el-row class="movie-list">
+      <el-col :md="24">
+        <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="el-icon-plus"
+              >
+                <span>关注</span>
+              </el-button>
+              <el-button
+                type="danger"
+                size="mini"
+                icon="el-icon-message"
+              >
+                <span>发消息</span>
+              </el-button>
+            </el-row>
+            <el-row>
+              <span v-if="user.intro !== null">{{user.intro}}</span>
+              <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 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>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :md="24" class="movie-list">
+        <el-tabs v-model="activeName" @tab-click='tabClick'>
+          <el-tab-pane label="主页" name="home">
+            <div v-if="activeName === 'home'">
+              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+                <video-card :video="video" />
+              </el-col>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="状态" name="status">
+            <div v-if="activeName === 'status'">
+              <status-card />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+      <el-col :span="24" class="pagination">
+        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          hide-on-single-page
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalPages"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import StatusCard from '@/components/card/StatusCard'
+import VideoCard from '@/components/card/VideoCard'
+import { getUserInfo } from "@/api/user";
+import { userVideoList } from "@/api/video";
+import { userStatus } from "@/api/status";
+
+export default {
+  name: 'Home',
+  components: { StatusCard, VideoCard },
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      user: null,
+      userId: null,
+      activeName: 'home',
+      currentPage: 1,
+      pageSize: 12,
+      totalPages: 0,
+      videoList: []
+    }
+  },
+  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
+        document.title = this.user.screenName + '的个人主页'
+      }
+    })
+
+    this.userVideoListWrapper(1, this.userId)
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.$router.push({
+        path: '/user/' + this.userId + '?pageNumber=' + pageNumber + '&lastId=' + this.lastId,
+        query: {
+          pageNumber: this.currentPage,
+          lastId: this.lastId
+        }
+      });
+
+      // this.videoPageWrapper(this.currentPage, this.lastId)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    tabClick(tab) {
+      const  tabName = tab.name
+      if (tabName === 'home') {
+        console.log('获取主页')
+      } else if (tabName === 'status') {
+        console.log('获取状态')
+        userStatus(this.userId, 1).then(res => {
+          console.log(res)
+        })
+      } else if (tabName === 'video') {
+        console.log('获取视频')
+      }
+    },
+    userVideoListWrapper(pageNumber, userId) {
+      userVideoList(pageNumber, userId).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.videoList = resData.list
+          this.totalPages = resData.totalPages
+          this.lastId = resData.lastId
+        }
+      })
+    }
+  }
+}
+</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/Profile.vue

@@ -1,115 +1,31 @@
 <template>
   <div>
-    <el-row class="movie-list">
-      <el-col :md="24">
-        <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;'" />
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-plus"
-              >
-                <span>关注</span>
-              </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-plus"
-              >
-                <span>发消息</span>
-              </el-button>
-            </el-row>
-            <el-row>
-              <span v-if="user.intro !== null">{{user.intro}}</span>
-              <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 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>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
     <el-row>
-      <el-col :md="24" class="movie-list">
-        <el-tabs v-model="activeName" @tab-click='tabClick'>
-          <el-tab-pane label="主页" name="home">
-            <div v-if="activeName === 'home'">
-              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-                <video-card :video="video" />
-              </el-col>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="状态" name="status">
-            <div v-if="activeName === 'status'">
-              <status-card />
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-      </el-col>
-      <el-col :span="24" class="pagination">
-        <el-pagination
-          background
-          :small="screenWidth <= 768"
-          hide-on-single-page
-          layout="prev, pager, next"
-          :page-size="pageSize"
-          :current-page="currentPage"
-          :total="totalPages"
-          @current-change="handleCurrentChange"
-        />
-      </el-col>
+      <span>账户主页</span>
     </el-row>
   </div>
 </template>
 
 <script>
-import StatusCard from '@/components/card/StatusCard'
-import VideoCard from '@/components/card/VideoCard'
 import { getUserInfo } from "@/api/user";
-import { userVideoList } from "@/api/video";
-import { userStatus } from "@/api/status";
 
 export default {
   name: 'Profile',
-  components: { StatusCard, VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       user: null,
       userId: null,
-      activeName: 'home',
-      currentPage: 1,
-      pageSize: 12,
-      totalPages: 0,
-      videoList: []
     }
   },
   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 => {
+    getUserInfo(10001).then(res => {
       if (res.code === 0) {
         this.user = res.data
-        document.title = this.user.screenName + '的个人主页'
+        document.title = this.user.screenName + '的帐号主页'
       }
     })
-
-    this.userVideoListWrapper(1, this.userId)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -121,43 +37,6 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.$router.push({
-        path: '/user/' + this.userId + '?pageNumber=' + pageNumber + '&lastId=' + this.lastId,
-        query: {
-          pageNumber: this.currentPage,
-          lastId: this.lastId
-        }
-      });
-
-      // this.videoPageWrapper(this.currentPage, this.lastId)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    tabClick(tab) {
-      const  tabName = tab.name
-      if (tabName === 'home') {
-        console.log('获取主页')
-      } else if (tabName === 'status') {
-        console.log('获取状态')
-        userStatus(this.userId, 1).then(res => {
-          console.log(res)
-        })
-      } else if (tabName === 'video') {
-        console.log('获取视频')
-      }
-    },
-    userVideoListWrapper(pageNumber, userId) {
-      userVideoList(pageNumber, userId).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          this.videoList = resData.list
-          this.totalPages = resData.totalPages
-          this.lastId = resData.lastId
-        }
-      })
-    }
   }
 }
 </script>