index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  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="2">股权分红</li>-->
  15. <!-- <li lay-id="1">国债债券</li>-->
  16. <!-- </ul>-->
  17. </div>
  18. <div class="layui-card-body">
  19. <form class="layui-form top-search-from">
  20. <div class="layui-form-item">
  21. <label class="layui-form-label">会员名称</label>
  22. <div class="layui-input-block">
  23. <input type="text" name="user_name" value="" class="layui-input">
  24. </div>
  25. </div>
  26. <div class="layui-form-item">
  27. <label class="layui-form-label">会员手机号</label>
  28. <div class="layui-input-block">
  29. <input type="text" name="user_mobile" value="" class="layui-input">
  30. </div>
  31. </div>
  32. <div class="layui-form-item">
  33. <label class="layui-form-label">订单号</label>
  34. <div class="layui-input-block">
  35. <input type="text" name="order_no" value="" class="layui-input">
  36. </div>
  37. </div>
  38. <div class="layui-form-item">
  39. <label class="layui-form-label">支付状态</label>
  40. <div class="layui-input-block">
  41. <div name="is_pay" id="is_pay" value="" ></div>
  42. </div>
  43. </div>
  44. <div class="layui-form-item">
  45. <label class="layui-form-label">支付渠道</label>
  46. <div class="layui-input-block">
  47. <div name="pay_characteristic" id="pay_characteristic" value="" ></div>
  48. </div>
  49. </div>
  50. <input type="hidden" name="goods_type" value="1">
  51. <div class="layui-form-item">
  52. <label class="layui-form-label">创建时间</label>
  53. <div class="layui-input-block">
  54. <div class="layui-input-block" id="created_at">
  55. <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start" class="layui-input inline-block" placeholder="开始时间">
  56. -
  57. <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
  58. </div>
  59. </div>
  60. </div>
  61. <div class="layui-form-item layui-inline">
  62. <label class="layui-form-label"></label>
  63. <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
  64. <i class="layui-icon layui-icon-search"></i>查询
  65. </button>
  66. <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
  67. <i class="layui-icon layui-icon-refresh"></i>重置
  68. </button>
  69. </div>
  70. <div class="toggle-btn">
  71. <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
  72. <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
  73. </div>
  74. </form>
  75. </div>
  76. </div>
  77. <!-- 数据表格 -->
  78. <div class="layui-card">
  79. <div class="layui-card-body">
  80. <table id="data-table" lay-filter="data-table"></table>
  81. </div>
  82. </div>
  83. <script type="text/html" id="table-bar">
  84. {{# if(d.is_pay ==1){ }}
  85. <button class="pear-btn pear-btn-xs tool-btn" lay-event="audit" permission="app.admin.payorder.audit">手动通过</button>
  86. {{# } }}
  87. </script>
  88. <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  89. <script src="/app/admin/component/pear/pear.js"></script>
  90. <script src="/app/admin/admin/js/permission.js"></script>
  91. <script src="/app/admin/admin/js/common.js"></script>
  92. <script>
  93. // 相关常量
  94. const PRIMARY_KEY = "id";
  95. const SELECT_API = "/app/admin/payorder/select";
  96. const UPDATE_API = "/app/admin/payorder/update";
  97. const DELETE_API = "/app/admin/payorder/delete";
  98. const INSERT_URL = "/app/admin/payorder/insert";
  99. const UPDATE_URL = "/app/admin/payorder/update";
  100. const UPDATE_audit = "/app/admin/payorder/audit";
  101. layui.use(["jquery", "xmSelect", "popup"], function() {
  102. layui.$.ajax({
  103. url: "/app/admin/payorder/addselect",
  104. dataType: "json",
  105. success: function (res) {
  106. let value = layui.$("#pay_characteristic").attr("value");
  107. let initValue = value ? value.split(",") : [];
  108. layui.xmSelect.render({
  109. el: "#pay_characteristic",
  110. name: "pay_characteristic",
  111. initValue: initValue,
  112. filterable: true,
  113. data: res.data,
  114. model: {"icon":"hidden","label":{"type":"text"}},
  115. clickClose: true,
  116. radio: true,
  117. });
  118. if (res.code) {
  119. layui.popup.failure(res.msg);
  120. }
  121. }
  122. });
  123. });
  124. // 字段 支付状态 is_pay
  125. layui.use(["jquery", "xmSelect"], function() {
  126. let value = layui.$("#is_pay").attr("value");
  127. let initValue = value ? value.split(",") : [];
  128. layui.xmSelect.render({
  129. el: "#is_pay",
  130. name: "is_pay",
  131. filterable: true,
  132. initValue: initValue,
  133. model: {"icon":"hidden","label":{"type":"text"}},
  134. clickClose: true,
  135. radio: true,
  136. data:[{'value':1,"name":"未支付"},{'value':2,"name":"已支付"}]
  137. })
  138. });
  139. // 字段 创建时间 created_at
  140. layui.use(["laydate"], function() {
  141. layui.laydate.render({
  142. elem: "#created_at",
  143. range: ["#created_at-date-start", "#created_at-date-end"],
  144. type: "datetime",
  145. });
  146. })
  147. // 表格渲染
  148. layui.use(["table", "form", "common", "popup", "util","element"], function() {
  149. let table = layui.table;
  150. let form = layui.form;
  151. let $ = layui.$;
  152. let common = layui.common;
  153. let util = layui.util;
  154. let element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  155. // 表头参数
  156. let cols = [
  157. {
  158. title: "主键",align: "center",
  159. field: "id",
  160. sort: true,
  161. },{
  162. title: "产品",align: "center",
  163. field: "bid_name",
  164. },{
  165. title: "会员名称",align: "center",
  166. field: "user_name",
  167. },{
  168. title: "会员电话",align: "center",
  169. field: "user_mobile",
  170. width: 150,
  171. },{
  172. title: "订单号",align: "center",
  173. field: "order_no",
  174. width: 250,
  175. }, {
  176. title: "支付类型",align: "center",
  177. field: "pay_characteristic_name",
  178. width: 250,
  179. },
  180. // {
  181. // title: "支付类型",align: "center",
  182. // field: "pay_characteristic",
  183. // templet: function (d) {
  184. // let field = "pay_characteristic";
  185. // if (typeof d[field] == "undefined") return "";
  186. // let items = [];
  187. // layui.each((d[field] + "").split(","), function (k , v) {
  188. //
  189. // items.push(apiResults[field][v] || v);
  190. // });
  191. // return util.escape(items.join(","));
  192. // }
  193. // },
  194. {
  195. title: "支付金额",align: "center",
  196. field: "money",
  197. },{
  198. title: "支付状态",align: "center",
  199. field: "is_pay",
  200. templet: function (d) {
  201. let field = "is_pay";
  202. if (typeof d[field] == "undefined") return "";
  203. let items = [];
  204. layui.each((d[field] + "").split(","), function (k , v) {
  205. items.push(apiResults[field][v] || v);
  206. });
  207. return util.escape(items.join(","));
  208. }
  209. },{
  210. title: "支付凭证",align: "center",
  211. field: "img",
  212. templet: function (d) {
  213. return '<img src="'+encodeURI(d['img'])+'" style="max-width:32px;max-height:32px;" alt="" />'
  214. }
  215. },{
  216. title: "创建时间",align: "center",
  217. field: "created_at",
  218. },{
  219. title: "操作",
  220. toolbar: "#table-bar",
  221. align: "center",
  222. fixed: "right",
  223. width: 100,
  224. }
  225. ];
  226. // 渲染表格
  227. table.render({
  228. elem: "#data-table",
  229. url: SELECT_API,
  230. page: true,
  231. cols: [cols],
  232. skin: "line",
  233. size: "lg",
  234. where:{
  235. goods_type:$('input[name=goods_type]').val()
  236. },
  237. toolbar: "#table-toolbar",
  238. autoSort: false,
  239. defaultToolbar: [{
  240. title: "刷新",
  241. layEvent: "refresh",
  242. icon: "layui-icon-refresh",
  243. }, "filter", "print", "exports"],
  244. done: function () {
  245. layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
  246. }
  247. });
  248. element.on('tab(demo)', function(elem){
  249. $('input[name=goods_type]').val($(this).attr('lay-id'))
  250. table.reload("data-table", {
  251. where:{
  252. goods_type:$('input[name=goods_type]').val()
  253. },
  254. })
  255. });
  256. // 获取表格中下拉或树形组件数据
  257. let apis = [];
  258. apis.push(["pay_characteristic", "/app/admin/payorder/addselect"]);
  259. let apiResults = {};
  260. apiResults["pay_characteristic"] = [];
  261. apiResults["is_pay"] = {1:"未支付",2:"已支付"};
  262. let count = apis.length;
  263. layui.each(apis, function (k, item) {
  264. let [field, url] = item;
  265. $.ajax({
  266. url: url,
  267. dateType: "json",
  268. success: function (res) {
  269. if (res.code) {
  270. return layui.popup.failure(res.msg);
  271. }
  272. function travel(items) {
  273. for (let k in items) {
  274. let item = items[k];
  275. apiResults[field][item.value] = item.name;
  276. if (item.children) {
  277. travel(item.children);
  278. }
  279. }
  280. }
  281. travel(res.data);
  282. },
  283. complete: function () {
  284. if (--count === 0) {
  285. render();
  286. }
  287. }
  288. });
  289. });
  290. if (!count) {
  291. render();
  292. }
  293. // 编辑或删除行事件
  294. table.on("tool(data-table)", function(obj) {
  295. if (obj.event === "audit") {
  296. audit(obj);
  297. }
  298. });
  299. // 表格顶部工具栏事件
  300. table.on("toolbar(data-table)", function(obj) {
  301. if (obj.event === "add") {
  302. add();
  303. } else if (obj.event === "refresh") {
  304. refreshTable();
  305. } else if (obj.event === "batchRemove") {
  306. batchRemove(obj);
  307. }
  308. });
  309. // 表格顶部搜索事件
  310. form.on("submit(table-query)", function(data) {
  311. table.reload("data-table", {
  312. page: {
  313. curr: 1
  314. },
  315. where: data.field
  316. })
  317. return false;
  318. });
  319. // 表格顶部搜索重置事件
  320. form.on("submit(table-reset)", function(data) {
  321. table.reload("data-table", {
  322. where: {
  323. type:$('input[name=type]').val()
  324. }
  325. })
  326. });
  327. // 字段允许为空
  328. form.verify({
  329. phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
  330. email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
  331. url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
  332. number: [/(^$)|^\d+$/,'只能填写数字'],
  333. date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
  334. identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
  335. });
  336. // 表格排序事件
  337. table.on("sort(data-table)", function(obj){
  338. table.reload("data-table", {
  339. initSort: obj,
  340. scrollPos: "fixed",
  341. where: {
  342. field: obj.field,
  343. order: obj.type,
  344. type:$('input[name=type]').val()
  345. }
  346. });
  347. });
  348. // 表格新增数据
  349. let add = function() {
  350. layer.open({
  351. type: 2,
  352. title: "新增",
  353. shade: 0.1,
  354. maxmin: true,
  355. area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
  356. content: INSERT_URL
  357. });
  358. }
  359. // 表格编辑数据
  360. let audit = function(obj) {
  361. let value = obj.data[PRIMARY_KEY];
  362. layer.confirm("确定手动通过吗?", {
  363. icon: 3,
  364. title: "提示"
  365. }, function(index) {
  366. layer.close(index);
  367. let loading = layer.load();
  368. $.ajax({
  369. url: UPDATE_audit,
  370. data: {'id':value},
  371. dataType: "json",
  372. type: "post",
  373. success: function(res) {
  374. layer.close(loading);
  375. if(res.code != 0 ){
  376. return layui.popup.failure(res.msg);
  377. }
  378. return layui.popup.success("操作成功", refreshTable);
  379. }
  380. })
  381. });
  382. }
  383. // 删除一行
  384. let remove = function(obj) {
  385. return doRemove(obj.data[PRIMARY_KEY]);
  386. }
  387. // 删除多行
  388. let batchRemove = function(obj) {
  389. let checkIds = common.checkField(obj, PRIMARY_KEY);
  390. if (checkIds === "") {
  391. layui.popup.warning("未选中数据");
  392. return false;
  393. }
  394. doRemove(checkIds.split(","));
  395. }
  396. // 执行删除
  397. let doRemove = function (ids) {
  398. let data = {};
  399. data[PRIMARY_KEY] = ids;
  400. layer.confirm("确定删除?", {
  401. icon: 3,
  402. title: "提示"
  403. }, function(index) {
  404. layer.close(index);
  405. let loading = layer.load();
  406. $.ajax({
  407. url: DELETE_API,
  408. data: data,
  409. dataType: "json",
  410. type: "post",
  411. success: function(res) {
  412. layer.close(loading);
  413. if (res.code) {
  414. return layui.popup.failure(res.msg);
  415. }
  416. return layui.popup.success("操作成功", refreshTable);
  417. }
  418. })
  419. });
  420. }
  421. // 刷新表格数据
  422. window.refreshTable = function(param) {
  423. table.reloadData("data-table", {
  424. scrollPos: "fixed"
  425. });
  426. }
  427. })
  428. </script>
  429. </body>
  430. </html>