Aucune description

Setting_manage.html 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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. <title></title>
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link href="../css/mui.indexedlist.css" rel="stylesheet" />
  9. <link href="../css/index.css" />
  10. <style>
  11. html,
  12. body {
  13. height: 100%;
  14. overflow: hidden;
  15. }
  16. .oa-contact-cell.mui-table .mui-table-cell {
  17. padding: 11px 0;
  18. vertical-align: middle;
  19. }
  20. .oa-contact-cell {
  21. position: relative;
  22. margin: -11px 0;
  23. }
  24. .oa-contact-avatar {
  25. width: 50px;
  26. }
  27. .oa-contact-avatar img {
  28. border-radius: 50%;
  29. width: 30px;
  30. height: 30px;
  31. }
  32. .oa-contact-content {
  33. width: 100%;
  34. }
  35. .oa-contact-name {
  36. margin-right: 10px;
  37. }
  38. .go_search {
  39. background: #fff!important;
  40. border: 1px solid #ccc!important;
  41. border-radius: 17px!important;
  42. }
  43. a {
  44. color: #000;
  45. }
  46. .mui-search.mui-active:before {
  47. top: 25px;
  48. }
  49. .oa-contact-position{
  50. margin-left: 15px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <header class="mui-bar mui-bar-nav" style="background: #cd0000 !important;">
  56. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
  57. <h1 id="title" class="mui-title">用户管理</h1>
  58. </header>
  59. <div class="mui-content">
  60. <div id='list' class="mui-indexed-list" style="height: 100%;">
  61. <div class="mui-indexed-list-search mui-input-row mui-search">
  62. <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索">
  63. </div>
  64. <div class="mui-indexed-list-bar">
  65. <a>A</a>
  66. <a>B</a>
  67. <a>C</a>
  68. <a>D</a>
  69. <a>E</a>
  70. <a>F</a>
  71. <a>G</a>
  72. <a>H</a>
  73. <a>I</a>
  74. <a>J</a>
  75. <a>K</a>
  76. <a>L</a>
  77. <a>M</a>
  78. <a>N</a>
  79. <a>O</a>
  80. <a>P</a>
  81. <a>Q</a>
  82. <a>R</a>
  83. <a>S</a>
  84. <a>T</a>
  85. <a>U</a>
  86. <a>V</a>
  87. <a>W</a>
  88. <a>X</a>
  89. <a>Y</a>
  90. <a>Z</a>
  91. </div>
  92. <div class="mui-indexed-list-alert"></div>
  93. <div class="mui-indexed-list-inner">
  94. <div class="mui-indexed-list-empty-alert">没有数据</div>
  95. <ul class="mui-table-view TX">
  96. </ul>
  97. </div>
  98. </div>
  99. </div>
  100. <script src="../js/mui.min.js"></script>
  101. <script src="../js/mui.indexedlist.js"></script>
  102. <script src="../js/zepto.js"></script>
  103. <script src="../js/huayi.config.js"></script>
  104. <script type="text/javascript" charset="utf-8">
  105. mui.init();
  106. mui.ready(function() {
  107. var keyw = '';
  108. mui('.mui-scroll-wrapper').scroll({
  109. deceleration: 0.0005
  110. }); //设置减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
  111. Ajax();
  112. function Ajax() {
  113. $(".TX").empty();
  114. $.ajax({
  115. data: {
  116. pageindex: 1,
  117. pagesize: 9999,
  118. token: localStorage.getItem('token')
  119. },
  120. url: huayi.config.callcenter_url + '/UserAccount/GetList',
  121. dataType: 'json', //服务器返回json格式数据
  122. type: 'get', //HTTP请求类型
  123. timeout: 10000, //超时时间设置为10秒;
  124. headers: {
  125. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  126. },
  127. success: function(data) {
  128. if(data.state = "success") {
  129. var html;
  130. //alert(JSON.stringify(data.rows))
  131. //alert(JSON.stringify(data.total))
  132. if (data.rows.length>0) {
  133. $(data.rows).each(function(i, n) {
  134. html= '<li data-group="'+n.code+'" data-value="'+n.NameOneCode+'" data-tags="'+n.NameOneCode+'" class="mui-table-view-cell mui-indexed-list-item">'+
  135. '<div class="mui-slider-cell">'+
  136. '<a class="xg_manage" data-name="'+n.F_UserCode+'" data-index="'+n.F_UserId+'">'+
  137. '<div class="oa-contact-cell mui-table">'+
  138. '<div class="oa-contact-content mui-table-cell">'+
  139. '<h4 class="oa-contact-name size-14">'+n.F_UserName+
  140. '<span class="oa-contact-position mui-h6">'+n.F_WorkNumber+'</span></h4>'+
  141. '<h4 class="oa-contact-email mui-h5">'+n.F_Mobile+'</h4>'+
  142. '</div>'+
  143. '</div>'+
  144. '</a>'+
  145. '</div>'+
  146. '</li>';
  147. $(html).appendTo($(".TX"));
  148. })
  149. }
  150. }
  151. },
  152. error: function(xhr, type, errorThrown) {
  153. //异常处理;
  154. mui.alert("");
  155. }
  156. });
  157. }
  158. setTimeout(indexAjax,5000);
  159. function indexAjax () {
  160. var list = document.getElementById('list')
  161. //calc hieght
  162. list.style.height = (document.body.offsetHeight) + 'px';
  163. //create
  164. window.indexedList = new mui.IndexedList(list);
  165. }
  166. $('.TX').on('tap', '.xg_manage', function() {
  167. var id = $(this).attr('data-index');
  168. var name = $(this).attr('data-name');
  169. mui.openWindow({
  170. id: 'xg_manage',
  171. url: 'xg_manage.html',
  172. createNew: true,
  173. show: {
  174. aniShow: 'pop-in'
  175. },
  176. styles: {
  177. popGesture: 'hide'
  178. },
  179. waiting: {
  180. autoShow: true
  181. },
  182. extras: {
  183. name: name,
  184. nameid: id,
  185. token: localStorage.getItem('token')
  186. }
  187. });
  188. })
  189. });
  190. </script>
  191. </body>
  192. </html>