pro_order_list.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>优尼雅入库订单</title>
  9. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/watero/css/mui.min.css?v=2016101701" />
  10. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/watero/css/iconfont.css?v=2016101701" />
  11. <link rel="stylesheet/less" type="text/css" href="css/styles.less" />
  12. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  13. <script>
  14. //屏蔽分享
  15. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  16. WeixinJSBridge.call('hideOptionMenu');
  17. });
  18. less = {
  19. env: "development",
  20. async: false,
  21. fileAsync: false,
  22. poll: 1000,
  23. functions: {},
  24. dumpLineNumbers: "comments",
  25. relativeUrls: false,
  26. rootpath: ":/127.0.0.1/"
  27. };
  28. </script>
  29. <script src="js/less.min.js"></script>
  30. </head>
  31. <body>
  32. <div id="pro-menu" class="mui-segmented-control">
  33. <a class="mui-control-item mui-active" href="#item1">待入库</a>
  34. <a class="mui-control-item" href="#item2">已入库</a>
  35. </div>
  36. <!--<div class="add-btn">
  37. 添加
  38. </div>-->
  39. <!--下拉刷新容器-->
  40. <div id="pullrefresh_list" class="mui-content mui-scroll-wrapper">
  41. <div class="mui-scroll">
  42. <!--退款记录列表-->
  43. <ul class="my-table-view-order">
  44. <!--<li>
  45. <ul class="mui-table-view mui-grid-view my-view-no">
  46. <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-text-left top-center">
  47. <ul class="steps">
  48. <li class="active">张三</li>
  49. </ul>
  50. </li>
  51. <li class="mui-table-view-cell mui-media mui-col-xs-9 mui-text-left">
  52. <a>
  53. <div class="pro-li-tit">张三的工单 <span class="mui-h5 mui-pull-right">2018-08-10 12:00</span></div>
  54. <h6 >订单名称:深圳爱贝源申请采购</h6>
  55. <ul class="pro-cp-list">
  56. <li>美国watero wa-1 黑色 100台</li>
  57. <li>美国watero wa-1 黑色 100台</li>
  58. </ul>
  59. </a>
  60. </li>
  61. <li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">
  62. <h6 class="cl-green">待入库</h6>
  63. </li>
  64. <li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">
  65. <button type="button" class="my-confirm-btn">确认入库</button>
  66. </li>
  67. </ul>
  68. </li>-->
  69. </ul>
  70. </div>
  71. </div>
  72. <script src="js/mui.min.js"></script>
  73. <script src="js/jquery-2.1.1.min.js"></script>
  74. <script src="js/main.js"></script>
  75. <script>
  76. window.addEventListener('pageshow', function(e) {
  77. // 通过persisted属性判断是否存在 BF Cache
  78. if(e.persisted) {
  79. location.reload();
  80. }
  81. });
  82. var pageNumber = 0,pagesize = 10;
  83. mui.init({
  84. pullRefresh: {
  85. container: '#pullrefresh_list',
  86. down: {
  87. //callback: pulldownRefresh
  88. },
  89. up: {
  90. contentrefresh: '正在加载...',
  91. callback: pullupRefresh
  92. }
  93. }
  94. });
  95. var count = 0;
  96. /**
  97. * 上拉加载具体业务实现
  98. */
  99. function pullupRefresh() {
  100. setTimeout(function() {
  101. mui('#pullrefresh_list').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
  102. var table = document.body.querySelector('.my-table-view-order');
  103. var status='';
  104. for (var i = 10, len = i + 5; i < len; i++) {
  105. i%2==0?status='<h6 class="cl-green">已入库</h6>':status='<h6 class="cl-red">待入库</h6>';
  106. var li = document.createElement('li');
  107. li.innerHTML = '<li><ul class="mui-table-view mui-grid-view my-view-no"><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-text-left top-center"><ul class="steps"><li class="active">张三</li></ul></li><li class="mui-table-view-cell mui-media mui-col-xs-9 mui-text-left"><a><div class="pro-li-tit">张三的工单 <span class="mui-h5 mui-pull-right">2018-08-10 12:00</span></div><h6 >订单名称:深圳爱贝源申请采购</h6><ul class="pro-cp-list"><li>美国watero wa-1 黑色 100台</li><li>美国watero wa-1 黑色 100台</li></ul></a></li><li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">'+status+'</li><li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right"><button type="button" class="my-confirm-btn">确认入库</button></li></ul></li>';
  108. table.appendChild(li);
  109. }
  110. }, 1500);
  111. }
  112. mui.ready(function() {
  113. mui('#pullrefresh_list').pullRefresh().pullupLoading();
  114. console.log("页面加载完毕")
  115. });
  116. </script>
  117. </body>
  118. </html>