解决关注人员关注处理时控制问题

src/api/phase2/userfollow.js

@@ -43,7 +43,7 @@ const page=function (query){
 }
 
 /**
- * 我关注的人列表
+ * 关注我的人列表
  * @param{
  *   pageIndex
  *   pageSize,

src/components/Follow/button.vue

@@ -51,14 +51,15 @@
     watch:{
       has(newVal,oldVal){
          this.has=newVal;
+         console.log(newVal,oldVal,'测试问题');
          this.hasFollow=newVal;
          if(newVal!=oldVal && this.auto){
            this.autoCheck();
          }
 
       },
-      aid(newVal){
+      aid(newVal,oldVal){
-          this.aid=newVal;
+         //this.aid=newVal;
       }
     },
     methods: {
@@ -112,22 +113,21 @@
                     apiUser.getByIds([this.aid]).then(rs => {
                         if (res.status == 200) {
                           let data = {
-                          has:true,
+                            has:true,
-                          userFollow:{
+                            userFollow:{
-                            aid:res.result.aid,
+                              aid:res.result.aid,
-                            followId:res.result.followId,
+                              followId:res.result.followId,
-                            followTime:res.result.followTime,
+                              followTime:res.result.followTime,
-                            id:res.result.id,
+                              id:res.result.id,
-                            authorInfo:rs.result[0],
+                              authorInfo:rs.result[0],
+                            }
                           }
-
+                          $this.$emit('add',data);
-                        }
-                      $this.$emit('add',data);
                         } else {
                         this.$message.error(res.message);
                         }
                     });
-                   
+
                   }
                 } else {
                   $this.$message.error("关注失败:"+res.message);

src/components/HomePage/followList.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <ul class="follow-top-tabs">
-        <li class="follow-home-title tabs-index" @click="tagTab(1)">{{userInfo.aid == pageId ?'我关注的人':'他关注的人'}}<span v-if="active == 1" class="line"></span></li>
+        <li class="follow-home-title tabs-index" @click="tagTab(1)">{{userInfo.aid == pageId ?'我关注的人':'TA关注的人'}}<span v-if="active == 1" class="line"></span></li>
-        <li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注他的人'}}<span v-if="active == 2" class="line"></span></li>
+        <li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注TA的人'}}<span v-if="active == 2" class="line"></span></li>
     </ul>
     <div v-show="active ==1">
         <div class="follow-list" v-for="(item,index) in follow.list" :key="index">
@@ -37,7 +37,7 @@
             -->
         </div>
         <!--分页没有加-->
-          <div style="text-align: center; margin-top:57px;" v-show="follow.count > 0">
+          <div style="text-align: center; margin-top:57px;" v-show="follow.count > follow.pageSize">
             <el-pagination
             background
             @size-change="handleSizeChange"
@@ -74,7 +74,7 @@
                 <p class="portal-summary-text">{{maPage.userFollow.authorInfo.sign}}</p>
             </div>
             <div>
-              <followButton :has="maPage.has" :aid="maPage.userFollow.aid" @add="myFollowAdd"></followButton>
+              <followButton data="maPage.userFollow" :has="maPage.has" :aid="maPage.userFollow.aid" @add="myFollowAdd" @cancel="myFollowCancel"></followButton>
             </div>
             <!--
             <div v-if="pageId == userInfo.aid">
@@ -89,7 +89,7 @@
             -->
         </div>
          <!--分页没有加-->
-         <div style="text-align: center; margin-top:57px;" v-show="page.count > 0">
+         <div style="text-align: center; margin-top:57px;" v-show="followMe.count > followMe.pageSize">
             <el-pagination
             background
             @size-change="handleSizeChange"
@@ -149,76 +149,93 @@ import apiUser from "@/api/system/user.js";
               count:0,
               pageIndex:1,
               pageSize:10
-            },
-            page:{
-              pageIndex:1,
-              pageSize:10,
-              aid:'',
-              count:0
             }
           }
       },
       mounted() {
-            this.pageId = this.$xpage.getHomeId(this.$route);
+          this.pageId = this.$xpage.getHomeId(this.$route);
-            this.$bus.$on('followIndex',(num)=>{
+          this.$bus.$on('followIndex',(num)=>{
-               this.active = num;
+             this.active = num;
-            })
+          })
       },
     methods:{
       toHome(ava) {
             this.$router.push({path:this.$xpage.getHomePath(ava.aid)})
-        },
-      myCancelFollow(dataIndex){ //我关注的，我取消关注
-          //this.follow.list.splice(dataIndex,1);
       },
-      myFollowAdd(data) {
+      myCancelFollow(aid,delIdx){ //我关注的，取消关注操作
-        this.follow.list.push(data);
+          this.getMyPage();
+          // console.log(aid,delIdx,'参数值');
+          // //先从我关注的人中员列表中移除
+          // //this.$nextTick(()=>{
+          // this.follow.list.splice(delIdx,1);
+          // //})
+
+          // // this.follow.list.forEach(one=>{
+          // //    console.log(one.has,one.followId,'存在的用户');
+          // // })
+          // //检查“关注我的”人列表中是否有此人，有此设置设置关注状态
+          // this.followMe.list.some((fme,idx)=>{
+          //   //console.log('关注我的:',fme.userFollow.aid,aid);
+          //   if(fme.userFollow.aid==aid){
+          //      fme.has=false;
+          //      //console.log('设置关注状态');
+          //      //this.$forceUpdate();
+          //      return true
+          //   }
+          //   return false;
+          // });
+
       },
-      myAddFollow(dataIndex){ //我关注的，我取消关注
+      myAddFollow(data){ //我关注的，添加关注
-          //this.follow.list.splice(dataIndex,1);
+        this.getMyPage();
+        //检查“关注我的”人列表中是否有此人，有此设置设置关注状态
+        // this.followMe.list.some((item,idx)=>{
+        //   //console.log('我关注的用户:'+item.userFollow.followId);
+        //   if(item.userFollow.aid==data.userFollow.followId){
+        //      item.has=true;
+        //      return true
+        //   }
+        //   return false;
+        // });
+      },
+      myFollowAdd(data) { //关注我的，添加关注
+        //直接刷新“我关注的”人员列表
+        this.getPage();
+        // 因为转移到新的列表，所以这里需要转化一下
+        // let check=this.follow.list.some((item,idx)=>{
+        //   console.log('我关注的用户:'+item.userFollow.followId,data.userFollow.followId);
+        //   if(item.userFollow.followId==data.userFollow.followId){
+        //      item.has=true;
+        //      return true
+        //   }
+        //   return false;
+        // });
+        // if(!check){
+        //   this.follow.list.push(data);//同步添加“我关注的”列表中
+        // }
+
+      },
+      myFollowCancel(aid){ //关注我的，取消关注
+        //同步，从我关注的列表中移除
+        this.getPage();
+        //console.log('移除用户:'+aid);
+        // let delIdx=-1;
+        // this.follow.list.forEach((item,idx)=>{
+        //   //console.log('我关注的用户:'+item.userFollow.followId);
+        //   if(item.userFollow.followId==aid){
+        //     delIdx=idx;
+        //   }
+        // });
+        // if(delIdx>-1){
+        //   this.follow.list.splice(delIdx,1);
+        // }
       },
-      toFollow(item) {
-        let id = '';
-        if(this.active == 2) {
-          id = item.userFollow.aid;
-        } else {
-          id = item.userFollow.followId;
-        }
-          apiFollow.save(id).then(res=>{
-            if(res.status == 200) {
-              // this.$message.success("关注成功");
-              this.getMyPage();
-            } else {
-              this.$message.error(res.message);
-            }
-          })
-        },
       resetActive(){
         // this.active=1;
         this.follow={list:[],count:0,pageIndex:1,pageSize:10},
         this.followMe={list:[],count:0,pageIndex:1,pageSize:10},
         this.tagTab(this.active);
       },
-      cancel(item,idx) {
-        let $this=this;
-        let id = '';
-        if(idx == 2) {
-          id = item.userFollow.aid;
-        } else {
-          id = item.userFollow.followId;
-        }
-        apiFollow.remove(id).then(res=>{
-           if(res.status == 200) {
-            if(idx == 2) {
-              this.getMyPage()
-            } else {
-              this.getPage();
-            }
-
-            //  $this.follow.list.splice(idx,1);
-           }
-        })
-      },//展示全部
       tagTab(num) {
          this.active = num;
          if(num == 1) {
@@ -253,37 +270,41 @@ import apiUser from "@/api/system/user.js";
 
       },
       getMyPage() {//关注我的，关注他的
-        this.page.aid = this.pageId;
+        let params={
-        this.page.pageIndex=this.followMe.pageIndex;
+          aid:this.pageId,
-        this.page.pageSize=this.followMe.pageSize;
+          pageIndex:this.followMe.pageIndex,
+          pageSize:this.followMe.pageSize
+        }
         let $this=this;
-        apiFollow.mypage(this.page).then(res=>{
+        apiFollow.mypage(params).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;
+               $this.followMe.list = res.result.list;
                //console.log(this.mypageList,'this.mypageList');
-               this.getUserData(res.result.list,2);
+               $this.getUserData(res.result.list,2);
             }else{
               console.log('加载关注我数据错误:'+res.message);
             }
         })
        },
        getPage() { //我关注的，他关注的
-        this.page.aid = this.pageId;
+        let params={
-        this.page.pageIndex=this.follow.pageIndex;
+          aid:this.pageId,
-        this.page.pageSize=this.follow.pageSize;
+          pageIndex:this.follow.pageIndex,
+          pageSize:this.follow.pageSize
+        }
         let $this=this;
-        apiFollow.page(this.page).then(res=>{
+        apiFollow.page(params).then(res=>{
           if(res.status== 200) {
              $this.follow.count = res.result.count;
              res.result.list.forEach(item=>{
                 item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
              })
-             this.follow.list = res.result.list;
+             $this.follow.list = res.result.list;
-             this.getUserData(res.result.list, 1);
+             $this.getUserData(res.result.list, 1);
           }
         })
        },
@@ -308,8 +329,9 @@ import apiUser from "@/api/system/user.js";
                           } else {
                               return false;
                           }
-                    });
+                      });
-                });
+                  });
+                  this.$forceUpdate()
                 } else {
                 this.$message.error(res.message);
                 }

src/views/homepage/page.vue

@@ -259,7 +259,7 @@
             this.$bus.$on('followIndex',(num)=>{
                this.activeName = "7";
                this.$refs.followList.resetActive();
-               this.$refs.followList.getPage();
+               //this.$refs.followList.getPage();
             })
         },
         methods:{
@@ -676,7 +676,7 @@
               }else if(this.activeName == '7'){
                 //单独的分页，所以这里不与当前页面的分页共用
                 this.$refs.followList.resetActive();
-                this.$refs.followList.getPage();
+                //this.$refs.followList.getPage();
                 return
               }
                 if(this.activeName == '8') {