me_people.jsp 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
  4. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
  5. <%
  6. String path = request.getContextPath();
  7. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + path+"/";
  8. request.setAttribute("contextPath", basePath);
  9. String redirectUrl= request.getParameter("redirectUrl");
  10. request.setAttribute("redirectUrl", redirectUrl);
  11. %>
  12. <!DOCTYPE html>
  13. <html lang="en">
  14. <head>
  15. <meta charset="UTF-8">
  16. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  17. <meta name="apple-mobile-web-app-capable" content="yes">
  18. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  19. <meta name="format-detection" content="telephone=no">
  20. <title>我的客户</title>
  21. <script type="text/javascript" src="<%=basePath %>app/lib/jquery.min.js"></script>
  22. <script src="${contextPath }app/lib/flexible.js"></script>
  23. <link rel="stylesheet" href="${contextPath }app/lib/flexible.css">
  24. <link rel="stylesheet" href="${contextPath }app/css/basem.css">
  25. <link rel="stylesheet" href="${contextPath }app/css/logome.css">
  26. <style>
  27. .slist {
  28. overflow: hidden;
  29. }
  30. .slist .merecli {
  31. width: 120%;
  32. color: #232323;
  33. border-bottom: 0.025rem solid #f3f3f3;
  34. overflow: hidden;
  35. height: 1.2rem;
  36. line-height: 1.2rem;
  37. font-size: 0.4rem;
  38. padding: 0;
  39. }
  40. .slist li i {
  41. float: right;
  42. width: 15%;
  43. text-align: center;
  44. background: #dd1e25;
  45. color: #fff;
  46. font-size: 0.3rem;
  47. padding-right: 0.15rem;
  48. }
  49. .slist li div.left {
  50. overflow: hidden;
  51. -webkit-transition: all 0.3s linear;
  52. transition: all 0.3s linear;
  53. display: inline-block;
  54. width: 80%;
  55. }
  56. .swipeleft {
  57. transform: translateX(-15%);
  58. -webkit-transform: translateX(-15%);
  59. }
  60. </style>
  61. <script>
  62. //计算根节点HTML的字体大小
  63. function resizeRoot(){
  64. var deviceWidth = document.documentElement.clientWidth,
  65. num = 750,
  66. num1 = num / 100;
  67. if(deviceWidth > num){
  68. deviceWidth = num;
  69. }
  70. document.documentElement.style.fontSize = deviceWidth / num1 + "px";
  71. }
  72. //根节点HTML的字体大小初始化
  73. resizeRoot();
  74. window.onresize = function(){
  75. resizeRoot();
  76. };
  77. </script>
  78. </head>
  79. <body>
  80. <div class="titbox blubg">
  81. <a class="titreturn left" href="${contextPath }web/meWebCtl/me.cs"><img src="${contextPath }app/img/fanhui16@2x.png" alt=""></a>
  82. <div class="safe">
  83. <a class="right" href="${contextPath }web/mgmCustomerWebCtl/me_people_add.cs?userId=${USER_ID}">
  84. <img class="addimg" src="${contextPath }app/img/tianjkh@2x.png" alt="">
  85. <span class="smtxt">添加客户</span>
  86. </a>
  87. </div>
  88. <h1>我的客户</h1>
  89. </div>
  90. <div class="whbg top50">
  91. <div class="safe slist">
  92. <ul>
  93. <c:forEach items="${lists}" var="customer">
  94. <li class="merecli" id="F${customer.id}">
  95. <div class="sclient">
  96. <div class="left">
  97. <a class="left mepeoname" href="${contextPath }web/mgmCustomerWebCtl/me_people_details.cs?id=${customer.id}">${customer.name}</a>
  98. <p class="right blutxt"><a href="tel:${customer.phone}">${customer.phone}</a></p>
  99. </div>
  100. <i><a href="javascript:del(${customer.id},this)">删除</a></i>
  101. </div>
  102. </li>
  103. </c:forEach>
  104. </ul>
  105. </div>
  106. </div>
  107. </body>
  108. <!-- 客户删除 -->
  109. <script type="text/javascript">
  110. function del(id){
  111. var pram='{"id":"'+id+'"}';
  112. var node=$("#F"+id);
  113. $.post('${contextPath }web/mgmCustomerWebCtl/deleteCustomer.cs', {
  114. "data" : pram
  115. }, function(data) {
  116. var datas=eval(data.data);
  117. if (data.ret == 1) {
  118. node.remove();
  119. }else{
  120. layer.msg(data.msg);
  121. }
  122. }, "json");
  123. }
  124. </script>
  125. <!-- 侧滑删除 -->
  126. <script>
  127. //侧滑显示删除按钮
  128. var expansion = null; //是否存在展开的list
  129. var container = document.querySelectorAll('.slist li .sclient');
  130. for(var i = 0; i < container.length; i++){
  131. var x, y, X, Y, swipeX, swipeY;
  132. container[i].addEventListener('touchstart', function(event) {
  133. x = event.changedTouches[0].pageX;
  134. y = event.changedTouches[0].pageY;
  135. swipeX = true;
  136. swipeY = true ;
  137. if(expansion){ //判断是否展开,如果展开则收起
  138. expansion.className = "";
  139. }
  140. });
  141. container[i].addEventListener('touchmove', function(event){
  142. X = event.changedTouches[0].pageX;
  143. Y = event.changedTouches[0].pageY;
  144. // 左右滑动
  145. if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
  146. // 阻止事件冒泡
  147. event.stopPropagation();
  148. if(X - x > 10){ //右滑
  149. event.preventDefault();
  150. this.className = ""; //右滑收起
  151. }
  152. if(x - X > 10){ //左滑
  153. event.preventDefault();
  154. this.className = "swipeleft"; //左滑展开
  155. expansion = this;
  156. }
  157. swipeY = false;
  158. }
  159. // 上下滑动
  160. if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
  161. swipeX = false;
  162. }
  163. });
  164. }
  165. /* var i = document.querySelectorAll('.slist li .sclient i');
  166. i.forEach(function(item, index){
  167. i[index].onclick = function(){
  168. this.parentNode.parentNode.remove();
  169. };
  170. }); */
  171. </script>
  172. </html>