ZhHealth/pages/im/group/reviewed.vue

<!-- 群聊邀请确认列表页面 -->
<template>
    <view class="reviewed">
        <block v-if="pendings.length > 0">
            <view class="reviewed-item" v-for="(item, index) in pendings" :key="index">
               <u-avatar class="avatar"
                    :src="JSON.parse(item.content.extra).portraitUrl || require('@/static/user/cover.png')"
                    shape="square" size="46" />
                <view style="flex:1;" v-if="item.content.operation == 'GroupPending'">
                    <view class="nickname">{{ JSON.parse(item.content.extra).name }} 申请加入群聊</view>
                    <view> 申请原因：{{ item.content.message }}</view>
                </view>
                <view style="flex:1;" v-if="item.content.operation == 'GroupInvite'">
                    <view class="nickname">
                        <text>{{ contact(item.content.sourceUserId).name }}</text>想邀请<span>{{ JSON.parse(item.content.extra).name }}</span>加入群聊
                    </view>
                </view>
                <view class="sure" @click="sure(item.content.targetUserId,item.messageId)"> 通过 </view>
            </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>
<script>
    import {
        getGroupMakeSure,
        getGroupMakeSureAllow,
        groupMakeSure
    } from "@/apis/interfaces/im.js"
    import im from '@/utils/im/message.js'
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'


    export default {
        data() {
            return {
                targetId: '',
                pendings: [],
            };
        },
        computed: {
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            this.getList()
        },
        methods: {
            getList() {
                im.getGroupPendinglist(this.targetId, (result) => {
                    console.log(result)
                    this.pendings = result
                })
            },
            sure(userId, latestMessageId) {
                groupMakeSure(this.targetId, userId).then(res => {
                    // 清除聊天列表
                    RongIMLib.deleteMessagesByIds([latestMessageId], ({
                        code
                    }) => {
                        console.log('code', code)
                        if (code == 0) {
                            uni.showToast({
                                title: ` 通过 `,
                                icon: 'none',
                                mask: true,
                                duration: 2000
                            })
                            this.getList()
                            uni.$emit('groupInvitedUser')
                        }
                    })

                }).catch(err => {
                    // uni.showToast({
                    //     title: err.message,
                    //     icon: 'none',
                    //     mask: true,
                    //     duration: 2000
                    // })
                    RongIMLib.deleteMessagesByIds([latestMessageId], ({
                        code
                    }) => {
                        console.log('code', code)
                        if (code == 0) {
                            uni.showToast({
                                title:err.message,
                                icon: 'none',
                                mask: true,
                                duration: 500         
                            })
                            this.getList()
                            uni.$emit('groupInvitedUser')
                        }
                    })
                })
                // 直接调用通过或拒绝的接口
            }
        }
    };
</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;
            padding-bottom: 20rpx;
            color: $text-gray-m;

            .avatar {
                background-color: $main-color;
                border-radius: 6rpx;
                margin-right: 20rpx;
            }

            .nickname {
                font-size: $title-size;
                color: $text-color;
                padding-bottom: 6rpx;

                span {
                    color: $text-color;
                    font-size: $title-size-m +1;
                    padding-top: 20rpx;
                }
            }

            .sure {
                background-color: $main-color;
                color: #Fff;
                text-align: center;
                font-size: $title-size-m;
                padding: 6rpx 20rpx;
                border-radius: 10rpx;
                margin-left: 10rpx;
            }
        }

    }
    .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>