留言

src/components/HomePage/followList.vue

@@ -1,19 +1,32 @@
 <template>
   <div>
     <ul class="follow-top-tabs">
-        <li class="follow-home-title tabs-index" @click="tagTab(1)">他关注的人<span v-if="active == 1" class="line"></span></li>
-        <li class="follow-home-title tabs-index" @click="tagTab(2)">关注他的人<span v-if="active == 2" class="line"></span></li>
+        <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(2)">{{userInfo.aid == pageId ?'关注我的人':'关注他的人'}}<span v-if="active == 2" class="line"></span></li>
     </ul>
     <div v-if="followList.length > 0">
-        <div class="follow-list" v-for="item in followList">
-            <div><img style="width:60px;height:60" src="/images/Avatarwoman.png"/></div>
+        <div class="follow-list" v-for="item in followList" :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">
+                  <div v-if="item.authorInfo.sex == null" style="border-radius: 50%;width: 60px;height: 60px;"></div>
+                  <div v-else>
+                    <div v-if="item.authorInfo.sex === 1 "><img style="width:60px;height:60" src="../../../public/images/Avatarman.png" alt=""></div>
+                    <div v-else><img style="width:60px;height:60" src="../../../public/images/Avatarwoman.png" alt=""></div>
+                  </div>
+                </div>
+              <!-- <img style="width:60px;height:60" :src="item.authorInfo.avatar"/> -->
+            </div>
             <div class="follow-center"> 
-                <p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">小王<img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /></p>
-                <p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
+                <p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">{{item.authorInfo.name}}
+                  <!-- <img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /> -->
+                </p>
+                <p class="portal-summary-text">{{item.authorInfo.sign}}</p>
             </div>
             <div>
-                <!-- <el-button plain class="btn" icon="el-icon-check">已关注</el-button> -->
-                <el-button type="primary" class="btn" icon="el-icon-plus">关注他</el-button>
+                <el-button plain class="btn" icon="el-icon-check" v-if="pageId == userInfo.aid && active == 1" @click="cancel(item)">取消关注</el-button>
+                <el-button type="primary" class="btn" v-if="active == 2" icon="el-icon-plus">关注他</el-button>
+                <el-button class="btn" icon="el-icon-plus" v-if="active == 2">已关注</el-button>
             </div>
         </div>
     </div>
@@ -27,6 +40,8 @@
 import interactBar from "@/components/Portal/interactBar.vue";
 import author from "@/components/Portal/authorInfo.vue";
 import apiFollow from "@/api/phase2/userfollow.js"
+import { mapGetters,mapActions } from 'vuex';
+import apiUser from "@/api/system/user.js";
   export default{
     name:"articleList",
     components: {
@@ -34,13 +49,20 @@ import apiFollow from "@/api/phase2/userfollow.js"
       // timeShow,
       author
     },
+    computed:{
+    ...mapGetters(['userInfo']),
+          avatarText(){
+              return userAvatarText(this.userInfo.name);
+          }
+      },
       data(){
           return{
+            baseUrl:process.env.VUE_APP_FILE_BASE_URL,
             followList:[],
             active:1,
             pageId:'',
-            pageList:[],
-            mypageList:[],
+            // pageList:[],
+            // mypageList:[],
             page:{
               pageIndex:1,
               pageSize:10,
@@ -50,20 +72,34 @@ import apiFollow from "@/api/phase2/userfollow.js"
       },
       mounted() {
             this.pageId = this.$route.query.id;
-            this.getMyPage();
-            this.getPage();
       },
   methods:{
+    cancel(item) {
+      apiFollow.remove(item.followId).then(res=>{
+         if(res.status == 200) {
+           this.getPage()
+         }
+      })
+    },
      //展示全部
      tagTab(num) {
        this.active = num;
+       if(num == 1) {
+         this.getPage()
+       } else {
+         this.getMyPage()
+       }
      },
      getMyPage() {//关注我的，关注他的
       this.page.aid = this.pageId;
       apiFollow.mypage(this.page).then(res=>{
         if(res.status== 200) {
            this.count = res.result.count;
-           this.mypageList = res.result.list;
+           res.result.list.forEach(item=>{
+            item.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null }
+           })
+           this.followList = res.result.list;
+           this.getUserData(res.result.list);
         }
       })
      },
@@ -72,11 +108,41 @@ import apiFollow from "@/api/phase2/userfollow.js"
       apiFollow.page(this.page).then(res=>{
         if(res.status== 200) {
            this.count = res.result.count;
-           this.pageList = res.result.list;
+           res.result.list.forEach(item=>{
+            item.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null }
+           })
+           this.followList = res.result.list;
+           this.getUserData(res.result.list);
         }
       })
-     }
-   
+     },
+     getUserData(list) {
+        let ids = [];
+        if(this.active == 1) {
+          ids = list.map(item=> item.followId);
+        } else {
+          ids = list.map(item=> item.aid);
+        }
+          apiUser.getByIds(ids).then(res => {
+              if (res.status == 200) {
+                  list.forEach((item, index) => {
+                      res.result.some(author => {
+                      if (this.active == 1 && author.aid == item.followId) {
+                          item.authorInfo = author;
+                          return true;
+                      } else if ( this.active == 2 && author.aid == item.aid) {
+                          item.authorInfo = author;
+                          return true;
+                      } else {
+                          return false;
+                      }
+                  });
+              });
+              } else {
+              this.$message.error(res.message);
+              }
+          });
+       },
    }
   }
 </script>

src/components/HomePage/homePage.vue

@@ -21,8 +21,9 @@
                      <div>LV.1</div>
                      <span style="color: #A3680A;margin-left:12px;line-height: 24px;">经验值：367</span>
                  </div>
-                 <el-button round plain class="btn-user" size="small">关注TA</el-button>
-                 <el-button round plain class="btn-user" size="small"><router-link to="/homePage/leavingMessage">去留言</router-link></el-button>
+                 <el-button round plain class="btn-user" size="small" v-if="pageId != userInfo.aid && !isFollowHas" @click="toFollow()">关注TA</el-button>
+                 <el-button round plain class="btn-user" size="small" v-if="isFollowHas">已关注</el-button>
+                 <el-button round plain class="btn-user" size="small"><router-link :to="'/homePage/leavingMessage?id='+pageId">去留言</router-link></el-button>
               </div>
               <div class="content-bottom">
                 <p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
@@ -64,7 +65,8 @@
   <script>
   import {userAvatarText,cutFullName} from "@/utils/tools.js";
     import { mapGetters } from 'vuex'
-    import apiStart from '@/api/phase2/stat.js'
+    import apiStart from '@/api/phase2/stat.js';
+    import apiFollow from "@/api/phase2/userfollow.js"
     export default {
       name: 'UcHeader',
       computed:{
@@ -85,20 +87,43 @@
           },
           orgInfo:'',
           sex:'',
+          pageId:'',
+          isFollowHas:false,
         }
       },
       mounted() {
+        this.pageId = this.$route.query.id;
          this.sex = this.userInfo.sex;
         // 判断路由是进入的学员默认页面就重置setCurIdentity
         if(this.$route.path == '/uc/study/task' || this.$route.path == '/study/index'){
           this.setCurIdentity(1);
         }
-        //let testName='京东方科技集团股份有限公司/北京中祥英科技有限公司/技术中心';
-        //this.orgInfo=cutFullName(testName,1);
         this.orgInfo=cutFullName(this.userInfo.departFullName,1);
         this.getInfo();
+        if(this.pageId !== this.userInfo.aid) {
+          this.followHas();
+        }
       },
       methods:{
+        followHas() {
+          apiFollow.has(this.pageId).then(res=>{
+            if(res.status == 200) {
+               this.isFollowHas = res.result;
+            } else {
+              this.$message.error(res.message);
+            }
+          })
+        },
+        toFollow() {
+          apiFollow.save(this.pageId).then(res=>{
+            if(res.status == 200) {
+              this.$message.success(res.message);
+              this.followHas();
+            } else {
+              this.$message.error(res.message);
+            }
+          })
+        },
         getInfo(){
           apiStart.userTotal(this.userInfo.aid,[10,11,30]).then(res=>{
              if(res.status == 200 && res.result.length > 0) {