falvpingtai/src/PersonalHomepage.vue

<template>
  <div class="box">
    <div class="header">
      <img class="portrait" :src="'http://lawpro.earnest.pro' + userimg" alt />
      <div class="introduce">
        <p class="name">{{username}}</p>
        <div class="follow">
          <p>
            <span>{{attention}}</span>
            关注我的
          </p>
          <p>
            <span>{{myfollow}}</span>
            我关注的
          </p>
        </div>
      </div>
    </div>
    <div class="classification">
      <div class="page">
        <div :class="types == 4?'select':''" @click="types=4">动态</div>
        <div :class="types == 3?'select':''" @click="types=3">回答</div>
        <div :class="types == 1?'select':''" @click="types=1">文章</div>
        <div :class="types == 2?'select':''" @click="types=2">提问</div>
        <div :class="types == 5?'select':''" @click="types=5">收藏</div>
      </div>
      <div class="list">
        <div v-for="(item,index) in dynamiclist" :key="index">
          <follow v-if="item.status == 3 " :operation="type[item.type] + '了该' + status[item.status]" :day="item.time + '前'" :title="item.title" :nickname="item.nickname" :userimg="'http://lawpro.earnest.pro' + item.img" :num="item.islike" :img="'http://lawpro.earnest.pro' + item.avatar" :text="item.text" :comment="item.comment"></follow>
          <answer v-if="item.status == 1 || item.status == 2" :operation="type[item.type] + '了该' + status[item.status]" :day="item.time + '前'" :title="item.title" :types="item.status"  :id="item.id"></answer>
          <follow v-if="types == 3" operation="发布了该回答" :day="item.time" :title="item.title" :nickname="item.nickname" :userimg="'http://lawpro.earnest.pro' + userimg" :num="item.islike" :img="'http://lawpro.earnest.pro' + item.avatar" :text="item.text" :comment="item.comment"></follow>
          <answer v-if="types==1" operation="发布了该文章" :day="item.time" :title="item.title" types="1" :id="item.id"></answer>
          <answer v-if="types==2" operation="发布了该问题" :day="item.time" :title="item.title"  types="2" :id="item.id"></answer>

        </div>
        
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  background-color: #f6f6f6;
  min-height: 100vh;
  .header {
    width: 100%;
    height: 227px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 51px 30px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .portrait {
      width: 126px;
      height: 126px;
      border-radius: 50%;
      margin-right: 31px;
    }
    .introduce {
      height: 90px;
      display: flex;
      flex-direction: column;

      .name {
        margin: 0;
        font-size: 36px;
        color: #333;
        font-weight: 400;
        margin-bottom: 29px;
      }
      .follow {
        display: flex;
        color: #999;
        font-size: 28px;

        > p {
          display: flex;
          margin-right: 69px;
          > span {
            color: #333;
            display: block;
            min-width: 23px;
          }
        }
      }
    }
  }
  .classification {
    width: 100%;
    background-color: #fff;
    // min-height: 300px;
    box-sizing: border-box;
    padding: 30px 30px;
    .page {
      width: 100%;
      display: flex;
      height: 62px;
      border-bottom: 1px solid #dfdfdf;
      > div {
        width: 100%;
        font-size: 32px;
        text-align: center;

      }
      .select{
          border-bottom: 4px solid #6B9147;
      }
    }
    .list{
        width: 100%;
    }
  }
}
</style>
<script>
import follow from "./components/PersonafFollow"
// import follows from "./components/PersonafFollows"
import answer from "./components/PersonalAnswer"
export default {
  name: "Personal-homepage",
  data() {
    return {
      userimg:"",
      username:"",
      myfollow:"",
      attention:"",
      dynamiclist:[],
      status:['','文章','问题','回答'],
      type:['','点赞','收藏','关注','评论','回答'],
      types:4,
      page:1,
      lock:false
    };
  },
  components:{
      follow,
      answer
  },
  methods:{
    getlist(){
      if(this.lock){
        return ;
      }
      this.lock = true
      this.page += 1
      this.axios.post("http://lawpro.earnest.pro/api/login_main/getUserListDetails",{
      token:localStorage.getItem("token"),
      type:this.types,
      page:this.page
    }).then((res)=>{
      window.console.log(res)
      if(res.data.code == 200){
        if(res.data.data.length == 0){
          // alert(1)

          return ;
        }
        this.dynamiclist = this.dynamiclist.concat(res.data.data)
        this.lock = false
      }
      
    })
    },
    getlists(){
      if(this.lock){
        return ;
      }
      this.lock = true
      this.page += 1
      this.axios.post("http://lawpro.earnest.pro/api/login_main/getUserListDetails",{
      token:localStorage.getItem("token"),
      page:this.page
    }).then((res)=>{
      window.console.log(res)
      if(res.data.code == 200){
        if(res.data.data.length == 0){
          // alert(1)

          return ;
        }
        this.dynamiclist = this.dynamiclist.concat(res.data.data)
        this.lock = false
      }
      
    })
    }
  },
  mounted(){
    
    this.axios.post('http://lawpro.earnest.pro/api/login_main/getUserDetails',{
      token:localStorage.getItem("token")
    }).then((res)=>{
      // window.console.log(res.data)
      if(res.data.code == 200){
        this.userimg = res.data.data.user.avatar,
        this.username = res.data.data.user.nickname,
        this.myfollow = res.data.data.myfollow,
        this.attention = res.data.data.user.attention
      }
    })
    this.axios.post("http://lawpro.earnest.pro/api/login_main/getUserListDetails",{
      token:localStorage.getItem("token"),
      type:4,
      page:1
    }).then((res)=>{
      window.console.log(res)
      if(res.data.code == 200){
        this.dynamiclist = res.data.data
      }
      
    })
    var t = this
    window.$(window).scroll(() => {
            var windowH = window.$(window).height(); //设备可见区域高度
            var documentH = window.$(document).height(); //整个网页的高度（包括未显示的部分）
            var scrollH = window.$(window).scrollTop(); //滚动条滚动上去的高度
            //或者  scrollH = $(document).scrollTop();
            if (windowH + scrollH >= documentH) {
              // do something
              // alert(2);
              window.console.log(1)
              if(this.types == 5){
                t.getlists(0)
              }else{
              t.getlist()

              }
            }
          });
  },
  watch:{
    types(){
      this.page = 0
      this.dynamiclist = []
      this.lock = false;
      this.getlist()
    }
  },
  beforeRouteLeave(){
    window.$(window).scroll(() => {
            
          });
  }
};
</script>