好友列表调整

pages/im/friends/index.vue

@@ -1,37 +1,32 @@
 <template>
     <view>
-        <view class="friend-flex u-border-bottom" @click="toPending">
-            <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
-            <u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
-            <view class="name">新的朋友</view>
-        </view>
-        <view class="friend-flex" @click="showToast">
-            <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
-            <view class="name">我的群聊</view>
-        </view>
-
         <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
+            <view class="friend-flex u-border-bottom" @click="toPending">
+                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
+                <u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
+                <view class="info">新的朋友</view>
+            </view>
+            <view class="friend-flex" @click="showToast">
+                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
+                <view class="info">我的群聊</view>
+            </view>
             <block v-if="friends.length > 0">
-                <template v-for="(item, fkey) in friends">
+                <u-index-item v-for="(item, fkey) in friends" :key="fkey">
-                    <!-- #ifdef APP-NVUE -->
                     <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                     </u-index-anchor>
-                    <!-- #endif -->
+
-                    <u-index-item>
+                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
-                        <!-- #ifndef APP-NVUE -->
+                        @click="toFriend(friendItem.userId)">
-                        <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
+                        <u-avatar size="40" shape="square" :src="friend(friendItem.userId).portraitUrl" />
-                        </u-index-anchor>
+                        <view class="info">
-                        <!-- #endif -->
-                        <view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
-                            @click="toFriend(friendItem.userId)">
-                            <u-avatar size="40" shape="square" :src="friend(friendItem.userId).portraitUrl" />
                             <view class="name">{{ friend(friendItem.userId).name }}</view>
+                            <view class="address">{{ friendItem.address }}</view>
                         </view>
-                    </u-index-item>
+                    </view>
-                </template>
+                </u-index-item>
             </block>
             <block v-else>
-                <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
+                <u-empty class="pages-null" mode="data" text="暂无好友">
                 </u-empty>
             </block>
         </u-index-list>
@@ -42,8 +37,8 @@
     import {
         getFriendsLetter
     } from '@/apis/interfaces/im';
-    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
-    
+
     export default {
         data() {
             return {
@@ -60,17 +55,23 @@
             }
         },
         onLoad() {
-            uni.$on('onContactNotification', this.checkNewFriendPending)
+            this.getFriendList()
             this.checkNewFriendPending()
-            getFriendsLetter().then(res => {
+            uni.$on('onContactNotification', () => {
-                this.indexs = res.indexList
+                this.checkNewFriendPending()
-                this.friends = res.itemArr
+                this.getFriendList()
             })
         },
         onUnload() {
             uni.$off('onContactNotification')
         },
         methods: {
+            getFriendList() {
+                getFriendsLetter().then(res => {
+                    this.indexs = res.indexList
+                    this.friends = res.itemArr
+                })
+            },
             checkNewFriendPending() {
                 // 获取是否有新的好友申请
                 RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
@@ -121,13 +122,22 @@
         flex-direction: row;
         align-items: center;
 
-        .name {
+        .info {
             flex: 1;
-            padding-left: $padding;
+            margin-left: $padding;
-            font-size: $title-size + 2;
+
-            font-size: $title-size + 2;
+            .name {
-            color: #454545 !important;
+                font-size: $title-size + 2;
-            @extend .nowrap;
+                font-size: $title-size + 2;
+                color: #454545 !important;
+                @extend .nowrap;
+            }
+
+            .address {
+                color: $text-gray-m;
+                font-size: $title-size-m - 5;
+            }
         }
+
     }
 </style>

pages/im/friends/info.vue

@@ -158,7 +158,8 @@
                     content: '确认删除后不可恢复',
                     success: e => {
                         if (e.confirm) {
-                            deleteFriend(this.targetId).then(res => {
+                            deleteFriend(this.targetId).then(res => {
+                                uni.$emit('onContactNotification')
                                 // 删除聊天记录
                                 RongIMLib.deleteMessages(1, this.targetId);
                                 RongIMLib.removeConversation(1, this.targetId);

utils/im/data.js

@@ -0,0 +1,16 @@
+// 获取新好友申请数量
+const getPendingCount = (callback) => {
+    RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 100, 0, (res) => {
+        if (res.code === 0) {
+            const pendingCount = res.conversations.filter((item) => {
+                return item.objectName == RongIMLib.ObjectName.ContactNotification
+            }).length
+
+            callback(pendingCount)
+        }
+    })
+}
+
+export default {
+    getPendingCount
+}

utils/im/message.js

@@ -2,7 +2,7 @@ import store from '@/store/index.js'
 import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
 
 const getMessageList = (conversationType, targetId, timeStamp, count, isForward, callback) => {
-    // 获取消息列表
+    // 获取消息列表 https://doc.rongcloud.cn/imserver/server/v1/message/objectname#objectName
     const objectNames = [
         'RC:TxtMsg',
         'RC:VcMsg',