From e21d0e928d6008e5cb14c335161b88c61ada1645 Mon Sep 17 00:00:00 2001
From: Z <zhangmanman@zhangmanmandeiMac.local>
Date: Tue, 22 Feb 2022 17:20:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E6=9C=8B=E5=8F=8B=E6=97=A0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=A4=84=E7=90=86=EF=BC=8C=E6=88=91=E7=9A=84=E7=BE=A4?=
 =?UTF-8?q?=E7=BB=84=E6=B2=A1=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/friends/pending.vue | 49 ++++++++++++++++++++++-------------
 pages/im/group/index.vue     | 50 ++++++++++++++++++++++++++++--------
 2 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/pages/im/friends/pending.vue b/pages/im/friends/pending.vue
index e0d2212..b4dc932 100644
--- a/pages/im/friends/pending.vue
+++ b/pages/im/friends/pending.vue
@@ -6,8 +6,15 @@
                     :disabled="true" :show-action="false" />
             </view>
         </u-sticky>
-        <view v-for="(item, index) in pendings" :key="index">
-            <apply-cell :message="item.latestMessage" @success="getPendingList" />
+        <block v-if="pendings.length > 0">
+            <view v-for="(item, index) in pendings" :key="index">
+                <apply-cell :message="item.latestMessage" @success="getPendingList" />
+            </view>
+        </block>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
+            <span> 暂无好友申请 ~</span>
         </view>
     </view>
 </template>
@@ -15,14 +22,15 @@
 <script>
     import applyCell from '../components/friendApplyCell'
     import im from '@/utils/im/index.js'
-
+
     export default {
         components: {
             applyCell
         },
         data() {
             return {
-                pendings: []
+                pendings: [],
+                bg: '#fff'
             }
         },
         onLoad() {
@@ -31,7 +39,12 @@
         },
         methods: {
             getPendingList() {
-                im.getPendingList((pendings) => {
+                im.getPendingList((pendings) => {
+                    if (pendings.length > 0) {
+                        this.bg = '#f9f9f9'
+                    } else {
+                        this.bg = '#fff'
+                    }
                     this.pendings = pendings
                 })
             }
@@ -45,18 +58,18 @@
         background: $window-color;
     }
 
-    .no-lists {
-        padding-top: $padding * 3;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        font-size: $title-size-m;
-        color: $text-gray-m;
-
-        span {
-            padding-top: $padding;
-        }
+    .no-lists {
+        padding-top: $padding * 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: $title-size-m;
+        color: $text-gray-m;
+    
+        span {
+            padding-top: $padding;
+        }
     }
 </style>
diff --git a/pages/im/group/index.vue b/pages/im/group/index.vue
index 9b94858..4d23343 100644
--- a/pages/im/group/index.vue
+++ b/pages/im/group/index.vue
@@ -1,13 +1,20 @@
 <template>
-    <view class="group">
-        <view class="title"> 群聊 </view>
-        <view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
-            <u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
-            <view class="info">
-                <view class="name">{{ item.name }}</view>
+    <view class="group" :style="`background-color:${bg};`">
+        <block v-if="groups.length > 0">
+            <view class="title"> 群聊 </view>
+            <view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
+                <u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
+                <view class="info">
+                    <view class="name">{{ item.name }}</view>
+                </view>
             </view>
+            <view class="group-count"> {{groups.length}}个群聊 </view>
+        </block>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
+            <span>空空如也~</span>
         </view>
-        <view class="group-count"> {{groups.length}}个群聊 </view>
         <u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
             @confirm="onCreateGroup">
             <view class="slot-content">
@@ -28,7 +35,8 @@
             return {
                 groups: [],
                 createModal: false,
-                groupName: ''
+                groupName: '',
+                bg: '#fff'
             }
         },
         computed: {
@@ -48,6 +56,11 @@
         methods: {
             initData() {
                 getMyGroups().then((res) => {
+                    if (res.length > 0) {
+                        this.bg = '#f9f9f9'
+                    } else {
+                        this.bg = '#fff'
+                    }
                     this.groups = res
                     res.map(item => {
                         this.$store.dispatch('updateContact', item)
@@ -88,12 +101,14 @@
     .group {
         min-height: 100vh;
         background-color: $window-color;
-        .title{
+
+        .title {
             font-size: $title-size-m;
             color: $text-gray-m;
             padding: 10rpx $padding;
         }
-        .group-count{
+
+        .group-count {
             text-align: center;
             font-size: $title-size;
             color: $text-gray;
@@ -130,4 +145,19 @@
             }
         }
     }
+
+    .no-lists {
+        padding-top: $padding * 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: $title-size-m;
+        color: $text-gray-m;
+
+        span {
+            padding-top: $padding;
+        }
+    }
 </style>