index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>浏览页面</title>
  6. <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css"/>
  7. <link rel="stylesheet" href="/app/admin/admin/css/reset.css"/>
  8. </head>
  9. <body class="pear-container">
  10. <!-- 顶部查询表单 -->
  11. <div class="layui-card">
  12. <div class="layui-tab" lay-filter="demo">
  13. <ul class="layui-tab-title">
  14. <li class="layui-this" lay-id="1">总资产</li>
  15. <li lay-id="2">脱贫金</li>
  16. <li lay-id="3">团队金</li>
  17. </ul>
  18. </div>
  19. <div class="layui-card-body">
  20. <form class="layui-form top-search-from">
  21. <div class="layui-form-item">
  22. <label class="layui-form-label">订单号</label>
  23. <div class="layui-input-block">
  24. <div class="layui-input-block">
  25. <input type="text" autocomplete="off" name="order_no" class="layui-input">
  26. </div>
  27. </div>
  28. </div>
  29. <div class="layui-form-item">
  30. <label class="layui-form-label">用户名称</label>
  31. <div class="layui-input-block">
  32. <div class="layui-input-block">
  33. <input type="text" autocomplete="off" name="user_name" class="layui-input">
  34. </div>
  35. </div>
  36. </div>
  37. <div class="layui-form-item">
  38. <label class="layui-form-label">电话</label>
  39. <div class="layui-input-block">
  40. <div class="layui-input-block">
  41. <input type="text" autocomplete="off" name="mobile" class="layui-input">
  42. </div>
  43. </div>
  44. </div>
  45. <div class="layui-form-item">
  46. <label class="layui-form-label">提现金额</label>
  47. <div class="layui-input-block">
  48. <div class="layui-input-block">
  49. <input type="text" autocomplete="off" name="money[]" class="layui-input inline-block"
  50. placeholder="开始">
  51. -
  52. <input type="text" autocomplete="off" name="money[]" class="layui-input inline-block"
  53. placeholder="结束">
  54. </div>
  55. </div>
  56. </div>
  57. <div class="layui-form-item">
  58. <label class="layui-form-label">状态</label>
  59. <div class="layui-input-block">
  60. <div name="status" id="status" value=""></div>
  61. </div>
  62. </div>
  63. <input type="hidden" name="type" value="1">
  64. <div class="layui-form-item">
  65. <label class="layui-form-label">提交时间</label>
  66. <div class="layui-input-block">
  67. <div class="layui-input-block" id="created_at">
  68. <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start"
  69. class="layui-input inline-block" placeholder="开始时间">
  70. -
  71. <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end"
  72. class="layui-input inline-block" placeholder="结束时间">
  73. </div>
  74. </div>
  75. </div>
  76. <div class="layui-form-item layui-inline">
  77. <label class="layui-form-label"></label>
  78. <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
  79. <i class="layui-icon layui-icon-search"></i>查询
  80. </button>
  81. <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
  82. <i class="layui-icon layui-icon-refresh"></i>重置
  83. </button>
  84. </div>
  85. <div class="toggle-btn">
  86. <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
  87. <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
  88. </div>
  89. </form>
  90. </div>
  91. </div>
  92. <!-- 数据表格 -->
  93. <div class="layui-card">
  94. <div class="layui-card-body">
  95. <table id="data-table" lay-filter="data-table"></table>
  96. </div>
  97. </div>
  98. <!-- 表格顶部工具栏 -->
  99. <script type="text/html" id="table-toolbar">
  100. <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="pass" permission="app.admin.withdraw.insert">
  101. 通过
  102. </button>
  103. <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="reject" permission="app.admin.withdraw.delete">
  104. 驳回
  105. </button>
  106. </script>
  107. <!-- 表格行工具栏 -->
  108. <script type="text/html" id="table-bar">
  109. <button class="pear-btn pear-btn-xs tool-btn" lay-event="pass" permission="app.admin.withdraw.update">通过</button>
  110. <button class="pear-btn pear-btn-xs tool-btn" lay-event="reject" permission="app.admin.withdraw.delete">驳回
  111. </button>
  112. </script>
  113. <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  114. <script src="/app/admin/component/pear/pear.js"></script>
  115. <script src="/app/admin/admin/js/permission.js"></script>
  116. <script src="/app/admin/admin/js/common.js"></script>
  117. <script>
  118. // 相关常量
  119. const PRIMARY_KEY = "id";
  120. const SELECT_API = "/app/admin/withdraw/select";
  121. const PASS_API = "/app/admin/withdraw/pass";
  122. const REJECT_API = "/app/admin/withdraw/reject";
  123. layui.use('element', function () {
  124. var $ = layui.jquery
  125. , element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  126. });
  127. // 字段 状态 1 待审核 2审核通过 3驳回 status
  128. layui.use(["jquery", "xmSelect"], function () {
  129. let value = layui.$("#status").attr("value");
  130. let initValue = value ? value.split(",") : [];
  131. layui.xmSelect.render({
  132. el: "#status",
  133. name: "status",
  134. filterable: true,
  135. initValue: initValue,
  136. model: {"icon": "hidden", "label": {"type": "text"}},
  137. clickClose: true,
  138. radio: true,
  139. data: [{value: 1, name: '待审核'}, {value: 2, name: '打款中'}, {value: 3, name: '审核通过'}, {
  140. value: 4,
  141. name: '驳回'
  142. }],
  143. })
  144. });
  145. layui.use(["jquery", "xmSelect"], function () {
  146. let value = layui.$("#type").attr("value");
  147. let initValue = value ? value.split(",") : [];
  148. layui.xmSelect.render({
  149. el: "#type",
  150. name: "type",
  151. filterable: true,
  152. initValue: initValue,
  153. model: {"icon": "hidden", "label": {"type": "text"}},
  154. clickClose: true,
  155. radio: true,
  156. data: [{value: 1, name: '总资产'}, {value: 2, name: '脱贫金'}, {value: 3, name: '团队金'}],
  157. })
  158. });
  159. // 字段 提交时间 created_at
  160. layui.use(["laydate"], function () {
  161. layui.laydate.render({
  162. elem: "#created_at",
  163. range: ["#created_at-date-start", "#created_at-date-end"],
  164. type: "datetime",
  165. });
  166. })
  167. // 表格渲染
  168. layui.use(["table", "form", "common", "popup", "util", "element"], function () {
  169. let table = layui.table;
  170. let form = layui.form;
  171. let $ = layui.$;
  172. let common = layui.common;
  173. let util = layui.util;
  174. let element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  175. // 表头参数
  176. let cols = [
  177. {
  178. type: "checkbox",
  179. align: "center"
  180. }, {
  181. minWidth: 100,
  182. title: "订单编号", align: "center",
  183. field: "id",
  184. }, {
  185. minWidth: 100,
  186. title: "会员名称", align: "center",
  187. field: "user_name",
  188. }, {
  189. minWidth: 150,
  190. title: "会员电话", align: "center",
  191. field: "mobile",
  192. }, {
  193. minWidth: 200,
  194. title: "订单号", align: "center",
  195. field: "order_no",
  196. }, {
  197. width: 120,
  198. title: "提现金额", align: "center",
  199. field: "money",
  200. sort: true,
  201. }, {
  202. width: 100,
  203. title: "钱包", align: "center",
  204. field: "type",
  205. templet: function (d) {
  206. let field = "type";
  207. if (typeof d[field] == "undefined") return "";
  208. let items = [];
  209. layui.each((d[field] + "").split(","), function (k, v) {
  210. items.push(apiResults[field][v] || v);
  211. });
  212. return util.escape(items.join(","));
  213. }
  214. }, {
  215. width: 100,
  216. title: "状态", align: "center",
  217. field: "status",
  218. templet: function (d) {
  219. let field = "status";
  220. if (typeof d[field] == "undefined") return "";
  221. let items = [];
  222. layui.each((d[field] + "").split(","), function (k, v) {
  223. items.push(apiResults[field][v] || v);
  224. });
  225. return util.escape(items.join(","));
  226. }
  227. }, {
  228. width: 120,
  229. title: "归属银行", align: "center",
  230. field: "affiliated_bank",
  231. sort: true,
  232. }, {
  233. width: 120,
  234. title: "开户人", align: "center",
  235. field: "account_holder",
  236. sort: true,
  237. }, {
  238. width: 200,
  239. title: "卡号", align: "center",
  240. field: "card_number",
  241. sort: true,
  242. }, {
  243. width: 170,
  244. title: "提交时间", align: "center",
  245. field: "created_at",
  246. sort: true,
  247. }
  248. ];
  249. // 渲染表格
  250. table.render({
  251. elem: "#data-table",
  252. url: SELECT_API,
  253. page: true,
  254. cols: [cols],
  255. skin: "line",
  256. size: "lg",
  257. where: {
  258. type: $('input[name=type]').val()
  259. },
  260. toolbar: "#table-toolbar",
  261. autoSort: false,
  262. defaultToolbar: [{
  263. title: "刷新",
  264. layEvent: "refresh",
  265. icon: "layui-icon-refresh",
  266. }, "filter", "print", "exports"],
  267. done: function () {
  268. layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
  269. }
  270. });
  271. element.on('tab(demo)', function (elem) {
  272. $('input[name=type]').val($(this).attr('lay-id'))
  273. table.reload("data-table", {
  274. where: {
  275. type: $('input[name=type]').val()
  276. },
  277. })
  278. });
  279. // 获取表格中下拉或树形组件数据
  280. let apiResults = {};//[{value:1,name:'待审核'},{value:2,name:'审核通过'},{value:3,name:'驳回'}],
  281. apiResults["status"] = {1: "待审核", 2: "打款中", 3: "审核通过", 4: "驳回"};
  282. apiResults["type"] = {1: "总资产", 2: "脱贫金",3:"团队金"};
  283. // 编辑或删除行事件
  284. table.on("tool(data-table)", function (obj) {
  285. if (obj.event === "remove") {
  286. remove(obj);
  287. } else if (obj.event === "edit") {
  288. edit(obj);
  289. }
  290. });
  291. // 表格顶部工具栏事件
  292. table.on("toolbar(data-table)", function (obj) {
  293. if (obj.event === "refresh") {
  294. refreshTable();
  295. } else if (obj.event === "reject") {
  296. reject(obj);
  297. } else if (obj.event === "pass") {
  298. pass(obj);
  299. }
  300. });
  301. // 表格顶部搜索事件
  302. form.on("submit(table-query)", function (data) {
  303. table.reload("data-table", {
  304. page: {
  305. curr: 1
  306. },
  307. where: data.field
  308. })
  309. return false;
  310. });
  311. // 表格顶部搜索重置事件
  312. form.on("submit(table-reset)", function (data) {
  313. table.reload("data-table", {
  314. where: {
  315. type: $('input[name=type]').val()
  316. },
  317. })
  318. });
  319. // 表格排序事件
  320. table.on("sort(data-table)", function (obj) {
  321. table.reload("data-table", {
  322. initSort: obj,
  323. scrollPos: "fixed",
  324. where: {
  325. field: obj.field,
  326. order: obj.type,
  327. type: $('input[name=type]').val()
  328. }
  329. });
  330. });
  331. // 删除多行
  332. let pass = function (obj) {
  333. // 创建弹框,设置类型为密码输入
  334. layer.prompt({title: '请输入密码', formType: 1}, function (pass, index) {
  335. layer.close(index); // 关闭弹框
  336. let checkIds = common.checkField(obj, PRIMARY_KEY);
  337. if (checkIds === "") {
  338. layui.popup.warning("未选中数据");
  339. return false;
  340. }
  341. let data = {};
  342. data[PRIMARY_KEY] = checkIds.split(",");
  343. data['operate_password'] = pass;
  344. layer.confirm("确认审核通过吗?", {
  345. icon: 3,
  346. title: "提示"
  347. }, function (index) {
  348. layer.close(index);
  349. let loading = layer.load();
  350. $.ajax({
  351. url: PASS_API,
  352. data: data,
  353. dataType: "json",
  354. type: "post",
  355. success: function (res) {
  356. layer.close(loading);
  357. if (res.code == 0) {
  358. return layui.popup.success("操作成功", refreshTable);
  359. }
  360. return layui.popup.failure(res.msg);
  361. }
  362. })
  363. });
  364. });
  365. }
  366. let reject = function (obj) {
  367. layer.prompt({title: '驳回理由', formType: 0}, function (reject, index) {
  368. layer.close(index); // 关闭弹框
  369. let checkIds = common.checkField(obj, PRIMARY_KEY);
  370. if (checkIds === "") {
  371. layui.popup.warning("未选中数据");
  372. return false;
  373. }
  374. let data = {};
  375. data[PRIMARY_KEY] = checkIds.split(",");
  376. data['remarks'] = reject;
  377. layer.confirm("确认驳回吗?", {
  378. icon: 3,
  379. title: "提示"
  380. }, function (index) {
  381. layer.close(index);
  382. let loading = layer.load();
  383. $.ajax({
  384. url: REJECT_API,
  385. data: data,
  386. dataType: "json",
  387. type: "post",
  388. success: function (res) {
  389. layer.close(loading);
  390. if (res.code == 0) {
  391. return layui.popup.success("操作成功", refreshTable);
  392. }
  393. return layui.popup.failure(res.msg);
  394. }
  395. })
  396. });
  397. });
  398. }
  399. // 执行删除
  400. // 刷新表格数据
  401. window.refreshTable = function (param) {
  402. table.reloadData("data-table", {
  403. scrollPos: "fixed"
  404. });
  405. }
  406. })
  407. </script>
  408. </body>
  409. </html>