From 354d610c7ad3c0dddca8e84bd15d6e10d8ea5895 Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Wed, 2 Nov 2022 17:21:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=B3=E6=B3=A8=E7=9A=84bu?=
 =?UTF-8?q?tton=EF=BC=8C=E7=BB=9F=E4=B8=80=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Follow/button.vue       | 127 +++++++++++++++++++++++++
 src/components/HomePage/followList.vue |  25 ++++-
 src/views/study/coursenew.vue          |  44 +--------
 3 files changed, 152 insertions(+), 44 deletions(-)
 create mode 100644 src/components/Follow/button.vue

diff --git a/src/components/Follow/button.vue b/src/components/Follow/button.vue
new file mode 100644
index 00000000..f3e829fb
--- /dev/null
+++ b/src/components/Follow/button.vue
@@ -0,0 +1,127 @@
+<template>
+  <!--关注的button-->
+  <span>
+    <el-button v-loading="loading" v-if="hasFollow" :size="size" class="follow-btn" icon="el-icon-check" title="取消关注" @click="cancelFollow()" >已关注</el-button>
+    <el-button v-loading="loading" v-else :size="size" class="follow-btn" icon="el-icon-plus" title="关注TA" @click="addFollow()" type="primary">关注</el-button>
+  </span>
+</template>
+
+<script>
+  import { mapGetters} from 'vuex';
+  import apiFollow from "@/api/phase2/userfollow.js"
+  export default{
+    name:"followButton",
+    props:{
+       size:{
+          type:String,
+          default:'medium'
+       },
+       data:null,
+       auto:{ //是否自动检查
+          type:Boolean,
+          default:false
+       },
+       has:{
+         type:Boolean,
+         default:false
+       },
+       aid:{
+         type:String,
+         default:''
+       }
+    },
+    mounted(){
+
+       if(this.auto && this.aid){
+          this.autoCheck();
+       }else{
+          this.hasFollow=this.has;
+       }
+    },
+    data(){
+        return{
+          loading:false,
+          hasFollow:false
+        }
+    },
+    computed: {
+      ...mapGetters(['userInfo']),
+    },
+    watch:{
+      has(newVal,oldVal){
+         this.has=newVal;
+         this.hasFollow=newVal;
+         if(newVal!=oldVal && this.auto){
+           this.autoCheck();
+         }
+
+      },
+      aid(newVal){
+          this.aid=newVal;
+      }
+    },
+    methods: {
+        autoCheck(){
+          if(this.aid){
+            apiFollow.checkFllow(this.aid).then(res => {
+              if (res.status == 200) {
+                this.hasFollow = res.result ? true : false;
+              }
+            })
+          }
+
+        },
+        cancelFollow(){
+            if(this.aid){
+              if(this.userInfo.aid==this.aid){
+                this.$message.error("不能对自己操作");
+                return;
+              }
+
+              let $this=this;
+              this.loading=true;
+              apiFollow.remove(this.aid).then(res=>{
+                  if(res.status == 200) {
+                    $this.hasFollow=false;
+                    $this.$message.success("已取消关注");
+                    $this.$emit('cancel',$this.aid,$this.data);
+                  }else {
+                    $this.$message.error("取消关注失败:"+res.message);
+                    $this.$emit('error',$this.aid);
+                  }
+                  this.loading=false;
+              })
+            }
+        },
+        addFollow(){ //添加关注
+          if(this.aid){
+            if(this.userInfo.aid==this.aid){
+              this.$message.error("不能对自己操作");
+              return;
+            }
+            let $this=this;
+            this.loading=true;
+            apiFollow.save(this.aid).then(res=>{
+                if(res.status == 200) {
+                  $this.hasFollow=true;
+                  $this.$message.success("关注成功");
+                  $this.$emit('add',$this.aid,$this.data);
+                } else {
+                  $this.$message.error("关注失败:"+res.message);
+                  $this.$emit('error',$this.aid);
+                }
+                this.loading=false;
+            })
+          }
+        }
+    }
+  }
+</script>
+
+<style scoped>
+  .follow-btn{
+      /* margin-top: 18px;
+      height: 40px;
+      width: 140px; */
+  }
+</style>
diff --git a/src/components/HomePage/followList.vue b/src/components/HomePage/followList.vue
index ec189a94..27325b3c 100644
--- a/src/components/HomePage/followList.vue
+++ b/src/components/HomePage/followList.vue
@@ -23,6 +23,10 @@
                 </p>
                 <p class="portal-summary-text">{{item.userFollow.authorInfo.sign}}</p>
             </div>
+            <div>
+              <followButton :data="index" :has="item.has" :aid="item.userFollow.followId" @cancel="myCancelFollow" @add="myAddFollow"></followButton>
+            </div>
+            <!--
             <div v-if="pageId == userInfo.aid">
                 <el-button plain class="btn" icon="el-icon-check" @click="cancel(item)">取消关注</el-button>
             </div>
@@ -30,6 +34,7 @@
               <el-button class="btn" icon="el-icon-check" v-if="item.has" @click="cancel(item)">取消关注</el-button>
               <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(item)">关注TA</el-button>
             </div>
+            -->
         </div>
         <!--分页没有加-->
           <div style="text-align: center; margin-top:57px;" v-show="follow.count > 0">
@@ -68,8 +73,12 @@
                 </p>
                 <p class="portal-summary-text">{{maPage.userFollow.authorInfo.sign}}</p>
             </div>
-            
+            <div>
+              <followButton :has="maPage.has" :aid="maPage.userFollow.aid"></followButton>
+            </div>
+            <!--
             <div v-if="pageId == userInfo.aid">
+
                 <el-button class="btn" icon="el-icon-check" v-if="maPage.has">已关注</el-button>
                 <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注TA</el-button>
             </div>
@@ -77,6 +86,7 @@
                 <el-button plain class="btn" icon="el-icon-check" v-if="maPage.has" @click="cancel(maPage,2)">取消关注</el-button>
                 <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注TA</el-button>
             </div>
+            -->
         </div>
          <!--分页没有加-->
          <div style="text-align: center; margin-top:57px;" v-show="page.count > 0">
@@ -96,6 +106,7 @@
   </div>
 </template>
 <script>
+import followButton from "@/components/Follow/button.vue";
 import interactBar from "@/components/Portal/interactBar.vue";
 import author from "@/components/Portal/authorInfo.vue";
 import apiFollow from "@/api/phase2/userfollow.js"
@@ -105,7 +116,7 @@ import apiUser from "@/api/system/user.js";
     name:"followList",
     components: {
       interactBar,
-      // timeShow,
+      followButton,
       author
     },
     computed:{
@@ -157,6 +168,12 @@ import apiUser from "@/api/system/user.js";
       toHome(ava) {
             this.$router.push({path:this.$xpage.getHomePath(ava.aid)})
         },
+      myCancelFollow(dataIndex){ //我关注的，我取消关注
+          //this.follow.list.splice(dataIndex,1);
+      },
+      myAddFollow(dataIndex){ //我关注的，我取消关注
+          //this.follow.list.splice(dataIndex,1);
+      },
       toFollow(item) {
         let id = '';
         if(this.active == 2) {
@@ -194,7 +211,7 @@ import apiUser from "@/api/system/user.js";
             } else {
               this.getPage();
             }
-            
+
             //  $this.follow.list.splice(idx,1);
            }
         })
@@ -274,7 +291,7 @@ import apiUser from "@/api/system/user.js";
             } else {
               ids = list.map(item=> item.userFollow.followId);
             }
-            
+
             apiUser.getByIds(ids).then(res => {
                 if (res.status == 200) {
                     list.forEach((item, index) => {
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
index 97568947..eb6f2be5 100644
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -242,8 +242,7 @@
                 <div class="teacher-remark" v-html="item.authorInfo.sign"></div>
               </div>
               <div  style="padding-top:15px;width:70px;">
-                <el-button v-if="current_teacher_follow" v-loading="loading" type="primary" @click="cancelFollow(item)" size="small">已关注</el-button>
-                <el-button v-if="!current_teacher_follow" v-loading="loading" type="primary" @click="toFollow(item)" size="small">+ 关注</el-button>
+                <followButton :auto="true" size="small" :aid="item.teacherId"></followButton>
               </div>
             </div>
           </div>
@@ -256,7 +255,7 @@
 </template>
 <script>
   import { mapGetters } from 'vuex';
-
+  import followButton from "@/components/Follow/button.vue";
   import portalHeader from "@/components/PortalHeader.vue";
   import portalFooter from "@/components/PortalFooter.vue";
   import comments from "@/components/Portal/comments.vue";
@@ -311,7 +310,8 @@
       videoPlayer,
       myNote,
       noteComments,
-      portalFooter
+      portalFooter,
+      followButton
     },
     data() {
       return {
@@ -322,7 +322,6 @@
         notePlay: null,
         intTimeNote: '',
         courestab: 2,//默认是课程评论
-        current_teacher_follow: false, // false - 已关注; true - 未关注
         curCFile: {
           converStatus: 4,
         },
@@ -474,34 +473,6 @@
           }, 1000*60);
 
       },
-      // 取消关注
-      cancelFollow(item) {
-        this.loading = true;
-          apiFollow.remove(item.teacherId).then(res=>{
-            this.loading = false;
-            if(res.status == 200) {
-              this.current_teacher_follow = false;
-            } else {
-              this.$message.error(res.message);
-            }
-          })
-        },
-      //关注功能
-      toFollow(item) {
-        this.loading = true;
-        apiFollow.save(item.teacherId).then(res => {
-          this.loading = false;
-          if (res.status == 200) {
-            this.$message.success("关注成功！");
-            this.current_teacher_follow = true;
-          } else if(res.status == 400){
-            this.$message.warning(res.message);
-            this.current_teacher_follow = false;
-          }else{
-            this.$message.error(res.message);
-          }
-        })
-      },
       //笔记组件触发，播放指定时间
       onPlayVideo(contentId,time){
         //这里需要根据contentId,是否切换到对应的内容的视频的时间
@@ -922,13 +893,6 @@
                 }
               });
 
-              // 检查是否已关注
-              apiFollow.checkFllow(item.teacherId).then(res => {
-                if (res.status == 200) {
-                  this.current_teacher_follow = res.result ? true : false;
-                }
-              })
-
             });
           } else {
             //console.log('加载课程信息失败:'+res.error);