From 3cc7ba393eba33a76feb5b8f607f7005c50d9fed Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 10 Oct 2021 13:54:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=89=E4=B8=9D=E9=A1=B5=E9=9D=A2=E5=8A=A0?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/custom.less            |  2 +-
 src/components/Scroll.vue              |  2 +-
 src/pages/message/Fans.vue             | 73 ++++++++++++++++++++------
 src/pages/people/components/People.vue |  8 +--
 4 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/src/assets/less/custom.less b/src/assets/less/custom.less
index 15c6be4..067144f 100644
--- a/src/assets/less/custom.less
+++ b/src/assets/less/custom.less
@@ -15,7 +15,7 @@
   transform: translate(-50%, -50%);
   padding: 1rem 1.8rem;
   border-radius: .3rem;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   white-space: nowrap;
 }
 
diff --git a/src/components/Scroll.vue b/src/components/Scroll.vue
index 9ef2c13..7fda0db 100644
--- a/src/components/Scroll.vue
+++ b/src/components/Scroll.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-wrapper" ref="wrapper" @scroll="scroll">
+  <div class="scroll-wrapper scroll" ref="wrapper" @scroll="scroll">
     <div class="scroll-content">
       <slot></slot>
     </div>
diff --git a/src/pages/message/Fans.vue b/src/pages/message/Fans.vue
index 85d95cd..e38fcc2 100644
--- a/src/pages/message/Fans.vue
+++ b/src/pages/message/Fans.vue
@@ -6,44 +6,79 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <People v-for="item in friends.all" :people="item" mode="fans"></People>
-      <div class="line mt1r"></div>
-      <div class="title">
-        <span>朋友推荐</span>
-        <img src="../../assets/img/icon/about-gray.png" alt="">
-
-      </div>
-      <People v-for="item in friends.all" :people="item" mode="recommend"></People>
+      <Scroll @pulldown="loadData">
+        <People v-for="item in friends.all" :people="item" mode="fans"></People>
+        <div class="line mt1r"></div>
+        <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>
+        <Loading :is-full-screen="false" v-if="loading"/>
+      </Scroll>
     </div>
   </div>
 </template>
 <script>
 import {mapState} from "vuex";
 import People from "../people/components/People";
+import Scroll from "../../components/Scroll";
+import Loading from "../../components/Loading";
 
 export default {
   name: "Fans",
   components: {
-    People
-  },
-  props: {
-    modelValue: false
+    Scroll,
+    People,
+    Loading
   },
   data() {
-    return {}
+    return {
+      loading: false,
+      recommend: []
+    }
   },
   computed: {
     ...mapState(['userinfo', 'friends'])
   },
   created() {
+    this.recommend = this.$clone(this.friends.all)
   },
-  methods: {}
+  methods: {
+    remove(index) {
+      this.$notice('将不会再为你推荐该用户')
+      this.recommend.splice(index, 1)
+    },
+    async loadData() {
+      if (this.loading) return
+      this.loading = true
+      await this.$sleep(500)
+      this.loading = false
+      this.recommend = this.recommend.concat(this.friends.all)
+    }
+  }
 }
 </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;
+}
+
 .Fans {
   position: fixed;
   left: 0;
@@ -56,7 +91,15 @@ export default {
 
   .content {
     padding: @padding-page;
-    padding-top: 6rem;
+    padding-top: @header-height;
+
+    .scroll {
+      height: calc(100vh - @header-height);
+    }
+
+    .people-wrapper {
+      position: relative;
+    }
 
     .title {
       margin-top: 1.5rem;
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index 2f37679..f6be0ce 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="People">
-    <img v-if="people.type === 6" src="../../../assets/img/icon/add-light.png" alt="" class="add">
-    <img v-else :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
+    <img :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
     <div class="content">
-
       <template v-if="mode === 'fans'">
         <div class="left">
           <div class="name">{{ people.name }}</div>
@@ -44,7 +42,7 @@
           <div class="detail">可能认识的人</div>
         </div>
         <div class="right">
-          <div class="l-button ">移除</div>
+          <div class="l-button" @click="$emit('remove')">移除</div>
           <div class="l-button red">关注</div>
         </div>
       </template>
@@ -122,6 +120,8 @@ export default {
 }
 
 .People {
+  transition: all 0.3s ease;
+  width: 100%;
   height: 7rem;
   display: flex;
   align-items: center;