ZhHealth/pages/im/group/chat.vue

<template>
    <view class="group--chat">
        <scroll-view class="body" :show-scrollbar="false">
            <view class="cell" v-for="(item, index) in messages" :key="index">
                <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
                <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                    <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
                        :src="contact(item.senderUserId).portraitUrl" />
                    <view class="msg">
                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
                            :msg="item.content" :name="contact(item.senderUserId).name" />
                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
                            :msg="item.content" :name="contact(item.senderUserId).name" />
                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
                            :msg="item.content" :name="contact(item.senderUserId).name" />
                    </view>
                </view>
            </view>
            <view class="cell-footer" ref="chatBottom"></view>
        </scroll-view>
        <sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
    </view>
</template>

<script>
    import {
        timeCustomCN
    } from '@/utils/filters.js'
    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 showVoice from '../components/showVoice'
    import showImage from '../components/showImage'
    import showText from '../components/showText'
    import sentMessageBar from '../components/sentMessageBar'

    const ChatList = uni.requireNativePlugin('dom')

    export default {
        components: {
            showVoice,
            showImage,
            showText,
            sentMessageBar
        },
        data() {
            return {
                targetId: '',
                conversationType: RongIMLib.ConversationType.GROUP,
                messages: [],
                groupInfo: {
                    name: ''
                }
            }
        },
        computed: {
            latestMessage() {
                if (this.messages.length) {
                    return this.messages[this.messages.length - 1]
                } else {
                    return {
                        sentTime: 0
                    }
                }
            },
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            this.groupInfo = this.$store.getters.contactInfo(this.targetId)
            uni.setNavigationBarTitle({
                title: this.groupInfo.name
            })
            // 获取群成员数量
            getGroupBase(this.targetId).then(res => {
                uni.setNavigationBarTitle({
                    title: this.groupInfo.name + `(${res.members})`
                })
            })
            // 获取历史消息列表
            this.getMessageList()
            // 监听收到本群的消息，追加消息
            uni.$on('onReceiveMessage', (msg) => {
                if (msg.targetId == this.targetId) {
                    this.getNewMessage()
                }
            })
            // 清理聊天记录
            uni.$once('cleanGroupMessage', this.getMessageList)
        },
        onNavigationBarButtonTap() {
            uni.navigateTo({
                url: '/pages/im/group/info?targetId=' + this.targetId
            })
        },
        methods: {
            onScroll(e){
                this.$refs.messageBar.onHidePopus()
            },
            toUser(item) {
                if (item.senderUserId == '__system__') {
                    return
                }
                if (item.messageDirection == 1) {
                    uni.navigateTo({
                        url: '/pages/im/friends/mine?targetId=' + item.senderUserId
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/im/friends/info?targetId=' + item.senderUserId
                    })
                }
            },
            getNewMessage() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    this.latestMessage.sentTime,
                    10,
                    false,
                    (messages) => {
                        this.messages = this.messages.concat(messages)
                        this.scrollBottom()
                    })
            },
            // 获取消息列表
            getMessageList() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    0,
                    20,
                    true,
                    (messages) => {
                        this.messages = messages.reverse()
                        this.scrollBottom()
                    })
            },
            // 滚动到底部
            scrollBottom(type) {
                if (this.latestMessage) {
                    // 清理当前会话，未读消息数量
                    RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
                        .sentTime)
                    // // 发送消息已读状态给对方
                    // RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
                    // 更新badge提醒数量
                    im.setNotifyBadge()
                }

                setTimeout(() => {
                    let el = this.$refs.chatBottom
                    ChatList.scrollToElement(el, {
                        offset: 0,
                        animated: false
                    })
                }, 50)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .group--chat {
        background: $window-color;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        .body {
            flex: 1;
            .cell {
                padding: 10rpx 30rpx;

                .cell-system {
                    text-align: center;
                }

                .cell-item {
                    display: flex;
                    flex-direction: row;
                    width: 690rpx;
                    justify-content: flex-start;
                    align-items: flex-start;
                    margin-top: 20rpx;

                    &.left {
                        flex-direction: row;
                    }

                    &.right {
                        flex-direction: row-reverse;

                        .state {
                            flex-direction: row;
                            justify-content: flex-end;
                        }
                    }

                    .avatar {
                        width: 78rpx;
                        height: 78rpx;
                        background-color: white;
                        border-radius: 10rpx;
                    }

                    .msg {
                        margin: 0 20rpx;

                        .user {
                            font-size: 18rpx;
                            line-height: 40rpx;
                        }
                    }
                }

                .cell-footer {
                    height: 20rpx;
                }
            }
        }

        .footer {
            background: white;
            padding: 20rpx 30rpx;
            display: flex;
            justify-content: space-between;
            flex-direction: row;

            .msg-type {
                width: 70rpx;
                height: 70rpx;

                .icon {
                    margin: 5rpx;
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
    }
    
    .message-bar{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>