邀请好友

pages/im/group/info.vue

@@ -4,10 +4,12 @@
             <group-user-list ref="userList" :targetId="targetId" :count="14" />
         </view>
 
-        <u-cell-group class="cells" :border="false" >
+        <u-cell-group class="cells" :border="false">
-            <u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement" @click="toAnnouncement" />
+            <u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement"
+                @click="toAnnouncement" />
             <u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
-            <u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认" @click="showGroupsSure" />
+            <u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认"
+                @click="showGroupsSure" />
             <u-cell :border="false" class="u-border-bottom" title="聊天置顶">
                 <u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
             </u-cell>
@@ -17,11 +19,13 @@
         </u-cell-group>
 
         <u-cell-group class="cells" v-if="group.is_admin" :border="false">
-            <u-cell :border="false" class="u-border-bottom" isLink title="修改群聊名称" :value="groupName" @click="onGroupName" />
+            <u-cell :border="false" class="u-border-bottom" isLink title="修改群聊名称" :value="groupName"
+                @click="onGroupName" />
             <u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
                 <u-avatar slot="value" size="25" shape="square" :src="group.cover" />
             </u-cell>
-            <u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType" />
+            <u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType"
+                @click="onChangeJoinType" />
         </u-cell-group>
 
         <view class="cells actions" v-if="loaded">
@@ -30,7 +34,8 @@
             <view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
         </view>
 
-        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
+        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
+            @confirm="onChangeGroupName">
             <view class="slot-content">
                 <u--input placeholder="群名称" border="surround" focus v-model="groupName" />
             </view>
@@ -42,7 +47,8 @@
             </view>
         </u-modal>
 
-        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" @close="showActions=false" />
+        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
+            @close="showActions=false" />
     </view>
 </template>
 
@@ -84,10 +90,15 @@
         onLoad(e) {
             this.targetId = e.targetId
             this.qrContent += e.targetId
-            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({status}) => {
+            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
+                status
+            }) => {
                 this.status = !Boolean(status)
             })
-            RongIMLib.getConversation(this.conversationType, this.targetId, ({code,conversation}) => {
+            RongIMLib.getConversation(this.conversationType, this.targetId, ({
+                code,
+                conversation
+            }) => {
                 if (code == 0) {
                     this.isTop = conversation.isTop
                 }
@@ -105,7 +116,6 @@
             },
             initData() {
                 getGroupInfo(this.targetId).then(res => {
-                    console.log(res,'群信息。。。。。')
                     this.group = res.group
                     this.groupName = res.group.name
                     this.announcement = res.announcement
@@ -152,9 +162,9 @@
                 this.qrCodeShow = true
             },
             // 群聊邀请待确认
-            showGroupsSure(){
+            showGroupsSure() {
                 uni.navigateTo({
-                    url:"/pages/im/group/reviewed?id="+this.targetId
+                    url: "/pages/im/group/reviewed?targetId=" + this.targetId
                 })
             },
             onGroupName() {
@@ -347,5 +357,4 @@
     .u-border-bottom {
         border-bottom: solid 1rpx #f9f9f9 !important;
     }
-    
 </style>

pages/im/group/reviewed.vue

@@ -1,79 +1,108 @@
-<!-- 群聊邀请确认列表页面 -->
+<!-- 群聊邀请确认列表页面 -->
-<template>
+<template>
-    <view class="reviewed">
+    <view class="reviewed">
-        <view class="reviewed-item">
+        <view class="reviewed-item" v-for="(item, index) in pendings" :key="index">
-            <u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="36" />
+            <u-avatar class="avatar" :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" size="36" />
-            <view style="flex:1;">
+            <view style="flex:1;" v-if="item.latestMessage.operation == 'GroupPending'">
-                <view class="nickname"><span>{{`艾米的猫儿  `}}</span>想邀请<span>{{`  用户8066`}}</span>加入群聊</view>
+                <view class="nickname">用户: {{ JSON.parse(item.latestMessage.extra).name }} 申请加入群聊</view>
-                <view> 申请原因：{{`呵呵哒。。`}}</view>
+                <view> 申请原因：{{ item.latestMessage.message }}</view>
-            </view>
+            </view>
-            <view class="sure" @click="sure(2)"> 通过 </view>
+            <view style="flex:1;" v-if="item.latestMessage.operation == 'GroupInvite'">
-        </view>
+                <view class="nickname">
-    </view>
+                    <text>{{ contact(item.latestMessage.sourceUserId )}}</text>想邀请<span>{{ JSON.parse(item.latestMessage.extra).name }}</span>加入群聊
-</template>
+                </view>
-
+            </view>
-<script>
+            <view class="sure" @click="sure(item.latestMessage.targetUserId)"> 通过 </view>
-    import {
+        </view>
-        getGroupMakeSure,
+    </view>
-        getGroupMakeSureAllow
+</template>
-    } from "@/apis/interfaces/im.js"
+<!-- 
-    export default {
+[{
-        data() {
+    "latestMessage": {
-            return {
+        "operation": "GroupPending",  // GroupPending 申请加群，  GroupInvite 邀请进群
-                lists: [],
+        "message": "null",  申请的消息
-            };
+        "sourceUserId": "10047",  邀请人
-        },
+        申请人的简要信息
-        methods: {
+        "extra": "{\"name\":\"JasonChen\",\"portraitUrl\":\"http:\\/\\/storage.zh.shangkelian.cn\\/uploads\\/2022\\/02\\/17\\/2b3cb44bc8335b25ac3dc762ef810bad.jpg\"}",
-
+        "targetUserId": "10051",  被邀请人，或者是申请人
-            sure(id) {
+        "objectName": "RC:ContactNtf"
-                console.log(id, '....')
+    },
-                uni.navigateTo({
+}]
-                    url: "/pages/im/group/reviewedInfo?id=" + id
+ -->
-                })
+<script>
-            }
+    import {
-        }
+        getGroupMakeSure,
-    };
+        getGroupMakeSureAllow
-</script>
+    } from "@/apis/interfaces/im.js"
-
+    import im from '@/utils/im/message.js'
-<style lang="scss" scoped>
+
-    .reviewed {
+    export default {
-        .reviewed-item {
+        data() {
-            margin: $padding - 10;
+            return {
-            display: flex;
+                targetId: '',
-            flex-direction: row;
+                pendings: [],
-            align-items: flex-start;
+            };
-            justify-content: flex-start;
+        },
-            box-sizing: border-box;
+        computed: {
-            border-bottom: solid 1rpx #f9f9f9;
+            contact() {
-            font-size: $title-size-m - 2;
+                return function(targetId) {
-            padding-bottom: 20rpx;
+                    return this.$store.getters.contactInfo(targetId)
-            color: $text-gray-m;
+                }
-
+            }
-            .avatar {
+        },
-                background-color: $main-color;
+        onLoad(e) {
-                border-radius: 6rpx;
+            this.targetId = e.targetId
-                margin-right: 20rpx;
+            im.getGroupPendinglist(this.targetId, (result) => {
-            }
+                this.pendings = result
-
+            })
-            .nickname {
+        },
-                font-size: $title-size-m;
+        methods: {
-
+            sure(targetUserId) {
-                span {
+                // 直接调用通过或拒绝的接口
-                    color: $text-color;
+            }
-                    font-size: $title-size-m +1;
+        }
-                }
+    };
-            }
+</script>
-
+
-            .sure {
+<style lang="scss" scoped>
-                background-color: $main-color;
+    .reviewed {
-                color: #Fff;
+        .reviewed-item {
-                text-align: center;
+            margin: $padding - 10;
-                font-size: $title-size-m;
+            display: flex;
-                padding: 6rpx 20rpx;
+            flex-direction: row;
-                border-radius: 10rpx;
+            align-items: flex-start;
-                margin-left: 10rpx;
+            justify-content: flex-start;
-            }
+            box-sizing: border-box;
-        }
+            border-bottom: solid 1rpx #f9f9f9;
-
+            font-size: $title-size-m - 2;
-    }
+            padding-bottom: 20rpx;
+            color: $text-gray-m;
+
+            .avatar {
+                background-color: $main-color;
+                border-radius: 6rpx;
+                margin-right: 20rpx;
+            }
+
+            .nickname {
+                font-size: $title-size-m;
+
+                span {
+                    color: $text-color;
+                    font-size: $title-size-m +1;
+                }
+            }
+
+            .sure {
+                background-color: $main-color;
+                color: #Fff;
+                text-align: center;
+                font-size: $title-size-m;
+                padding: 6rpx 20rpx;
+                border-radius: 10rpx;
+                margin-left: 10rpx;
+            }
+        }
+
+    }
 </style>

pages/im/group/reviewedInfo.vue

@@ -1,62 +0,0 @@
-<!-- 群聊邀请确认列表页面 -->
-<template>
-    <view class="reviewed">
-        确认信息页面
-    </view>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                lists: [],
-            };
-        },
-
-        onLoad() {
-
-        },
-        methods: {
-            sure(id) {
-                uni.navigateTo({
-                    url:"/pages/im/group/reviewedInfo?id="+id
-                })
-            }
-        }
-    };
-</script>
-
-<style lang="scss" scoped>
-    .reviewed {
-        .reviewed-item {
-            margin: $padding;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-start;
-            box-sizing: border-box;
-            border-bottom: solid 1rpx #f9f9f9;
-            font-size: $title-size-m;
-            padding-bottom: 20rpx;
-            color: $text-gray;
-
-            .add-icon {
-                background-color: $main-color;
-                padding: 10rpx;
-                border-radius: 6rpx;
-                margin-right: 20rpx;
-            }
-
-            .sure {
-                // width: 140rpx;
-                // background-color: $main-color;
-                color: $main-color;
-                text-align: center;
-                font-size: $title-size-m;
-                padding: 6rpx 20rpx;
-                border-radius: 10rpx;
-            }
-        }
-
-    }
-</style>

utils/im/message.js

@@ -60,8 +60,7 @@ const getPendingList = (callback, total) => {
 
 // 群组申请列表，邀请列表
 const getGroupPendinglist = (targetId, callback) => {
-    total = total || 100
+    RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 100, 0, (res) => {
-    RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], total, 0, (res) => {
         if (res.code === 0) {
             const pendings = res.conversations.filter((item) => {
                 return item.targetId == targetId &&