<!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>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
iview-admin-grid是一个基于Vue开发的网格化平台,包含775个文件,其中包括316个Vue文件、161个JavaScript文件、150个GIF图片文件、35个PNG图片文件、25个JPG图片文件、25个LESS文件、18个CSS文件、7个HTML文件和7个JPEG图片文件。该项目为用户提供了一个全面、高效的网格化解决方案,支持多平台浏览,具备良好的用户体验和实用性。
资源推荐
资源详情
资源评论
收起资源包目录
基于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
资源评论
沐知全栈开发
- 粉丝: 5706
- 资源: 5224
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 20190313-100538-非对称电容在变压器油中10kv高压电作用下产生力的现象
- GB材料数据库(!请注意鉴别其中的材料参数并不是完全正确!)
- JAVA商城,支持小程序商城、 供应链商城 小程序商城 H5商城 app商城超全商城模式官网 支持小程序商城 H5商城 APP商城 PC商城
- springboot的在线商城系统设计与开发源码
- springboot的飘香水果购物网站的设计与实现 源码
- NO.4学习样本,请参考第4章的内容配合学习使用
- 20190312-084407-旋转磁体产生的场对周围空间长度的影响-数值越大距离越短
- 嵌入式系统应用-LVGL的应用-智能时钟 part 2
- 国家安全教育课程结课论文要求.docx
- FIR数字滤波器设计与软件实现.pdf
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功