tab-webview-subpage-message.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link href="css/mui.min.css" rel="stylesheet" />
  10. <link href="css/mui.indexedlist.css" rel="stylesheet" />
  11. <link href="css/OA-style.css" rel="stylesheet" />
  12. <style>
  13. .mui-content>.mui-table-view:first-child {
  14. margin-top: -1px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  20. <div class="mui-scroll">
  21. </div>
  22. </div>
  23. <script src="js/mui.min.js "></script>
  24. <script src="js/app.js"></script>
  25. <script src="js/config.js "></script>
  26. <script type="text/javascript " src="js/jquery.min.js "></script>
  27. <script src="js/dj/article/list.js "></script>
  28. <script>
  29. mui.init();
  30. window.addEventListener('refresh', function(e){//当子页面有查看数据时,此页面执行刷新
  31. var flag = e.detail.flagBatchRead;
  32. //console.log(flag);
  33. if(flag){
  34. location.reload();
  35. }
  36. });
  37. function addData() {
  38. //开启等待框
  39. var w = plus.nativeUI.showWaiting("加载中,请等待...", {
  40. loading: {
  41. display: "inline"
  42. }
  43. });
  44. var url = API.API_URL();
  45. var state = app.getState(); //获取登陆信息
  46. var staffId = state.user.useId;
  47. //var staffId = 118978536110432;
  48. var obj = {
  49. 'serviceId': 'oa_phone_messageIndex',
  50. 'params': '{staffId:' + staffId + '}'
  51. };
  52. mui.ajax(url, {
  53. dataType: 'json', //服务器返回json格式数据
  54. type: 'post', //HTTP请求类型
  55. data: obj,
  56. timeout: 30000, //超时时间设置为10秒;
  57. headers: {
  58. 'Accept': 'application/json'
  59. },
  60. success: function(data) {
  61. //服务器返回响应
  62. console.log(JSON.stringify(data))
  63. //var obj = eval(response);
  64. var params = data.returnParams;
  65. var list = params.list;
  66. var table = document.body.querySelector('.mui-scroll');
  67. var ul = document.createElement('ul');
  68. ul.setAttribute("id", "listDetail");
  69. ul.className = 'mui-table-view mui-clearfix';
  70. table.innerHTML = "";
  71. for(var i = 0, len = list.length; i < len; i++) {
  72. var id = list[i].UNIVERSALID;
  73. var title = list[i].title;
  74. var type = list[i].jump_type;
  75. var count = list[i].count_num;
  76. var dateVal = getymd(list[i].sendTime,'md');
  77. var name = "";
  78. var imgUrl = "";
  79. if(type == 1){//消息
  80. name = "我的消息";
  81. imgUrl = 'images/xiaoxi_messages.png';
  82. }else if(type == 2){//通知公告
  83. name = "通知公告";
  84. imgUrl = 'images/xiaoxi_tongzhi.png';
  85. }else if(type == 3){//流程办理
  86. name = "流程办理";
  87. imgUrl = 'images/xiaoxi_shenpi.png';
  88. // }else if(type == 4){//用餐管理
  89. // name = "用餐管理";
  90. // imgUrl = 'images/xiaoxi_yongcang.png';
  91. // }else if(type == 5){//物品管理
  92. // name = "物品管理";
  93. // imgUrl = 'images/xiaoxi_wuping.png';
  94. }
  95. /*else if(type == 6){//效率管理
  96. name = "效率管理";
  97. imgUrl = 'images/xiaoxi_xiaolv.png';
  98. }else if(type == 7){//效率管理
  99. name = "出差审批";
  100. imgUrl = 'images/xiaoxi_chuchai.png';
  101. }*/
  102. var li = document.createElement('li');
  103. li.setAttribute("jump_type", type);
  104. li.setAttribute("name", name);
  105. li.className = 'mui-table-view-cell';
  106. var html = '<div class="mui-pull-left head "><img src="'+imgUrl+'"></div>';
  107. html += '<div class="mui-pull-right text ">';
  108. html += '<div class="mui-clearfix ">';
  109. html += '<h1 class="mui-pull-left " style="height:24px;line-height:24px;">'+name+'</h1>';
  110. html += '<h3 class="mui-pull-right ">'+dateVal+'</h3>';
  111. html += '</div>';
  112. html += '<div class="mui-clearfix ">';
  113. html += '<h2 class="mui-pull-left " style="height:16px;line-height:16px;">'+title+' </h2>';
  114. if(count > 0){
  115. html += '<div class="angle mui-pull-right ">'+count+'</div>';
  116. }
  117. html += '</div>';
  118. html += '</div>';
  119. li.innerHTML = html;
  120. ul.appendChild(li);
  121. table.appendChild(ul);
  122. }
  123. if(list.length > 0){
  124. mui('#listDetail').on('tap', 'li', function() {
  125. var jump_type = this.getAttribute('jump_type');
  126. var name = this.getAttribute('name');
  127. mui.openWindow({
  128. url: 'page/message/messageList.html',
  129. id: 'messageList.html',
  130. extras:{'jump_type':jump_type,'name':name}
  131. })
  132. })
  133. }else{
  134. var html = '<center>';
  135. html += '<img src="images/noxiaoxi.png" style="margin-top: 80px;width: 200px;">';
  136. html += '<p style="margin-top: 50px;">亲 暂时没有消息哟~</p>';
  137. html += '</center>';
  138. table.innerHTML = html;
  139. }
  140. //关闭等待框
  141. var t = setInterval(function() {
  142. w.close();
  143. clearInterval(t);
  144. }, 1000);
  145. },
  146. error: function(xhr, type, errorThrown) {
  147. //异常处理;
  148. console.log(type);
  149. }
  150. });
  151. };
  152. mui.plusReady(function() {
  153. var state = app.getState().user;
  154. if(state){
  155. addData();
  156. }
  157. //自定义事件,模拟点击“首页选项卡”
  158. document.addEventListener('messageEvent', function() {
  159. addData();
  160. });
  161. });
  162. /**
  163. * js将字符串转成日期格式,返回年月日
  164. * @param dateStr 日期字符串
  165. * @param type 转换类型 d返回日、md返回月日、ymd返回年月日
  166. * 想了解更多,请搜索微信wu7zhi,在线帮你解答难题
  167. */
  168. function getymd(dateStr, type) {
  169. var date = new Date(Date.parse(dateStr.replace(/-/g, "/")));
  170. var mm = date.getMonth() + 1;
  171. //月
  172. var dd = date.getDate();
  173. //日
  174. var yy = date.getFullYear();
  175. //年
  176. if (type == "d") {
  177. return dd;
  178. }else if (type == "md") {
  179. return mm + "月" + dd + "日";
  180. }else if(type == "ymd") {
  181. return yy + "-" + mm + "-" + dd;
  182. }
  183. }
  184. </script>
  185. </body>
  186. </html>