noticeList.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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-scroll">
  20. <div class="mui-card" v-for="item in items">
  21. <a href="javascript:;" :data-id="item.id" @tap="open_detail(item)">
  22. <div class="list_gg">
  23. <div class="list_gg_item mui-clearfix">
  24. <h1>{{item.title}}</h1>
  25. <h2>{{item.content}}</h2>
  26. <h3 class="mui-pull-right" >{{item.sendTime}}</h3>
  27. </div>
  28. </div>
  29. </a>
  30. </div>
  31. </div>-->
  32. <div class="mui-card" v-for="item in items">
  33. <a href="javascript:;" :data-id="item.id" @tap="open_detail(item)">
  34. <div class="mui-card-header tongzhi_title"><b>{{item.title}}</b></div>
  35. <div class="mui-card-content">
  36. <div class="mui-card-content-inner">
  37. <div >
  38. <div class="tongzhi_div2" style="word-wrap:break-word;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;background: url(../../images/dubanneirong.png) no-repeat;background-size:13px 13px;background-position-y: 2px;text-indent: 1em;margin-bottom: 8px;width: 99%;">{{item.content}}</div>
  39. <span class="tongzhi_div"><img class="tongzhi_img" src="../../images/zhibanshijian.png"></span>
  40. <span class="tongzhi_div1">{{item.sendTime}}</span>
  41. </div>
  42. </div>
  43. </div>
  44. </a>
  45. </div>
  46. <div></div>
  47. </div>
  48. </div>
  49. <script type="text/javascript" src="../../js/jquery-1.11.2.min.js"></script>
  50. <script src="../../js/mui.min.js"></script>
  51. <script src="../../js/config.js"></script>
  52. <script src="../../js/app.js"></script>
  53. <script src="../../js/dj/article/list.js"></script>
  54. <script src="../../js/vue.min.js"></script>
  55. <script>
  56. var pageDetail = null;
  57. mui.init({
  58. pullRefresh: {
  59. container: '#pullrefresh',
  60. down: {
  61. style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
  62. color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
  63. height: '50px', //可选,默认50px.下拉刷新控件的高度,
  64. range: '100px', //可选 默认100px,控件可下拉拖拽的范围
  65. offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
  66. // auto: true, //可选,默认false.首次加载自动上拉刷新一次
  67. callback: reloadNews //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  68. },
  69. up: {
  70. contentrefresh: '正在加载...',
  71. auto: true, //可选,默认false.自动上拉加载一次
  72. callback: pullupRefresh
  73. }
  74. },
  75. statusBarBackground: '#FFFFFF', //设置状态栏颜色,仅iOS可用
  76. // preloadLimit:5,
  77. });
  78. var vmA = new Vue({
  79. el: '#pullrefresh',
  80. data: {
  81. items: [] //列表信息流数据
  82. }
  83. });
  84. /**
  85. * 下拉刷新具体业务实现
  86. */
  87. function reloadNews() {
  88. pageNo = 1;
  89. vmA.items = [];
  90. // var table = document.body.querySelector('.mui-table-view');
  91. // table.innerHTML = "";
  92. addData();
  93. }
  94. var pageNo = 1;
  95. var type = 0;
  96. /**
  97. * 上拉加载具体业务实现
  98. */
  99. function pullupRefresh() {
  100. addData();
  101. }
  102. function addData() {
  103. var url = API.API_URL();
  104. var serviceId = "eu_notice_2013V0010PHONE001";
  105. var state = app.getState(); //获取登陆信息
  106. var staffId = state.user.useId;
  107. var unitId = state.user.unitId;
  108. var notice_title = "";
  109. var type="";
  110. var obj = {
  111. unitId: unitId,
  112. userId: staffId,
  113. notice_title: notice_title,
  114. type: type,
  115. pSize: APP.PageSize,
  116. p: pageNo
  117. };
  118. app.ajax(serviceId,obj, function(data) {
  119. //服务器返回响应
  120. console.log(JSON.stringify(data))
  121. var result = data.returnParams;
  122. var totalRow = data.total;
  123. var totalPage = Math.ceil(totalRow / APP.PageSize);
  124. var list = data.noticelist.list;
  125. if(totalPage == 0){
  126. totalPage =1;
  127. }
  128. if(list.length > 0) {
  129. vmA.items = vmA.items.concat(convert(list));
  130. }
  131. mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
  132. if(pageNo == 1 && totalPage>1) {
  133. mui('#pullrefresh').pullRefresh().endPulldown();
  134. mui('#pullrefresh').pullRefresh().refresh(true);
  135. }
  136. if(totalPage == 1 ){
  137. mui('#pullrefresh').pullRefresh().endPulldown();
  138. }
  139. pageNo = pageNo + 1;
  140. });
  141. }
  142. /**
  143. * 1、将服务端返回数据,转换成前端需要的格式
  144. * 2、若服务端返回格式和前端所需格式相同,则不需要改功能
  145. *
  146. * @param {Array} items
  147. */
  148. function convert(items) {
  149. var newItems = [];
  150. items.forEach(function(item) {
  151. newItems.push({
  152. id: item.id,
  153. title: item.title,
  154. sendTime: item.sendtime,
  155. content: item.noticecontent == null ? "" : item.noticecontent.substr(0, 70),
  156. name : item.name,
  157. isread: item.if_read,
  158. type :item.noticeType
  159. });
  160. });
  161. return newItems;
  162. }
  163. mui.plusReady(function() {
  164. var self = plus.webview.currentWebview();
  165. type = self.type;
  166. // var title1 = mui('#title');
  167. // title1[0].innerHTML = self.name;
  168. //接收上个界面传递的参数
  169. window.addEventListener('listEvent', function(event) {
  170. });
  171. // pageDetail = mui.preload({
  172. // url: 'detailList.html',
  173. // id: 'detailList.html',
  174. // })
  175. });
  176. /**
  177. * 打开详情
  178. *
  179. * @param {Object} item
  180. */
  181. function open_detail(item) {
  182. //触发子窗口变更详情
  183. // mui.fire(pageDetail, 'newsEvent', {
  184. // articleId: item.articleId
  185. // });
  186. // setTimeout(function() {
  187. // pageDetail.show("slide-in-right", 300);
  188. // }, 150);
  189. mui.openWindow({
  190. url: 'noticeInfo.html',
  191. id: 'noticeInfo.html',
  192. extras:{'notice_id':item.id}
  193. })
  194. }
  195. </script>
  196. </body>
  197. </html>