meetingListRoom.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="../../css/mui.min.css" rel="stylesheet" />
  10. <link href="../../css/OA-style.css" rel="stylesheet" />
  11. </head>
  12. <body>
  13. <header class="mui-bar mui-bar-nav ">
  14. <a href="" class="mui-action-back back mui-pull-left"><img src="../../images/back.png"></a>
  15. <h1 id="title" class="mui-title">我发布的会议</h1>
  16. </header>
  17. <div class="mui-content" >
  18. <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="">
  19. <div class="mui-card" v-for="item in items">
  20. <a href="javascript:;" :data-id="item.id" @tap="open_detail(item)">
  21. <div class="mui-card-header tongzhi_title"><b>{{item.meeting_room_name}}</b></div>
  22. <div class="mui-card-content">
  23. <div class="mui-card-content-inner">
  24. <div >
  25. <span class="tongzhi_div"><img class="tongzhi_img" src="../../images/zhibanshijian.png"></span>
  26. <span class="tongzhi_div1">会议室地点:{{item.meeting_room_place}}</span>
  27. <br />
  28. <span class="tongzhi_div1">可容纳人数:{{item.meeting_room_space}}</span>
  29. <br />
  30. <span class="tongzhi_div1">会议室设备:{{item.meeting_room_equipment}}</span>
  31. <br />
  32. <span class="tongzhi_div1">会议室备注:{{item.meeting_room_remark}}</span>
  33. </div>
  34. </div>
  35. </div>
  36. </a>
  37. </div>
  38. <div></div>
  39. </div>
  40. </div>
  41. <script type="text/javascript" src="../../js/jquery-1.11.2.min.js"></script>
  42. <script src="../../js/mui.min.js"></script>
  43. <script src="../../js/config.js"></script>
  44. <script src="../../js/app.js"></script>
  45. <script src="../../js/dj/article/list.js"></script>
  46. <script src="../../js/vue.min.js"></script>
  47. <script>
  48. var pageDetail = null;
  49. mui.init({
  50. pullRefresh: {
  51. container: '#pullrefresh',
  52. down: {
  53. style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
  54. color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
  55. height: '50px', //可选,默认50px.下拉刷新控件的高度,
  56. range: '100px', //可选 默认100px,控件可下拉拖拽的范围
  57. offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
  58. //auto: true, //可选,默认false.首次加载自动上拉刷新一次
  59. callback: reloadNews //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  60. },
  61. up: {
  62. contentrefresh: '正在加载...',
  63. auto: true, //可选,默认false.自动上拉加载一次
  64. callback: pullupRefresh
  65. }
  66. },
  67. statusBarBackground: '#FFFFFF', //设置状态栏颜色,仅iOS可用
  68. //preloadLimit:5,
  69. });
  70. var vmA = new Vue({
  71. el: '#pullrefresh',
  72. data: {
  73. items: [] //列表信息流数据
  74. }
  75. });
  76. /**
  77. * 下拉刷新具体业务实现
  78. */
  79. function reloadNews() {
  80. pageNo = 1;
  81. vmA.items = [];
  82. // var table = document.body.querySelector('.mui-table-view');
  83. // table.innerHTML = "";
  84. addData();
  85. }
  86. var pageNo = 1;
  87. var type = 0;
  88. /**
  89. * 上拉加载具体业务实现
  90. */
  91. function pullupRefresh() {
  92. addData();
  93. }
  94. function addData() {
  95. var url = API.API_URL();
  96. var serviceId = "oa_2014V001MEETING_toADD";
  97. var state = app.getState(); //获取登陆信息
  98. var staffId = state.user.useId;
  99. var unitId = state.user.unitId;
  100. var obj = {
  101. unit_id: unitId
  102. };
  103. app.ajax(serviceId,obj, function(data) {
  104. //console.log(JSON.stringify(data))
  105. var totalRow = data.roomList.length;
  106. var totalPage = Math.ceil(totalRow / APP.PageSize);
  107. var list = data.roomList;
  108. if(totalPage == 0){
  109. totalPage =1;
  110. }
  111. if(list.length > 0) {
  112. vmA.items = vmA.items.concat(convert(list));
  113. }
  114. mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
  115. if(pageNo == 1 && totalPage>1) {
  116. mui('#pullrefresh').pullRefresh().endPulldown();
  117. mui('#pullrefresh').pullRefresh().refresh(true);
  118. }
  119. if(totalPage == 1 ){
  120. mui('#pullrefresh').pullRefresh().endPulldown();
  121. }
  122. pageNo = pageNo + 1;
  123. });
  124. }
  125. /**
  126. * 1、将服务端返回数据,转换成前端需要的格式
  127. * 2、若服务端返回格式和前端所需格式相同,则不需要改功能
  128. *
  129. * @param {Array} items
  130. */
  131. function convert(items) {
  132. var newItems = [];
  133. items.forEach(function(item) {
  134. newItems.push({
  135. meeting_room_id: item.meeting_room_id,
  136. meeting_room_name: item.meeting_room_name,
  137. meeting_room_create_date: item.meeting_room_create_date,
  138. meeting_room_create_user: item.meeting_room_create_user,
  139. meeting_room_type: item.meeting_room_type,
  140. meeting_room_remark: item.meeting_room_remark,
  141. unit: item.unit,
  142. meeting_room_place: item.meeting_room_place,
  143. meeting_room_space: item.meeting_room_space,
  144. meeting_room_equipment: item.meeting_room_equipment
  145. });
  146. });
  147. return newItems;
  148. }
  149. mui.plusReady(function() {
  150. var self = plus.webview.currentWebview();
  151. var title1 = mui('#title');
  152. title1[0].innerHTML = self.name;
  153. type = self.type;
  154. //接收上个界面传递的参数
  155. window.addEventListener('listEvent', function(event) {
  156. });
  157. });
  158. /**
  159. * 打开详情 item--当前点击对象,包含基本信息
  160. */
  161. function open_detail(item) {
  162. //触发子窗口变更详情
  163. /*mui.openWindow({
  164. url: 'meetingInfo.html',
  165. id: 'meetingInfo.html',
  166. extras:{'meeting_id':item.meeting_id,
  167. 'meeting_user_id':item.meeting_user_id,
  168. 'type':'2'
  169. }
  170. })*/
  171. }
  172. </script>
  173. </body>
  174. </html>