ZhHealth/pages/im/index.vue

<template>
    <view class="contents">
        <view class="ios-top"></view>
        <!-- header -->
        <view class="custom-header">
            <view class="header-flex">
                <view class="tabs">
                    <view class="item active">聊聊</view>
                </view>
                <view class="btns">
                    <view class="item" @click="scanQrCode">
                        <uni-icons color="#555" type="scan" size="22" />
                    </view>
                    <view class="item" @click="toFriendList">
                        <u-badge absolute max="99" :offset="[-5, -5]" :value="hasNewFriends" />
                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22" />
                    </view>
                </view>
            </view>
        </view>
        <!-- content -->
        <view v-if="$store.state.token !== ''">
            <connection-status :connection="connection" />
            <conversation-list @refresh="getConversationList()" :conversations="conversations" />
        </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 '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import im from '@/utils/im/index.js'
    import userAuth from '@/public/userAuth'
    import conversationList from './components/conversationList'
    import connectionStatus from './components/connectionStatus'

    export default {
        data() {
            return {
                conversations: [], // 会话列表
                connection: 0,
                hasNewFriends: 0
            }
        },
        components: {
            conversationList,
            connectionStatus
        },
        onLoad() {
            // 好友申请数量
            this.checkNewFriendPending()
            // 监听新的好友申请
            uni.$on('onContactNotification', () => {
                this.checkNewFriendPending()
            })
        },
        onShow() {
            if (this.$store.state.token !== '') {
                this.getConversationList()
            }
            uni.$on('onConnectionStatusChange', (status) => {
                this.connection = status
            })
            // 监听新消息
            uni.$on('onReceiveMessage', (msg) => {
                this.getConversationList()
            })
        },
        onHide() {
            uni.$off('onReceiveMessage')
        },
        methods: {
            onDemo(){
                console.log('1111')
                uni.navigateTo({
                    url: '/pages/im/chatDemo'
                })
            },
            checkNewFriendPending() {
                im.getPendingList((pendings) => {
                    this.hasNewFriends = pendings.length
                })
            },
            // 检查登录
            toLogin() {
                if (this.$store.state.token === '') {
                    const Auth = new userAuth()
                    Auth.Login()
                    return false
                }
                return true
            },
            // 获取私聊的会话列表
            getConversationList() {
                const count = 1000
                const timestamp = 0
                RongIMLib.getConversationList([1, 3], count, timestamp, ({
                    code,
                    conversations
                }) => {
                    if (code === 0) {
                        this.conversations = conversations
                    }
                })
            },
            // 调起扫码
            scanQrCode() {
                uni.scanCode({
                    success: (res) => {
                        if (res.scanType == 'QR_CODE') {
                            if (res.result.substr(0, 10) == 'ADDFRIEND|') {
                                uni.navigateTo({
                                    url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
                                })
                            } else if (res.result.substr(0, 10) == 'JOINGROUP|') {
                                uni.navigateTo({
                                    url: '/pages/im/group/apply?targetId=' + res.result.substr(10)
                                })
                            } else {
                                uni.showToast({
                                    title: '暂不支持的二维码'
                                })
                            }
                        }
                    }
                })
            },
            toFriendList() {
                uni.navigateTo({
                    url: '/pages/im/friends/index'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // contents
    .contents {
        background-color: #fff;
        min-height: 100vh;
        padding-top: 90rpx + 6rpx;
        box-sizing: border-box;

        .custom-header {
            @extend .ios-top;
            background: $window-color;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;

            .header-flex {
                padding: 20rpx $padding;
                display: flex;
                justify-content: space-between;
                height: 60rpx;
                line-height: 60rpx;

                .tabs {

                    .item {
                        position: relative;
                        display: inline-block;
                        font-size: $title-size-lg;
                        color: $text-gray;
                        padding: 0 ($padding - 10);
                        border-radius: 30rpx;

                        &.active {
                            background: rgba($color: $main-color, $alpha: .1);
                            color: $main-color;
                            font-weight: bold;
                        }
                    }
                }

                .btns {
                    .item {
                        position: relative;
                        display: inline-block;
                        margin-left: $margin;
                    }
                }
            }
        }

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

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

    .u-border-bottom {
        border-bottom: solid 1rpx #f9f9f9 !important;
    }
</style>