274 lines
9.5 KiB
Vue
274 lines
9.5 KiB
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': showType == 0}]" @click="showPrivate">
|
||
私聊
|
||
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
|
||
</view>
|
||
<view :class="['item', {'active': showType == 1}]" @click="showGroup">
|
||
群聊
|
||
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
|
||
</view>
|
||
</view>
|
||
<view class="btns">
|
||
<view class="item" @click="scanQrCode">
|
||
<uni-icons color="#555" type="scan" size="22" />
|
||
</view>
|
||
<view class="item" @click="onNav('imFriends', {})">
|
||
<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>
|
||
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
|
||
<!-- content -->
|
||
<view v-if="$store.state.token !== ''">
|
||
<conversation-private v-show="showType == 0" @refresh="getPrivateConversationList()"
|
||
:conversations="conversations" />
|
||
<conversation-group v-show="showType == 1" @refresh="getGroupConversationList()"
|
||
:conversations="groupConversations" />
|
||
</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 conversationPrivate from './components/conversationPrivate'
|
||
import conversationGroup from './components/conversationGroup'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isShown: true, // 当前页面显示状态
|
||
showType: 1, // 0 单聊，1 群聊
|
||
conversations: [], // 会话列表
|
||
groupConversations: [],
|
||
connection: 0,
|
||
privateUnread: 0,
|
||
groupUnread: 0,
|
||
hasNewFriends: 0
|
||
}
|
||
},
|
||
components: {
|
||
conversationPrivate,
|
||
conversationGroup
|
||
},
|
||
onLoad() {
|
||
// 好友申请数量
|
||
this.checkNewFriendPending()
|
||
uni.$on('onConnectionStatusChange', (status) => {
|
||
this.connection = status
|
||
})
|
||
uni.$on('onContactNotification', this.checkNewFriendPending)
|
||
},
|
||
onShow() {
|
||
if (this.$store.state.token !== '') {
|
||
this.getPrivateConversationList()
|
||
this.getGroupConversationList()
|
||
}
|
||
// 监听新消息
|
||
uni.$on('onReceivePrivateMessage', (msg) => {
|
||
this.getPrivateConversationList()
|
||
})
|
||
uni.$on('onReceiveGroupMessage', (msg) => {
|
||
this.getGroupConversationList()
|
||
})
|
||
|
||
this.isShown = true
|
||
},
|
||
onHide() {
|
||
uni.$off('onReceivePrivateMessage')
|
||
uni.$off('onReceiveGroupMessage')
|
||
this.isShown = false
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
if (e.index == 0) {
|
||
uni.showToast({
|
||
title: '开发中暂未开放，敬请期待',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
if (e.index == 1) {
|
||
if (this.toLogin()) {
|
||
this.$Router.push({
|
||
name: 'imFriends'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
showPrivate() {
|
||
console.log('切换到单聊');
|
||
this.showType = 0
|
||
},
|
||
showGroup() {
|
||
console.log('切换到群聊');
|
||
this.showType = 1
|
||
},
|
||
checkNewFriendPending() {
|
||
// 获取是否有新的好友申请
|
||
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
|
||
if (res.code === 0) {
|
||
this.hasNewFriends = res.conversations.filter((item) => {
|
||
return item.objectName == RongIMLib.ObjectName.ContactNotification
|
||
}).length
|
||
}
|
||
})
|
||
},
|
||
// 检查登录
|
||
toLogin() {
|
||
if (this.$store.state.token === '') {
|
||
const Auth = new userAuth()
|
||
Auth.Login()
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
// 获取私聊的会话列表
|
||
getPrivateConversationList() {
|
||
const count = 1000
|
||
const timestamp = 0
|
||
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
|
||
if (res.code === 0) {
|
||
this.conversations = res.conversations
|
||
}
|
||
})
|
||
},
|
||
// 获取群组会话列表
|
||
getGroupConversationList() {
|
||
const count = 1000
|
||
const timestamp = 0
|
||
RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
|
||
if (res.code === 0) {
|
||
this.groupConversations = res.conversations
|
||
}
|
||
})
|
||
},
|
||
// 点击按钮
|
||
onNav(name, params) {
|
||
if (this.toLogin) {
|
||
if (name === '') {
|
||
uni.showToast({
|
||
title: '开发中，敬请期待',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.$Router.push({
|
||
name,
|
||
params
|
||
})
|
||
}
|
||
},
|
||
// 调起扫码
|
||
scanQrCode() {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
if (res.scanType == 'QR_CODE') {
|
||
res.result.substr(0, 10) == 'ADDFRIEND|'
|
||
uni.navigateTo({
|
||
url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// header
|
||
.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;
|
||
margin-left: $margin;
|
||
display: inline-block;
|
||
font-size: $title-size-lg;
|
||
color: $text-gray;
|
||
padding: 0 ($padding - 10);
|
||
border-radius: 30rpx;
|
||
|
||
&:first-child {
|
||
margin: 0;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba($color: $main-color, $alpha: .1);
|
||
color: $main-color;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
.item {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-left: $margin;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// contents
|
||
.contents {
|
||
background-color: $window-color;
|
||
min-height: 100vh;
|
||
padding-top: 90rpx + 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.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>
|