ZhHealth/pages/im/index.vue

<template>
    <view class="content">
        <view v-if="$store.state.token != ''">
            <block v-if="conversations.length < 1">
                <view class="vertical null-list">
                    <u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
                        <template>
                            <view class="null-list-btn">开启聊天</view>
                        </template>
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
                    <view class="mssage-action">
                        <block v-if="!friend(item.targetId).portraitUrl">
                            <u-avatar clsss="mssage-action-cover" size="44"
                                :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
                                font-size="14" randomBgColor></u-avatar>
                        </block>
                        <block v-else>
                            <u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
                            </u-avatar>
                        </block>
                        <view class="mssage-action-content">
                            <view class="mssage-header">
                                <view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
                                <view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
                            </view>
                            <view class="mssage-msg">{{ item.latestMessage.content }}</view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <!-- 未登录 -->
        <view v-else class="vertical null-list">
            <u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
                <template>
                    <view class="null-list-btn" @click="toLogin">去登录</view>
                </template>
            </u-empty>
        </view>
    </view>
</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: [], // 会话列表
                isImToken: '', // 是否已鉴权
            }
        },
        computed: {
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        onShow() {
            if (this.$store.state.token !== '') {
                if (this.isImToken === '') {
                    getImToken().then(res => {
                        im.connect(res.token, res.userInfo)
                        this.isImToken = res.token
                        this.getConversationList()
                    })
                }
                this.getConversationList()
                this.isShown = true
            }
        },
        onHide() {
            this.isShown = false
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                uni.showToast({
                    title: '开发中暂未开放，敬请期待',
                    icon: 'none'
                })
            }
            if (e.index == 1) {
                this.$Router.push({
                    name: 'imFriends'
                })
            }
        },
        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 lang="scss" scoped>
    .content {
        background-color: $window-color;
        min-height: 100vh;

        .null-list {
            height: 100vh;
            text-align: center;

            &-btn {
                margin-top: $margin * 2;
                line-height: 70rpx;
                color: $main-color;
                border: solid 1rpx $main-color;
                padding: 0 ($padding*3);
                font-size: $title-size-m;
                border-radius: 35rpx;
                box-sizing: border-box;
            }
        }

        .mssage-box {
            background: white;

            .mssage-action {
                position: relative;
                padding: 20rpx $padding;

                &::after {
                    position: absolute;
                    left: $padding + 108;
                    right: 0;
                    bottom: 0;
                    content: " ";
                    height: 1rpx;
                    background: $border-color;
                }

                &-content {
                    position: absolute;
                    top: 20rpx;
                    height: 44px;
                    left: $padding + 108;
                    right: $margin;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .mssage-header {
                        display: flex;
                        font-size: $title-size;
                        line-height: 40rpx;
                        justify-content: space-between;

                        .header-name {
                            flex: 1;
                            @extend .nowrap;
                        }

                        .header-time {
                            padding-left: $padding;
                            font-size: $title-size-sm - 2;
                            color: $text-gray;
                        }
                    }

                    .mssage-msg {
                        font-size: $title-size-sm - 2;
                        color: $text-gray;
                        @extend .nowrap;
                    }
                }
            }

            &-item:last-child {
                .mssage-action::after {
                    display: none;
                }
            }
        }
    }
</style>