caogaoemail.html 14 KB

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