创新实训——飞讯（七）

已于 2022-06-10 11:49:14 修改
阅读量114 收藏
点赞数
分类专栏： 项目实训 文章标签： vue.js
于 2022-06-02 23:33:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leaf_er/article/details/125107223
版权

群聊相关im交互

目录

一、创建群聊

二、搜索并申请群聊

 三、群资料

一、创建群聊

选择人员后改变其选择状态（初始为false），点击创建群聊时根据选择对象插入用户列表，调用相应接口创建群聊。

selectFriend:function(e){
	this.friendList[e].selected=!this.friendList[e].selected;
	if(this.friendList[e].selected){
		this.selectedNumber++;
	}
	else{
		this.selectedNumber--;
	}
},
createGroup:function(){
	if(this.selectedNumber > 0){
		let addMe = {
			userID: this.info.userID
		}
		this.selectFriends.push(addMe);
		for(let i=0;i<this.friendList.length;i++){
			if(this.friendList[i].selected){
				let addFriend = {
					userID: this.friendList[i].profile.userID
				}
				this.selectFriends.push(addFriend);
			}
		}
		let promise = tim.createGroup({
			type: TIM.TYPES.GRP_MEETING,
			name: this.groupname,
			memberList: this.selectFriends 
		});
		promise.then((imResponse)=> { 
			uni.showModal({
				title: '提示',
				content: '创建群组成功',
				showCancel:false,
				success: (res)=> {
					if (res.confirm) {
						uni.switchTab({
							url:"../index/index"
						})
					}
				}
			});
		}).catch((imError)=> {
			console.warn('createGroup error:', imError); // 创建群组失败的相关信息
		});
	}
}

二、搜索并申请群聊

申请加入群聊，点击加入便调用相应接口发送请求：

joinGroup:function(){
	let promise = tim.joinGroup({ groupID: this.groupname, type: TIM.TYPES.GRP_MEETING});
	promise.then((imResponse)=> {
		switch (imResponse.data.status) {
			case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
				uni.showModal({
					title: '提示',
					content: '等待管理员同意',
					showCancel:false,
					success: (res)=> {
						if (res.confirm) {
							uni.switchTab({
								url:"../index/index"
							})
						}
					}
				});
				break;
			case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
				uni.showModal({
					title: '提示',
					content: '加入成功',
					showCancel:false,
					success: (res)=> {
						if (res.confirm) {
							uni.switchTab({
								url:"../index/index"
							})
						}
					}
				});
				break;
			case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
				uni.showModal({
					title: '提示',
					content: '您已在群中',
					showCancel:false,
					success: (res)=> {
						if (res.confirm) {
							uni.switchTab({
								url:"../index/index"
							})
						}
					}
				});
				break;
			default:
				break;
		}
	}).catch(function(imError){
		uni.showModal({
			title: '提示',
			content: '加入失败',
			showCancel:false,
			success: (res)=> {
				if (res.confirm) {
					uni.switchTab({
						url:"../index/index"
					})
				}
			}
		});
	});
},

▲由于后端该部分回调尚未来得及完成，改为点击进行复制群ID操作。

 三、群资料

进入页面时调用相应接口获取群资料：

getGroupProfile:function(){
	let promise_group = tim.getGroupProfile({ groupID: this.groupId });
	promise_group.then((imResponse)=> {
	  this.groupProfile = imResponse.data.group;
	  if(this.groupProfile.selfInfo.messageRemindType == 'AcceptAndNotify'){
		  this.switched = false;
	  }
	  else{
		  this.switched = true;
	  }
	  console.log(this.groupProfile);
	}).catch(function(imError) {
	  console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
	});
},
getGroupMemberList:function(){
	let promise_memberList = tim.getGroupMemberList({ groupID: this.groupId, count: 20, offset:0 });
	promise_memberList.then((imResponse)=> {
	  console.log(imResponse.data.memberList); // 群成员列表
	  this.memberList = imResponse.data.memberList;
	}).catch(function(imError) {
	  console.warn('getGroupMemberList error:', imError);
	});
},

若为群主，则可以管理群成员（非群主则为查看群成员），修改群头像、群名称、群公告，同时所有用户可以修改自己在群内的昵称。

<uni-card :is-shadow="true">
	<view class="group-msg">
		<view class="row">
			<view class="title">群头像</view>
			<view class="cont">
				<view class="user-head">
					<image :src="groupProfile.avatar" @tap="upload" class="group-img"  v-if="groupProfile.ownerID == groupProfile.selfInfo.userID"></image>
					<image :src="groupProfile.avatar" class="group-img"  v-if="groupProfile.ownerID != groupProfile.selfInfo.userID"></image>
				</view>
				<!-- <image :src="faceImg" class="group-img" mode="aspectFill"></image> -->
			</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="row">
			<view class="title">群Id</view>
			<view class="cont" @click="copy(groupProfile.groupID)">{{groupProfile.groupID}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="row" @tap="open('t-name','群名称',groupProfile.name,true)" v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">
			<view class="title">群名称</view>
			<view class="cont">{{groupProfile.name}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="row" v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">
			<view class="title">群名称</view>
			<view class="cont">{{groupProfile.name}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		
		
		<view class="row" @tap="open('t-introduction','群介绍',groupProfile.introduction,true)" v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">
			<view class="title">群简介</view>
			<view class="cont">{{groupProfile.introduction}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="row" v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">
			<view class="title">群简介</view>
			<view class="cont">{{groupProfile.introduction}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		
		
		<view class="row" @tap="open('t-notice','群公告',groupProfile.notification,true)" v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">
			<view class="title">群公告</view>
			<view class="cont">{{groupProfile.notification}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="row" v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">
			<view class="title">群公告</view>
			<view class="cont">{{groupProfile.notification}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="row" @tap="open('t-nicknameingroup','群昵称',groupProfile.selfInfo.nameCard,true)">
			<view class="title">群昵称</view>
			<view class="cont">{{groupProfile.selfInfo.nameCard}}</view>
			<view class="more">
				<image src="../../static/images/common/more.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</uni-card>

<uni-card :is-shadow="true">
	<view class="member">
		<view class="member-top">
			<view class="title">群成员</view>
			<view class="more" @tap="manageChange()" v-if="info.userID == groupProfile.ownerID">管理群成员</view>
			<view class="more" @tap="manageChange()" v-if="info.userID != groupProfile.ownerID">查看群成员</view>
			<image src="../../static/images/common/more.png" mode="aspectFit" class="more-img"  v-if="info.userID == groupProfile.ownerID"></image>
		</view>
		<view class="member-ls" v-if="info.userID == groupProfile.ownerID">
			
			<view class="member-one" v-if="membermanage == false">
				<u-avatar-group
						:urls="avatarList"
						size="60"
						gap="0.4"
						
				></u-avatar-group>
			</view>
			<view class="member-one" style="margin-left: 300rpx;" v-if="membermanage == false">
				<view class="imgs">
					<image src="../../static/images/index/add.png" mode="aspectFill" class="user-add"  @tap="open('t-invite','邀请','',true)"></image>
				</view>
			</view>
			
			<view v-if="membermanage == true">
				<view v-for="(item,index) in memberList" :key="index">
					<view style="display: flex;margin-top: 20rpx;">
						<view style="width: 120rpx;display: flex;">
							<view><u-avatar :src="item.avatar" shape="circle" size="100rpx"></u-avatar></view>
						</view>
						<view style="width: 500rpx;display: flex;padding-top: 25rpx; padding-left:20rpx;">
							<view class="name" v-if="item.nameCard != ''">{{item.nameCard}}</view>
							<view class="name" v-if="item.nameCard == '' && item.nick != ''">{{item.nick}}</view>
							<view class="name" v-if="item.nameCard == '' && item.nick == ''">{{item.userID}}</view>
						</view>
						<view><u-button type="error" text="移除" @click="deleteGroupMember(item.userID,item.nick)"></u-button></view>
					</view>
					
				</view>
			</view>
			
		</view>
		
		<view class="member-ls" v-if="info.userID != groupProfile.ownerID">
			
			<view class="member-one" v-if="membermanage == false">
				<u-avatar-group
						:urls="avatarList"
						size="60"
						gap="0.4"
						
				></u-avatar-group>
			</view>
			<view class="member-one" style="margin-left: 300rpx;" v-if="membermanage == false">
				<view class="imgs">
					<image src="../../static/images/index/add.png" mode="aspectFill" class="user-add"  @tap="open('t-invite','邀请','',true)"></image>
				</view>
			</view>
			
			<view v-if="membermanage == true">
				<view v-for="(item,index) in memberList" :key="index">
					<view style="display: flex;margin-top: 20rpx;">
						<view style="width: 120rpx;display: flex;">
							<view><u-avatar :src="item.avatar" shape="circle" size="100rpx"></u-avatar></view>
						</view>
						<view style="width: 500rpx;display: flex;padding-top: 25rpx; padding-left:20rpx;">
							<view class="name" v-if="item.nameCard != ''">{{item.nameCard}}</view>
							<view class="name" v-if="item.nameCard == '' && item.nick != ''">{{item.nick}}</view>
							<view class="name" v-if="item.nameCard == '' && item.nick == ''">{{item.userID}}</view>
						</view>
						<!-- <view><u-button type="error" text="移除" @click="deleteGroupMember(item.userID,item.nick)"></u-button></view> -->
					</view>
					
				</view>
			</view>
			
		</view>
		<view class="clear"></view>
	</view>
</uni-card>

 

邀请，点击后输入用户id进行邀请：

invite:function(){
	let promise = tim.addGroupMember({groupID: this.groupId, userIDList: ['user1','user2','user3']});
	promise.then((imResponse)=> {
	}).catch(function(imError) {
	  console.warn('addGroupMember error:', imError); // 错误信息
	});
},

管理群成员，点击移除按钮移除相应群成员：

deleteGroupMember:function(userID,nick){
	console.log(userID)
	this.modify();
	uni.showModal({
		title: '提示',
		content: '是否删除该用户' + "昵称:" + nick + " userID:" + userID,
		success: (res)=> {
			if (res.confirm) {
				let promise = tim.deleteGroupMember({groupID: this.groupId, userIDList:[userID], reason: ''});
				promise.then((imResponse)=> {
				  this.getGroupProfile();
				  this.getGroupMemberList();
				  this.modify();
				}).catch(function(imError) {
				  console.warn('deleteGroupMember error:', imError); // 错误信息
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});

退出群/解散群，点击退出/解散按钮可退出/解散群聊：

exit:function(){
	uni.showModal({
		title: '提示',
		content: '确定退出群聊吗',
		success: (res)=> {
			if (res.confirm) {
				console.log('用户点击确定');
				let promise = tim.quitGroup(this.groupId);
				promise.then((imResponse)=> {
				  console.log(imResponse.data.groupID); // 退出成功的群 ID
				  uni.switchTab({
					url:"../index/index"
				  })
				}).catch(function(imError){
				  console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});

breakup:function(){
	uni.showModal({
		title: '提示',
		content: '确定解散群聊吗',
		success: (res)=> {
			if (res.confirm) {
				console.log('用户点击确定');
				let promise = tim.dismissGroup(this.groupId);
				promise.then((imResponse)=> { // 解散成功
				  console.log(imResponse.data.groupID); // 被解散的群组 ID
				  uni.switchTab({
					url:"../index/index"
				  })
				}).catch(function(imError) {
				  console.warn('dismissGroup error:', imError); // 解散群组失败的相关信息
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
},

leaf_er
关注
专栏目录
创新实训——飞讯（二）
leaf_er的博客
04-23 316
一、设计登录、注册界面 利用所学的QT知识，利用可视化设计了一个基础的界面； 由于QT窗口自带一个较为丑陋的边框，为了后续方便设计，调用相关函数去掉边框； //去掉边框 setWindowFlags(Qt::WindowType::FramelessWindowHint); 但是去掉边框后，界面便不可移动等，查询解决方法后，重写了鼠标按压事件和点击事件函数； //计算鼠标与窗口左上角差值 void Login::mousePressEvent(QMouseEvent *even
创新实训——飞讯（五）
leaf_er的博客
05-05 216
如（四）中所说，之后为移动端开发相关内容； 目录 一、基础学习 二、编写修改弹框 一、基础学习 对于uni-app相关内容的学习，主要包括函数、组件样式设置等； 二、编写修改弹框 <view class="modify":style="{bottom:-+widHeight+'px'}" :animation="animationData"> <view class="modify-header"> <view class="c
创新实训——飞讯（一）
leaf_er的博客
04-18 367
一、项目简介 飞讯是一款为使小型团队作业更加便捷而设计的软件，包括单聊、群聊等功能。本人负责Windows端的开发。 二、第一周工作 采用QT开发，故第一周学习QT相关UI知识，包括可视化UI设计、代码化UI设计以及混合设计的方法；并了解了QT中基本的组件的用途和用法、样式表的写法等。 ............
创新实训——飞讯（六）
leaf_er的博客
05-05 158
一、创建群聊界面 由于毫无经验，界面是参考教学视频编写的；基本步骤为编写结构、调整样式、编写功能等。 效果和部分代码如下： 设置了一个变量记录已选择的人数，判断所选人数大于0且输入了群名称（群名称长度大于0）后创建按钮才不为灰； <view class="bottom-btn btn1" :class="{notselected:selectedNumber<=0||groupname.length<=0}">创建({{selectedNumber}})</v
山东大学软件学院创新实训——飞讯（七）
weixin_54533613的博客
04-24 288
山东大学创新实训第7次记录
创新实训——飞讯（十）
leaf_er的博客
06-07 260
工作日志与问卷
创新实训——飞讯（九）
leaf_er的博客
06-06 218
聊天界面的im交互
创新实训——飞讯（八）
leaf_er的博客
06-05 150
聊天界面
创新实训——飞讯（四）
leaf_er的博客
05-05 123
由于组内人员调动原因，组长找了一个可以实现web、小程序、Android、ios的跨平台运行的框架uni-app，考虑到便利性，移动端的制作很重要，且该框架可以实现较多运行方式，考虑到时间因素和经验因素，故我和组长一起进行移动端的开发。PC端的制作内容会在本章内简单讲述，细节部分不再详谈，并暂停PC端开发，视后续情况再考虑是否继续。 目录 一、界面设计基础完善 1、聊天界面 2、注册界面 二、功能实现 1、登陆后拉取并展示所需数据 （1）拉取数据 （2）展示数据 一、界...
山东大学软件学院创新实训——飞讯（四）
weixin_54533613的博客
04-23 1712
山东大学创新实训第4次记录
金飞讯A66对讲机写频软件
08-27
金飞讯A66对讲机是一款广泛应用在通信领域的设备，尤其在户外活动、商业运营、公共安全等场景中有着广泛的使用。为了更好地理解和使用这款对讲机，我们需要掌握其写频软件的操作与相关知识。这里我们将深入探讨金...
飞讯国际物流 Cony Logistics-crx插件
04-01
飞讯国际物流代购和代运助手。您可以在淘宝/天猫商品的页面，直接添加商品到飞讯国际物流购物车。此外，您也可以在淘宝已买到宝贝的页面，直接提交代收货信息到飞讯国际物流网站。Cony Logistics飞讯国际物流为您...
qq批量登陆 飞讯QQ批量登陆挂机工具 v3.9
11-09
在实际应用中，飞讯QQ批量登陆挂机工具v3.9能广泛应用于各种QQ营销场景，如社群管理、消息推送、广告推广等。通过提高账号的活跃度和权重，可以增加被目标用户发现的概率，提高营销效果。此外，对于一些需要多账号...
山东大学软件学院创新实训——飞讯（一）
weixin_54533613的博客
04-23 332
山东大学创新实训第一次记录
jeecg3版本的vue，离线启动
最新发布
sharesb的博客
10-16 249
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
vue3 Invalid value type passed to callWithAsyncErrorHandling()
w710537643的博客
10-11 384
vue3 提示警告。页面内点击按钮无响应。和 事件方法名 重名导致。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 738
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 530
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 137
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
科大讯飞讯音云：国内语音识别市场领导者
国内语音识别产品的调研强调了技术与用户需求的结合，以及如何通过创新设计提升用户体验。科大讯飞的讯飞语点作为行业领导者，正在引领着语音识别技术的潮流，不断优化产品功能以满足不同场景下的用户需求，推动了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值