ZhHealth/pages/im/group/chat.vue

<template>
    <view class="chat">
        <sent-message-bar id="msgbar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />

        <view class="shade" @click="hidePop" v-show="showPop">
            <view class="pop" :style="popStyle" :class="{'show':showPop}">
                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
                    {{ item }}
                </view>
            </view>
        </view>

        <view class="body">
            <view class="place" :style="{ height: placeHeight + 'px' }"></view>
            <view class="scroll" id="scroll">
                <view class="cell" v-for="(message, index) in messages" :key="index">
                    <show-message-cell :message="message" isGroup @messageAction="messageAction" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getGroupBase
    } from '@/apis/interfaces/im.js'
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import im from '@/utils/im/index.js'
    import sentMessageBar from '../components/sentMessageBar'
    import showMessageCell from '../components/showMessageCell'
    import utils from '@/utils/index.js'
    import onGroupDismiss from '../mixins/onGroupDismiss.js'
    import imBase from '../mixins/imBase.js'
    import messageActions from '../mixins/messageActions.js'

    export default {
        mixins: [
            imBase,
            onGroupDismiss,
            messageActions
        ],
        components: {
            sentMessageBar,
            showMessageCell
        },
        data() {
            return {
                avatarRpx: 84,
                targetId: '',
                conversationType: RongIMLib.ConversationType.GROUP,
                messages: [],
                groupInfo: {
                    name: ''
                },
                placeHeight: uni.getSystemInfoSync().windowHeight,
                bottomHeihgt: 56
            }
        },
        computed: {
            latestMessage() {
                if (this.messages.length) {
                    return this.messages[0]
                } else {
                    return {
                        sentTime: 0
                    }
                }
            }
        },
        onShow() {
            this.initGroupInfo()
        },
        onLoad(e) {
            const query = uni.createSelectorQuery().in(this);
            this.$nextTick(function() {
                query.select('#msgbar').boundingClientRect(bottom => {
                    this.bottomHeihgt = bottom.height
                }).exec();
            })
            // 监听键盘高度变化
            uni.onKeyboardHeightChange(keyboard => {
                query.select('#scroll').boundingClientRect(scroll => {
                    const placeHeight = this.windowHeight - scroll.height - keyboard.height - this
                        .bottomHeihgt
                    this.placeHeight = placeHeight > 0 ? placeHeight : 0
                }).exec();
            })
            this.targetId = e.targetId
            // 获取历史消息列表
            this.getMessageList()
            // 监听新消息
            uni.$on('onReceiveMessage_' + this.targetId, (message) => {
                this.getNewMessage()
            })
            uni.$on('onReceiptRequest', (msg) => {
                if (msg.targetId == this.targetId) {
                    RongIMLib.getMessageByUId(msg.messageUId, (result) => {
                        RongIMLib.sendReadReceiptResponse(3, this.targetId, [result.message], (res) => {
                            console.error('发送群聊已读回执成功', res);
                        })
                    })
                }
            })
            // 群已读回执
            uni.$on('onReceiptResponse', (msg) => {
                if (msg.targetId == this.targetId) {
                    this.messages = this.messages.map(item => {
                        if (msg.messageId == item.messageId) {
                            return msg
                        } else {
                            return item
                        }
                    })
                }
            })
            // 清理聊天记录
            uni.$once('cleanGroupMessage', this.getMessageList)
            uni.$on('onRecallMessage_' + this.targetId, (message) => {
                this.messages = this.messages.map(item => {
                    if (message.messageId == item.messageId) {
                        return message
                    } else {
                        return item
                    }
                })
            })
            uni.$on('onRemoveMessage_' + this.targetId, (messageId) => {
                this.messages = this.messages.filter(item => item.messageId != messageId)
            })
        },
        onUnload() {
            uni.$off('onRemoveMessage_' + this.targetId)
            uni.$off('onReceiveMessage_' + this.targetId)
            uni.$off('onUpdateProfile_' + this.targetId)
            uni.$off('onRecallMessage_' + this.targetId)
            uni.$off('onReceiptRequest')
            uni.$off('onReceiptResponse')
        },
        onNavigationBarButtonTap() {
            uni.navigateTo({
                url: '/pages/im/group/info?targetId=' + this.targetId
            })
        },
        methods: {
            initGroupInfo() {
                // 获取群信息，成员数量，设置标题
                getGroupBase(this.targetId).then(res => {
                    uni.setNavigationBarTitle({
                        title: res.name + `(${res.members})`
                    })
                })
            },
            onScroll(e) {
                this.$refs.messageBar.onHidePopus()
            },
            getNewMessage() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    this.latestMessage.sentTime,
                    10,
                    false,
                    (messages) => {
                        this.messages.unshift(...messages)
                        this.scrollBottom()
                    })
            },
            // 获取消息列表
            getMessageList() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    0,
                    20,
                    true,
                    (messages) => {
                        console.log('获取消息列表', messages);
                        const msgs = messages.filter(item => item.receivedStatus == 0)
                        console.log('未读消息', msgs);
                        if (msgs.length) {
                            RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
                                console.error('发送群聊已读回执成功', res);
                                msgs.map(item => {
                                    RongIMLib.setMessageReceivedStatus(item.messageId, 1)
                                })
                            })
                        }

                        this.messages = messages
                        this.scrollBottom()
                    })
            },
            // 滚动到底部
            scrollBottom(type) {
                if (this.latestMessage) {
                    // 清理当前会话，未读消息数量
                    RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
                        .sentTime)
                    // 更新badge提醒数量
                    im.setNotifyBadge()
                }
            }
        },
        onHide() {
            // console.log(JSON.stringify(this.$refs))
            // this.$refs.voice.stopPlay()
        }
    }
</script>

<style scoped lang="scss">
    /* 窗口 */
    .chat {
        background: $window-color;
        height: 100vh;
        display: flex;
        flex-direction: column-reverse;

        .body {
            overflow: scroll;
            flex: 1;
            height: 0;
            display: flex;
            flex-direction: column-reverse;

            .scroll {
                display: flex;
                flex-direction: column-reverse;
                justify-content: flex-end;

                .cell {
                    padding: 10rpx 20rpx;


                }
            }
        }
    }

    /* 遮罩 */
    .shade {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;

        .pop {
            border-radius: 10rpx;
            position: fixed;
            z-index: 101;
            width: 200rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            text-align: left;
            color: #333;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            line-height: 80rpx;
            transition: transform 0.15s ease-in-out 0s;
            user-select: none;
            -webkit-touch-callout: none;
            transform: scale(0, 0);

            &.show {
                transform: scale(1, 1);
            }

            &>view {
                padding: 0 20rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                user-select: none;
                -webkit-touch-callout: none;

                &:active {
                    background-color: #f3f3f3;
                }
            }
        }
    }
</style>