TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

根据事件广播，更新好友申请的数量提醒

Browse Source
This commit is contained in:
Jason.Chen
2022-02-09 12:01:36 +08:00
parent fbf9d7db31
commit 1678fd6e80
8 changed files with 200 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
pages/im/components/friendApplyCell.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<view class="apply--cell u-border-bottom">
<view class="avatar">
<u-avatar :src="user.portraitUrl" shape="square" size="46" />
</view>
<view class="info">
<view class="name">
{{ user.name }}
</view>
<view class="message">
{{ message.message }}
</view>
</view>
<view class="action">
<u-button type="success" size="mini" @click="resolve">通过</u-button>
<u-button type="warning" size="mini" @click="reject">拒绝</u-button>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import {
resolveFriend,
rejectFriend
} from '@/apis/interfaces/im.js'
export default {
props: {
message: {
type: Object,
default: {}
}
},
computed: {
user() {
return JSON.parse(this.message.extra)
}
},
methods: {
resolve() {
resolveFriend(this.message.sourceUserId).then(res => {
this.clearMessages()
uni.showToast({
icon: 'none',
title: '通过好友申请'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
})
},
reject() {
uni.showModal({
title: '拒绝申请',
success: (res) => {
if (res.confirm) {
rejectFriend(this.message.sourceUserId).then(res => {
this.clearMessages()
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
})
}
}
})
},
// 不管是通过还是拒绝，都要把相关的信息清理
clearMessages() {
RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
this.$emit('success')
uni.$emit('onContactNotification')
}
}
}
</script>
<style lang="scss" scoped>
.apply--cell {
display: flex;
padding: $padding;
align-items: center;
.info {
flex: 1;
margin-left: $padding;
.name {
font-size: $title-size + 2;
}
.message {
color: $text-gray-m;
font-size: $title-size-m;
margin-top: 10rpx;
}
}
.action {
justify-content: space-between;
.u-button+.u-button {
margin-top: 10rpx;
}
}
}
</style>

125
pages/im/components/friendApplyList.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<view class="friend-apply">
<block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
<view class="lists">
<view class="" style="width: 100rpx;height: 100rpx;">
<u-avatar :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" size="44" />
</view>
<view class="right">
<view class="title">
<view class="name">{{ item.name }}</view>
<view class="des">{{ item.latestMessage.message }}</view>
</view>
<view class="agress-btn">
<span v-if="isAgree" @click="action('agree', item)">通过</span>
<span v-if="isAgree" @click="action('reject', item)">拒绝</span>
<span v-if="isApply && !item.is_friend" @click="action('apply', item)">查看</span>
<span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
</view>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
name: 'friend-apply-reject-agree',
props: {
lists: {
type: Array,
default: []
},
isAgree: {
type: Boolean,
default: false
},
isReject: {
type: Boolean,
default: false
},
isApply: {
type: Boolean,
default: false
}
},
created() {
console.log(this.lists);
},
methods: {
action(type, item) {
if (type === 'isFriend') {
// ，后期可以跳转到信息介绍页面，先留在这里
return uni.showToast({ title: '已是好友，无需重复添加', icon: 'none', duration:2000});
}
this.$emit('action', { type, item });
}
}
};
</script>
<style lang="scss" scoped>
.lists {
padding: 0 $padding;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: $title-size;
color: $text-gray;
.cover {
background-color: #ffffff;
}
.right {
width: 570rpx;
margin-left: $margin - 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: $padding 0;
border-bottom: solid 1rpx #f9f9f9;
.title {
width: 370rpx;
.name {
width: 100%;
color: $text-color;
font-size: $title-size + 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.des {
width: 100%;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $title-size-m;
margin-top: $margin - 10;
color: $text-gray-m;
}
}
.agress-btn {
display: flex;
color: #fff;
span {
display: inline-block;
padding: 6rpx 14rpx;
background-color: $text-price;
border-radius: 10rpx;
}
span:nth-child(1) {
background-color: $main-color;
margin-right: 10rpx;
}
.isFri {
background-color: #f9f9f9 !important;
color: #666;
}
}
}
}
</style>

51
pages/im/friends/index.vue
View File

@@ -1,18 +1,16 @@
<template>
<view>
<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="name">新的朋友</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="name">我的群聊</view>
</view>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view>
<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>
<view class="name">
新的朋友 ({{ pendingCount }})
</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="name">我的群聊</view>
</view>
</view>
<block v-if="friends.length > 0">
<template v-for="(item, fkey) in friends">
<!-- #ifdef APP-NVUE -->
@@ -24,8 +22,8 @@
<u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
</u-index-anchor>
<!-- #endif -->
<view v-for="(friendItem, index) in item" :key="friendItem.userId"
class="friend-flex u-border-bottom" @click="toFriend(friendItem.userId)">
<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="name">{{ friend(friendItem.userId).name }}</view>
</view>
@@ -42,10 +40,10 @@
<script>
import {
getFriendsLetter,
getPendingCount
getFriendsLetter
} from '@/apis/interfaces/im';
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default {
data() {
return {
@@ -62,16 +60,27 @@
}
},
onLoad() {
uni.$on('onContactNotification', this.checkNewFriendPending)
this.checkNewFriendPending()
getFriendsLetter().then(res => {
this.indexs = res.indexList
this.friends = res.itemArr
})
getPendingCount().then(res => {
console.log(res);
this.pendingCount = res
})
},
onUnload() {
uni.$off('onContactNotification')
},
methods: {
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: '群聊功能暂未开放，敬请期待',

69
pages/im/friends/pending.vue
View File

@@ -1,11 +1,3 @@
<!--
* @Description:新朋友即新增好友申请列表 可以搜索跳转
* @Author: Aimee·Zhang
* @Date: 2022-01-24 10:49:15
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-25 10:18:26
-->
<template>
<view class="pending">
<u-sticky>
@@ -14,67 +6,42 @@
:disabled="true" :show-action="false" />
</view>
</u-sticky>
<block v-if="pedings.length > 0">
<applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" />
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
<span>暂无申请记录~</span>
<view v-for="(item, index) in pendings" :key="index">
<apply-cell :message="item.latestMessage" @success="getPendingList" />
</view>
</view>
</template>
<script>
import {
getPedings,
resolveFriend,
rejectFriend
} from '@/apis/interfaces/im.js'
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import applyFriend from '@/components/friend-apply-reject-agree'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import applyCell from '../components/friendApplyCell'
export default {
components: {
applyFriend
applyCell
},
data() {
return {
pedings: []
pendings: []
}
},
onLoad() {
this.getPeddingList()
this.getPendingList()
uni.$on('onContactNotification', this.getPendingList)
},
onUnload() {
uni.$off('onContactNotification')
},
methods: {
// 操作同意或拒绝
action(e) {
let url = e.type === 'agree' ? resolveFriend : rejectFriend
uni.showModal({
title: e.type === 'agree' ? '通过' : '拒绝',
content: e.type === 'agree' ? '通过后即可与该用户畅所欲言' : '拒绝后将不会收到该用户发来信息',
success: res => {
if (res.confirm) {
url(e.item.userId).then(res => {
this.getPeddingList()
})
}
getPendingList() {
// 获取系统中的好友关系会话列表
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
if (res.code === 0) {
this.pendings = res.conversations.filter((item) => {
return item.objectName == RongIMLib.ObjectName.ContactNotification
})
}
})
},
getPeddingList() {
// 获取系统中的好友关系会话列表
// RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 50, 0, (res) => {
// if (res.code === 0) {
// this.pedings = res.conversations.filter((item) => {
// return item.objectName == RongIMLib.ObjectName.ContactNotification
// })
// }
// })
getPedings().then(res => {
console.log(res)
this.pedings = res
})
}
}
};

2
pages/im/friends/search.vue
View File

@@ -31,7 +31,7 @@
searchFriend,
pedingFriend
} from '@/apis/interfaces/im.js';
import applyFriend from '@/components/friend-apply-reject-agree';
import applyFriend from '../components/friendApplyList.vue';
export default {
components: {
applyFriend

24
pages/im/index.vue
View File

@@ -20,7 +20,7 @@
<uni-icons color="#555" type="scan" size="22" />
</view>
<view class="item" @click="onNav('imFriends', {})">
<u-badge absolute max="99" isDot :offset="[0, 0]" :show="hasNewFriends" />
<u-badge absolute max="99" :offset="[-5, -5]" :value="hasNewFriends" />
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22" />
</view>
</view>
@@ -72,7 +72,7 @@
</template>
<script>
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import messagePreview from './components/messagePreview'
@@ -96,7 +96,7 @@
pickedItem: {},
privateUnread: 0,
groupUnread: 0,
hasNewFriends: true
hasNewFriends: 0
}
},
components: {
@@ -109,15 +109,19 @@
}
}
},
onLoad() {
onLoad() {
// 好友申请数量
this.checkNewFriendPending()
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
uni.$on('onContactNotification', this.checkNewFriendPending)
},
onShow() {
if (this.$store.state.token !== '') {
this.getConversationList()
}
}
// 监听新消息
uni.$on('onReceiveMessage', (msg) => {
console.log('收到消息，刷新列表');
this.getConversationList()
@@ -150,6 +154,16 @@
}
},
methods: {
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
}
})
},
// 隐藏功能菜单
hidePop() {
this.showPop = false