自定义需求：给聊天窗口加侧边，内容为公司介绍！

原窗口：

修改后

修改步骤：

1.更改窗体大小和结构

需要修改layim.js中的   【聊天主模板】 elemChatTpl

修改窗体大小，整加侧边 layim-chat-left layim-chat-right
layim.css

/* 聊天页 右侧加公司信息 */
.layim-chat-left{ width: 400px; float: left; }
.layim-chat-right{ width: 200px; float: right; }

layim.js

 //聊天主模板var elemChatTpl = ['<div class="layim-chat layim-chat-{{d.data.type}}">','<div class="layim-chat-title">','<a class="layim-chat-other">','<img src="{{ d.data.avatar ||"http://pic.51yuansu.com/pic2/cover/00/44/04/5813a95730ef7_610.jpg"}}">','<span layim-event="{{ d.data.type==="group" ? \"groupMembers\" : \"\" }}">{{ d.data.name||"佚名" }} {{d.data.temporary ? "<cite>临时会话</cite>" : ""}} {{# if(d.data.type==="group"){ }} <em class="layim-chat-members"></em><i class="layui-icon"></i> {{# } }}</span>','</a>','</div>'//提示：左侧 <div class="layim-chat-left">,'<div class="layim-chat-left"><div class="layim-chat-main">','<ul></ul>','</div>','<div class="layim-chat-footer">','<div class="layim-chat-tool" data-json="{{encodeURIComponent(JSON.stringify(d.data))}}">','<span class="layui-icon layim-tool-face" title="选择表情" layim-event="face"></span>','{{# if(d.base && d.base.uploadImage){ }}','<span class="layui-icon layim-tool-image" title="上传图片" layim-event="image"><input type="file" name="file"></span>','{{# }; }}','{{# if(d.base && d.base.uploadFile){ }}','<span class="layui-icon layim-tool-image" title="发送文件" layim-event="image" data-type="file"><input type="file" name="file"></span>','{{# }; }}','{{# if(d.base && d.base.chatLog){ }}','<span class="layim-tool-log" layim-event="chatLog"><i class="layui-icon"></i>聊天记录</span>','{{# }; }}','</div>','<div class="layim-chat-textarea"><textarea></textarea></div>','<div class="layim-chat-bottom">','<div class="layim-chat-send">','{{# if(!d.base.brief){ }}','<span class="layim-send-close" layim-event="closeThisChat">关闭</span>','{{# } }}','<span class="layim-send-btn" layim-event="send">发送</span>','<span class="layim-send-set" layim-event="setSend" lay-type="show"><em class="layui-edge"></em></span>','<ul class="layui-anim layim-menu-box">','<li {{d.local.sendHotKey !== "Ctrl+Enter" ? "class=layim-this" : ""}} layim-event="setSend" lay-type="Enter"><i class="layui-icon"></i>按Enter键发送消息</li>','<li {{d.local.sendHotKey === "Ctrl+Enter" ? "class=layim-this" : ""}} layim-event="setSend"  lay-type="Ctrl+Enter"><i class="layui-icon"></i>按Ctrl+Enter键发送消息</li>','</ul>','</div>','</div>','</div>'//提示：右侧,'</div> <div class="layim-chat-right"><div class="layui-card ">','<div class="layui-card-header"><span>公司信息</span></div><div class="layui-card-body company-title">','<p><span>公司名称:</span><br>{{ d.data.companyname||"123"}}</p><p><span>经营业务:</span><br>{{d.data.business}}</p>','<p><span>联系人:</span><br>{{ d.data.linkman}}</p><p><span>电话:</span><br>{{ d.data.mobile }}</p></div> </div></div>','</div>'].join('');

2.取得右侧数据

前面的layim.js代码中的 d.data.companyname、d.data.linkman、d.data.mobile、d.data.business
可以在前端页面上设置给 chat 项。

layui.use('layim', function(layim){var company_name = '{$company.company_name}';var business = '{$company.business}';var linkman = '{$company.linkman}';var mobile = '{$company.mobile}';layim.config({init:{ mine:mine        }//开启客服模式,brief: true //是否简约模式（默认false，如果只用到在线客服，且不想显示主面板，可以设置 true）   ,chatLog: "{:U('portal/Chatlog/index')}" //聊天记录地址（如果未填则不显示）});//打开一个客服面板layim.chat({name: '在线沟通' //名称,type: 'friend' //聊天类型,avatar: 'https://*******.jpg' //头像,id: company_chat_id //定义唯一的id方便你处理信息,companyname:  company_name,business:  business,linkman:   linkman,mobile: mobile});layim.setChatMin(); //收缩聊天面板}

Layim 自定义聊天界面相关推荐

Swift - 自定义单元格实现微信聊天界面
1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...
Android自定义IM聊天界面
今日科技快讯哈啰顺风车近日在上海.广州.杭州.成都.合肥.东莞6座城市上线试运营.上述城市用户通过更新后的"哈啰出行"APP,可使用市内或跨城顺风车服务.猎云网在其中三座城市体验 ...
企业微信每日给女友推送早安，5分钟快速部署，腾讯云部署版本，每日定时发送，天气，鸡汤，纪念日等信息，可自定义通知提醒名称，聊天界面可置顶，内容可查图片。
企业微信每日给女朋友推送早安,5分钟快速部署,每日定时发送,天气,鸡汤,纪念日等信息,可自定义通知提醒名称,聊天界面可置顶,内容可查图片. 先看效果直接开搞准备工作 1.企业id 2.企业应用se ...
flutter聊天界面-自定义表情键盘实现
flutter聊天界面-自定义表情键盘实现 flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iO ...
编写精美的聊天界面（左边显示接收消息，右边显示发送消息）(项目已上传GitHub)
附上我的GitHub项目地址: https://github.com/Skymqq/UIChat.git 学习Android开发,了解一个精美聊天界面的实现是很有必要的,如果可以掌握这个技能,那么在下 ...
android即时通讯ui框架,android IM即时通信之聊天界面UI框架
写在最前面现在很多软件都要求加入即时通信的功能,当然很多都用了三方(环信.融信...).最近,项目也有此需求,我们选择的是环信.环信也提供了UI框架,但是说实在的一般的应用用不了那么多功能,可能就简 ...
聊天界面的制作（三）——表情列表发送功能
基本功能 1. 自定义标题栏.(标题栏不做任何功能) 2. 有左右发送按钮.(这个只能自己和自己聊天哦,所以有左右发送按钮) (1)点击左边按钮发送按钮,在ListView的左侧显示. (2)点击右边 ...
android 仿微信聊天界面以及语音录制功能,Android仿微信录制语音功能
本文实例为大家分享了Android仿微信录制语音的具体代码,供大家参考,具体内容如下前言我把录音分成了两部分 1.UI界面,弹窗读秒 2.一个类(包含开始.停止.创建文件名功能) 第一部分由于6 ...
android模拟微信聊天功能,android仿微信聊天界面语音录制功能
本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图: 第一:chat.xml设计 android:layout_width="fill_parent" and ...
实现微信聊天界面的泡泡对话框效果（改进）
=2019.05.31 下午更新==== 实际测试发现改进以后的方案会有BUG,目前暂时没有解决办法,因此建议使用最早的方案 =2019.05.31 上午更新==== **昨晚连夜赶了一个DEMO出来 ...

Layim 自定义聊天界面

自定义需求：给聊天窗口加侧边，内容为公司介绍！

原窗口：

修改后

修改步骤：

1.更改窗体大小和结构

2.取得右侧数据

Layim 自定义聊天界面相关推荐

最新文章

热门文章

Layim 自定义聊天界面

自定义需求：给聊天窗口加侧边，内容为公司介绍！

原窗口：

修改后

修改步骤：

1.更改窗体大小 和 结构

2.取得右侧数据

Layim 自定义聊天界面相关推荐

最新文章

热门文章

1.更改窗体大小和结构