From 8a05c78ac2e55aae38db35bca6f2d892778cedc7 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 12 Oct 2021 00:12:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=89=E4=B8=9D=E5=85=B3=E6=B3=A8=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/message/ChatDetail.vue             |   4 +-
 src/pages/message/Fans.vue                   |  36 ++--
 src/pages/message/components/BlockDialog.vue |   2 +-
 src/pages/people/components/People.vue       |  21 ++-
 src/pages/people/components/Peoples.vue      | 179 +++++++++++++++++++
 src/utils/mixin.js                           |   9 +-
 6 files changed, 226 insertions(+), 25 deletions(-)
 create mode 100644 src/pages/people/components/Peoples.vue

diff --git a/src/pages/message/ChatDetail.vue b/src/pages/message/ChatDetail.vue
index a1d0ea7..764b98e 100644
--- a/src/pages/message/ChatDetail.vue
+++ b/src/pages/message/ChatDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ChatDetail">
+  <div id="ChatDetail">
     <BaseHeader>
       <template v-slot:center>
         <span class="f16">聊天详情</span>
@@ -91,7 +91,7 @@ export default {
 <style scoped lang="less">
 @import "../../assets/less/index";
 
-.ChatDetail {
+#ChatDetail {
   position: fixed;
   left: 0;
   right: 0;
diff --git a/src/pages/message/Fans.vue b/src/pages/message/Fans.vue
index 6411ef0..0b065eb 100644
--- a/src/pages/message/Fans.vue
+++ b/src/pages/message/Fans.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Fans">
+  <div id="Fans">
     <BaseHeader>
       <template v-slot:center>
         <span class="f16">粉丝</span>
@@ -7,19 +7,16 @@
     </BaseHeader>
     <div class="content">
       <Scroll @pulldown="loadData">
-        <People v-for="item in friends.all" :people="item" mode="fans"></People>
-        <div class="line mt1r"></div>
+        <Peoples v-model:list="fans"
+                 :loading="loading"
+                 mode="fans"/>
         <div class="title">
           <span>朋友推荐</span>
           <img src="../../assets/img/icon/about-gray.png" alt="">
         </div>
-        <transition-group name="list-complete" tag="div" class="people-wrapper">
-          <People v-for="(item,index) in recommend"
-                  :key="item.id"
-                  :people="item"
-                  @remove="remove(index)"
-                  mode="recommend"/>
-        </transition-group>
+        <Peoples v-model:list="recommend"
+                 :loading="loading"
+                 mode="recommend"/>
         <Loading :is-full-screen="false" v-if="loading"/>
       </Scroll>
     </div>
@@ -30,18 +27,21 @@ import {mapState} from "vuex";
 import People from "../people/components/People";
 import Scroll from "../../components/Scroll";
 import Loading from "../../components/Loading";
+import Peoples from "../people/components/Peoples";
 
 export default {
   name: "Fans",
   components: {
     Scroll,
     People,
-    Loading
+    Loading,
+    Peoples
   },
   data() {
     return {
       loading: false,
-      recommend: []
+      recommend: [],
+      fans: [],
     }
   },
   computed: {
@@ -49,6 +49,10 @@ export default {
   },
   created() {
     this.recommend = this.$clone(this.friends.all)
+    this.fans = this.$clone(this.friends.all)
+    this.recommend.map(v => {
+      v.type = -1
+    })
   },
   methods: {
     remove(index) {
@@ -60,7 +64,11 @@ export default {
       this.loading = true
       await this.$sleep(500)
       this.loading = false
-       this.recommend = this.recommend.concat(this.friends.all)
+      let temp = this.$clone(this.friends.all)
+      temp.map(v => {
+        v.type = -1
+      })
+      this.recommend = this.recommend.concat(temp)
     }
   }
 }
@@ -79,7 +87,7 @@ export default {
   position: absolute;
 }
 
-.Fans {
+#Fans {
   position: fixed;
   left: 0;
   right: 0;
diff --git a/src/pages/message/components/BlockDialog.vue b/src/pages/message/components/BlockDialog.vue
index f033d57..3287ebc 100644
--- a/src/pages/message/components/BlockDialog.vue
+++ b/src/pages/message/components/BlockDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <from-bottom-dialog
-      page-id="home-index"
+      page-id="ChatDetail"
       v-model="modelValue"
       :show-heng-gang="false"
       height="20rem"
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index f6be0ce..98a63cb 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -18,20 +18,20 @@
         <div class="right">
           <!--   他关注我   -->
           <template v-if="people.type === RELATE_ENUM.FOLLOW_ME">
-            <div class="l-button red">回关</div>
+            <div class="l-button red" @click="$emit('follow')">回关</div>
           </template>
           <!--   我关注他   -->
           <template v-if="people.type === RELATE_ENUM.FOLLOW_HE">
-            <div class="l-button">已关注</div>
+            <div class="l-button" @click="$emit('unfollow')">已关注</div>
           </template>
           <!--          相互关注-->
           <template v-if="people.type === RELATE_ENUM.FOLLOW_EACH_OTHER">
-            <div class="l-button">相互关注</div>
+            <div class="l-button" @click="$emit('unfollow')">互相关注</div>
           </template>
           <!--         关注请求-->
           <template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
-            <div class="l-button ">忽略</div>
-            <div class="l-button red">通过</div>
+            <div class="l-button " @click="$emit('ignore')">忽略</div>
+            <div class="l-button red" @click="$emit('agree')">通过</div>
           </template>
         </div>
       </template>
@@ -42,8 +42,14 @@
           <div class="detail">可能认识的人</div>
         </div>
         <div class="right">
-          <div class="l-button" @click="$emit('remove')">移除</div>
-          <div class="l-button red">关注</div>
+          <template v-if="people.type === RELATE_ENUM.RECOMMEND">
+            <div class="l-button" @click="$emit('remove')">移除</div>
+            <div class="l-button red" @click="$emit('follow')">关注</div>
+          </template>
+          <!--   我关注他   -->
+          <template v-if="people.type === RELATE_ENUM.FOLLOW_HE">
+            <div class="l-button" @click="$emit('unfollow')">已关注</div>
+          </template>
         </div>
       </template>
 
@@ -91,6 +97,7 @@ export default {
     return {
       showPopover: false,
       RELATE_ENUM: {
+        RECOMMEND: -1,//推荐
         FOLLOW_ME: 1,//只关注我
         FOLLOW_EACH_OTHER: 2,//互相关注
         FOLLOW_HE: 3,//我关注他
diff --git a/src/pages/people/components/Peoples.vue b/src/pages/people/components/Peoples.vue
new file mode 100644
index 0000000..00c5b25
--- /dev/null
+++ b/src/pages/people/components/Peoples.vue
@@ -0,0 +1,179 @@
+<template>
+  <div id="Peoples">
+    <transition-group :name="loading?'':'list-complete'" tag="div" class="people-wrapper">
+      <People v-for="(item,index) in localList"
+              :key="item.id"
+              :people="item"
+              @remove="remove(index)"
+              @follow="follow(index)"
+              @unfollow="unfollow(index)"
+              @agree="agree(index)"
+              @ignore="ignore(index)"
+              :mode="mode"/>
+    </transition-group>
+    <from-bottom-dialog
+        page-id="Fans"
+        v-model="isShowUnfollow"
+        mode="white"
+        mask-mode="dark"
+        :show-heng-gang="false"
+    >
+      <div class="unfollow-dialog">
+        <div class="notice">确认取消关注?</div>
+        <div class="row" @click="noLook">不看TA</div>
+        <div class="row red" @click="confirmUnfollow">取消关注</div>
+        <div class="space"></div>
+        <div class="row" @click="cancel">取消</div>
+      </div>
+    </from-bottom-dialog>
+  </div>
+</template>
+<script>
+import People from "./People";
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+
+export default {
+  name: "Peoples",
+  components: {
+    FromBottomDialog,
+    People
+  },
+  props: {
+    list: {
+      type: Array,
+      default: []
+    },
+    mode: {
+      type: String,
+      default: 'fans'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShowUnfollow: false,
+      currentIndex: -1
+    }
+  },
+  computed: {
+    localList: {
+      get() {
+        return this.list
+      },
+      set(newVal) {
+        this.$emit('update:list', newVal)
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    remove(index) {
+      this.$notice('将不会再为你推荐该用户')
+      this.localList.splice(index, 1)
+    },
+    follow(index) {
+      if (this.mode === 'recommend') {
+        this.localList[index].type = this.RELATE_ENUM.FOLLOW_HE
+      }
+      if (this.mode === 'fans') {
+        if (this.localList[index].type === this.RELATE_ENUM.FOLLOW_ME) {
+          this.localList[index].type = this.RELATE_ENUM.FOLLOW_EACH_OTHER
+        }
+      }
+    },
+    unfollow(index) {
+      if (this.mode === 'recommend') {
+        this.localList[index].type = this.RELATE_ENUM.RECOMMEND
+      }
+
+      if (this.mode === 'fans') {
+        this.isShowUnfollow = true
+        this.currentIndex = index
+      }
+    },
+    agree(index ) {
+      this.localList[index].type = this.RELATE_ENUM.FOLLOW_ME
+    },
+    ignore(index ) {
+      this.localList.splice(index, 1)
+    },
+    confirmUnfollow() {
+      this.localList[this.currentIndex].type = this.RELATE_ENUM.FOLLOW_ME
+      this.cancel()
+    },
+    cancel() {
+      this.isShowUnfollow = false
+      this.currentIndex = -1
+    },
+    noLook() {
+      this.isShowUnfollow = false
+      this.$showConfirmDialog(
+          '确认不看 TA?',
+          '确认后，将不再为你推荐对方的作品，你可以在对方主页随时恢复。',
+          'gray',
+          () => {
+            this.$notice('设置成功')
+          },
+          () => {
+          },
+          '不看 TA'
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/less/index";
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+}
+
+.list-complete-leave-active {
+  position: absolute;
+}
+
+.people-wrapper {
+  position: relative;
+}
+
+.unfollow-dialog {
+  color: black;
+
+  .notice {
+    color: @second-text-color;
+    font-size: 1.2rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .row {
+    height: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid #f1f1f1;
+
+    &:nth-last-child(1) {
+      border-top: none;
+    }
+
+    &.red {
+      color: @primary-btn-color;
+    }
+  }
+
+  .space {
+    height: 1rem;
+    background: whitesmoke;
+  }
+}
+</style>
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index e0b9218..4fdc3c5 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -33,7 +33,14 @@ export default {
   },
   data() {
     return {
-      SUCCESS: 200
+      SUCCESS: 200,
+      RELATE_ENUM: {
+        RECOMMEND: -1,//推荐
+        FOLLOW_ME: 1,//只关注我
+        FOLLOW_EACH_OTHER: 2,//互相关注
+        FOLLOW_HE: 3,//我关注他
+        REQUEST_FOLLOW: 4//关注请求
+      }
     }
   },
   methods: {