邀请好友

pages/im/group/reviewed.vue

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