customer-mgr.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="author" content=""/>
  6. <meta name="description" content=""/>
  7. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  8. <meta name="format-detection" content="telphone=no,email=no"/>
  9. <meta name="viewport"
  10. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <title>代理商:经销商管理</title>
  15. <link rel="stylesheet" href="/components/lib/mui.min.css"/>
  16. <link rel="stylesheet" href="/components/custom/css/common.css"/>
  17. <link rel="stylesheet" href="/app/css/xyf.common.min.css">
  18. <style>
  19. .eventRow .mui-checkbox-wear {
  20. width: 43px;
  21. height: 45px;
  22. display: none;
  23. float: left;
  24. margin-right: -10px;
  25. }
  26. .batch-model .eventRow .mui-checkbox-wear {
  27. display: block;
  28. }
  29. #pullrefresh {
  30. margin-top: 44px;
  31. margin-bottom: 50px;
  32. padding-top: 10px;
  33. }
  34. .batch-model #pullrefresh {
  35. margin-bottom: 100px !important;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="mui-input-group mui-reset">
  41. <form class="mui-row" action="">
  42. <div class="mui-col-xs-7 mui-col-sm-7">
  43. <div class="mui-input-row mui-search">
  44. <input type="search" class="mui-input-clear" id="searchKey" placeholder="经销商名称、手机">
  45. </div>
  46. </div>
  47. <div class="mui-col-xs-5 mui-col-sm-5 mui-text-right">
  48. <div class="in-row-btn" onclick="batchOper()">管理<i class="iconfont icon-triangle-up"></i></div>
  49. </div>
  50. </form>
  51. </div>
  52. <div id="pullrefresh" class="mui-content mui-scroll-wrapper ">
  53. <div class="mui-scroll">
  54. <div class="group-wrap mui-table-view "></div>
  55. </div>
  56. </div>
  57. <div class="c-handle-panel mui-hidden" style="bottom: 50px;">
  58. <div class="handle-btn">
  59. <div class="mui-checkbox ">
  60. <input id="checkbox-all" class="checkbox-all" type="checkbox">
  61. <label for="checkbox-all">全选</label>
  62. </div>
  63. </div>
  64. <div class="handle-btn-list mui-text-right">
  65. <button type="button" class="mui-btn mui-btn-outlined mui-btn-primary " onclick="editCardFee()">流量卡年费
  66. </button>
  67. </div>
  68. </div>
  69. <div class="edit-back annualTrafficCostDialog mui-hidden">
  70. <div class="edit-content">
  71. <div class="edit-box">
  72. <div class="mui-input-row">
  73. <label>最低费用</label>
  74. <div class="mui-pull-right edit-row">
  75. <input id="annualTrafficCost" maxlength="3" type="tel" placeholder=""
  76. onkeypress="return myNumberic(event);"
  77. >
  78. </div>
  79. </div>
  80. </div>
  81. <div class="mui-popup-buttons">
  82. <span class="mui-popup-button">取消</span>
  83. <span class="mui-popup-button mui-popup-button-bold">确认</span>
  84. </div>
  85. </div>
  86. </div>
  87. <script src="/components/lib/jquery.min.js"></script>
  88. <script src="/components/lib/mui.min.js"></script>
  89. <script src="/components/custom/js/common.js"></script>
  90. <script src="/app/js/xyf.common.js"></script>
  91. <script>
  92. window.initAgentNav && initAgentNav('dealer_management');
  93. var pageType = 'customerMgr';
  94. var pageIndex = 0;
  95. var total = 0;
  96. var searchKey = "";
  97. $(function () {
  98. //全选
  99. $("#checkbox-all").on("change", function () {
  100. if ($(this).is(":checked")) {
  101. $(".checkbox-btn").prop("checked", true);
  102. } else {
  103. $(".checkbox-btn").prop("checked", false);
  104. }
  105. });
  106. //复选框事件重写:优化体验,点击的面积更大
  107. $("#pullrefresh").on("tap", ".mui-checkbox-wear", function (evt) {
  108. var box = $(this).find(".mui-checkbox input");
  109. if (box.is(":checked")) {
  110. box.prop("checked", false);
  111. } else {
  112. box.prop("checked", true);
  113. }
  114. evt.stopPropagation();
  115. evt.preventDefault();
  116. });
  117. //跳转到经销商详情事件绑定
  118. $("body ").on("tap", ".eventRow", function () {
  119. history.replaceState(null, null, "customer-mgr.html?orRecord=true&t=" + new Date().getTime());//再次返回该页面会带上orRecord
  120. var url = "customerParam.html?id=" + $(this).closest(".mui-table-view-cell").attr("id");
  121. goPage(url);
  122. });
  123. //如果调到子页面,返回后还是保留查询条件
  124. var orRecordBack = getQueryString('orRecord');
  125. if (orRecordBack) {
  126. history.replaceState(null, null, "customer-mgr.html");//清除掉自动带的参数orRecord
  127. }
  128. //获取条件缓存数据
  129. if (orRecordBack) {
  130. condition = localStorage.condition ? JSON.parse(localStorage.condition)[pageType] : null;
  131. } else {
  132. condition = null;
  133. }
  134. /*根据缓存渲染已有条件数据*/
  135. if (condition) {
  136. if (condition.searchKey) {
  137. searchKey = condition.searchKey;
  138. $("#searchKey").val(searchKey);
  139. }
  140. }
  141. });
  142. var setCondition = function () {
  143. var data = {
  144. searchKey: searchKey,
  145. };
  146. var conArr = localStorage.condition ? JSON.parse(localStorage.condition) : {};
  147. conArr[pageType] = data;
  148. localStorage.condition = JSON.stringify(conArr);
  149. };
  150. mui.init({
  151. pullRefresh: {
  152. container: '#pullrefresh',
  153. up: {
  154. contentrefresh: '正在加载...',
  155. contentnomore: '我已经是底线',
  156. callback: pullupRefresh
  157. }
  158. }
  159. });
  160. //关键字搜索
  161. document.onkeydown = function (ev) {
  162. if (ev.keyCode == 13) {
  163. ev.preventDefault();
  164. search();
  165. }
  166. };
  167. function search() {
  168. pageIndex = 0;
  169. $('.group-wrap').html("");
  170. mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
  171. searchKey = $("#searchKey").val();
  172. pullupRefresh();//刷新数据
  173. }
  174. //激活批量操作
  175. function batchOper() {
  176. if ($("body").hasClass("batch-model")) {
  177. $(".in-row-btn").removeClass('active');
  178. $("body").removeClass("batch-model");
  179. $(".c-handle-panel").addClass('mui-hidden')
  180. } else {
  181. $(".in-row-btn").addClass('active');
  182. $("body").addClass("batch-model");
  183. $(".c-handle-panel").removeClass('mui-hidden')
  184. }
  185. }
  186. function pullupRefresh() {
  187. pageIndex++;
  188. var url = "/agent/getDealerList?random=" + Math.random() * 1000;
  189. var data = {
  190. "pageIndex": pageIndex,
  191. "pageSize": 10,
  192. searchKey: searchKey,
  193. };
  194. setCondition();//设置条件到缓存
  195. sendRequest(url, "GET", data, function (res) {
  196. if (res.result == 1) {
  197. if (pageIndex == 1) {
  198. total = res.para.total;
  199. if (total == 0) {
  200. $('#pullrefresh').addClass('mui-hidden');
  201. $("body").append('<div class="nomore"></div>');
  202. }
  203. }
  204. mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageIndex * 10 >= total));
  205. var groupWrap = document.body.querySelector('.group-wrap');
  206. var length = res.para.dataList.length;
  207. for (var i = 0; i < length; i++) {
  208. var obj = res.para.dataList[i];
  209. var dom = document.createElement('li');
  210. dom.className = 'mui-table-view-cell';
  211. dom.id = obj.id;
  212. dom.innerHTML = '<div class="eventRow flexbox mui-navigate-right">' +
  213. '<div class="mui-checkbox-wear"><div class="mui-checkbox"><input class="checkbox-btn" value="" type="checkbox"></div></div>' +
  214. '<div class="flex">' +
  215. '<p class="font-b-16-10 margin-b-5">' +
  216. obj.name + '<span class="font-14 font-b-6"> ' + obj.tel + '</span>' +
  217. '<span class="mui-pull-right font-12 margin-r-10"><em class="c-green">' + obj.onCount + '</em>/' + obj.deviceCount + '台</span>' +
  218. '</p>' +
  219. '<p class="font-b-8 margin-b-0 ' + (obj.annualTrafficCost ? '' : 'mui-hidden') + '">流量卡年费:' + obj.annualTrafficCost + '</p>' +
  220. '<p class="font-b-8 margin-b-0 ' + (obj.expireCount ? '' : 'mui-hidden') + '">过期: ' + obj.expireCount + '台' + '</p>' +
  221. '<p class="font-b-8 margin-b-0 ' + (obj.toExpireCount ? '' : 'mui-hidden') + '">即将过期: ' + obj.toExpireCount + '台' + '</p>' +
  222. '</div></div>';
  223. groupWrap.appendChild(dom);
  224. }
  225. } else {
  226. mui.toast(res.description);
  227. }
  228. });
  229. }
  230. function editCardFee() {
  231. var idInfo = getSelectIdInfo();
  232. if (idInfo.idList.length == 0) {
  233. mui.toast("请您选择经销商。");
  234. return;
  235. }
  236. $(".annualTrafficCostDialog").removeClass("mui-hidden");
  237. }
  238. //事件绑定
  239. $('.annualTrafficCostDialog .mui-popup-buttons span').tap(function () {
  240. if ($(this).index() == 0) {
  241. //点击取消
  242. $('.annualTrafficCostDialog').addClass('mui-hidden');
  243. } else {
  244. //点击保存
  245. var annualTrafficCost = $('#annualTrafficCost').val();
  246. if (!isMoney(annualTrafficCost)) {
  247. mui.toast("请输入正确的最低年费");
  248. return;
  249. }
  250. var idInfo = getSelectIdInfo();
  251. var idList = idInfo.idList;
  252. var data = {"ids": idList, "annualTrafficCost": annualTrafficCost};
  253. var url = "/agent/setBatchDealerAnnualTrafficCost";
  254. sendRequest({
  255. url: url,
  256. type: "POST",
  257. mask: "正在设置...",
  258. data: data,
  259. contentType: "json",
  260. success: function (res) {
  261. if (res.result == 1) {
  262. mui.toast("设置成功");
  263. $('.annualTrafficCostDialog').addClass('mui-hidden');
  264. $("#annualTrafficCostShow").text(parseFloat(annualTrafficCost).toFixed(2));
  265. } else {
  266. mui.toast(res.description);
  267. }
  268. }
  269. });
  270. }
  271. return false;
  272. });
  273. //获取被选中的ID
  274. function getSelectIdInfo() {
  275. var idList = [];
  276. // 只遍历管理员下的设备
  277. $(".eventRow").each(function () {
  278. var checked = $(this).find("input").is(":checked");
  279. if (checked) {
  280. var id = $(this).closest(".mui-table-view-cell").attr("id");
  281. if (id) {
  282. idList.push(id);
  283. }
  284. }
  285. });
  286. return {
  287. idList: idList,
  288. };
  289. }
  290. if (mui.os.plus) {
  291. mui.plusReady(function () {
  292. setTimeout(function () {
  293. mui('#pullrefresh').pullRefresh().pullupLoading();
  294. }, 1000);
  295. });
  296. } else {
  297. mui.ready(function () {
  298. mui('#pullrefresh').pullRefresh().pullupLoading();
  299. });
  300. }
  301. </script>
  302. </body>
  303. </html>