更新用户主页

Dockerfile

@@ -0,0 +1,4 @@
+FROM docker.reghao.cn/nginx/npm:1.21
+
+RUN sed -i 's/8080/8082/' /etc/nginx/conf.d/http.conf
+COPY ./dist/ /opt/webroot/

src/views/user/Profile.vue

@@ -1,59 +1,62 @@
 <template>
   <div>
-    <el-row id="movie-list">
-      <el-col :md="18">
+    <el-row class="movie-list">
+      <el-col :md="24">
         <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
           <div slot="header" class="clearfix">
-            <span>{{user.screenName}}</span>
-            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+            <span>{{ user.screenName }}</span>
+            <el-button style="float: right; padding: 3px 0" type="text">关注</el-button>
           </div>
-<!--          <div :md="6" :sm="12" :xs="12">
-            <router-link target="_blank" :to="`/video/${video.videoId}`">
-              <el-row>
-                <el-col :md="6">
-                  <el-image
-                      lazy
-                      fit="cover"
-                      :src="video.coverUrl"
-                      class="coverImg"
-                  />
-                </el-col>
-                <el-col :md="12">
-                  <div style="padding: 14px">
-                    <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.title | ellipsis }}</span>
-                  </div>
-                </el-col>
-              </el-row>
-              <el-divider />
-            </router-link>
-          </div>-->
-<!--          <div v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-            <article-card :video="video" />
-          </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'">
+              <status-card />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="状态" name="status">
+            <div v-if="activeName === 'status'">
+              <status-card />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="投稿" name="video">
+            <video-card v-if="activeName === 'video'" />
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import ArticleCard from 'components/card/ArticleCard'
-import HotList from 'components/hotlist/HotList'
+import StatusCard from '@/components/card/StatusCard'
+import VideoCard from '@/components/card/VideoCard'
+import AudioCard from '@/components/card/AudioCard'
+import ImageCard from '@/components/card/ImageCard'
+import ArticleCard from '@/components/card/ArticleCard'
 import { getUserInfo } from "@/api/user";
 
 export default {
   name: 'Profile',
-  components: { HotList, ArticleCard },
+  components: { StatusCard, VideoCard, AudioCard, ImageCard, ArticleCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      user: null
+      user: null,
+      userId: null,
+      activeName: 'home'
     }
   },
   created() {
-    const userId = this.$route.params.id
-    getUserInfo(userId).then(res => {
+    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
       }
@@ -75,13 +78,31 @@ export default {
       this.$store.dispatch('getPageBean')
       // 回到顶部
       scrollTo(0, 0)
+    },
+    tabClick(tab) {
+      const index = tab.index
+      console.log(index)
+      if (index === 0) {
+        const path = '/user/' + this.userId + '/status'
+        this.$router.push({path: path});
+      } else if (index === 1) {
+        const path = '/user/' + this.userId + '/video'
+        console.log(path)
+        this.$router.push({path: path});
+      } else if (index === 2) {
+        this.$router.push({path: '/user/' + this.userId + '/audio'});
+      } else if (index === 3) {
+        this.$router.push({path: '/user/' + this.userId + '/image'});
+      } else if (index === 4) {
+        this.$router.push({path: '/user/' + this.userId + '/article'});
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-#movie-list {
+.movie-list {
   padding-top: 15px;
   padding-left: 6%;
   padding-right: 6%;
@@ -94,7 +115,7 @@ export default {
 
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
-  #movie-list {
+  .movie-list {
     padding-top: 8px;
     padding-left: 0.5%;
     padding-right: 0.5%;