个人主页，关注我的，和我关注的人

src/components/HomePage/followList.vue

@@ -5,7 +5,7 @@
         <li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注他的人'}}<span v-if="active == 2" class="line"></span></li>
     </ul>
     <div v-show="active ==1">
-        <div class="follow-list" v-for="item in followList" :key="item.id">
+        <div class="follow-list" v-for="item in follow.list" :key="item.id">
             <div style="width:60px;height:60">
               <el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+item.authorInfo.avatar" v-if="item.authorInfo.avatar"></el-avatar>
               <div v-else class="uavatar">
@@ -30,16 +30,16 @@
             </div>
         </div>
         <!--分页没有加-->
-          <div style="text-align: center; margin-top:57px;" v-show="page.count > 0">
+          <div style="text-align: center; margin-top:57px;" v-show="follow.count > 0">
             <el-pagination
             background
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-            :current-page="page.pageIndex"
+            :current-page="follow.pageIndex"
             :page-sizes="[10, 20, 30, 40]"
-            :page-size="page.pageSize"
+            :page-size="follow.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
-            :total="page.count">
+            :total="follow.count">
             </el-pagination>
         </div>
     </div>
@@ -48,7 +48,7 @@
         <p class="text">还没有关注的人</p>
     </div>
     <div v-show="active == 2">
-        <div class="follow-list" v-for="(maPage,index) in mypageList" :key="index">
+        <div class="follow-list" v-for="(maPage,index) in followMe.list" :key="index">
             <div style="width:60px;height:60">
               <el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+maPage.userFollow.authorInfo.avatar" v-if="maPage.userFollow.authorInfo.avatar"></el-avatar>
               <div v-else class="uavatar">
@@ -77,11 +77,11 @@
             background
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-            :current-page="page.pageIndex"
+            :current-page="followMe.pageIndex"
             :page-sizes="[10, 20, 30, 40]"
-            :page-size="page.pageSize"
+            :page-size="followMe.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
-            :total="page.count">
+            :total="followMe.count">
             </el-pagination>
         </div>
     </div>
@@ -95,7 +95,7 @@ import apiFollow from "@/api/phase2/userfollow.js"
 import { mapGetters,mapActions } from 'vuex';
 import apiUser from "@/api/system/user.js";
   export default{
-    name:"articleList",
+    name:"followList",
     components: {
       interactBar,
       // timeShow,
@@ -107,9 +107,9 @@ import apiUser from "@/api/system/user.js";
               return userAvatarText(this.userInfo.name);
           },
           showEmpty(){ //是否显示空信息内容
-            if(this.active==1 && this.followList.length==0){
+            if(this.active==1 && this.follow.list.length==0){
                return true;
-            }else if(this.active==2 && this.mypageList.length==0){
+            }else if(this.active==2 && this.followMe.list.length==0){
                return true;
             }
             return false;
@@ -118,11 +118,20 @@ import apiUser from "@/api/system/user.js";
       data(){
           return{
             baseUrl:process.env.VUE_APP_FILE_BASE_URL,
-            followList:[],
             active:1,
             pageId:'',
-            // pageList:[],
-            mypageList:[],
+            follow:{
+              list:[],
+              count:0,
+              pageIndex:1,
+              pageSize:10
+            },
+            followMe:{
+              list:[],
+              count:0,
+              pageIndex:1,
+              pageSize:10
+            },
             page:{
               pageIndex:1,
               pageSize:10,
@@ -135,70 +144,84 @@ import apiUser from "@/api/system/user.js";
             this.pageId = this.$xpage.getHomeId(this.$route);
       },
     methods:{
-       
-      cancel(item) {
+      resetActive(){
+        this.active=1;
+        this.follow={list:[],count:0,pageIndex:1,pageSize:10},
+        this.followMe={list:[],count:0,pageIndex:1,pageSize:10},
+        this.tagTab(1);
+      },
+      cancel(item,idx) {
+        let $this=this;
         apiFollow.remove(item.followId).then(res=>{
            if(res.status == 200) {
-             this.getPage()
-             
+             $this.follow.list.splice(idx,1);
            }
         })
-      },
-       //展示全部
-       tagTab(num) {
+      },//展示全部
+      tagTab(num) {
          this.active = num;
          if(num == 1) {
+           if(this.follow.list.length==0){
              this.getPage()
-
-          //  if(this.followList.length==0){
-          //    this.getPage()
-          //  }
+           }
 
          } else {
-            this.getMyPage()
-
-          //  if(this.mypageList.length==0){
-          //   this.getMyPage()
-          //  }
+           if(this.followMe.list.length==0){
+             this.getMyPage()
+           }
          }
        },
        handleSizeChange(val) {
-                this.page.pageSize = val;
-                this.page.pageIndex = 1;
-                this.getPage()
-                this.getMyPage()
-            },
-      handleCurrentChange(val) {
-                this.page.pageIndex = val;
-                this.getPage()
-                this.getMyPage()
-          },
-       getMyPage() {//关注我的，关注他的
-        this.page.aid = this.pageId;
-        apiFollow.mypage(this.page).then(res=>{
-             this.page.count = res.result.count;
+         if(this.active==1){
+           this.follow={list:[],count:0,pageIndex:1,pageSize:val};
+           this.getPage()
+         }else{
+           this.followMe={list:[],count:0,pageIndex:1,pageSize:val};
+           this.getMyPage()
+         }
 
-          if(res.status== 200) {
-             this.page.count = res.result.count;
-             res.result.list.forEach(item=>{
-              item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
-             })
-             this.mypageList = res.result.list;
-             console.log(this.mypageList,'this.mypageList');
-             this.getUserData(res.result.list);
-          }
+      },
+      handleCurrentChange(val) {
+        if(this.active==1){
+          this.follow.pageIndex=val;
+          this.getPage()
+        }else{
+          this.followMe.pageIndex=val;
+          this.getMyPage()
+        }
+
+      },
+      getMyPage() {//关注我的，关注他的
+        this.page.aid = this.pageId;
+        this.page.pageIndex=this.followMe.pageIndex;
+        this.page.pageSize=this.followMe.pageSize;
+        let $this=this;
+        apiFollow.mypage(this.page).then(res=>{
+            if(res.status== 200) {
+               $this.followMe.count = res.result.count;
+               res.result.list.forEach(item=>{
+                  item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
+               })
+               this.followMe.list = res.result.list;
+               //console.log(this.mypageList,'this.mypageList');
+               this.getUserData(res.result.list);
+            }else{
+              console.log('加载关注我数据错误:'+res.message);
+            }
         })
        },
        getPage() { //我关注的，他关注的
         this.page.aid = this.pageId;
+        this.page.pageIndex=this.follow.pageIndex;
+        this.page.pageSize=this.follow.pageSize;
+        let $this=this;
         apiFollow.page(this.page).then(res=>{
-             this.page.count = res.result.count;
           if(res.status== 200) {
-             this.page.count = res.result.count;
+             $this.follow.count = res.result.count;
              res.result.list.forEach(item=>{
-              item.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
+                item.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
              })
-             this.followList = res.result.list;
+             this.follow.list = res.result.list;
              this.getUserData(res.result.list);
           }
         })