ZhHealth/pages/im/private/chat.nvue

<template>
    <view class="chat">
        <!-- chat -->
        <list class="body" :show-scrollbar="false">
            <cell class="cell" v-for="(item, index) in messages" :key="index">
                <view class="time">
                    <text class="text">{{ customCN(item.sentTime) }}</text>
                </view>
                <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
                    <image class="avatar" :src="userInfo.portraitUrl" mode="aspectFill"
                        @click="showUser(targetId, item.messageDirection)"></image>
                    <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="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
                        </view>
                    </view>
                </view>
            </cell>
            <cell class="cell-footer" ref="chatBottom"></cell>
        </list>
        <!-- footer -->
        <view class="footer">
            <view class="msg-type" @click="changeMessageType">
                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
                </image>
                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
                </image>
            </view>
            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
                @success="getMessageList" />
            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
                @success="getMessageList" />
            <view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
                <image class="icon" src="@/static/icon/popups-icon.png"></image>
            </view>
        </view>
        <!-- 弹出层 -->
        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
            @success="() => {showPopups = false, getMessageList()}"></sent-popups>
    </view>
</template>

<script>
    import {
        timeCustomCN
    } from '@/utils/filters.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 sentText from '../components/sentText'
    import sentVoice from '../components/sentVoice'
    import sentPopups from '../components/sentPopups'

    const ChatList = uni.requireNativePlugin('dom')

    export default {
        data() {
            return {
                targetId: '',
                messages: [],
                conversationType: 1,
                userInfo: {
                    name: '',
                    userId: '',
                    portraitUrl: ''
                },
                chatType: 1, // 0 语音，1 文本
                showPopups: false,
                inputFocus: false // 输入框是否获得了焦点
            }
        },
        components: {
            showVoice,
            showImage,
            showText,
            sentText,
            sentVoice,
            sentPopups
        },
        onLoad(e) {
            this.targetId = e.targetId
            this.userInfo = this.$store.getters.userInfo(this.targetId)
            uni.setNavigationBarTitle({
                title: this.userInfo.name
            })
            // 获取消息列表
            this.initMessageList()
            // 监听消息已读状态
            uni.$on('onReadReceiptReceived', (data) => {
                if (data.targetId == this.targetId) {
                    this.getMessageList()
                }
            })
            // 监听收到新消息，判断是否是当前会话，更新会话内容
            uni.$on('onReceiveMessage', (msg) => {
                if (msg.targetId == this.targetId) {
                    this.initMessageList()
                }
            })
        },
        methods: {
            initMessageList() {
                this.getMessageList()
                // 清理当前会话，未读消息数量
                RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
                // 发送消息已读状态给对方
                RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
                // 更新badge提醒数量
                im.setNotifyBadge()
            },
            customCN(val) {
                return timeCustomCN(val)
            },
            // 切换聊天类型，语音/文本
            changeMessageType() {
                this.chatType = this.chatType === 1 ? 0 : 1
            },
            // 获取消息列表
            getMessageList() {
                im.getMessageList(
                    this.conversationType,
                    this.targetId,
                    new Date().getTime(),
                    10,
                    true,
                    (messages) => {
                        console.log('获取到的消息', messages);
                        this.messages = messages.reverse()
                        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 (type === 'msgPopups') {
                    this.showPopups = !this.showPopups
                }
                setTimeout(() => {
                    let el = this.$refs.chatBottom
                    ChatList.scrollToElement(el, {
                        offset: 0,
                        animated: false
                    })
                }, 50)
            }
        }
    }
</script>

<style scoped lang="scss">
    /* 窗口 */
    .chat {
        background: $window-color;
        flex: 1;

        .body {
            flex: 1;

            .cell {
                padding: 10rpx 30rpx;

                .time {
                    justify-content: center;
                    align-items: center;
                    padding-bottom: 20rpx;

                    .text {
                        background: #fff;
                        font-size: 24rpx;
                        color: #666;
                        line-height: 40rpx;
                        padding: 0 20rpx;
                        border-radius: 10rpx;
                    }
                }

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


                    &.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;

                        .state {
                            padding-top: 10rpx;

                            .state-text {
                                font-size: 24rpx;
                                color: #666;
                            }
                        }
                    }
                }

                .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;
                }
            }
        }
    }
</style>