yifasongemail.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <meta content="IE=edge" http-equiv="X-UA-Compatible">
  9. <meta content="initial-scale=1.0, width=device-width" name="viewport">
  10. <title>湖北智慧水运</title>
  11. <link href="../css/mui.min.css" rel="stylesheet">
  12. <script type="text/javascript" src="../js/iscroll.js" charset="utf-8"></script>
  13. <script type="text/javascript" src="../js/zepto.min.js"></script>
  14. <style>
  15. .Hdel{
  16. position:absolute;
  17. right:-70px;
  18. width:70px;
  19. height: 64px;
  20. background-color: red;
  21. top: 0px;
  22. color: white;
  23. padding-top: 21px;
  24. text-align: center;
  25. }
  26. .Hdel a{
  27. color: white;
  28. }
  29. </style>
  30. <script type="text/javascript">
  31. var page =1;
  32. var rows =10;
  33. var sPosx = 0; //记录触碰时的x位置
  34. var sPosy = 0; //记录触碰时的y位置
  35. var mPosx = 0; //记录滑动时的x位置
  36. var mPosy = 0; //记录滑动时的y位置
  37. var nChangx = 0;//记录滑动结束时的x位置
  38. var nChangy = 0;//记录滑动结束时的y位置
  39. var statusname = {"1":"草稿","2":"已发送"}
  40. $(function(){
  41. $.ajax({
  42. type: 'post',
  43. url: '../../yjcontroller/findFjxAll.do',
  44. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,no:"",title:$("#title").val(),start:"",stop:"",code:getQueryString("code")},
  45. dataType: 'json',
  46. success: function(data){
  47. console.log(data);
  48. var result = '';
  49. if(data.length==0)
  50. {
  51. layer.open({
  52. shade:false,
  53. content: '没有相关数据',
  54. style: 'background-color:rgba(0,0,0,0.5); color:white; border:none;font-size:20px;text-align:center',
  55. time: 1
  56. });
  57. $('.lists').html('');
  58. return;
  59. }
  60. for(var i = 0; i < data.length; i++){
  61. result += '<li class="mui-table-view-cell mui-media"><a href="xiangqingemailYF.html?id='+data[i].id+'" >'+
  62. '<div class="mui-media-body">'+data[i].title+
  63. '<p class="mui-ellipsis">收件人:<span style="color:rgb(33, 150, 243);">'+data[i].receiveUserName+'</span> 发件日期:<span style="color:rgb(33, 150, 243);">'+todata(data[i].sendDate)+'</span> 状态:<span style="color:rgb(33, 150, 243);">'+statusname[data[i].status]+'</span></p>'+
  64. '</div>'+
  65. '</a><div class="Hdel" id="'+data[i].id+'"><a onclick="delbyid(\''+data[i].id+'\');">删除</a></div></li>';
  66. }
  67. $('.lists').html('');
  68. $('.lists').prepend(result);
  69. Hdel();
  70. if(data.length>=rows){
  71. showJZ();
  72. }else{
  73. hideJZ();
  74. }
  75. myScroll.refresh();
  76. }
  77. });
  78. });
  79. var myScroll,
  80. pullDownEl, pullDownOffset,
  81. pullUpEl, pullUpOffset,
  82. generatedCount = 0;
  83. function pullDownAction () {
  84. page = 1;
  85. rows = 10;
  86. $.ajax({
  87. type: 'post',
  88. url: '../../yjcontroller/findFjxAll.do',
  89. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,no:"",title:$("#title").val(),start:"",stop:"",code:getQueryString("code")},
  90. dataType: 'json',
  91. success: function(data){
  92. console.log(data);
  93. var result = '';
  94. if(data.length==0)
  95. {
  96. layer.open({
  97. shade:false,
  98. content: '没有相关数据',
  99. style: 'background-color:rgba(0,0,0,0.5); color:white; border:none;font-size:20px;text-align:center',
  100. time: 1
  101. });
  102. $('.lists').html('');
  103. return;
  104. }
  105. for(var i = 0; i < data.length; i++){
  106. result += '<li class="mui-table-view-cell mui-media"><a href="xiangqingemailYF.html?id='+data[i].id+'" >'+
  107. '<div class="mui-media-body">'+data[i].title+
  108. '<p class="mui-ellipsis">收件人:<span style="color:rgb(33, 150, 243);">'+data[i].receiveUserName+'</span> 发件日期:<span style="color:rgb(33, 150, 243);">'+todata(data[i].sendDate)+'</span> 状态:<span style="color:rgb(33, 150, 243);">'+statusname[data[i].status]+'</span></p>'+
  109. '</div>'+
  110. '</a><div class="Hdel" id="'+data[i].id+'"><a onclick="delbyid(\''+data[i].id+'\');">删除</a></div></li>';
  111. }
  112. $('.lists').html('');
  113. $('.lists').prepend(result);
  114. Hdel();
  115. if(data.length>=rows){
  116. showJZ();
  117. }else{
  118. hideJZ();
  119. }
  120. myScroll.refresh();
  121. }
  122. });
  123. }
  124. function pullUpAction () {
  125. page+=1;
  126. $.ajax({
  127. type: 'post',
  128. url: '../../yjcontroller/findFjxAll.do',
  129. data:{uid:"402881e44e86c26d014e86c9ae8c0008",page:page,rows:rows,no:"",title:$("#title").val(),start:"",stop:"",code:getQueryString("code")},
  130. dataType: 'json',
  131. success: function(data){
  132. console.log(data);
  133. var result = '';
  134. if(data.length==0)
  135. {
  136. layer.open({
  137. shade:false,
  138. content: '没有相关数据',
  139. style: 'background-color:rgba(0,0,0,0.5); color:white; border:none;font-size:20px;text-align:center',
  140. time: 1
  141. });
  142. $('.lists').html('');
  143. return;
  144. }
  145. for(var i = 0; i < data.length; i++){
  146. result += '<li class="mui-table-view-cell mui-media"><a href="xiangqingemailYF.html?id='+data[i].id+'" >'+
  147. '<div class="mui-media-body">'+data[i].title+
  148. '<p class="mui-ellipsis">收件人:<span style="color:rgb(33, 150, 243);">'+data[i].receiveUserName+'</span> 发件日期:<span style="color:rgb(33, 150, 243);">'+todata(data[i].sendDate)+'</span> 状态:<span style="color:rgb(33, 150, 243);">'+statusname[data[i].status]+'</span></p>'+
  149. '</div>'+
  150. '</a><div class="Hdel" id="'+data[i].id+'"><a onclick="delbyid(\''+data[i].id+'\');">删除</a></div></li>';
  151. }
  152. $('.lists').append(result);
  153. if(data.length<rows){
  154. wcJZ();
  155. myScroll.refresh();
  156. }
  157. }
  158. });
  159. }
  160. function loaded() {
  161. pullDownEl = document.getElementById('pullDown');
  162. pullDownOffset = pullDownEl.offsetHeight;
  163. pullUpEl = document.getElementById('pullUp');
  164. pullUpOffset = pullUpEl.offsetHeight;
  165. myScroll = new iScroll('wrapper', {
  166. useTransition: true,
  167. topOffset: pullDownOffset,
  168. onRefresh: function () {
  169. if (pullDownEl.className.match('loading')) {
  170. pullDownEl.className = '';
  171. pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
  172. } else if (pullUpEl.className.match('loading')) {
  173. pullUpEl.className = '';
  174. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  175. }
  176. },
  177. onScrollMove: function () {
  178. if (this.y > 5 && !pullDownEl.className.match('flip')) {
  179. pullDownEl.className = 'flip';
  180. pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手刷新...';
  181. this.minScrollY = 0;
  182. } else if (this.y < 5 && pullDownEl.className.match('flip')) {
  183. pullDownEl.className = '';
  184. pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
  185. this.minScrollY = -pullDownOffset;
  186. } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
  187. pullUpEl.className = 'flip';
  188. pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手加载...';
  189. this.maxScrollY = this.maxScrollY;
  190. } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
  191. pullUpEl.className = '';
  192. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  193. this.maxScrollY = pullUpOffset;
  194. }
  195. },
  196. onScrollEnd: function () {
  197. if (pullDownEl.className.match('flip')) {
  198. pullDownEl.className = 'loading';
  199. pullDownEl.querySelector('.pullDownLabel').innerHTML = '载入中...';
  200. pullDownAction(); // Execute custom function (ajax call?)
  201. } else if (pullUpEl.className.match('flip')) {
  202. pullUpEl.className = 'loading';
  203. pullUpEl.querySelector('.pullUpLabel').innerHTML = '载入中...';
  204. pullUpAction(); // Execute custom function (ajax call?)
  205. }
  206. }
  207. });
  208. setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  209. }
  210. function delbyid(id){
  211. $.ajax({
  212. type: 'post',
  213. url: '../../yjcontroller/deleteMailUser.do',
  214. data:{
  215. mailIds:id,
  216. id:"402881e44e86c26d014e86c9ae8c0008",code:getQueryString("code")
  217. },
  218. dataType: 'json',
  219. success: function(data){
  220. if(data.resultCode){
  221. $("#"+id).parent().remove();
  222. }
  223. }
  224. });
  225. }
  226. function Hdel(){
  227. $(".mui-table-view-cell").each(function(){
  228. this.addEventListener('touchmove', function(event) {
  229. // 如果这个元素的位置内只有一个手指的话
  230. if (event.targetTouches.length == 1) {
  231.      event.preventDefault();// 阻止浏览器默认事件,重要
  232. var touch = event.targetTouches[0];
  233. mPosx = touch.pageX;
  234. mPosy = touch.pageY;
  235. }
  236. }, false);
  237. this.addEventListener('touchend', function(event) {
  238. // 如果这个元素的位置内只有一个手指的话
  239. if (event.changedTouches.length == 1) {
  240.      event.preventDefault();// 阻止浏览器默认事件,重要
  241. var touch = event.changedTouches[0];
  242. nChangx = touch.pageX;
  243. nChangy = touch.pageY;
  244. if(nChangx - sPosx < -150){
  245. $(".Hdel").animate({right: '-70px'}, "slow");
  246. $(this).find(".Hdel").animate({right: '0px'}, "50");
  247. }else if(nChangx - sPosx > 50){
  248. $(this).find(".Hdel").animate({right: '-70px'}, "50");
  249. }
  250. }
  251. }, false);
  252. this.addEventListener('touchstart', function(event) {
  253. // 如果这个元素的位置内只有一个手指的话
  254. if (event.targetTouches.length == 1) {
  255.      event.preventDefault();// 阻止浏览器默认事件,重要
  256. var touch = event.targetTouches[0];
  257. sPosx = touch.pageX;
  258. sPosy = touch.pageY;
  259. }
  260. }, false);
  261. });
  262. }
  263. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  264. document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
  265. </script>
  266. <style type="text/css" media="all">
  267. #header {
  268. position:absolute; z-index:2;
  269. top:0; left:0;
  270. width:100%;
  271. height:45px;
  272. line-height:45px;
  273. padding:0;
  274. color:#eee;
  275. font-size:22px;
  276. text-align:center;
  277. color:white;
  278. background: #2196f3;
  279. }
  280. #header a {
  281. color:white;
  282. text-decoration:none;
  283. }
  284. #wrapper {
  285. position:absolute; z-index:1;
  286. top: 45px; bottom:0px; left:-9999px;
  287. width:100%;
  288. overflow:auto;
  289. }
  290. #scroller {
  291. position:absolute; z-index:1;
  292. /* -webkit-touch-callout:none;*/
  293. -webkit-tap-highlight-color:rgba(0,0,0,0);
  294. width:100%;
  295. padding:0;
  296. }
  297. #myFrame {
  298. position:absolute;
  299. top:0; left:0;
  300. }
  301. /**
  302. *
  303. * Pull down styles
  304. *
  305. */
  306. #pullDown, #pullUp {
  307. background:#fff;
  308. height:45px;
  309. line-height:45px;
  310. font-weight:bold;
  311. font-size:14px;
  312. color:#888;
  313. padding-left: 50%;
  314. margin-left:-54.5px;
  315. }
  316. #pullDown .pullDownIcon, #pullUp .pullUpIcon {
  317. display:block; float:left;
  318. width:40px; height:40px;
  319. background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
  320. -webkit-background-size:40px 80px; background-size:40px 80px;
  321. -webkit-transition-property:-webkit-transform;
  322. -webkit-transition-duration:250ms;
  323. }
  324. #pullDown .pullDownIcon {
  325. -webkit-transform:rotate(0deg) translateZ(0);
  326. }
  327. #pullUp .pullUpIcon {
  328. -webkit-transform:rotate(-180deg) translateZ(0);
  329. }
  330. #pullDown.flip .pullDownIcon {
  331. -webkit-transform:rotate(-180deg) translateZ(0);
  332. }
  333. #pullUp.flip .pullUpIcon {
  334. -webkit-transform:rotate(0deg) translateZ(0);
  335. }
  336. #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
  337. background-position:0 100%;
  338. -webkit-transform:rotate(0deg) translateZ(0);
  339. -webkit-transition-duration:0ms;
  340. -webkit-animation-name:loading;
  341. -webkit-animation-duration:2s;
  342. -webkit-animation-iteration-count:infinite;
  343. -webkit-animation-timing-function:linear;
  344. }
  345. @-webkit-keyframes loading {
  346. from { -webkit-transform:rotate(0deg) translateZ(0); }
  347. to { -webkit-transform:rotate(360deg) translateZ(0); }
  348. }
  349. ul,li{padding: 0px;margin: 0px;}
  350. </style>
  351. </head>
  352. <body>
  353. <div id="header"><a>已发送</a></div>
  354. <div id="wrapper">
  355. <div id="scroller">
  356. <div id="pullDown" >
  357. <div><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div>
  358. </div>
  359. <div id="mui-content">
  360. <ul id="thelist mui-table-view" class="lists">
  361. </ul>
  362. </div>
  363. <div id="pullUp">
  364. </div>
  365. </div>
  366. </div>
  367. </body>
  368. </html>