javascript中layim之查找好友查找群组

(编辑:jimmy 日期: 2024/12/22 浏览:2)

目前layui官方暂没提供layim查找好友页面的结构与样式,我个人好奇心极强,自己弄了一套,现在上传与大家分享。小生不是做前端的,有些方面不够全面,请各位大神指点一二!

先呈上效果图压压惊

javascript中layim之查找好友查找群组

Layim查找好友、查找群组、添加好友、加入群组:

附上源码,积分下载

一、绑定用户成员列表

/** html代码 */
<textarea title="用户模版" id="LAY_Friend" style="display:none;">
	{{# layui.each(d.data, function(index, item){ }}
		<div class="layui-col-sm4 layui-col-md4 layui-col-lg2">
	 <div class="layui-card" >
	 	<div class="avatar">
	 		<img class="layadmin-homepage-pad-img" src="/UploadFiles/2021-04-02/{{ item.avatar }}">

二、添加好友

javascript中layim之查找好友查找群组

/**
 * 添加好友
 */
$(document).on('click', '.addFriend', function() {
	var myBut = $(this);
	var userId = myBut.attr("userId");
	// 弹出添加好友验证界面
	layim.add({
		type: 'friend'
 ,username: user.username
 ,avatar: user.avatar
 ,submit: function(group, remark, index){
			layer.msg('好友申请已发送,请等待对方确认', { icon: 1 });
			// 修改按钮
		 	myBut.parent().html('<span class="c_red">已经提交申请</span>');
		 	// 在这里插入你的推送信息代码
 } 
 });
});

三、推送信息

利用socket推送添加好友申请

// 推送一个消息
var msg = {
		type: "addMsgbox",	// 随便定义,用于在服务端区分消息类型
		sendType: 1, 		// 随便定义,用于在服务端区分消息类型
		fromId: loginUserId, 	// 申请者
		toId: user.id,			// 好友编号
		groupId: group,			// 所在分组
		remark: remark			// 验证信息
	}
websocket.send(JSON.stringify({
 	type: 'chatMsgbox' // 随便定义,用于在服务端区分消息类型
 	,data: msg
 }));

四、猜您喜欢

https://www.jb51.net/article/23188.htm

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。