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-14 10:38:44 +08:00
parent 5f159a05b7
commit ed9fe0ff9c
8 changed files with 185 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apis/interfaces/im.js
View File

@@ -108,6 +108,15 @@ const getGroupInfo = (groupId) => {
})
}
/**
* 群组基础信息
*/
const getGroupBase = (groupId) => {
return request({
url: 'im/groups/' + groupId+ '/base'
})
}
const getGroupUsers = (groupId) => {
return request({
url: 'im/groups/' + groupId + '/users'
@@ -195,6 +204,7 @@ export {
createGroup,
updateGroup,
getGroupInfo,
getGroupBase,
getGroupUsers,
getGroupAnnouncements,
createGroupAnnouncement,

9
pages/im/components/messageCell.vue
View File

@@ -6,7 +6,8 @@
</view>
<view class="content">
<view class="header">
<view class="name">{{ contact(item.targetId).name }} <span v-if="item.conversationType === 3" class='qun'>[群]</span></view>
<view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
class='qun'>[群]</text></view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
@@ -70,8 +71,10 @@
.name {
font-size: $title-size + 2;
color: #454545;
color: #454545;
.qun{
display: flex;
align-items: center;
.qun {
color: $main-color;
font-size: $title-size-m;
margin-left: 4px;

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

@@ -12,7 +12,7 @@
<u-sticky>
<view class="header-search">
<u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search"
v-model="searchValue" @search="search" inputAlign="center" bgColor="#f9f9f9" :focus="focused" />
v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
</view>
</u-sticky>
<block v-if="searchResult.length > 0">

1
pages/im/group/announceCreate.vue
View File

@@ -24,6 +24,7 @@
methods: {
onCreate() {
createGroupAnnouncement(this.targetId, this.content).then(res => {
uni.$emit('groupAnnouncementCreated')
uni.showToast({
title: '发布成功',
success: () => {

5
pages/im/group/announcement.vue
View File

@@ -38,6 +38,10 @@
this.isAdmin = res.group.is_admin
})
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
onNavigationBarButtonTap() {
if (this.isAdmin) {
@@ -55,7 +59,6 @@
initData() {
getGroupAnnouncements(this.targetId).then(res => {
this.announcements = res
console.log(res);
this.loading = false
})
},

2
pages/im/group/chat.nvue
View File

@@ -62,9 +62,11 @@
this.getMessageList()
}
})
uni.$once('cleanGroupMessage', this.getMessageList)
},
onBackPress() {
uni.$off('onReceiveMessage')
console.log('Off onReceiveMessage');
},
onNavigationBarButtonTap() {
uni.navigateTo({

34
pages/im/group/info.vue
View File

@@ -13,7 +13,7 @@
</view>
</view>
<view @click="loadMore" class="loadmore">查看更多群成员</view>
<view @click="loadMore" class="loadmore">查看更多群成员 ></view>
</view>
<u-cell-group class="cells">
@@ -26,14 +26,14 @@
</u-cell>
</u-cell-group>
<u-cell-group class="cells" v-if="group.is_owner">
<u-cell-group class="cells" v-if="group.is_admin">
<u-cell isLink title="修改群聊名称" :value="group.name" @click="onGroupName"></u-cell>
<u-cell isLink title="修改群头像">
<u-avatar slot="value" size="24" shape="square" :src="group.cover"></u-avatar>
</u-cell>
</u-cell-group>
<view class="cells actions u-border-top">
<view class="cells actions u-border-top" v-if="loaded">
<view class="action u-border-bottom" @click="onClean">清空聊天记录</view>
<view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">解散群聊</view>
<view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
@@ -58,16 +58,11 @@
members: [],
status: false,
isTop: false,
loaded: false
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupInfo(this.targetId).then(res => {
this.group = res.group
console.log(this.group);
this.announcement = res.announcement
this.members = res.members
})
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
status
}) => {
@@ -81,8 +76,21 @@
this.isTop = conversation.isTop
}
})
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
methods: {
initData() {
getGroupInfo(this.targetId).then(res => {
this.group = res.group
this.announcement = res.announcement
this.members = res.members
this.loaded = true
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
({
@@ -132,6 +140,7 @@
icon: 'none',
title: '清空成功'
})
uni.$emit('cleanGroupMessage')
})
}
}
@@ -178,13 +187,16 @@
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.name {
color: $text-gray-m;
width: 126rpx;
text-align: center;
font-size: 28rpx;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -194,7 +206,7 @@
}
.loadmore {
font-size: 28rpx;
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
}

108
pages/im/group/users.vue
View File

@@ -1,17 +1,28 @@
<template>
<view class="members">
<view class="users">
<view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
<view class="user" v-if="isAdmin">
<u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
</u-avatar>
<view class="name">邀请用户</view>
</view>
<view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
v-for="(item, index) in members" :key="index" @click="toUser(item)">
<u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
<view class="name">{{ item.name }}</view>
</view>
</view>
<view class="loadmore">成员总数（{{ members.length }}）</view>
<u-action-sheet :actions="userActions" :title="actionTitle" cancelText="取消" @close="hideAction"
@select="doAction" :show="actionShow">
</u-action-sheet>
</view>
</template>
<script>
import {
getGroupInfo,
getGroupBase,
getGroupUsers
} from '@/apis/interfaces/im.js'
@@ -19,23 +30,89 @@
data() {
return {
targetId: '',
members: []
members: [],
isOwner: false,
isAdmin: false,
actionShow: false,
userActions: [{
type: 0,
name: '设置管理员',
disabled: false
},
{
type: 1,
name: '解除管理员',
disabled: false
},
{
type: 2,
name: '移除成员',
disabled: false
}
],
actionTitle: '',
currentUser: {}
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupInfo(this.targetId).then(res => {
})
getGroupUsers(this.targetId).then(res => {
this.members = res
getGroupBase(this.targetId).then(res => {
this.isOwner = res.is_owner
this.isAdmin = res.is_admin
if (this.isOwner) {
this.userActions.push({
type: 3,
name: '转移群主',
disabled: false
})
}
})
this.getUserList()
},
methods: {
getUserList() {
getGroupUsers(this.targetId).then(res => {
this.members = res
})
},
toUser(item) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + item.targetId
})
},
showAction(item) {
this.currentUser = item
this.actionTitle = item.name
this.actionShow = true
// 根据当前用户，是不是管理，来控制按钮的可用性
this.userActions[0].disabled = true
},
hideAction(item) {
this.actionShow = false
this.actionTitle = ''
this.currentUser = {}
this.userActions[0].disabled = false
this.userActions[1].disabled = false
},
doAction(e) {
switch (e.type) {
case 0:
// 设置管理
break;
case 1:
// 取消管理
break;
case 2:
// 移除成员
break;
case 3:
// 转移管理员
break;
}
this.getUserList()
},
inviteUser() {
}
}
}
@@ -56,13 +133,20 @@
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.active {
background-color: $window-color;
}
.name {
color: $text-gray-m;
width: 126rpx;
text-align: center;
font-size: 28rpx;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -70,5 +154,11 @@
}
}
}
.loadmore {
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
}
}
</style>