关注

src/PersonalHomepage.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="box">
     <div class="header">
-      <img class="portrait" src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt />
+      <img class="portrait" :src="'http://lawpro.earnest.pro' + userimg" alt />
       <div class="introduce">
-        <p class="name">啦啦啦</p>
+        <p class="name">{{username}}</p>
         <div class="follow">
           <p>
-            <span>0</span>
+            <span>{{attention}}</span>
             关注我的
           </p>
           <p>
-            <span>0</span>
+            <span>{{myfollow}}</span>
             我关注的
           </p>
         </div>
@@ -18,15 +18,22 @@
     </div>
     <div class="classification">
       <div class="page">
-        <div class="select">动态</div>
+        <div :class="types == 4?'select':''" @click="types=4">动态</div>
-        <div>回答</div>
+        <div :class="types == 3?'select':''" @click="types=3">回答</div>
-        <div>文章</div>
+        <div :class="types == 1?'select':''" @click="types=1">文章</div>
-        <div>提问</div>
+        <div :class="types == 2?'select':''" @click="types=2">提问</div>
-        <div>收藏</div>
+        <div :class="types == 5?'select':''" @click="types=5">收藏</div>
       </div>
       <div class="list">
-          <follow></follow>
+        <div v-for="(item,index) in dynamiclist" :key="index">
-          <answer></answer>
+          <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" ></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" ></answer>
+          <answer v-if="types==2" operation="发布了该问题" :day="item.time" :title="item.title" ></answer>
+
+        </div>
+        
       </div>
     </div>
   </div>
@@ -108,16 +115,131 @@
 </style>
 <script>
 import follow from "./components/PersonafFollow"
+// import follows from "./components/PersonafFollows"
 import answer from "./components/PersonalAnswer"
 export default {
-  name: "Personal homepage",
+  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>

src/components/PersonafFollow.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="PersonafFollow">
     <div class="title">
-      <p>收藏了该回答</p>
+      <p>{{operation}}</p>
-      <p>3天前</p>
+      <p>{{day}}</p>
     </div>
-    <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
+    <div class="center">{{title}}</div>
     <div class="answer">
       <div class="user">
-        <img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset />
+        <img :src="userimg" alt srcset />
         <div>
-          <p>啦啦啦</p>
+          <p>{{nickname}}</p>
-          <p>律师</p>
+          <p>{{role}}</p>
         </div>
       </div>
-      <div class="agree">1345人赞同了该回答</div>
+      <div class="agree">{{num}}人赞同了该回答</div>
       <div class="content">
-        <img src alt srcset />
+        <img :src="img" alt srcset />
         <p>
-            这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明
+            {{text}}
         </p>
       </div>
       <div class="operation">
@@ -27,7 +27,7 @@
           </div>
           <div>
               <img src="../assets/share.png" alt="" srcset="">
-              888评论
+              {{comment}}评论
           </div>
           <div>
               
@@ -124,6 +124,7 @@ export default {
   name: "PersonafFollow",
   data() {
     return {};
-  }
+  },
+  props:['operation','day','title','userimg','nickname','img','role','num','text','comment']
 };
 </script>

src/components/PersonafFollows.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="PersonafFollow">
+    <div class="title">
+      <!-- <p>{{operation}}</p>
+      <p>{{day}}前</p> -->
+    </div>
+    <div class="center">{{title}}</div>
+    <div class="answer">
+      <div class="user">
+        <img :src="userimg" alt srcset />
+        <div>
+          <p>{{nickname}}</p>
+          <p>{{role}}</p>
+        </div>
+      </div>
+      <div class="agree">{{num}}人赞同了该回答</div>
+      <div class="content">
+        <img :src="img" alt srcset />
+        <p>
+            {{text}}
+        </p>
+      </div>
+      <div class="operation">
+          <div>
+              <img src="../assets/share.png" alt="" srcset="">
+              分享
+          </div>
+          <div>
+              <img src="../assets/share.png" alt="" srcset="">
+              {{comment}}评论
+          </div>
+          <div>
+              
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.PersonafFollow {
+  padding: 0 0 39px 0;
+  border-bottom: 1px solid #dfdfdf;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 26px;
+    color: #95998f;
+    // margin-bottom: 28px;
+  }
+  .center {
+    font-size: 30px;
+    color: #000;
+    line-height: 46px;
+  }
+  .answer {
+    .user {
+      display: flex;
+      align-items: center;
+      margin-top: 34px;
+      > img {
+        width: 58px;
+        height: 58px;
+        border-radius: 4px;
+        margin-right: 20px;
+      }
+      > div {
+        display: flex;
+        flex-direction: column;
+        > p {
+          font-size: 24px;
+          color: #000;
+        }
+        > p:last-child {
+          margin-top: 10px;
+          font-size: 24px;
+          color: #999;
+        }
+      }
+    }
+    .agree {
+      margin-top: 29px;
+      font-size: 26px;
+      color: #95998f;
+    }
+    .content {
+      > img {
+        width: 690px;
+        height: 374px;
+        background-color: #000;
+        display: block;
+        margin-top: 39px;
+        margin-bottom: 32px;
+      }
+      > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        line-height: 40px;
+        font-size: 26px;
+      }
+    }
+    .operation{
+        display: flex;
+        margin-top: 30px;
+        >div{
+            margin-right: 60px;
+            font-size: 22px;
+            color: #95998F;
+            >img{
+                width: 17px;
+                height: 17px;
+                margin-right: 11px;
+                
+            }
+        }
+    }
+  }
+}
+</style>
+<script>
+export default {
+  name: "PersonafFollows",
+  data() {
+    return {};
+  },
+  props:['operation','day','title','userimg','nickname','img','role','num','text','comment']
+};
+</script>

src/components/PersonalAnswer.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="PersonalAnswer">
     <div class="title">
-      <p>关注了该问题</p>
+      <p>{{operation}}</p>
-      <p>3天前</p>
+      <p>{{day}}</p>
     </div>
     <div class="center">
-      如何看待正当防卫争议：丽江醉酒男午夜持刀砸门
+      {{title}}
-      90后女子带刀“反杀”?
     </div>
   </div>
 </template>
@@ -33,6 +32,7 @@ export default {
   name: "PersonalAnswer",
   data() {
     return {};
-  }
+  },
+  props:['operation','day','title']
 };
 </script>