Layim 自定义聊天界面

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

原窗口：

修改后

修改步骤：

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">&#xe61a;</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">&#xe60c;</span>'
        ,'{{# if(d.base && d.base.uploadImage){ }}'
        ,'<span class="layui-icon layim-tool-image" title="上传图片" layim-event="image">&#xe60d;<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">&#xe61d;<input type="file" name="file"></span>'
         ,'{{# }; }}'
        ,'{{# if(d.base && d.base.chatLog){ }}'
        ,'<span class="layim-tool-log" layim-event="chatLog"><i class="layui-icon">&#xe60e;</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">&#xe618;</i>按Enter键发送消息</li>'
            ,'<li {{d.local.sendHotKey === "Ctrl+Enter" ? "class=layim-this" : ""}} layim-event="setSend"  lay-type="Ctrl+Enter"><i class="layui-icon">&#xe618;</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(); //收缩聊天面板
  }