dealer-wallet.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. <!DOCTYPE html>
  2. <html class="remModel">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
  6. <meta http-equiv="pragma" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta name="author" content="">
  9. <meta name="description" content=""/>
  10. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  11. <meta name="format-detection" content="telephone=no,email=no">
  12. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  13. <title>经销商提现申请</title>
  14. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
  15. <link rel="stylesheet" href="../components/lib/weui.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. .mui-table-view-cell {
  20. padding: 9px 10px;
  21. }
  22. .bank-logo {
  23. display: inline-block;
  24. }
  25. .bank-logo svg {
  26. width: 22px;
  27. height: 22px;
  28. top: 5px;
  29. position: relative;
  30. }
  31. .right-bottom{
  32. text-align: right;
  33. }
  34. .dateTime{
  35. display: block;
  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-9 mui-col-sm-9">
  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-3 mui-col-sm-3 mui-text-right">
  48. <div class="filter-btn"><span>筛选</span><i class="iconfont icon-triangle-up"></i></div>
  49. </div>
  50. </form>
  51. </div>
  52. <div class="filter-panel" style="display: none" id="options">
  53. <div class="input-group-vertical mui-table-view clear-b-border">
  54. <div class="or-border-fir mui-input-row input-clear or-order-status" id="status">
  55. <label class="or-label-text">处理状态</label>
  56. <span class="mui-icon mui-icon-arrowright"></span>
  57. <span class="or-order-status-font selected-text">全部</span>
  58. </div>
  59. <div class="or-border-fir mui-input-row input-clear or-order-status select-date" id="start-date">
  60. <label class="or-label-text">开始日期</label>
  61. <span class="mui-icon mui-icon-arrowright"></span>
  62. <span class="or-order-status-font selected-text"></span>
  63. </div>
  64. <div class="mui-input-row input-clear or-order-status select-date" id="end-date">
  65. <label class="or-label-text">结束日期</label>
  66. <span class="mui-icon mui-icon-arrowright"></span>
  67. <span class="or-order-status-font selected-text"></span>
  68. </div>
  69. <div class="mui-input-row filter-panel-btn flexbox">
  70. <span class="cancel-btn flex">取消</span>
  71. <span class="ok-btn flex">确定</span>
  72. </div>
  73. </div>
  74. </div>
  75. <!--下拉刷新容器-->
  76. <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: 45px;padding-top: 10px">
  77. <div class="mui-scroll">
  78. <!--数据列表-->
  79. <ul class="group-wrap ">
  80. </ul>
  81. </div>
  82. </div>
  83. <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
  84. <script src="../components/lib/weui.min.js"></script>
  85. <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
  86. <script src="../components/lib/moment.min.js"></script>
  87. <script src="/components/custom/js/iconfont.js"></script>
  88. <script src="/components/custom/js/common.js"></script>
  89. <script src="/app/js/xyf.login.js"></script>
  90. <script src="/app/js/xyf.common.js"></script>
  91. <script>
  92. $(function () {
  93. //ios返回刷新
  94. var isPageHide = false;
  95. window.addEventListener('pageshow', function () {
  96. if (isPageHide) {
  97. window.location.reload();
  98. }
  99. });
  100. window.addEventListener('pagehide', function () {
  101. isPageHide = true;
  102. });
  103. });
  104. //如果调到子页面,返回后还是保留查询条件
  105. var orRecordBack = getQueryString('orRecord');
  106. if (orRecordBack) {
  107. history.replaceState(null, null, "dealer-wallet.html");
  108. }
  109. /**
  110. * 向localStorage写入条件数据
  111. */
  112. var startDate;//开始日期
  113. var endDate;//结束日期
  114. var searchKey = null;// 定义为null,如果是undefined,ios8 微信ajax时会崩溃,但是有的接口有 undefined却不会崩溃。。。
  115. var status = '';//处理状态
  116. var condition;
  117. var pageType = 'dealerWallet';
  118. //获取条件缓存数据
  119. if (orRecordBack) {
  120. condition = localStorage.condition ? JSON.parse(localStorage.condition)[pageType] : null;
  121. } else {
  122. condition = null;
  123. }
  124. function setCondition() {
  125. var data = {
  126. startDate: startDate,//开始日期
  127. endDate: endDate,//结束日期
  128. searchKey: searchKey,
  129. status: status,
  130. };
  131. var conArr = localStorage.condition ? JSON.parse(localStorage.condition) : {};
  132. conArr[pageType] = data;
  133. localStorage.condition = JSON.stringify(conArr);
  134. }
  135. /**
  136. * 计算日期范围
  137. */
  138. function computeDateRange(range) {
  139. endDate = moment().format("YYYY-MM-DD");
  140. if (range == "today") {
  141. startDate = endDate;
  142. } else if (range == "week") {
  143. startDate = moment().add("day", -7).format("YYYY-MM-DD");
  144. } else if (range == "month") {
  145. startDate = moment().add("month", -1).format("YYYY-MM-DD");
  146. } else if (range == "year") {
  147. startDate = moment().add("year", -1).format("YYYY-MM-DD");
  148. }
  149. $('#start-date .selected-text').html(startDate);
  150. $('#end-date .selected-text').html(endDate);
  151. //写入数据
  152. setCondition();
  153. }
  154. var statusList = [
  155. {
  156. label: '全部',
  157. value: -1
  158. },
  159. {
  160. label: '待处理',
  161. value: 0
  162. },
  163. {
  164. label: '提现成功',
  165. value: 1
  166. },
  167. {
  168. label: '处理中',
  169. value: 2
  170. },
  171. {
  172. label: '提现失败',
  173. value: 3
  174. },
  175. {
  176. label: '已退单',
  177. value: 4
  178. }
  179. ];
  180. var statusMap = {0: '待处理', 1: '提现成功', 2: '处理中', 3: '提现失败', 4: '已退单'};
  181. /*根据缓存渲染已有条件数据*/
  182. if (condition) {
  183. if (condition.startDate) {
  184. startDate = condition.startDate;
  185. endDate = condition.endDate;
  186. $('#start-date .selected-text').html(condition.startDate);
  187. $('#end-date .selected-text').html(condition.endDate);
  188. if (condition.status != null) {
  189. status = condition.status;
  190. $("#status .selected-text").html(statusMap[condition.status]);
  191. }
  192. }
  193. if (condition.searchKey != '') {
  194. searchKey = condition.searchKey;
  195. $("#searchKey").val(searchKey);
  196. }
  197. } else {
  198. //设置默认选中为:待处理、日期为一年
  199. status = 0;
  200. $("#status .selected-text").html(statusMap[0]);
  201. computeDateRange('year');//设置日期范围
  202. }
  203. mui.init({
  204. pullRefresh: {
  205. container: '#pullrefresh',
  206. up: {
  207. contentrefresh: '正在加载...',
  208. contentnomore: '没有更多数据了...',
  209. callback: pullupRefresh
  210. }
  211. }
  212. });
  213. //关键字搜索
  214. document.onkeydown = function (ev) {
  215. if (ev.keyCode == 13) {
  216. ev.preventDefault();
  217. search();
  218. }
  219. };
  220. //刷新数据
  221. function pullupRefresh() {
  222. pageIndex++;
  223. var url = "/agent/withdrawList";
  224. var data = {
  225. searchKey: searchKey,
  226. status: status,
  227. dateEnd: endDate,
  228. dateStart: startDate,
  229. pageIndex: pageIndex,
  230. pageSize: pageSize,
  231. };
  232. setCondition();//设置条件到缓存
  233. sendRequest(url, "GET", data, function (res) {
  234. if (res.result == 1) {
  235. var payload = res.payload;
  236. if (pageIndex == 1) {
  237. total = payload.total;
  238. if (total == 0) {
  239. $('#pullrefresh').addClass('mui-hidden');
  240. $("body").append('<div class="nomore"></div>');
  241. } else {
  242. $('#pullrefresh').removeClass('mui-hidden');
  243. $('.nomore').remove();
  244. }
  245. }
  246. mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageIndex * pageSize >= total));
  247. var groupWrap = $('.group-wrap');
  248. var length = payload.dataList.length;
  249. for (var i = 0; i < length; i++) {
  250. var obj = payload.dataList[i];
  251. var ul = document.createElement('ul');
  252. ul.className = 'mui-table-view split interval ';
  253. var html = '<li class="mui-table-view-cell or-jump-html" orderNo="' + obj.orderNo + '">' +
  254. '<p><span class="font-b font-16">' + obj.name + '</span><span class="mui-pull-right">¥' + obj.actualPay + '</span></p>' +
  255. '<p>' +
  256. '<span class="bank-logo"><svg class="icon" aria-hidden="true"></svg></span><span> ' + obj.bankName + '</span>' +
  257. '<span class="mui-pull-right right-bottom"><i class="status">' + statusMap[obj.operResult] + '</i><i class="font-12 font-b-6 dateTime">' + moment(obj.dateTime).format("YYYY-MM-DD HH:mm:ss") + '</i></span>' +
  258. '</p>';
  259. html += '</li>';
  260. ul.innerHTML = html;
  261. var bankStyle = findBankStyle(obj.bankName);
  262. var iconName = bankStyle.icon;
  263. $(ul).find("svg").html('<use xlink:href="#' + iconName + '"></use>');
  264. //待处理
  265. if (obj.operResult == 0) {
  266. $(ul).find(".status").addClass("c-blue");
  267. } else if (obj.operResult == 1) {
  268. $(ul).find(".status").addClass("c-green");
  269. } else if (obj.operResult == 3) {
  270. $(ul).find(".status").addClass("c-red");
  271. }
  272. groupWrap.append(ul);
  273. }
  274. } else {
  275. mui.toast(res.description);
  276. }
  277. });
  278. }
  279. /*当前时间*/
  280. var curDate = new Date();
  281. /*对比时间*/
  282. var compareTime = function (smaller, larger) {
  283. var genDate = function (value) {
  284. var type = typeof value;
  285. var date = null;
  286. if (type == 'string' || type == 'number') {
  287. date = new Date(value);
  288. } else if (type == 'object') {
  289. date = value;
  290. }
  291. return date;
  292. };
  293. return genDate(smaller).getTime() <= genDate(larger).getTime();
  294. };
  295. /**
  296. * 选择日期弹窗函数
  297. * @param options
  298. */
  299. var showDatePicker = function (options) {
  300. var defaultDate = options.default ? new Date(options.default) : curDate;
  301. options = $.extend({
  302. start: moment().add(-1, "year").toDate(),
  303. end: moment().add(1, "second").toDate(),//注意!!可能是多次打开后渲染延迟,必须把end往后推至少一秒,才能渲染出当天为结束日期,否则无法选择今天
  304. defaultValue: [defaultDate.getFullYear(), defaultDate.getMonth() + 1, defaultDate.getDate()]
  305. }, options);
  306. if (!options.id) {
  307. return;
  308. }
  309. weui.datePicker({
  310. start: options.start,
  311. end: options.end,
  312. defaultValue: options.defaultValue,
  313. onChange: function (result) {
  314. options.onChange && options.onChange(result);
  315. },
  316. onConfirm: function (result) {
  317. options.onConfirm && options.onConfirm(result);
  318. },
  319. id: options.id
  320. });
  321. };
  322. //开始、结束时间选择器
  323. $('.select-date').click(function (e) {
  324. var $ele = $(e.currentTarget);
  325. var $eleId = $ele.attr('id');
  326. showDatePicker({
  327. id: $eleId,
  328. default: $eleId == 'start-date' ? startDate : endDate,//默认选择的时间
  329. onChange: function (data) {
  330. },
  331. onConfirm: function (data) {
  332. var year = data[0];
  333. var month = data[1];
  334. var date = data[2];
  335. var flag = true;
  336. var dateStr = year + '-' + (month > 9 ? month : '0' + month) + '-' + (date > 9 ? date : '0' + date);
  337. //校验输入合法性
  338. if ($eleId == 'start-date') {
  339. if (endDate && !compareTime(dateStr, endDate)) {
  340. /* dialog('温馨提示','开始日期不能大于结束日期','确定');*/
  341. flag = false;
  342. }
  343. startDate = dateStr;
  344. } else {
  345. if (startDate && !compareTime(startDate, dateStr)) {
  346. /* dialog('温馨提示','开始日期不能大于结束日期','确定');*/
  347. flag = false;
  348. }
  349. endDate = dateStr;
  350. }
  351. //修改页面
  352. $ele.find('.selected-text').html(dateStr);
  353. //写入数据
  354. if (flag) {
  355. setCondition();
  356. }
  357. }
  358. });
  359. });
  360. //通用选择器
  361. var showTypePicker = function (list, options) {
  362. weui.picker(list, {
  363. className: options.className,
  364. defaultValue: [options.default],
  365. onChange: function (result) {
  366. options.onChange && options.onChange(result);
  367. },
  368. onConfirm: function (result) {
  369. options.onConfirm && options.onConfirm(result);
  370. },
  371. id: options.id
  372. })
  373. };
  374. FilterComponent({
  375. ok: function () {
  376. /*合法性验证*/
  377. //日期校验
  378. if (true) {
  379. if (!startDate) {
  380. mui.alert('请选择开始日期', '温馨提示', '确定');
  381. }
  382. if (!endDate) {
  383. mui.alert('请选择结束日期', '温馨提示', '确定');
  384. }
  385. if (!compareTime(startDate, endDate)) {
  386. mui.alert('开始日期不能大于结束日期', '温馨提示', '确定');
  387. return false;
  388. }
  389. }
  390. pageIndex = 0;
  391. search();
  392. }
  393. });
  394. /**
  395. * 查询的基本条件
  396. */
  397. var pageIndex = 0;
  398. var pageSize = 10;
  399. var total = 0;// 记录一次数据总数,用来做刷新判断
  400. function search() {
  401. pageIndex = 0;
  402. $('.group-wrap').html("");
  403. mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
  404. searchKey = $("#searchKey").val();
  405. //写入数据
  406. pullupRefresh();
  407. }
  408. //处理状态,待处理0,成功1,处理中2,提现失败3,已退单4
  409. $("#status").click(function (e) {
  410. var $ele = $(e.currentTarget);
  411. showTypePicker(statusList, {
  412. id: $ele.attr('id'),
  413. default: status,//如果没有 null则表示全部
  414. onConfirm: function (data) {
  415. $ele.find(".selected-text").html(data[0].label);
  416. status = data[0].value;
  417. //写入数据
  418. setCondition();
  419. }
  420. });
  421. });
  422. //查看详情跳转
  423. $('body').on('tap', '.or-jump-html', function () {
  424. history.replaceState(null, null, "dealer-wallet.html?orRecord=true&t=" + new Date().getTime());
  425. var url = 'dealer-wallet-detail.html?orderNo=' + $(this).attr('orderNo');
  426. goPage(url);
  427. });
  428. //初始化刷新一次数据
  429. if (mui.os.plus) {
  430. mui.plusReady(function () {
  431. setTimeout(function () {
  432. mui('#pullrefresh').pullRefresh().pullupLoading();
  433. }, 1000);
  434. });
  435. } else {
  436. mui.ready(function () {
  437. mui('#pullrefresh').pullRefresh().pullupLoading();
  438. });
  439. }
  440. </script>
  441. </body>
  442. </html>