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.syncFriends()
					    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>