index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. {extend name="public/layout" /} {block name="title"}店面列表{/block} {block name="body"}
  2. <link rel="stylesheet" href="__LAYUI__/common.css" media="all">
  3. <style type="text/css">
  4. html,
  5. body {
  6. display: block;
  7. min-width: 1100px;
  8. }
  9. .layui-table thead tr,
  10. .layui-table-header {
  11. background-color: #D8E6F1 !important;
  12. }
  13. .layui-fluid {
  14. display: block;
  15. box-shadow: 0 0 4px 0 #B6CADE;
  16. border-radius: 5px;
  17. margin: 15px;
  18. background-color: #ffffff;
  19. }
  20. .layui-tab {
  21. padding: 15px;
  22. height: 100%;
  23. }
  24. .layui-form-item {
  25. width: 100%;
  26. }
  27. .layui-form-item .layui-inline {
  28. display: block;
  29. float: left;
  30. width: 145px;
  31. height: 38px;
  32. line-height: 38px;
  33. background: #FFFFFF;
  34. margin-right: 16px;
  35. }
  36. .layui-form-item .layui-input-inline {
  37. width: 145px;
  38. height: 38px;
  39. line-height: 38px;
  40. margin-bottom: 0;
  41. }
  42. .layui-form-item .layui-input-inline .layui-input {
  43. border: 1px solid #9DB6CF;
  44. border-radius: 5px;
  45. }
  46. .layui-form-select dl dd.layui-this {
  47. background-color: #249EFB;
  48. }
  49. .layui-form-item div.searchBox {
  50. width: 320px;
  51. background: #FFFFFF;
  52. border: 1px solid #B6CADE;
  53. border-radius: 24px;
  54. height: 38px;
  55. overflow: hidden;
  56. padding-left: 18px;
  57. position: relative;
  58. margin-bottom: 0px;
  59. float: right;
  60. }
  61. .searchBox .inputBox {
  62. width: 240px;
  63. float: left;
  64. height: 36px;
  65. line-height: 36px;
  66. border-width: 0;
  67. }
  68. .searchBtn {
  69. position: absolute;
  70. top: 0;
  71. right: 0;
  72. width: 51px;
  73. height: 38px;
  74. background-color: #fff;
  75. }
  76. .searchBtn img {
  77. position: absolute;
  78. width: 26px;
  79. top: 6px;
  80. left: 0;
  81. }
  82. .editBox,
  83. .deltBox {
  84. width: auto;
  85. height: auto;
  86. padding: 0;
  87. line-height: 0;
  88. border-width: 0;
  89. background-color: transparent;
  90. }
  91. .editBox {
  92. margin-right: 20px;
  93. }
  94. .deltBox {
  95. margin-left: 20px !important;
  96. }
  97. .editBox img,
  98. .deltBox img {
  99. display: block;
  100. width: 14px;
  101. }
  102. #edit-company-shop .layui-form-label {
  103. width: 100px;
  104. }
  105. #edit-company-shop .layui-input-inline {
  106. width: 230px;
  107. }
  108. #edit-company-shop .layui-form-select dl{
  109. max-height: 120px;
  110. }
  111. </style>
  112. <body>
  113. <div class="layui-fluid">
  114. <div class="layui-card">
  115. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  116. <div class="layui-form-item clearfix relative">
  117. <div style="padding-bottom: 10px; float:left">
  118. <button class="layui-btn layuiadmin-btn-course" data-type="add">开通店面</button>
  119. </div>
  120. <div class="layui-inline pull-left clearfix searchBox">
  121. <input type="text" name="keyword" placeholder="请输入搜索名称" autocomplete="off"
  122. class="layui-input inputBox">
  123. <button class="layui-btn layuiadmin-btn-course searchBtn" lay-submit
  124. lay-filter="LAY-user-front-search">
  125. <img src="__LAYUI__/image/sous.png" alt="">
  126. </button>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="layui-card-body">
  131. <table id="company-table" lay-filter="company-table"></table>
  132. <script type="text/html" id="table-bind">
  133. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
  134. </script>
  135. </div>
  136. </div>
  137. </div>
  138. <div id="edit-company-shop" hidden>
  139. <form class="layui-form" id="edit-company-shop-form" enctype="multipart/form-data">
  140. <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
  141. style="padding: 20px 30px 0 0;">
  142. <div class="layui-form-item">
  143. <label class="layui-form-label">店面名称</label>
  144. <div class="layui-input-inline">
  145. <input type="text" name="company_name" lay-verify="required" placeholder="请输入店面名称"
  146. autocomplete="off" class="layui-input" style="max-width: 500px;">
  147. </div>
  148. </div>
  149. <div class="layui-form-item">
  150. <label class="layui-form-label">店面电话</label>
  151. <div class="layui-input-inline">
  152. <input type="text" name="tel" lay-verify="required" placeholder="请输入店面电话" autocomplete="off"
  153. class="layui-input" style="max-width: 500px;">
  154. </div>
  155. </div>
  156. <div class="layui-form-item">
  157. <label class="layui-form-label">初始账号</label>
  158. <div class="layui-input-inline">
  159. <input type="text" name="phone" lay-verify="required" placeholder="请输入初始账号(手机号)"
  160. autocomplete="off" class="layui-input" style="max-width: 500px;">
  161. </div>
  162. </div>
  163. <div class="layui-form-item">
  164. <label class="layui-form-label">到期时间</label>
  165. <div class="layui-input-inline">
  166. <input type="text" name="end_date" id="end_date" placeholder="选择店面到期时间" autocomplete="off"
  167. class="layui-input">
  168. </div>
  169. </div>
  170. <div class="layui-form-item">
  171. <label class="layui-form-label">所属地域</label>
  172. <div class="layui-input-inline">
  173. <select name="provient" id="">
  174. <option value="">请选择省份</option>
  175. </select>
  176. <select name="city" id="">
  177. <option value="">请选择城市</option>
  178. </select>
  179. </div>
  180. </div>
  181. <div class="layui-form-item">
  182. <label class="layui-form-label">店面品牌</label>
  183. <div class="layui-input-inline">
  184. <select name="company_brand">
  185. <option value="">请选择品牌</option>
  186. </select>
  187. </div>
  188. </div>
  189. <div class="layui-form-item layui-hide">
  190. <input type="button" lay-submit lay-filter="submit" id="submit" value="保存">
  191. </div>
  192. </div>
  193. </form>
  194. </div>
  195. </body>
  196. {/block} {block name="js"}
  197. <script type="text/html" id="switchTpl">
  198. <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="开|关" lay-filter="switchStatus" {{ d.status== 1 ? 'checked' : '' }}>
  199. </script>
  200. <script type="text/html" id="editEndDate">
  201. <div class="layui-input-date">{{d.end_date}}</div>
  202. </script>
  203. <script type="text/html" id="miniBind">
  204. {{# if(d.bind_mini==1){ }}
  205. <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="mini"><i class="layui-icon" title="已绑定小程序" style="color: #1e9fff;">&#xe672;</i></a>
  206. {{# }else{ }}
  207. <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="mini" title="未绑定小程序"><i class="layui-icon">&#xe672;</i></a>
  208. {{# } }}
  209. </script>
  210. <script>
  211. layui.config({
  212. base: '__LAYUI__/',
  213. urlbase: '/adminall'
  214. }).extend({
  215. index: 'lib/index' //主入口模块
  216. }).use(['index', 'form', 'laydate', 'table'], function () {
  217. var $ = layui.$,
  218. form = layui.form,
  219. laydate = layui.laydate,
  220. table = layui.table;
  221. laydate.render({
  222. elem: '#end_date'
  223. });
  224. //监听搜索
  225. form.on('submit(LAY-user-front-search)', function (data) {
  226. var field = data.field;
  227. //执行重载
  228. table.reload('company-table', {
  229. where: field
  230. , page: {
  231. curr: 1
  232. }
  233. });
  234. });
  235. //事件
  236. var active = {
  237. add() {
  238. editCompanyShop({
  239. title: '添加店面'
  240. });
  241. },
  242. };
  243. function editCompanyShop(option) {
  244. layer.open({
  245. type: 1,
  246. title: option.title,
  247. content: $('#edit-company-shop'),
  248. area: ['400px', '580px'],
  249. btn: ['保存'],
  250. yes: function (index, layero) {
  251. //点击确认触发 iframe 内容中的按钮提交
  252. var submit = layero.find('iframe').contents().find("#submit");
  253. submit.click();
  254. }
  255. });
  256. }
  257. //活动列表
  258. table.render({
  259. elem: '#company-table',
  260. autoSort: false,
  261. url: layui.setter.urlbase + '/company/index.html',
  262. cols: [
  263. [{
  264. type: 'numbers',
  265. field: 'id',
  266. title: '序号',
  267. }, {
  268. field: 'company_name',
  269. title: '店面名称',
  270. width: '25%',
  271. edit: 'text',
  272. }, {
  273. title: '店面品牌',
  274. minWidth: 100,
  275. field: 'brand'
  276. }, {
  277. title: '所在区域',
  278. minWidth: 100,
  279. field: 'company_area'
  280. }, {
  281. field: 'start_date',
  282. title: '开通时间',
  283. minWidth: 100
  284. }, {
  285. field: 'end_date',
  286. title: '到期时间',
  287. minWidth: 100,
  288. templet: '#editEndDate'
  289. }, {
  290. field: 'tel',
  291. title: '店面固话',
  292. minWidth: 100
  293. }, {
  294. field: 'status',
  295. title: '禁用',
  296. width: 100,
  297. templet: '#switchTpl'
  298. }, {
  299. title: '操作',
  300. width: 150,
  301. align: 'center',
  302. toolbar: '#table-bind'
  303. }]
  304. ],
  305. id: 'company-table',
  306. done: function (res, curr, count) {
  307. //日期控件
  308. $(".layui-input-date").each(function (i) {
  309. layui.laydate.render({
  310. elem: this,
  311. done: function (value, date) {
  312. invite(res.data[i]['id'], value);
  313. }
  314. });
  315. });
  316. },
  317. page: true,
  318. limit: 30,
  319. height: 'full-220',
  320. text: '对不起,加载出现异常!'
  321. });
  322. table.on('tool(company-table)', function (obj) {
  323. var data = obj.data;
  324. if (obj.event === 'edit') {
  325. layer.open({
  326. type: 2,
  327. title: '修改信息',
  328. content: layui.setter.urlbase + "/company/edit?id=" + data.id,
  329. maxmin: true,
  330. area: ['40%', '70%'],
  331. btn: ['确定', '取消'],
  332. yes: function (index, layero) {
  333. //点击确认触发 iframe 内容中的按钮提交
  334. var submit = layero.find('iframe').contents().find("#submit");
  335. submit.click();
  336. }
  337. });
  338. } else if (obj.event === 'mini') {
  339. layer.open({
  340. type: 2,
  341. title: '店面配置信息',
  342. content: layui.setter.urlbase + "/company/setting?root_id=" + data.root_id,
  343. maxmin: true,
  344. area: ['40%', '70%'],
  345. btn: ['确定', '取消'],
  346. yes: function (index, layero) {
  347. //点击确认触发 iframe 内容中的按钮提交
  348. var submit = layero.find('iframe').contents().find("#submit");
  349. submit.click();
  350. }
  351. });
  352. }
  353. });
  354. $('.layui-btn.layuiadmin-btn-course').on('click', function () {
  355. var type = $(this).data('type');
  356. active[type] ? active[type].call(this) : '';
  357. });
  358. form.on('switch(switchStatus)', function (obj) {
  359. var id = obj.value;
  360. $.ajax({
  361. type: "post",
  362. url: '{:url("adminall/company/auth")}',
  363. data: { id: id },
  364. success: function (res) {
  365. layer.msg(res.msg);
  366. }
  367. });
  368. });
  369. function invite(id, value) {
  370. $.post('{:url("adminall/company/endDate")}', { id: id, value: value }, function (res) {
  371. if (res.code === 0) {
  372. layer.msg(res.msg, { anim: 0 });
  373. } else {
  374. layer.msg(res.msg, { anim: 6 });
  375. }
  376. });
  377. }
  378. table.on('edit(company-table)', function (obj) {
  379. $.post("{:url('company/setName')}", { id: obj.data.id, company_name: obj.data.company_name }, function (res) {
  380. if (res.code === 0) {
  381. layer.msg(res.msg, { anim: 0 });
  382. } else {
  383. layer.msg(res.msg, { anim: 6 });
  384. }
  385. })
  386. });
  387. });
  388. </script>
  389. {/block}