 
 
<!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="../../../layui.css">
<style>
body .layim-chat-main{height: auto;padding-bottom: 45px;}
.lay_page{position: fixed;bottom: 0;margin: 0 10px;background: #fff;width: 100%;}
.layui-laypage{width: 105px;margin:0 auto;display: block}
</style>
</head>
<body>

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

<div class="lay_page" id="LAY_page" ></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.from == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{item.avatar}}"><cite><i>{{ item.sendTime }}</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>{{item.sendTime }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->
<script src="../../../../../layui/layui.js"></script>
<script>     
layui.use(['layim', 'laypage'], function () {
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage
  ,cachedata = parent.layui.layim.cache()
  //开始请求聊天记录
  ,param =  location.search; //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
  var url = cachedata.base.getChatLogTotal.url || {}; 
  function formatDate(nS) { 
   return new Date(parseInt(nS)).toLocaleString();   
  }

  $.get(url+'&'+param, function(data){
    var res = eval('(' + data + ')');
    if(res.code != 0){
        return layer.msg('没有聊天记录');
    }

    laypage.render({
      elem: 'LAY_page'
      ,count: res.count
      ,limit: res.data.limit
      ,prev: '<i class="layui-icon">&#58970;</i>'
      ,next: '<i class="layui-icon">&#xe65b;</i>'
      ,layout: ['prev', 'next']
      ,curr: Math.ceil(res.count/res.data.limit) //获取起始页
      //,hash: 'fenye' //自定义hash值
      ,jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        var url = cachedata.base.getChatLog.url || {};    
        //首次不执行
        if(!first){
			var page = obj.curr;
        }else{
			var page = Math.ceil(res.count/res.data.limit) ;
		}
        $.get(url+'&'+param, {page: page}, function(data){
            var res = eval('(' + data + ')');
            if(res.code != 0){
                return layer.msg('出错啦');
            }	

            layui.each(res.data, function(index, item){
                res.data[index]['sendTime'] =  formatDate(item.sendTime);
            });            
            var html = laytpl(LAY_tpl.value).render({
              data: res.data
            });
            $('#LAY_view').html(html);
			 window.scrollTo(0,9999);
        });
      }
    });    
  });
});
</script>
</body>
</html>
