ZhHealth/pages/im/index.vue

<template>
    <div>
        <div v-if="$store.state.token != ''">
            <div class="container">
                <div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
                    <div class="avatar">
                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
                            :value="item.unreadMessageCount" />
                        <u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
                    </div>
                    <div class="content ">
                        <div class="name">
                            <h3>{{ friend(item.targetId).name }}</h3>
                            <span class="time">{{ item.sentTime|timeCustomCN }}</span>
                        </div>
                        <div class="u-line-1">{{ item.latestMessage.content }}</div>
                    </div>
                </div>
            </div>
            <u-loadmore status="nomore" />
        </div>
        <div v-else>
            <u-button @click="toLogin">去登录</u-button>
        </div>
    </div>
</template>

<script>
    import * as RongIMLib from '@rongcloud/imlib-uni'
    import im from '@/utils/im/index.js'
    import userAuth from '@/public/userAuth'
    import {
        getImToken
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                isShown: true, // 当前页面显示状态
                conversations: [] // 会话列表
            }
        },
        computed: {
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        onLoad() {
            getImToken().then(res => {
                im.syncFriends()
                im.connect(res.token, res.userInfo)
                
                this.getConversationList()
            })
        },
        onShow() {
            this.getConversationList()
            this.isShown = true
        },
        onHide() {
            this.isShown = false
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {}
            if (e.index == 1) {
                uni.navigateTo({
                    url: '/pages/im/friends/index',
                    fail: (err) => {
                        console.log(err);
                    }
                })
            }
        },
        watch: {
            '$store.getters.newMessage': function(n, o) {
                if (this.isShown) {
                    this.getConversationList()
                }
            }
        },
        methods: {
            // 检查登录
            toLogin() {
                if (this.$store.state.token === '') {
                    const Auth = new userAuth()
                    Auth.Login()
                    return false
                }
                return true
            },
            getFriend(targetId) {
                return this.$store.getters.userInfo(targetId)
            },
            getConversationList() {
                const count = 1000
                const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
                RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
                    if (res.code === 0 && res.conversations.length > 0) {
                        this.conversations = res.conversations
                    }
                })
            },
            // 进入聊天的详情页面，清理未读消息数量
            toDetail(item) {
                uni.navigateTo({
                    url: '/pages/im/private/index?targetId=' + item.targetId +
                        '&conversationType=' + item.conversationType
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        padding: 0 $uni-spacing-col-lg $uni-spacing-col-lg $uni-spacing-col-lg;
    }

    .msg-item {
        display: flex;
        align-items: center;
        padding: $uni-spacing-col-lg 0;

        .avatar {
            position: relative;
            margin-right: $uni-spacing-col-lg;

            .u-badge {
                z-index: 9;
            }
        }

        .content {
            flex: 1;

            .name {
                display: flex;
                justify-content: space-between;
                font-size: $uni-font-size-base;

                .time {
                    font-size: $uni-font-size-sm;
                    color: $uni-text-color-grey;
                }
            }

            .u-line-1 {
                color: $u-info;
                font-size: $uni-font-size-sm;
            }
        }
    }
</style>