index.html 15 KB

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