<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=comment-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="/static/dropload-gh-pages/dropload.css">
<script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/static/dropload-gh-pages/dropload.min.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<link rel="stylesheet" href="/static/h5/css/common.css">
<title>列表</title>
<style>
body{
background-color: #F1F1F1;
}
.container{
max-width: 750px;
height: auto;
margin: 0 auto;
padding: 0px 6px;
}
.comment-lists{
width: 100%;
height: auto;
}
.comment-info{
width: 100%;
height: 100px;
border-radius: 10px;
margin-top: 5px;
background-color: #ffffff;
padding: 0px 13px;
}
.comment-info-title{
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
color: var(--themeColor);
border-bottom:1.2px solid #F1F1F1;
}
.comment-info-content{
width: 100%;
height: 60px;
}
.comment-info-user{
width: 100%;
height: 30px;
line-height: 30px;
}
.left{
width: 30%;
height: 30px;
line-height: 30px;
display: inline-block;
font-size: 14px;
float: left;
}
.right{
width: 66%;
height: 30px;
line-height: 30px;
display: inline-block;
float: right;
font-size: 13px;
color: #A9A9A9;
overflow: hidden;
text-align: right;
}
.comment-info-time{
width: 100%;
height: 30px;
line-height: 30px;
}
.nulldata{
width: 100%;
height: 200px;
text-align: center;
position: fixed;
top: 22%;
}
.nulldata img{
width: 200px;
height: 160px;
text-align: center;
}
.nulldata-text{
margin-top: 15px;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
}
.footer-back{
position: fixed;
z-index: 1000;
width: 100%;
height: 45px;
line-height: 45px;
background-color: #ffffff;
bottom: 0;
left: 0;
box-shadow: 0px 0px 10px 0px rgba(26, 25, 26, 0.05);
display: table-cell;
vertical-align: middle;
text-align: center;
}
.footer-back a img{
width: 43px;
height: 43px;
}
</style>
</head>
<body>
{if $list }
<div class="container">
<div class="comment-lists">
{foreach $list as $k=>$v}
<div class="comment-info" onclick="details(this)" data-id="{$v['id']}" data-orgId="{$v['org_id']}">
{if $v['type'] == 1 }
<div class="comment-info-title">报修</div>
{elseif($v['type'] == 2) }
<div class="comment-info-title">保洁</div>
{elseif($v['type'] == 3) }
<div class="comment-info-title">运送</div>
{elseif($v['type'] == 4 )}
<div class="comment-info-title">应急</div>
{elseif($v['type'] == 15) }
<div class="comment-info-title">品质整改</div>
{else}
<div class="comment-info-title"></div>
{/if}
<div class="comment-info-content">
<div class="comment-info-user">
<div class="left">评论用户：</div>
<div class="right">{$v['user_name']}</div>
</div>
<div class="comment-info-time">
<div class="left">评论时间：</div>
<div class="right">{$v['create_time']}</div>
</div>
</div>
</div>
{/foreach}
</div>
</div>
{else /}
<div class="nulldata">
<img src="/img/nulldata.png" alt="">
<div class="nulldata-text">空空如也 ~</div>
</div>
{/if}
<div class="footer-back">
<a href="javascript:;" onclick="javascript:history.back(-1);"><img src="/img/back.png"></a>
</div>
</body>
</html>
<script>
function details(obj) {
var id = $(obj).attr('data-id');
var orgId = $(obj).attr('data-orgId');
var url = "{:url('Statistics/commentDetails')}?id="+id+'&orgId='+orgId;
window.location.href=url;
}
</script>
<script>
var orgId = '{$orgId}';
var day= '{$day}';
var mode= '{$mode}';
$(function(){
// 页数
var page = 1;
// 每页展示20个
var size = 20;
// dropload
$('.container').dropload({
scrollArea : window,
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData"></div>'
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
var url= "{:url('Statistics/commentList')}";
$.ajax({
type: 'GET',
url: url+'?page='+page+'&size='+size+'&orgId='+orgId+'&day='+day+'&mode='+mode,
dataType: 'json',
success: function(res){
var data = res.data;
var arrLen = data.length;
if(arrLen > 0){
for(var i = 0; i < data.length; i++){
if(arrLen > 0){
result +='<div class="comment-info" onclick="details(this)" data-id="'+data[i].id+'" data-orgId="'+data[i].orgId+'">';
if(data[i].type==1){
result +='<div class="comment-info-title">报修</div>';
}
if(data[i].type==2){
result +='<div class="comment-info-title">保洁</div>';
}
if(data[i].type==3){
result +='<div class="comment-info-title">运送</div>';
}
if(data[i].type==4){
result +='<div class="comment-info-title">应急</div>';
}
if(data[i].type==15){
result +='<div class="comment-info-title">品质整改</div>';
}
result +='<div class="comment-info-content">';
result +='<div class="comment-info-user">';
result +='<div class="left">评论用户：</div>';
result +='<div class="right">'+data[i].userName+'</div>';
result +='</div>';
result +='<div class="device-info-time">';
result +='<div class="left">评论时间：</div>';
result +='<div class="right">'+data[i].createTime+'</div>';
result +='</div>';
result +='</div>';
result +='</div>';
}
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
//延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.comment-lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
});
</script>