orders_list.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
  9. <link rel="stylesheet" href="/static/dropload-gh-pages/dropload.css">
  10. <script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
  11. <script type="text/javascript" src="/static/dropload-gh-pages/dropload.min.js"></script>
  12. <script type="text/javascript" src="/static/layer/layer.js"></script>
  13. <title>所有订单</title>
  14. </head>
  15. <style>
  16. body{
  17. background-color: #F1F1F1;
  18. }
  19. .container{
  20. max-width: 750px;
  21. height: auto;
  22. margin: 0 auto;
  23. padding: 0px 6px;
  24. }
  25. .order-all{
  26. width: 100%;
  27. height: 100px;
  28. background-color: #FFFFFF;
  29. border-radius: 2px;
  30. margin: 5px 0px;
  31. padding: 0px 8px;
  32. border: 1px solid #2878FF;
  33. }
  34. .order-title{
  35. width: 100%;
  36. height: 40px;
  37. line-height: 40px;
  38. border-bottom:1px solid #F1F1F1;
  39. }
  40. .order-title img{
  41. width: 24px;
  42. height: 24px;
  43. }
  44. .order-title-left{
  45. font-size: 14px;
  46. font-weight: 600;
  47. letter-spacing:1px;
  48. padding-left: 5px;
  49. color: #148d8f;
  50. }
  51. .order-title-right{
  52. font-size: 14px;
  53. float: right;
  54. letter-spacing:1px;
  55. }
  56. .order-content{
  57. width: 100%;
  58. height: auto;
  59. padding: 5px 0px;
  60. }
  61. .order-content-time{
  62. width: 100%;
  63. height: 23px;
  64. line-height: 23px;
  65. margin: 1px 0px;
  66. }
  67. .order-content-time text{
  68. font-size: 13px;
  69. color: #A9A9A9;
  70. }
  71. .order-content-name{
  72. width: 100%;
  73. height: 23px;
  74. line-height: 23px;
  75. margin: 1px 0px;
  76. }
  77. .order-content-name text{
  78. font-size: 13px;
  79. color: #A9A9A9;
  80. }
  81. .nulldata{
  82. width: 100%;
  83. height: 200px;
  84. text-align: center;
  85. position: fixed;
  86. top: 22%;
  87. }
  88. .nulldata img{
  89. width: 200px;
  90. height: 160px;
  91. text-align: center;
  92. }
  93. .nulldata-text{
  94. margin-top: 15px;
  95. font-size: 14px;
  96. letter-spacing: 2px;
  97. text-align: center;
  98. }
  99. .order-lists{
  100. width: 100%;
  101. height: auto;
  102. margin-bottom: 30px;
  103. }
  104. .footer-back{
  105. position: fixed;
  106. z-index: 1000;
  107. width: 100%;
  108. height: 45px;
  109. line-height: 45px;
  110. background-color: #ffffff;
  111. bottom: 0;
  112. left: 0;
  113. box-shadow: 0px 0px 10px 0px rgba(26, 25, 26, 0.05);
  114. display: table-cell;
  115. vertical-align: middle;
  116. text-align: center;
  117. }
  118. .footer-back a img{
  119. width: 43px;
  120. height: 43px;
  121. }
  122. </style>
  123. <body>
  124. {if (isset($list))}
  125. <div class="container">
  126. <div class="order-lists">
  127. {foreach $list as $k=>$v}
  128. <div class="order-all" onclick="orderDetails(this)" data-id="{$v['id']}" data-orgId="{$v['org_id']}">
  129. <div class="order-title">
  130. {if($v['order_mode']) == 1}
  131. <img src="/img/pending2x.png" alt="">
  132. {elseif($v['order_mode']) == 2 || $v['order_mode']==3 }
  133. <img src="/img/cancel2x.png" alt="">
  134. {elseif ($v['order_mode'] == 4)}
  135. <img src="/img/distribute2x.png" alt="">
  136. {elseif ($v['order_mode'] == 5)}
  137. <img src="/img/wancheng2x.png" alt="">
  138. {elseif ($v['order_mode'] == 6)}
  139. <img src="/img/yipingjia2x.png" alt="">
  140. {/if}
  141. {if($v['work_type_mode']) == 1}
  142. <text class="order-title-left">{$v['dep_name']}报修订单</text>
  143. {elseif($v['work_type_mode']) == 2}
  144. <text class="order-title-left">{$v['dep_name']}保洁订单</text>
  145. {elseif($v['work_type_mode']) == 3}
  146. <text class="order-title-left">{$v['dep_name']}运送订单</text>
  147. {elseif($v['work_type_mode']) == 4}
  148. <text class="order-title-left">{$v['dep_name']}安保订单</text>
  149. {elseif($v['work_type_mode']) == 15}
  150. <text class="order-title-left">{$v['dep_name']}品质整改订单</text>
  151. {/if}
  152. <text class="order-title-right" style="color: #2878FF">{$v['out_content']}</text>
  153. </div>
  154. <div class="order-content">
  155. <div class="order-content-time">
  156. <text>申请时间:</text><text>{$v['create_time']}</text>
  157. </div>
  158. <div class="order-content-name">
  159. <text>申请人姓名:</text><text>{$v['user_name']}</text>
  160. </div>
  161. </div>
  162. </div>
  163. {/foreach}
  164. </div>
  165. </div>
  166. {else /}
  167. <div class="nulldata">
  168. <img src="/public/img/nulldata.png" alt="">
  169. <div class="nulldata-text">空空如也 ~</div>
  170. </div>
  171. {/if}
  172. <div class="footer-back">
  173. <a href="javascript:;" onclick="javascript:history.back(-1);"><img src="/img/back.png"></a>
  174. </div>
  175. </body>
  176. </html>
  177. <script>
  178. function orderDetails(obj) {
  179. var objthis = $(obj);
  180. var id = $(objthis).attr('data-id');
  181. var orgId = $(objthis).attr('data-orgId');
  182. var url = "{:url('Statistics/ordersDetails')}?id="+id+'&orgId='+orgId;
  183. window.location.href=url;
  184. }
  185. </script>
  186. <script>
  187. var type = '<?=$type?>';
  188. var orgId = '<?=$orgId?>';
  189. var day= '<?=$day?>';
  190. var mode= '<?=$mode?>';
  191. var count= '<?=count($list)?>';
  192. $(function(){
  193. // 页数
  194. var page = 1;
  195. // 每页展示20个
  196. var size = 20;
  197. // dropload
  198. $('.container').dropload({
  199. scrollArea : window,
  200. domDown : {
  201. domClass : 'dropload-down',
  202. domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  203. domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  204. domNoData : '<div class="dropload-noData"></div>'
  205. },
  206. loadDownFn : function(me){
  207. page++;
  208. // 拼接HTML
  209. var result = '';
  210. var url="{:url('Statistics/ordersList')}";
  211. $.ajax({
  212. type: 'GET',
  213. url: url+'?page='+page+'&size='+size+'&type='+type+'&orgId='+orgId+'&day='+day+'&mode='+mode+'&dropload=1',
  214. dataType: 'json',
  215. success: function(res){
  216. var data = res.data;
  217. var arrLen = data.length;
  218. console.log(data,arrLen,111111111)
  219. if(arrLen > 0){
  220. for(var i = 0; i < data.length; i++){
  221. if(arrLen > 0){
  222. result +='<div class="order-all" onclick="orderDetails(this)" data-id="'+data[i].id+'" data-orgId="'+data[i].org_id+'">';
  223. result +='<div class="order-title">';
  224. if(data[i].order_mode ==1){
  225. result +='<img src="/img/pending2x.png" alt="">';
  226. }
  227. if(data[i].order_mode ==2 || data[i].order_mode ==3){
  228. result +='<img src="/img/cancel2x.png" alt="">';
  229. }
  230. if(data[i].order_mode ==4){
  231. result +='<img src="/img/distribute2x.png" alt="">';
  232. }
  233. if(data[i].order_mode ==5){
  234. result +='<img src="/img/wancheng2x.png" alt="">';
  235. }
  236. if(data[i].order_mode ==6){
  237. result +='<img src="/img/yipingjia2x.png" alt="">';
  238. }
  239. if(data[i].work_type_mode ==1){
  240. result +='<text class="order-title-left">'+data[i].dep_name+'报修订单</text>';
  241. }
  242. if(data[i].work_type_mode ==2){
  243. result +='<text class="order-title-left">'+data[i].dep_name+'保洁订单</text>';
  244. }
  245. if(data[i].work_type_mode ==3){
  246. result +='<text class="order-title-left">'+data[i].dep_name+'运送订单</text>';
  247. }
  248. if(data[i].work_type_mode ==4){
  249. result +='<text class="order-title-left">'+data[i].dep_name+'安保订单</text>';
  250. }
  251. if(data[i].work_type_mode ==15){
  252. result +='<text class="order-title-left">'+data[i].dep_name+'品质整改订单</text>';
  253. }
  254. result +='<text class="order-title-right" style="color: #2878FF">'+data[i].out_content+'</text>';
  255. result +='</div>';
  256. result +='<div class="order-content">';
  257. result +='<div class="order-content-time">';
  258. result +='<text>申请时间:</text><text>'+data[i].create_time+'</text>';
  259. result +='</div>';
  260. result +='<div class="order-content-name">';
  261. result +='<text>申请人姓名:</text><text>'+data[i].user_name+'</text>';
  262. result +='</div>';
  263. result +='</div>';
  264. result +='</div>';
  265. }
  266. }
  267. // 如果没有数据
  268. }else{
  269. // 锁定
  270. me.lock();
  271. // 无数据
  272. me.noData();
  273. }
  274. //延迟1秒加载
  275. setTimeout(function(){
  276. // 插入数据到页面,放到最后面
  277. $('.order-lists').append(result);
  278. // 每次数据插入,必须重置
  279. me.resetload();
  280. },1000);
  281. },
  282. error: function(xhr, type){
  283. // 即使加载出错,也得重置
  284. me.resetload();
  285. }
  286. });
  287. },
  288. threshold : 50
  289. });
  290. });
  291. </script>