144 lines
4.8 KiB
Vue
144 lines
4.8 KiB
Vue
<template>
|
|
<view>
|
|
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
|
|
<view class="friend-flex u-border-bottom" @click="toPending">
|
|
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
|
|
<u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
|
|
<view class="info">新的朋友</view>
|
|
</view>
|
|
<view class="friend-flex" @click="showToast">
|
|
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
|
|
<view class="info">我的群聊</view>
|
|
</view>
|
|
<block v-if="friends.length > 0">
|
|
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
|
|
<u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
|
|
</u-index-anchor>
|
|
|
|
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
|
|
@click="toFriend(friendItem.userId)">
|
|
<u-avatar size="40" shape="square" :src="friend(friendItem.userId).portraitUrl" />
|
|
<view class="info">
|
|
<view class="name">{{ friend(friendItem.userId).name }}</view>
|
|
<view class="address">{{ friendItem.address }}</view>
|
|
</view>
|
|
</view>
|
|
</u-index-item>
|
|
</block>
|
|
<block v-else>
|
|
<u-empty class="pages-null" mode="data" text="暂无好友">
|
|
</u-empty>
|
|
</block>
|
|
</u-index-list>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getFriendsLetter
|
|
} from '@/apis/interfaces/im';
|
|
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
indexs: [],
|
|
friends: [],
|
|
pendingCount: 0
|
|
};
|
|
},
|
|
computed: {
|
|
friend() {
|
|
return function(targetId) {
|
|
return this.$store.getters.userInfo(targetId)
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getFriendList()
|
|
this.checkNewFriendPending()
|
|
uni.$on('onContactNotification', () => {
|
|
this.checkNewFriendPending()
|
|
this.getFriendList()
|
|
})
|
|
},
|
|
onUnload() {
|
|
uni.$off('onContactNotification')
|
|
},
|
|
methods: {
|
|
getFriendList() {
|
|
getFriendsLetter().then(res => {
|
|
this.indexs = res.indexList
|
|
this.friends = res.itemArr
|
|
})
|
|
},
|
|
checkNewFriendPending() {
|
|
// 获取是否有新的好友申请
|
|
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
|
|
if (res.code === 0) {
|
|
this.pendingCount = res.conversations.filter((item) => {
|
|
return item.objectName == RongIMLib.ObjectName.ContactNotification
|
|
}).length
|
|
}
|
|
})
|
|
},
|
|
showToast() {
|
|
uni.showToast({
|
|
title: '群聊功能暂未开放，敬请期待',
|
|
icon: 'none'
|
|
});
|
|
},
|
|
toFriend(targetId) {
|
|
uni.navigateTo({
|
|
url: '/pages/im/friends/info?targetId=' + targetId
|
|
})
|
|
},
|
|
// 新朋友
|
|
toPending() {
|
|
uni.navigateTo({
|
|
url: '/pages/im/friends/pending'
|
|
});
|
|
}
|
|
},
|
|
onNavigationBarButtonTap(e) {
|
|
uni.navigateTo({
|
|
url: '/pages/im/friends/search'
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 页面空
|
|
.pages-null {
|
|
height: 70vh;
|
|
}
|
|
|
|
// 好友列表
|
|
.friend-flex {
|
|
position: relative;
|
|
padding: 20rpx $padding;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.info {
|
|
flex: 1;
|
|
margin-left: $padding;
|
|
|
|
.name {
|
|
font-size: $title-size + 2;
|
|
font-size: $title-size + 2;
|
|
color: #454545 !important;
|
|
@extend .nowrap;
|
|
}
|
|
|
|
.address {
|
|
color: $text-gray-m;
|
|
font-size: $title-size-m - 5;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|