 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天记录</title>

<link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
<style>
body .layim-chat-main{height: auto;}
</style>
</head>
<body>

<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.mime){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法

-->


<script src="/lib/layui-v2.5.5/layui.js"></script>
<script>
layui.link('/js/lay-module/layim/assets/layim.css', 'skinlayimcss') //加载 css
layui.config({
  layimPath: 'layim/' //配置 layim.js 所在目录
  ,layimAssetsPath: '/js/lay-module/layim/assets/' //layim 资源文件所在目录
}).use(['jquery'], function(){
  var layim = parent.layui.layim
  ,laytpl = parent.layui.laytpl
  ,$ = layui.jquery
  ,laypage = parent.layui.laypage;
  
  
  //开始请求聊天记录
  var param =  location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
  var idx = param.indexOf("?id=");
  
  if(idx > -1) {
    var target = param.substr(idx+4);
    $.get(`/api/livechat_history?key=${sessionStorage.getItem('sessionKey')}&target=${target}`,function(data, status){
      if(status == "success") {
            var jsonObj = JSON.parse(data);
            if(jsonObj) {
              var obj = [];
              for(var i = 0; i < jsonObj.data.length; i+=1) {
                obj.push({
                  username: jsonObj.data[i].pn,
                  id: jsonObj.data[i].uid,
                  avatar: layui.cache.layimAssetsPath + 'images/default.png',
                  timestamp: parseInt(jsonObj.data[i].date),
                  content: jsonObj.data[i].msg,
                  mime: jsonObj.data[i].ia == 0 ? false : true
                });
              }
              var html = laytpl(LAY_tpl.value).render({
                data: obj
              });
              $('#LAY_view').html(html);
            }
        }
    });
  }
  
});
</script>
</body>
</html>
