修改用户主页

src/router/index.js

@@ -108,9 +108,51 @@ const routes = [
       {
         path: '/u/:userId',
         name: 'UserHome',
-        component: () => import('@/views/user/home.vue'),
+        component: () => import('@/views/user/user-home.vue'),
         meta: { title: '用户主页' }
       },
+      {
+        path: '/u/:userId/post',
+        name: 'UserCenter',
+        component: () => import('@/views/user/user-post.vue'),
+        meta: {
+          title: '用户投稿'
+        },
+        children: [
+          {
+            path: '/u/:userId/video',
+            name: 'UserPost',
+            component: () => import('@/views/user/user-video.vue'),
+            meta: { title: '视频投稿' }
+          },
+          {
+            path: '/u/:userId/audio',
+            name: 'UserPost',
+            component: () => import('@/views/user/user-audio.vue'),
+            meta: { title: '音频投稿' }
+          },
+          {
+            path: '/u/:userId/article',
+            name: 'UserPost',
+            component: () => import('@/views/user/user-article.vue'),
+            meta: { title: '专栏投稿' }
+          },
+          {
+            path: '/u/:userId/album',
+            name: 'UserPost',
+            component: () => import('@/views/user/user-album.vue'),
+            meta: { title: '用户相薄' }
+          }
+        ]
+      },
+      {
+        path: '/u/:userId/status',
+        name: 'UserStatus',
+        component: () => import('@/views/user/user-status.vue'),
+        meta: {
+          title: '用户状态'
+        }
+      },
       {
         path: '/user',
         name: 'UserCenter',

src/views/user/user-album.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container>
+    <p>
+      用户相册
+    </p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+</style>

src/views/user/user-article.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container>
+    <p>
+      用户文章
+    </p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+</style>

src/views/user/user-audio.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container>
+    <p>
+      用户音频
+    </p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+</style>

src/views/user/user-home.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <v-card>
+      <!--<v-container fill-height fluid style="padding: 0px;">
+      <v-row>
+        <v-col style="padding: 0px;">
+          <v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
+        </v-col>
+      </v-row>
+    </v-container>-->
+      <v-container fill-height>
+        <v-row align="center">
+          <v-col
+            cols="12"
+            md="8"
+          >
+            <v-avatar size="80" style="float: left;">
+              <v-img :src="userInfo.avatarUrl" />
+            </v-avatar>
+            <h2 style="margin-top: 20px;margin-left: 100px;">
+              <!--{{ userInfo.username }}-->
+              {{ userInfo.screenName }}
+              <!--<v-chip color="yellow" @click="goToVip()">
+                <v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">
+                小会员
+              </v-chip>-->
+            </h2>
+          </v-col>
+          <v-col
+            v-if="userInfo && userInfo.userId !== loginUserId"
+            cols="6"
+            md="4"
+            class="hidden-sm-and-down ml-0 pl-4"
+          >
+            <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
+            <v-btn color="primary" @click="followUser">关注TA</v-btn>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            {{ userInfo.intro }}
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col
+            v-if="userInfo || userInfo.userId !== userId"
+            cols="6"
+            md="4"
+          >
+            关注数: {{ userInfo.followingCount }}
+            粉丝数: {{ userInfo.followerCount }}
+          </v-col>
+        </v-row>
+        <v-tabs>
+          <v-tab @click="selectTab(1)">主页</v-tab>
+          <v-tab @click="selectTab(2)">状态</v-tab>
+          <v-tab @click="selectTab(3)">投稿</v-tab>
+        </v-tabs>
+      </v-container>
+    </v-card>
+    <v-divider />
+    <v-divider />
+    <v-divider />
+    <v-divider />
+    <v-divider />
+    <v-divider />
+    <v-card>
+      <v-container fill-height>
+        <div id="top" />
+        <v-row v-if="cardType === 'video'">
+          <v-col
+            v-for="item in cardList"
+            :key="item.videoId"
+          >
+            <video-card :video="item" />
+          </v-col>
+        </v-row>
+        <v-row v-if="cardType === 'status'">
+          <v-col
+            v-for="item in cardList"
+            :key="item.statusId"
+          >
+            <status-card :item="item" />
+          </v-col>
+        </v-row>
+        <v-row v-if="cardType === 'answer'">
+          <v-col
+            v-for="item in cardList"
+            :key="item.audioId"
+          >
+            <audio-card :item="item" />
+          </v-col>
+        </v-row>
+      </v-container>
+      <v-divider />
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { userVideoList } from '@/api/media/video'
+import { getUserInfo } from '@/api/user/user'
+import Power from '@/utils/check-power.vue'
+import TimeUtil from '@/utils/time-util.vue'
+
+import StatusCard from '@/components/card/status-card'
+import VideoCard from '@/components/card/video-card.vue'
+import AudioCard from '@/components/card/audio-card.vue'
+
+export default {
+  name: 'UserHome',
+  components: {
+    StatusCard,
+    VideoCard,
+    AudioCard
+  },
+  data() {
+    return {
+      TimeUtil,
+      Power,
+      loginUserId: 0,
+      userId: 0,
+      userInfo: {},
+      cardType: null,
+      cardList: [],
+      page: 1,
+      type: 0
+    }
+  },
+  created() {
+    const userIdStr = this.$route.params.userId
+    if (userIdStr === undefined) {
+      // 从"个人中心"加载
+      this.loginUserId = this.$store.state.user.userInfo.userId
+      this.userId = this.$store.state.user.userInfo.userId
+      this.userInfo = this.$store.state.user.userInfo
+      document.title = '我的主页'
+    } else {
+      this.userId = parseInt(userIdStr)
+      this.getUserInfo1(this.userId)
+    }
+    this.getVideoList(this.page)
+  },
+  methods: {
+    selectTab(type) {
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      if (type === 1) {
+        this.$router.push('/u/' + this.userId + '/post')
+        /* this.initPagerParam()
+        this.getVideoList(1)
+        this.$vuetify.goTo(type)*/
+      } else if (type === 2) {
+        this.$router.push('/u/' + this.userId + '/status')
+        /* this.initPagerParam()
+        this.getStatusList(1)
+        this.$vuetify.goTo(type)*/
+      } else if (type === 3) {
+        this.$router.push('/u/' + this.userId + '/post')
+        /* this.initPagerParam()
+        this.getAnswerList(1)
+        this.$vuetify.goTo(type)*/
+      }
+    },
+    getUserInfo1(userId) {
+      getUserInfo(userId).then(res => {
+        if (res.code === 0) {
+          this.userInfo = res.data
+          document.title = this.userInfo.screenName + ' 的主页'
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    getVideoList(page) {
+      userVideoList(page, this.userId).then(res => {
+        if (res.code === 0) {
+          this.cardType = 'video'
+          this.$vuetify.goTo(0)
+
+          const pageList = res.data
+          this.cardList.splice(0, this.cardList.length)
+          for (const item of pageList.list) {
+            this.cardList.push(item)
+          }
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    goToVip() {
+      this.$router.push('/vip')
+    },
+    goToStudio() {
+      this.$router.push('/studio')
+    },
+    goToSetting() {
+      this.$router.push('/user/account')
+    },
+    followUser() {
+      console.log('关注用户')
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/user/user-post.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="2">
+        <v-sheet rounded="lg">
+          <v-list color="transparent">
+            <router-link v-for="item in items" :key="item.text" :to="item.link">
+              <v-list-item
+                link
+              >
+                <v-list-item-action>
+                  <v-icon>{{ item.icon }}</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ item.text }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </router-link>
+          </v-list>
+        </v-sheet>
+      </v-col>
+      <v-col>
+        <v-sheet
+          min-height="70vh"
+          rounded="lg"
+        >
+          <router-view />
+        </v-sheet>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    userId: 0,
+    items: [
+    ]
+  }),
+  mounted() {
+  },
+  created() {
+    const userIdStr = this.$route.params.userId
+    const userId = parseInt(userIdStr)
+    this.items = [
+      { icon: 'mdi-account-multiple', text: '视频', link: '/u/' + userId + '/video' },
+      { icon: 'mdi-account-multiple', text: '音频', link: '/u/' + userId + '/audio' },
+      { icon: 'mdi-account-multiple', text: '专栏', link: '/u/' + userId + '/article' },
+      { icon: 'mdi-account-multiple', text: '相薄', link: '/u/' + userId + '/album' }
+    ]
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+</style>

src/views/user/user-status.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container>
+    <p>
+      用户状态
+    </p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+</style>

src/views/user/user-video.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container>
+    <p>
+      用户视频
+    </p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+</style>

src/views/video/video.vue

@@ -202,8 +202,8 @@
           <v-divider />
           <v-row>
             <v-col>
-              <span >{{videoData.tags}}</span>
-<!--              <span v-for="item in videoData.tags" :key="item">
+              <span>{{ videoData.tags }}</span>
+              <!--              <span v-for="item in videoData.tags" :key="item">
                 <v-btn rounded small text color="primary" dark @click="jumpToTagPage(item)">{{ item }}</v-btn>
               </span>-->
             </v-col>