根据事件广播，更新好友申请的数量提醒

.hbuilderx/launch.json

@@ -14,6 +14,10 @@
      	{
      		"launchtype" : "local"
      	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
      	"type" : "uniCloud"
      }
     ]

pages/im/components/friendApplyCell.vue

@@ -0,0 +1,112 @@
+<template>
+    <view class="apply--cell u-border-bottom">
+        <view class="avatar">
+            <u-avatar :src="user.portraitUrl" shape="square" size="46" />
+        </view>
+        <view class="info">
+            <view class="name">
+                {{ user.name }}
+            </view>
+            <view class="message">
+                {{ message.message }}
+            </view>
+        </view>
+
+        <view class="action">
+            <u-button type="success" size="mini" @click="resolve">通过</u-button>
+            <u-button type="warning" size="mini" @click="reject">拒绝</u-button>
+        </view>
+    </view>
+</template>
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import {
+        resolveFriend,
+        rejectFriend
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        props: {
+            message: {
+                type: Object,
+                default: {}
+            }
+        },
+        computed: {
+            user() {
+                return JSON.parse(this.message.extra)
+            }
+        },
+        methods: {
+            resolve() {
+                resolveFriend(this.message.sourceUserId).then(res => {
+                    this.clearMessages()
+                    uni.showToast({
+                        icon: 'none',
+                        title: '通过好友申请'
+                    })
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: err.message
+                    })
+                })
+            },
+            reject() {
+                uni.showModal({
+                    title: '拒绝申请',
+                    success: (res) => {
+                        if (res.confirm) {
+                            rejectFriend(this.message.sourceUserId).then(res => {
+                                this.clearMessages()
+                            }).catch(err => {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: err.message
+                                })
+                            })
+                        }
+                    }
+                })
+            },
+            // 不管是通过还是拒绝，都要把相关的信息清理
+            clearMessages() {
+                RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
+                this.$emit('success')
+                uni.$emit('onContactNotification')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .apply--cell {
+        display: flex;
+        padding: $padding;
+        align-items: center;
+
+        .info {
+            flex: 1;
+            margin-left: $padding;
+
+            .name {
+                font-size: $title-size + 2;
+            }
+
+            .message {
+                color: $text-gray-m;
+                font-size: $title-size-m;
+                margin-top: 10rpx;
+            }
+        }
+
+        .action {
+            justify-content: space-between;
+
+            .u-button+.u-button {
+                margin-top: 10rpx;
+            }
+        }
+    }
+</style>

pages/im/components/friendApplyList.vue

@@ -1,15 +1,14 @@
 <template>
     <view class="friend-apply">
-        <block v-for="item in lists" v-if="lists.length > 0" :key="item.userId">
+        <block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
             <view class="lists">
                 <view class="" style="width: 100rpx;height: 100rpx;">
-                    <u-image class="cover" radius="4" width="100rpx" height="100rpx" :src="item.portraitUrl || require('@/static/user/cover.png')" :lazy-load="true" />
+                    <u-avatar :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" size="44" />
                 </view>
                 <view class="right">
                     <view class="title">
                         <view class="name">{{ item.name }}</view>
-                        <view class="des" v-if="isApply">{{ item.address || '这家伙很懒，什么都没有添加~' }}</view>
+                        <view class="des">{{ item.latestMessage.message }}</view>
-                        <view class="des" v-else>{{ item.remark || '你好,听说你很优秀想认识~' }}</view>
                     </view>
                     <view class="agress-btn">
                         <span v-if="isAgree" @click="action('agree', item)">通过</span>
@@ -44,8 +43,8 @@ export default {
             default: false
         }
     },
-    data() {
+    created() {
-        return {};
+        console.log(this.lists);
     },
     methods: {
         action(type, item) {

pages/im/friends/index.vue

@@ -1,18 +1,16 @@
 <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>
-                <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>
-                    <view class="name">
-                        新的朋友 ({{ pendingCount }})
-                    </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>
-            </view>
             <block v-if="friends.length > 0">
                 <template v-for="(item, fkey) in friends">
                     <!-- #ifdef APP-NVUE -->
@@ -24,8 +22,8 @@
                         <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                         </u-index-anchor>
                         <!-- #endif -->
-                        <view v-for="(friendItem, index) in item" :key="friendItem.userId"
+                        <view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
-                            class="friend-flex u-border-bottom" @click="toFriend(friendItem.userId)">
+                            @click="toFriend(friendItem.userId)">
                             <u-avatar size="40" shape="square" :src="friend(friendItem.userId).portraitUrl" />
                             <view class="name">{{ friend(friendItem.userId).name }}</view>
                         </view>
@@ -42,10 +40,10 @@
 
 <script>
     import {
-        getFriendsLetter,
+        getFriendsLetter
-        getPendingCount
     } from '@/apis/interfaces/im';
-
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    
     export default {
         data() {
             return {
@@ -62,16 +60,27 @@
             }
         },
         onLoad() {
+            uni.$on('onContactNotification', this.checkNewFriendPending)
+            this.checkNewFriendPending()
             getFriendsLetter().then(res => {
                 this.indexs = res.indexList
                 this.friends = res.itemArr
             })
-            getPendingCount().then(res => {
+        },
-                console.log(res);
+        onUnload() {
-                this.pendingCount = res
+            uni.$off('onContactNotification')
-            })
         },
         methods: {
+            checkNewFriendPending() {
+                // 获取是否有新的好友申请
+                RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
+                    if (res.code === 0) {
+                        this.pendingCount = res.conversations.filter((item) => {
+                            return item.objectName == RongIMLib.ObjectName.ContactNotification
+                        }).length
+                    }
+                })
+            },
             showToast() {
                 uni.showToast({
                     title: '群聊功能暂未开放，敬请期待',

pages/im/friends/pending.vue

@@ -1,11 +1,3 @@
-<!--
- * @Description:新朋友即新增好友申请列表  可以搜索跳转
- * @Author: Aimee·Zhang
- * @Date: 2022-01-24 10:49:15
- * @LastEditors: Aimee·Zhang
- * @LastEditTime: 2022-01-25 10:18:26
--->
-
 <template>
     <view class="pending">
         <u-sticky>
@@ -14,67 +6,42 @@
                     :disabled="true" :show-action="false" />
             </view>
         </u-sticky>
-        <block v-if="pedings.length > 0">
+        <view v-for="(item, index) in pendings" :key="index">
-            <applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" />
+            <apply-cell :message="item.latestMessage" @success="getPendingList" />
-        </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>
 
 <script>
-    import {
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
-        getPedings,
+    import applyCell from '../components/friendApplyCell'
-        resolveFriend,
-        rejectFriend
-    } from '@/apis/interfaces/im.js'
-    import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
-    import applyFriend from '@/components/friend-apply-reject-agree'
 
     export default {
         components: {
-            applyFriend
+            applyCell
         },
         data() {
             return {
-                pedings: []
+                pendings: []
             }
         },
         onLoad() {
-            this.getPeddingList()
+            this.getPendingList()
+            uni.$on('onContactNotification', this.getPendingList)
+        },
+        onUnload() {
+            uni.$off('onContactNotification')
         },
         methods: {
-            // 操作同意或拒绝
+            getPendingList() {
-            action(e) {
+                // 获取系统中的好友关系会话列表
-                let url = e.type === 'agree' ? resolveFriend : rejectFriend
+                RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
-                uni.showModal({
+                    if (res.code === 0) {
-                    title: e.type === 'agree' ? '通过' : '拒绝',
+                        this.pendings = res.conversations.filter((item) => {
-                    content: e.type === 'agree' ? '通过后即可与该用户畅所欲言' : '拒绝后将不会收到该用户发来信息',
+                            return item.objectName == RongIMLib.ObjectName.ContactNotification
-                    success: res => {
+                        })
-                        if (res.confirm) {
-                            url(e.item.userId).then(res => {
-                                this.getPeddingList()
-                            })
-                        }
                     }
                 })
-            },
-            getPeddingList() {
-                // 获取系统中的好友关系会话列表
-                // RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 50, 0, (res) => {
-                //     if (res.code === 0) {
-                //         this.pedings = res.conversations.filter((item) => {
-                //             return item.objectName == RongIMLib.ObjectName.ContactNotification
-                //         })
-                //     }
-                // })
-                getPedings().then(res => {
-                    console.log(res)
-                    this.pedings = res
-                })
             }
         }
     };

pages/im/friends/search.vue

@@ -31,7 +31,7 @@
         searchFriend,
         pedingFriend
     } from '@/apis/interfaces/im.js';
-    import applyFriend from '@/components/friend-apply-reject-agree';
+    import applyFriend from '../components/friendApplyList.vue';
     export default {
         components: {
             applyFriend

pages/im/index.vue

@@ -20,7 +20,7 @@
                         <uni-icons color="#555" type="scan" size="22" />
                     </view>
                     <view class="item" @click="onNav('imFriends', {})">
-                        <u-badge absolute max="99" isDot :offset="[0, 0]" :show="hasNewFriends" />
+                        <u-badge absolute max="99" :offset="[-5, -5]" :value="hasNewFriends" />
                         <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22" />
                     </view>
                 </view>
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-    import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
     import messagePreview from './components/messagePreview'
@@ -96,7 +96,7 @@
                 pickedItem: {},
                 privateUnread: 0,
                 groupUnread: 0,
-                hasNewFriends: true
+                hasNewFriends: 0
             }
         },
         components: {
@@ -109,15 +109,19 @@
                 }
             }
         },
-        onLoad() {
+        onLoad() {
+            // 好友申请数量
+            this.checkNewFriendPending()
             uni.$on('onConnectionStatusChange', (status) => {
                 this.connection = status
             })
+            uni.$on('onContactNotification', this.checkNewFriendPending)
         },
         onShow() {
             if (this.$store.state.token !== '') {
                 this.getConversationList()
-            }
+            }
+            // 监听新消息
             uni.$on('onReceiveMessage', (msg) => {
                 console.log('收到消息，刷新列表');
                 this.getConversationList()
@@ -150,6 +154,16 @@
             }
         },
         methods: {
+            checkNewFriendPending() {
+                // 获取是否有新的好友申请
+                RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
+                    if (res.code === 0) {
+                        this.hasNewFriends = res.conversations.filter((item) => {
+                            return item.objectName == RongIMLib.ObjectName.ContactNotification
+                        }).length
+                    }
+                })
+            },
             // 隐藏功能菜单
             hidePop() {
                 this.showPop = false

utils/im/index.js

@@ -59,11 +59,6 @@ const connect = (token, userInfo, callback) => {
         // 首次运行获取好友列表
         const FK = 'IFT_' + userInfo.userId
 
-        const model = uni.model.friendModel
-        model.find((err, results) => {
-            console.log('SQL 全部数据', results);
-        })
-
         uni.getStorage({
             key: FK,
             success: () => {
@@ -133,14 +128,22 @@ const addListeners = () => {
     })
     // 添加消息监听函数
     RongIMLib.addReceiveMessageListener((res) => {
-        console.log('收到消息', res.data.message);
         const message = res.data.message
+        console.log('收到消息', message);
         if (inArray(message.objectName, notifyMsgTypes)) {
             console.log('通知并计数的消息');
             newMessage(message)
-        } else if (message.objectName === 'RC:ProfileNtf') {
+        } else if (message.objectName === RongIMLib.ObjectName.ProfileNotification) {
-            console.log('更新资料消息', JSON.parse(message.content.data));
             store.dispatch('updateFriend', JSON.parse(message.content.data))
+            // 调用完更新之后，删除这条消息
+            RongIMLib.deleteMessagesByIds([message.messageId], ({
+                code
+            }) => {
+                console.log('消息删除结果', code);
+            })
+        } else if (message.objectName === RongIMLib.ObjectName.ContactNotification) {
+            // 触发一个新好友的通知事件
+            uni.$emit('onContactNotification', message.content)
         }
     })