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

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>