新朋友无数据处理，我的群组没数据处理

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>