获取他人的主页

pages/u/_id/_select.vue

+<template>
+  <div class="home-container">
+    <div class="home-container__top">
+      <img src="../../../assets/img/personal-cover.png" alt="">
+    </div>
+    <div class="home-container__bottom">
+      <div class="home-container__bottom-center">
+        <div class="bottom-container__bg"></div>
+        <div class="bottom-container">
+          <div class="bottom-left">
+            <user-card :userId="userId"></user-card>
+          </div>
+          <div class="bottom-right">
+            <div class="bottom-right__tab">
+              <div class="tab__left">
+                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/project'}">
+                  <p class="abs"></p>
+                  <p class="word">项目</p>
+                  <p class="line" v-if="selected==='project'"></p>
+                </nuxt-link>
+                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/blog'}">
+                  <p class="abs"></p>
+                  <p class="word">博客</p>
+                  <p class="line" v-if="selected==='blog'"></p>
+                </nuxt-link>
+                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/answer',query:{type:'my'}}">
+                  <p class="abs"></p>
+                  <p class="word">问答</p>
+                  <p class="line" v-if="selected==='answer'"></p>
+                </nuxt-link>
+                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/dynamic'}">
+                  <p class="abs"></p>
+                  <p class="word">动态</p>
+                  <p class="line" v-if="selected==='dynamic'"></p>
+                </nuxt-link>
+                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/info'}">
+                  <p class="abs"></p>
+                  <p class="word">资料</p>
+                  <p class="line" v-if="selected==='info'"></p>
+                </nuxt-link>
+              </div>
+              <p class="tab__right">
+              </p>
+            </div>
+            <div style="min-height:556px">
+
+              <transition name="fade-transform" mode="out-in">
+                <div v-if="selected==='blog'">
+                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" label="换一换">
+                    <project-card   v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.blogId" :info="val"></project-card>
+                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>
+
+                  </card-container>
+                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
+                </div>
+              </transition>
+
+              <transition name="fade-transform" mode="out-in">
+                <div v-if="selected==='project'">
+                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" label="换一换">
+                    <project-card @listenProjectCardUpdate="dataGetProject(1)"  v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.projectId" :info="val"></project-card>
+                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>
+
+                  </card-container>
+                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
+                </div>
+              </transition>
+
+              <transition name="fade-transform" mode="out-in">
+                <div v-if="selected==='answer'">
+                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" label="换一换">
+                    <answer-card v-if="rightList.length>0"  v-for="(val,index) in rightList" :key="val.questionId" :info="val"></answer-card>
+                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>
+
+                  </card-container>
+                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
+                </div>
+              </transition>
+
+              <transition name="fade-transform" mode="out-in">
+                <div v-if="selected==='dynamic'" style="margin-top:16px">
+                  <social-card  @listenSocialCardState="dataGetDynamic(1)" v-for="(val,index) in rightList" :key="val.postId" :info="val"></social-card>
+                  <empty-card  v-if="rightList.length===0" height="556px"></empty-card>
+
+                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
+                </div>
+              </transition>
+
+              <transition name="fade-transform" mode="out-in">
+                <div v-if="selected==='info'">
+                  <card-container  key="container3"  style="margin-top: 16px" title="用户信息" label="换一换">
+                    <empty-card height="556px"></empty-card>
+
+                  </card-container>
+                </div>
+              </transition>
+            </div>
+
+          </div>
+        </div>
+
+        <page-footer></page-footer>
+      </div>
+
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import UserCard from '../../../components/pc/userCard';
+  import EmptyCard from '../../../components/pc/emptyCard';
+  import AnswerCard from '../../../components/pc/answerCard';
+  import Pagination from '../../../components/pc/pagination';
+  import ReleaseCard from '../../../components/pc/releaseCard';
+  import SocialCard from '../../../components/pc/socialContactCard';
+  import ProjectCard from '../../../components/pc/projectCard';
+  import CardContainer from '../../../components/pc/cardContainer';
+  import PageFooter from '../../../components/pc/pageFooter';
+  import config from "../../../action/config";
+
+  export default {
+    layout: 'only-header',
+    data(){
+      return{
+        labelList: ['我的消息','私信'],
+        userId:'',
+        rightList:[],
+        pages:1,
+
+        // selected: this.$route.name
+      }
+    },
+    components:{
+      UserCard,ProjectCard,CardContainer,PageFooter,EmptyCard,SocialCard,ReleaseCard,AnswerCard,Pagination
+    },
+
+    watch:{
+      $route(to,from){
+        if(this.$route.name){
+          this.selected = this.$route.params.id;
+        }
+      }
+    },
+    computed:{
+      rightConTitle(){
+        if(this.selected==='project'){
+          return 'Ta的项目'
+        }
+        if(this.selected==='blog'){
+          return 'Ta的博客'
+        }
+        if(this.selected==='answer'){
+          return 'Ta的问答'
+        }
+        if(this.selected==='dynamic'){
+          return 'Ta的动态'
+        }
+        if(this.selected==='info'){
+          return 'Ta的信息'
+        }
+
+      },
+    },
+
+
+    created(){
+      this.selected = this.$route.params.select;
+      let select = this.$route.params.select;
+      this.userId =  this.$route.params.id;
+      if(select!=='project'&&
+        select!=='blog'&&
+        select!=='answer'&&
+        select!=='dynamic'&&
+        select!=='info'
+      ){
+        this.$router.replace('/')
+      }
+    },
+
+
+    methods:{
+
+      //获取动态list
+      dataGetDynamic(currentPage){
+          this.$axios.$get(config.api.get.Post.otherList+this.user+'/posts', {
+            params: {
+              page: currentPage,
+              size: 10
+            }
+          }).then((response) => {
+            this.rightList = response.data.dataList;
+            this.pages = response.data.totalPage;
+          })
+      },
+
+      //获取创建的问题list
+      dataGetMyAnswer(currentPage){
+          this.$axios.$get(config.api.get.Question.otherCreated+this.userId+'/questions',{
+            params:{
+              page:currentPage,
+              size:10
+            }
+          }).then((response)=>{
+            this.rightList  = response.data.dataList;
+            this.pages  = response.data.totalPage;
+          })
+
+      },
+
+      //获取回答的问题list
+      dataGetNoticeAnswer(currentPage){
+
+          this.$axios.$get(config.api.get.Question.otherParticipated+this.userId+'/question/participated',{
+            params:{
+              page:currentPage,
+              size:10
+            }
+          }).then((response)=>{
+            this.rightList  = response.data.dataList;
+            this.pages = response.data.totalPage;
+          })
+
+      },
+
+      //获取我的项目list
+      dataGetProject(currentPage){
+
+          this.$axios.$get(config.api.get.Project.otherList+this.userId+'/projects', {
+            params: {
+              page: currentPage,
+              size: 10
+            }
+          }).then((response) => {
+            this.rightList = response.data.dataList;
+            this.pages = response.data.totalPage;
+          })
+
+      },
+
+      //获取我的博客list
+      dataGetBlog(currentPage){
+          this.$axios.$get(config.api.get.Blog.otherList+this.userId+'/blogs', {
+            params: {
+              page: currentPage,
+              size: 10
+            }
+          }).then((response) => {
+            this.rightList = response.data.dataList;
+            this.pages = response.data.totalPage;
+          })
+      },
+
+
+
+      changePage(currentPage){
+        //返回页数 请求新的数据
+        if(this.selected==='project'){
+          this.dataGetProject(currentPage)
+        }
+        if(this.selected==='blog'){
+          this.dataGetBlog(currentPage)
+        }
+        if(this.selected==='answer'){
+          this.dataGetMyAnswer(currentPage)
+        }
+        if(this.selected==='dynamic'){
+          this.dataGetDynamic(currentPage)
+        }
+      }
+
+    },
+
+  }
+
+
+</script>
+
+<style lang="scss" scoped>
+
+  html{
+    background-image: $bgImage;
+
+  }
+  .home-container{
+
+
+    align-items: flex-start;
+    .home-container__top{
+      width:100%;
+      height:auto;
+      z-index: 100;
+      position: relative;
+      img{
+        width:100%;
+        min-height:270*$length;
+        background-color:#B9A3D2 ;
+        height:auto;
+      }
+    }
+    .home-container__bottom{
+      position:relative;
+      margin:0 auto;
+      .home-container__bottom-center{
+        position:absolute;
+        top:  -60*$length;
+        left:0;
+        right:0;
+        background-image: $bgImage;
+
+        .bottom-container__bg{
+          background-image: $bgImage;
+          position:absolute;
+          top:  60*$length;
+          left:0;
+          right:0;
+          z-index: -1;
+
+        }
+        .bottom-container{
+          position:relative;
+          z-index: 200;
+          padding-bottom: 32*$length;
+          width: $pageWidth;
+          margin:0 auto;
+          @extend %flex-row-spb;
+          align-items: flex-start;
+          .bottom-left{
+            width:302*$length;
+
+          }
+          .bottom-right{
+            width:938*$length;
+            .bottom-right__tab{
+              box-sizing: border-box;
+              height:62*$length;
+              padding:18*$length 24*$length;
+              border-bottom:1px solid #EFEFEF;
+
+              @extend %flex-row-spb;
+              .tab__left{
+                @extend %flex-row-spb;
+
+                .left__item{
+                  position:relative;
+                  @extend %flex-column-spb;
+                  margin-right: 24*$length;
+
+                  .abs{
+                    position:absolute;
+
+                  }
+
+                  .word{
+                    @include fontStyle(14,19,500,rgba(255,255,255,.6),center);
+                    @extend %animate-transition;
+                    @extend %cursorPointer;
+                    &:hover{
+                      color:#fff
+                    }
+                  }
+                  .line{
+                    position:absolute;
+                    top:32*$length;
+                    margin:0 auto;
+                    left:0;
+                    right:0;
+                    width:16*$length;
+                    height:4*$length;
+                    border-radius:2px  2px 0 0;
+                    background-color: #00AAE6;
+                  }
+                }
+              }
+              .tab__right{
+                @include fontStyle(12,16,500,#999,center);
+                @extend %animate-transition;
+                @extend %cursorPointer;
+                &:hover{
+                  color:#00AAE6
+                }
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+</style>