<!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?v=1">
<style>
.layim-msgbox {
margin: 15px;
}
.layim-msgbox li {
position: relative;
margin-bottom: 10px;
padding: 0 130px 10px 60px;
padding-bottom: 10px;
line-height: 22px;
border-bottom: 1px dotted #e2e2e2;
}
.layim-msgbox .layim-msgbox-tips {
margin: 0;
padding: 10px 0;
border: none;
text-align: center;
color: #999;
}
.layim-msgbox .layim-msgbox-system {
padding: 0 10px 10px 10px;
}
.layim-msgbox li p span {
padding-left: 5px;
color: #999;
}
.layim-msgbox li p em {
font-style: normal;
color: #FF5722;
}
.layim-msgbox-avatar {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
}
.layim-msgbox-user {
padding-top: 5px;
}
.layim-msgbox-content {
margin-top: 3px;
}
.layim-msgbox .layui-btn-small {
padding: 0 15px;
margin-left: 0px;
}
.layim-msgbox-btn {
position: absolute;
right: 0;
top: 12px;
color: #999;
}
</style>
</head>
<body>
<ul class="layim-msgbox" id="LAY_view"></ul>
<div style="margin: 0 15px;">
<blockquote class="layui-elem-quote">注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。
<br>该模版文件所在目录（相对于layui.js）：/css/modules/layim/html/msgbox.html
</blockquote>
</div>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
if(item.from){ }}
<li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}" data-noticeid="{{item.id}}">
<a href="/u/{{ item.from }}/" target="_blank">
<img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
</a>
<p class="layim-msgbox-user">
<a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
<span>{{ item.time }}</span>
</p>
<p class="layim-msgbox-content">
{{ item.content }}
<span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
</p>
<p class="layim-msgbox-btn">
<button class="layui-btn layui-btn-small" data-type="agree">同意</button>
<button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
</p>
</li>
{{# } else { }}
<li class="layim-msgbox-system">
<p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
</li>
{{# }
}); }}
</textarea>
<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html
-->
<script src="../../../../layui.js"></script>
<script>
var base_url = 'https://txy.sylyx.cn/Api/Api/'
layui.use(['layim', 'flow'], function () {
var layim = layui.layim
, layer = layui.layer
, laytpl = layui.laytpl
, $ = layui.jquery
, flow = layui.flow;
var cache = {}; //用于临时记录请求到的数据
//请求消息
var renderMsg = function (page, callback) {
//实际部署时，请将下述 getmsg.json 改为你的接口地址
var self_user = localStorage.getItem('rong_current_user');
$.ajax({
url: base_url + 'sysNoticeList',
data: {
page: page || 1,
self_user: self_user
},
dataType: 'json',
success: function (res) {
if (res.status != 1) {
return layer.msg(res.msg);
}
//记录来源用户信息
layui.each(res.result, function (index, item) {
cache[item.from] = item.user;
});
callback && callback(res.result, res.pages);
}
});
};
//消息信息流
flow.load({
elem: '#LAY_view' //流加载容器
, isAuto: false
, end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
, done: function (page, next) { //加载下一页
renderMsg(page, function (data, pages) {
var html = laytpl(LAY_tpl.value).render({
data: data
, page: page
});
next(html, page < pages);
});
}
});
//打开页面即把消息标记为已读
/*
$.post('/message/read', {
type: 1
});
*/
//操作
var active = {
//同意
agree: function (othis) {
var li = othis.parents('li')
, uid = li.data('uid')
, noticeid = li.data('noticeid')
, from_group = li.data('fromGroup')
, user = cache[uid];
//选择分组
parent.layui.layim.setFriendGroup({
type: 'friend'
, username: user.username
, avatar: user.avatar
, group: parent.layui.layim.cache().friend //获取好友分组数据
, submit: function (group, index) {
//将好友追加到主面板
//parent.layui.layim.addList({
// type: 'friend'
// , avatar: user.avatar //好友头像
// , username: user.username //好友昵称
// , groupid: group //所在的分组id
// , id: uid //好友ID
// , sign: user.sign //好友签名
//});
//parent.layer.close(index);
//othis.parent().html('已同意');
//实际部署时，请开启下述注释，并改成你的接口地址
$.ajax({
url: base_url + 'agreeOrRefuse',
type: 'post',
data: {
noticeid: noticeid,
type: 'agree',
uid: uid //对方用户ID
, from_group: from_group //对方设定的好友分组
, group: group //我设定的好友分组
},
dataType: 'json',
success: function (res) {
if (res.status != 1) {
return layer.msg(res.msg);
}
//将好友追加到主面板
parent.layui.layim.addList({
type: 'friend'
, avatar: user.avatar //好友头像
, username: user.username //好友昵称
, groupid: group //所在的分组id
, id: uid //好友ID
, sign: user.sign //好友签名
});
parent.layer.close(index);
othis.parent().html('已同意');
}
});
}
});
}
//拒绝
, refuse: function (othis) {
var li = othis.parents('li')
, uid = li.data('uid'),
noticeid = li.data('noticeid');
layer.confirm('确定拒绝吗？', function (index) {
$.ajax({
url: base_url + 'agreeOrRefuse',
type: 'post',
data: {
noticeid: noticeid,
type: 'refuse',
uid: uid //对方用户ID
},
dataType: 'json',
success: function (res) {
if (res.code != 1) {
return layer.msg(res.msg);
}
layer.close(index);
othis.parent().html('<em>已拒绝</em>');
}
});
});
}
};
$('body').on('click', '.layui-btn', function () {
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</body>
</html>
基于Vue的iview-admin-grid网格化平台设计源码 （775个子文件） 
.babelrc 38B iclient-leaflet.min.css 634KB layui.css 68KB layui.css 68KB layim.css 15KB layim.css 15KB layer.css 14KB layer.css 14KB leaflet.css 13KB layui.mobile.css 10KB layui.mobile.css 10KB layim.css 9KB layim.css 9KB laydate.css 7KB laydate.css 7KB iconfont.css 4KB font.css 2KB code.css 1KB code.css 1KB .editorconfig 147B iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 4KB .eslintignore 0B .eslintrc 138B
59.gif 10KB 59.gif 10KB 22.gif 10KB 22.gif 10KB 24.gif 8KB 24.gif 8KB 13.gif 7KB 13.gif 7KB 16.gif 7KB 16.gif 7KB 39.gif 6KB 39.gif 6KB 64.gif 6KB 64.gif 6KB 63.gif 6KB 63.gif 6KB 50.gif 6KB 50.gif 6KB loading-0.gif 6KB loading-0.gif 6KB 4.gif 6KB 4.gif 6KB 1.gif 5KB 1.gif 5KB 42.gif 5KB 42.gif 5KB 71.gif 5KB 71.gif 5KB 21.gif 5KB 21.gif 5KB 20.gif 5KB 20.gif 5KB 29.gif 5KB 29.gif 5KB 70.gif 4KB 70.gif 4KB 5.gif 4KB 5.gif 4KB 17.gif 4KB 17.gif 4KB 27.gif 4KB 27.gif 4KB 9.gif 4KB 9.gif 4KB 44.gif 4KB 44.gif 4KB 11.gif 4KB 11.gif 4KB 8.gif 4KB 8.gif 4KB 3.gif 4KB 3.gif 4KB 23.gif 4KB 23.gif 4KB 34.gif 4KB 34.gif 4KB 41.gif 4KB 41.gif 4KB 38.gif 4KB 38.gif 4KB 65.gif 3KB 65.gif 3KB 32.gif 3KB 32.gif 3KB 45.gif 3KB 45.gif 3KB 7.gif 3KB 7.gif 3KB 12.gif 3KB 12.gif 3KB 26.gif 3KB 26.gif 3KB 60.gif 3KB 60.gif 3KB 2.gif 3KB共 775 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
