mirror of
https://gitee.com/koogua/course-tencent-cloud.git
synced 2025-07-13 20:09:11 +08:00
99 lines
3.6 KiB
HTML
99 lines
3.6 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="//unpkg.com/layui/dist/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 == 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 语法
|
||
|
||
-->
|
||
|
||
|
||
<script src="//unpkg.com/layui/dist/layui.js"></script>
|
||
<script>
|
||
layui.link('../layim.css', 'skinlayimcss') //加载 css
|
||
layui.config({
|
||
layimPath: '../../' //配置 layim.js 所在目录
|
||
, layimAssetsPath: '../../layim-assets/' //layim 资源文件所在目录
|
||
}).use(['jquery'], function () {
|
||
var layim = parent.layui.layim
|
||
, laytpl = parent.layui.laytpl
|
||
, $ = layui.jquery
|
||
, laypage = parent.layui.laypage;
|
||
|
||
//聊天记录的分页此处不做演示，你可以采用 laypage
|
||
|
||
//开始请求聊天记录
|
||
var param = location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
|
||
|
||
//实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
|
||
, res = {
|
||
code: 0
|
||
, msg: ''
|
||
, data: [{
|
||
username: '纸飞机'
|
||
, id: 100000
|
||
, avatar: '' || layui.cache.layimAssetsPath + 'images/default.png'
|
||
, timestamp: 1480897882000
|
||
, content: '我方模拟记录111'
|
||
}, {
|
||
username: 'test123'
|
||
, id: 108101
|
||
, avatar: '' || layui.cache.layimAssetsPath + 'images/default.png'
|
||
, timestamp: 1480897892000
|
||
, content: '对方模拟记录111'
|
||
}, {
|
||
username: 'test123'
|
||
, id: 108101
|
||
, avatar: '' || layui.cache.layimAssetsPath + 'images/default.png'
|
||
, timestamp: 1480897898000
|
||
, content: '对方模拟记录222'
|
||
}, {
|
||
username: 'test123'
|
||
, id: 108101
|
||
, avatar: '' || layui.cache.layimAssetsPath + 'images/default.png'
|
||
, timestamp: 1480897908000
|
||
, content: '注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录（相对于layim.js）：\n/layim-assets/html/chatlog.html'
|
||
}]
|
||
}
|
||
|
||
//console.log(param)
|
||
|
||
var html = laytpl(LAY_tpl.value).render({
|
||
data: res.data
|
||
});
|
||
$('#LAY_view').html(html);
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|