From 658ee3d5228d0f51ed7ea0c3ec2378063ff6c752 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 10 Oct 2021 02:19:01 +0800
Subject: [PATCH] debug

---
 src/assets/img/icon/message/setting.png     | Bin 0 -> 8606 bytes
 src/assets/img/icon/msg-icon5.webp          | Bin 0 -> 2664 bytes
 src/assets/img/icon/msg-icon6.webp          | Bin 0 -> 616 bytes
 src/assets/img/icon/msg-icon7.webp          | Bin 0 -> 432 bytes
 src/assets/img/icon/people/address-book.png | Bin 0 -> 5043 bytes
 src/components/Search.vue                   |   6 ++-
 src/pages/message/Fans.vue                  |  22 +++++++++-
 src/pages/people/FindAcquaintance.vue       |  43 +++++++++---------
 src/pages/people/components/People.vue      |  46 +++++++++++++++-----
 9 files changed, 83 insertions(+), 34 deletions(-)
 create mode 100644 src/assets/img/icon/message/setting.png
 create mode 100644 src/assets/img/icon/msg-icon5.webp
 create mode 100644 src/assets/img/icon/msg-icon6.webp
 create mode 100644 src/assets/img/icon/msg-icon7.webp
 create mode 100644 src/assets/img/icon/people/address-book.png

diff --git a/src/assets/img/icon/message/setting.png b/src/assets/img/icon/message/setting.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc457b060e6e2489e810d599287efa623e488353
GIT binary patch
literal 8606
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/msg-icon5.webp b/src/assets/img/icon/msg-icon5.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a8c4d04c958aac2085c0e48b53ae644889fecaf5
GIT binary patch
literal 2664
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
W9XigGi8p1eN~5~SSSfMcKmY)ADmQol

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/msg-icon6.webp b/src/assets/img/icon/msg-icon6.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0f89b2451c093066b9cdce2a80956ca2e144ba79
GIT binary patch
literal 616
zcmV-u0+;<#Nk&Fs0ssJ4MM6+kP&il$0000G0000_002(_06|PpNNWH900CfC+g6kt
zfoL><2G9T-Xp?6XBD@GhaGvj<Q$$PvrY4AX7ti9b(w2^*x`n!<nPyT)v<BcisuoZ#
z#rTeF6gF*UquuZS`>V3a!lsREoGDxsuv{E~hDn8K#iPNzR}RHurI&m)m0&Oh09H^q
zAkF~*0MHEpodGIP08juvfiRCpr6QprHK3pn31$Gy&L*yB#3334P2>ao2eOU0o?t(K
ze^vdJ_oU~5>l*X`>0|ww^iU>!V*|SGi%2m@1p}V3OkPB^-?GAq>?jDju2d)wYhh`?
zl)G*k%}wWHzP+NGx(`MHbF*9k0R6`T8`PUwdOz<2$VFwlIXQ53|Hn4}$2R^a5GEB%
z>)hgGPAqhTz!(2jqH92szUV)X&!PVmoH!Fq-pFSCx8AN*kWw8&@Q`Lx;t04NX7xtd
zXu#UIS8IXLp+mO-HGECQ5y4K-$yp^S;VHsl<<Sbe9i9%~p@$?U%&+?Hz4*>F`!7Y6
zv_1|e{=X5WjLV`1l%tBxprZ6}y}AlkCQ5;eBxQvp@pxElXINJOix^)6@-#*60-L9F
zR3-X=>4XLUn)uCs<R{G}LpeN>Qfp0ln%%!*qK(;!=3{=m-q{#xqPlQ%gdvVKZ8ySV
z&xDV4f_6|~-r$>vX6h>D|MurJI;ch^b;P3&{|U_=aUM8dg{z-BiNtd{)gPL+KEoPe
zP=F~4+yyxj>GzKyQx+Xhzk=&%Lo94hyeZJJJH67w00JmiM%QxLwmEA;jqz+Bs@MRT
C{TW99

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/msg-icon7.webp b/src/assets/img/icon/msg-icon7.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bc15077a15618679b92c0a7b6062c1a91e2809a5
GIT binary patch
literal 432
zcmV;h0Z;x?Nk&Gf0RRA3MM6+kP&il$0000G0000x0027x06|PpNJIbt00CeX$xfJ)
z5D8J%;slg|1FC@FBoXlbI}tGfV11R~egXWJXgJ)G4QnMlKBZa8`R{Eh?IDzph0Xzw
z)X3uiZKvSu23AlwAU**A0B{HZodGI506YLbfi{yzr6VDsH~Odmpb!Z_8VWl{XZ8Wj
zM-ys*O8|4<dkzs1kAV1^`IL~|mvY#<wB<N&d63?RXWkbUZDI%j0092s!)o!@(*Nx&
z|5DHOEb)j%3LFUlBiF3eYSyuq=02PLx3XeW)Nb5xfX2NX2H8tu)Bqu*uMkk}W_cv{
z+#yEtvZIyeR32Eu|I2xn2Vo^lK@9K9co=etaxLenTqfqAKgI&uOO2r)Wf+vky%!!e
zU_#yT>2e#)0vTZOzmrGm*OGk)_%}POq8J$>vzCNcDuDpcSjd!hJ*T*6k@DlN)pwOu
zYC_OZ>10FHz(t!o(E4=6e1|V0vVICSdFIW3E}UyWYV<#={fJQ*AF@D_9vLcIaqb}*
a+_At{v((ORWe~v71jY_901=*2&VT@;jlE?6

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/people/address-book.png b/src/assets/img/icon/people/address-book.png
new file mode 100644
index 0000000000000000000000000000000000000000..a53ed301ba72af3afd488a53c3dddf2792c98908
GIT binary patch
literal 5043
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

literal 0
HcmV?d00001

diff --git a/src/components/Search.vue b/src/components/Search.vue
index 5fd28e9..fab14d8 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -2,10 +2,11 @@
   <div class="search-ctn" :class="mode">
     <div class="search">
       <img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
-      <input type="text" :placeholder="placeholder" v-model="value" >
+      <input type="text" :placeholder="placeholder" v-model="value">
       <div class="suffix">
         <slot v-if="$slots.default"></slot>
-        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png" @click.stop="clear">
+        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png"
+             @click.stop="clear">
       </div>
     </div>
     <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div>
@@ -13,6 +14,7 @@
 </template>
 
 <script>
+//TODO　背景颜色不对
 export default {
   name: "Search",
   props: {
diff --git a/src/pages/message/Fans.vue b/src/pages/message/Fans.vue
index 7f62b77..85d95cd 100644
--- a/src/pages/message/Fans.vue
+++ b/src/pages/message/Fans.vue
@@ -6,7 +6,14 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <People v-for="item in friends.all" :people="item"></People>
+      <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>
     </div>
   </div>
 </template>
@@ -50,6 +57,19 @@ export default {
   .content {
     padding: @padding-page;
     padding-top: 6rem;
+
+    .title {
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-left: .5rem;
+        width: 1.3rem;
+      }
+    }
   }
 }
 </style>
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 7c65ed1..24778d9 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -5,13 +5,13 @@
       <Indicator
           style="width: 50%;"
           tabStyleWidth="40%"
-          :tabTexts="['发现熟人','熟人列表']"
+          :tabTexts="['发现朋友','熟人列表']"
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
       <img src="../../assets/img/icon/menu-gray.png" alt="" class="option" @click="moreOptionDialog = true">
     </div>
     <SlideRowList v-model:active-index="currentSlideItemIndex">
-      <SlideItem class="tab1">
+      <SlideItem class="tab1" style="overflow: auto;">
         <div class="mr2r ml2r mt1r">
           <Search v-if="!isShowText"
                   placeholder="搜索用户名字/抖音号"
@@ -24,13 +24,13 @@
         </div>
         <div class="no-search" v-if="!isShowText">
           <div class="look-address-list" @click="findAddressListDialog = true">
-            <img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
+            <img class="left" src="../../assets/img/icon/people/address-book.png" alt="">
             <div class="right">
               <div class="notice">
                 <div class="text1">查看通讯录朋友</div>
-                <div class="text2">看看谁在抖音</div>
+                <div class="text2">看看有谁在抖音</div>
               </div>
-              <back scale="1" direction="right"></back>
+              <back direction="right"></back>
             </div>
           </div>
           <div class="line"></div>
@@ -38,21 +38,22 @@
             朋友推荐
             <img src="../../assets/img/icon/about-gray.png" style="width: 1rem;margin-left: .2rem;">
           </div>
-          <People v-for="item in list " :people="item"></People>
+          <People v-for="item in friends.all " :people="item" mode="recommend"></People>
         </div>
         <div class="is-search" v-else>
           <div class="tooltip" v-if="searchKey && !isSearch">
             <img src="../../assets/img/icon/close.svg" style="width: 1rem;">
             搜索用户名字/抖音号：<span class="searchKey">{{ searchKey }}</span>
           </div>
-          <People v-if="isSearch" v-for="item in list " :people="item"></People>
+          <!--          TODO -->
+          <People v-if="isSearch" v-for="item in friends.all " :people="item" mode="recommend"></People>
         </div>
       </SlideItem>
-      <SlideItem class="tab2">
+      <SlideItem class="tab2" style="overflow: auto;">
         <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
-        <div class="title">我的好友（互相关注）</div>
-        <People v-for="item in list " :people="item"></People>
-        <NoMore></NoMore>
+        <div class="title">{{ friends.all.length }} 位朋友</div>
+        <People v-for="item in friends.all " :people="item" mode="friend"></People>
+        <NoMore class="mb5r"/>
       </SlideItem>
     </SlideRowList>
 
@@ -132,6 +133,7 @@ import People from './components/People'
 import Search from '../../components/Search'
 import Indicator from '../../components/slide/Indicator'
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import {mapState} from "vuex";
 
 export default {
   name: "FindAcquaintance",
@@ -179,7 +181,8 @@ export default {
       set() {
         this.findAddressListDialog = this.outWebImgAccountDialog = false
       }
-    }
+    },
+    ...mapState(['friends'])
   },
   mounted() {
   },
@@ -242,7 +245,8 @@ export default {
     padding: 2rem;
 
     .title {
-      margin-top: 2rem;
+      margin-top: @padding-page;
+      margin-bottom: 1rem;
       color: @second-text-color;
       font-size: 1.2rem;
     }
@@ -272,11 +276,11 @@ export default {
         align-items: center;
 
         .left {
-          background: @second-btn-color;
+          background: @second-btn-color-tran;
           border-radius: 50%;
-          padding: 1rem;
-          width: 2.4rem;
-          margin-right: 1.8rem;
+          padding: 1.2rem;
+          width: 2.2rem;
+          margin-right: 1.5rem;
         }
 
         .right {
@@ -286,13 +290,12 @@ export default {
           align-items: center;
 
           img {
-            height: 2rem;
+            width: 1.4rem;
           }
 
           .notice {
-
             .text1 {
-              font-size: 1.6rem;
+              font-size: 1.4rem;
               margin-bottom: .5rem;
             }
 
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index ce4dcd2..2f37679 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -7,14 +7,15 @@
       <template v-if="mode === 'fans'">
         <div class="left">
           <div class="name">{{ people.name }}</div>
-          <div class="detail">
+          <div class="name">
             <template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
               发来一个关注请求
             </template>
             <template v-else>
-              该用户关注了你
+              关注了你
             </template>
           </div>
+          <div class="detail">07-23</div>
         </div>
         <div class="right">
           <!--   他关注我   -->
@@ -37,8 +38,29 @@
         </div>
       </template>
 
+      <template v-if="mode === 'recommend'">
+        <div class="left">
+          <div class="name">{{ people.name }}</div>
+          <div class="detail">可能认识的人</div>
+        </div>
+        <div class="right">
+          <div class="l-button ">移除</div>
+          <div class="l-button red">关注</div>
+        </div>
+      </template>
 
+      <template v-if="mode === 'friend'">
+        <div class="left">
+          <div class="name">{{ people.name }}</div>
+          <div class="detail">4小时之内在线</div>
+        </div>
+        <div class="right">
+          <div class="l-button">发私信</div>
+          <img src="../../../assets/img/icon/menu-white.png" alt="" @click="showPopover = !showPopover">
+        </div>
+      </template>
     </div>
+    <!--   TODO 点了不消失，内容也变了 -->
     <transition name="scale">
       <div class="popover" v-if="people.type === 4 && showPopover">
         <div class="arrow"></div>
@@ -112,8 +134,8 @@ export default {
 
   .head-image {
     margin-right: 1.5rem;
-    width: 4.8rem;
-    height: 4.8rem;
+    width: 4.5rem;
+    height: 4.5rem;
     border-radius: 50%;
   }
 
@@ -134,7 +156,8 @@ export default {
 
     .left {
       .name {
-        font-size: 1.6rem;
+        font-size: 1.2rem;
+        margin-bottom: .2rem;
         color: white;
       }
 
@@ -151,16 +174,17 @@ export default {
 
       .l-button {
         margin-left: .8rem;
-        padding: .5rem 2rem;
         border-radius: .2rem;
         background: rgb(58, 58, 67);
+        font-size: 1.2rem;
+        padding: .4rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 5.5rem;
 
         &:only-child {
-          background: yellow;
-        }
-
-        &.address-list {
-          padding: .7rem 3rem;
+          width: 7rem;
         }
 
         &.red {