layim之查找好友查找群组

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

先呈上效果图压压惊
Layim查找好友、查找群组、添加好友、加入群组：

附上源码，积分下载，打赏下载

1.绑定用户成员列表

/** 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="{
    
    { item.avatar }}" />
	        	</div>
	        	<div class="units">
		        	<p>{
    
    {
    
     item.userName }}({
    
    {
    
     item.userCode }})</p>
		        	<p>{
    
    {
    
     item.roleNames }}</p>
		        	<p>
			        	{
    
    {
    
    # if(item.isValid == 0){
    
     }}
			        		<button userId="{
    
    { item.userId }}" class="addFriend layui-btn layui-btn-xs" style="background-color:#7ADDD4;">&nbsp;&nbsp;<strong>+</strong>&nbsp;&nbsp;好友&nbsp;&nbsp;</button>
			        	{
    
    {
    
    # } else {
    
     }}
			        		<span class="c_red">已经是好友</span>
			        	{
    
    {
    
    # } }}
		        	</p>
	        	</div>
	        </div>
      	</div>
  	{
    
    {
    
    # }); }}
</textarea>

/** js代码 */
$.ajax({
    
    
    type: "get",
    url: "../json/friend.json",
    async: true,
    data: data,
    success: function (data) {
    
    
    	var json = data;
    	var list = json.data;
    	if(list != null){
    
    
    		// 数据转化为html格式
			var html = laytpl(LAY_Friend.value).render({
    
    
			    data: list
			});
			control.html(html);
    	}else{
    
    
    		control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的用户</div>');
    	}
    }
});

2.添加好友

/**
 * 添加好友
 */
$(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>');
		  	// 在这里插入你的推送信息代码
        } 
    });
});

3.推送信息
利用socket推送添加好友申请

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

赠人玫瑰手留余香，若对您有帮助，来 点个赞呗！