orders_list.html 11 KB

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