JS中如何利用layim实现查找好友功能
Admin 2022-06-13 群英技术资讯 283 次浏览
目前layui官方暂没提供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="{{ 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;"> <strong>+</strong> 好友 </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>'); } } });
/** * 添加好友 */ $(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 }));
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了Vue自定义指令,文章从背景开始详细介绍Vue自定义指令的详细内容,随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下
Vue+Canvas制作简易的水印添加器小工具,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
这篇文章给大家分享的是有关用vue实现简单的点击翻转动画效果,点击翻转效果在网页设计中也比较常见,小编觉得挺实用的,因此分享给大家做个参考,接下来一起跟随小编看看吧。
JS中怎么设置title的值?JS中设置title的值的方法有很多,下文小编尝试了几种实现方式,示例代码有一定的参考价值,有需要的朋友可以了解看看,那么接下来就跟随小编一起学习一下吧。
前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008