ZhHealth/pages/im/private/chat.vue

<template>
    <view class="chat">
        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
        <!-- chat -->
        <view class="body">
            <view class="scroll">
                <view class="cell" v-for="(item, index) in messages" :key="index">
                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                    <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                        <u-avatar class="avatar" size="40" shape="square"
                            @click="showUser(item.senderUserId, item.messageDirection)"
                            :src="contact(item.senderUserId).portraitUrl" />
                        <view class="msg">
                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
                                :msg="item.content" />
                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
                                :msg="item.content" />
                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
                                :msg="item.content" />
                            <view class="state" v-if="item.messageDirection == 1">
                                <text
                                    :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    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'
    export default {
        components: {
            sentMessageBar,
            showVoice,
            showImage,
            showText
        },
        data() {
            return {
                targetId: '',
                messages: [],
                conversationType: 1,
                userInfo: {
                    name: '',
                    userId: '',
                    portraitUrl: ''
                }
            }
        },
        computed: {
            latestMessage() {
                if (this.messages.length) {
                    return this.messages[0]
                } else {
                    return {
                        sentTime: 0
                    }
                }
            },
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            this.userInfo = this.$store.getters.contactInfo(this.targetId)
            uni.setNavigationBarTitle({
                title: this.contact(this.targetId).name
            })
            // 获取消息列表
            this.getMessageList()
            // 监听消息已读状态
            uni.$on('onReadReceiptReceived', (data) => {
                if (data.targetId == this.targetId) {
                    this.messages = this.messages.map((item) => {
                        if (item.messageDirection == 1 && item.sentStatus == 30 && item.receivedTime <
                            data.messageTime + 1000) {
                            item.sentStatus = 50
                        }
                        return item
                    })
                }
            })
            // 监听收到新消息，判断是否是当前会话，更新会话内容
            uni.$on('onReceiveMessage', (msg) => {
                if (msg.targetId == this.targetId) {
                    this.getNewMessage()
                }
            })
        },
        onUnload() {
            uni.$off('onReadReceiptReceived')
        },
        methods: {
            getNewMessage() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    this.latestMessage.sentTime || 0,
                    1,
                    false,
                    (messages) => {
                        this.messages.unshift(...messages)
                        this.scrollBottom()
                    })
            },
            // 获取消息列表
            getMessageList() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    0,
                    20,
                    true,
                    (messages) => {
                        this.messages = messages
                        this.scrollBottom()
                    })
            },
            // 展示好友信息,  type 1 是自己， 2 是对方
            showUser(targetId, type) {
                uni.navigateTo({
                    url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
                        '/pages/im/friends/info?targetId=' + targetId
                })
            },
            // 滚动到底部
            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()
                }
            }
        }
    }
</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 30rpx;

                    .time {
                        text-align: center;
                        font-size: 24rpx;
                        color: #666;
                    }

                    .cell-item {
                        display: flex;
                        width: 690rpx;
                        justify-content: flex-start;

                        &.left {
                            flex-direction: row;
                        }

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

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

                        .msg {
                            margin: 0 20rpx;

                            .state {
                                padding-top: 10rpx;

                                .state-text {
                                    font-size: $title-size-m - 2;
                                    color: rgba($color: $main-color, $alpha: 0.3)
                                }

                                .state-text-active {
                                    font-size: $title-size-m - 2;
                                    color: #cecece;
                                }
                            }
                        }
                    }

                    .cell-footer {
                        height: 20rpx;
                    }
                }
            }
        }
    }
</style>