97 lines
3.3 KiB
HTML
97 lines
3.3 KiB
HTML
|
|
|||
|
|
|
|||
|
|
<!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="http://local.res.layui.com/layui/src/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.id == parent.layui.layim.cache().mine.id){ }}
|
|||
|
|
<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 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html
|
|||
|
|
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script src="http://local.res.layui.com/layui/src/layui.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['layim', 'laypage'], function(){
|
|||
|
|
var layim = layui.layim
|
|||
|
|
,layer = layui.layer
|
|||
|
|
,laytpl = layui.laytpl
|
|||
|
|
,$ = layui.jquery
|
|||
|
|
,laypage = layui.laypage;
|
|||
|
|
|
|||
|
|
//聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html
|
|||
|
|
|
|||
|
|
|
|||
|
|
//开始请求聊天记录
|
|||
|
|
var param = location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
|
|||
|
|
|
|||
|
|
//实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
|
|||
|
|
,res = {
|
|||
|
|
code: 0
|
|||
|
|
,msg: ''
|
|||
|
|
,data: [{
|
|||
|
|
username: '纸飞机'
|
|||
|
|
,id: 100000
|
|||
|
|
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
|||
|
|
,timestamp: 1480897882000
|
|||
|
|
,content: 'face[抱抱] face[心] 你好啊小美女'
|
|||
|
|
}, {
|
|||
|
|
username: 'Z_子晴'
|
|||
|
|
,id: 108101
|
|||
|
|
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
|||
|
|
,timestamp: 1480897892000
|
|||
|
|
,content: '你没发错吧？face[微笑]'
|
|||
|
|
},{
|
|||
|
|
username: 'Z_子晴'
|
|||
|
|
,id: 108101
|
|||
|
|
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
|||
|
|
,timestamp: 1480897898000
|
|||
|
|
,content: '你是谁呀亲。。我爱的是贤心！我爱的是贤心！我爱的是贤心！重要的事情要说三遍~'
|
|||
|
|
},{
|
|||
|
|
username: 'Z_子晴'
|
|||
|
|
,id: 108101
|
|||
|
|
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
|||
|
|
,timestamp: 1480897908000
|
|||
|
|
,content: '注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录（相对于layui.js）：\n/css/modules/layim/html/chatlog.html'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//console.log(param)
|
|||
|
|
|
|||
|
|
var html = laytpl(LAY_tpl.value).render({
|
|||
|
|
data: res.data
|
|||
|
|
});
|
|||
|
|
$('#LAY_view').html(html);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|