1
0

list.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  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, .layui-table-header {
  10. background-color: #D4E4ED !important;
  11. border-color: #D4E4ED !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. </style>
  103. <body>
  104. <div class="layui-fluid">
  105. <div class="layui-card">
  106. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  107. <div class="layui-form-item clearfix relative">
  108. <div style="padding-bottom: 10px; float:left">
  109. <button class="layui-btn layuiadmin-btn-course" data-type="add">创建拼团</button>
  110. </div>
  111. <div class="layui-inline pull-left clearfix searchBox">
  112. <input type="text" name="keyword" placeholder="请输入搜索拼团标题" autocomplete="off" class="layui-input inputBox">
  113. <button class="layui-btn layuiadmin-btn-course searchBtn" lay-submit lay-filter="LAY-user-front-search">
  114. <img src="__LAYUI__/image/sous.png" alt="">
  115. </button>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="layui-card-body">
  120. <table id="spellgroup" lay-filter="spellgroup"></table>
  121. <script type="text/html" id="cover">
  122. <img style="display: inline-block; width: 50%; height: 100%;" src={{d.cover}}>
  123. </script>
  124. <script type="text/html" id="date">
  125. {{d.start_date}}至{{d.end_date}}
  126. </script>
  127. <script type="text/html" id="team">
  128. <a style="color: #0091FF;" lay-event="teamlist">{{d.team_num}}</a>
  129. </script>
  130. <script type="text/html" id="publish">
  131. <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }}>
  132. </script>
  133. <script type="text/html" id="table-user-bind">
  134. {auth:check name="spellgroup/edit"}
  135. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
  136. {/auth:check}
  137. {auth:check name="spellgroup/receive"}
  138. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="receive"><i class="layui-icon">&#xe627;</i>活动领取</a>
  139. {/auth:check}
  140. {auth:check name="spellgroup/del"}
  141. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
  142. {/auth:check}
  143. </script>
  144. </div>
  145. </div>
  146. </div>
  147. </body>
  148. {/block} {block name="js"}
  149. <script>
  150. layui.config({
  151. base: '__LAYUI__/',
  152. urlbase: '/sys'
  153. }).extend({
  154. index: 'lib/index' //主入口模块
  155. }).use(['index', 'form', 'table'], function() {
  156. var $ = layui.$,
  157. form = layui.form,
  158. table = layui.table;
  159. //监听搜索
  160. form.on('submit(LAY-user-front-search)', function(data) {
  161. var field = data.field;
  162. //执行重载
  163. table.reload('spellgroup', {
  164. where: field
  165. ,page: {curr:1}
  166. });
  167. });
  168. //事件
  169. var active = {
  170. add: function() {
  171. layer.open({
  172. type: 2,
  173. title: '拼团添加',
  174. content: '{:url("spellgroup/add")}',
  175. maxmin: true,
  176. area: ['60%', '90%'],
  177. btn: ['确定', '取消'],
  178. yes: function(index, layero) {
  179. //点击确认触发 iframe 内容中的按钮提交
  180. var submit = layero.find('iframe').contents().find("#spellgroup-submit");
  181. submit.click();
  182. }
  183. });
  184. }
  185. };
  186. //活动列表
  187. table.render({
  188. elem: '#spellgroup',
  189. autoSort: false,
  190. url: "{:url('spellgroup/list.html')}",
  191. cols: [
  192. [{
  193. type: 'numbers',
  194. field: 'id',
  195. title: '序号',
  196. }, {
  197. field: 'title',
  198. title: '名称',
  199. width: '20%'
  200. }, {
  201. field: 'cover',
  202. title: '图片',
  203. templet:'#cover'
  204. }, {
  205. field: 'start_date',
  206. title: '活动时间',
  207. minWidth: 200,
  208. templet: '#date'
  209. }, {
  210. field: 'join_user_num',
  211. title: '参与人数',
  212. }, {
  213. title: '参与团队',
  214. templet: '#team'
  215. }, {
  216. field: 'hour',
  217. title: '拼团时限',
  218. }, {
  219. field: 'number',
  220. title: '拼团人数',
  221. }, {
  222. title: '上/下架',
  223. templet: '#publish'
  224. }, {
  225. field: 'addtime',
  226. title: '创建时间'
  227. }, {
  228. title: '操作',
  229. width: '20%',
  230. toolbar: '#table-user-bind',
  231. fixed: 'right',
  232. }]
  233. ],
  234. page: true,
  235. limit: 30,
  236. height: 'full-220',
  237. text: '对不起,加载出现异常!'
  238. });
  239. //监听审核
  240. table.on('tool(spellgroup)', function(obj) {
  241. var data = obj.data;
  242. if(obj.event === 'edit') {
  243. if(data.end == 1){
  244. layer.msg('活动已开始,不支持编辑', {anim: 6});
  245. return false;
  246. }
  247. layer.open({
  248. type: 2,
  249. title: '活动修改',
  250. content: "{:url('spellgroup/edit')}?id=" + data.id,
  251. maxmin: true,
  252. area: ['60%', '80%'],
  253. btn: ['确定', '取消'],
  254. yes: function(index, layero) {
  255. //点击确认触发 iframe 内容中的按钮提交
  256. var submit = layero.find('iframe').contents().find("#spellgroup-submit");
  257. submit.click();
  258. }
  259. });
  260. } else if(obj.event === 'del') {
  261. layer.confirm('确定删除此拼团?', function(index) {
  262. $.ajax({
  263. type: 'post',
  264. url: "{:url('spellgroup/del')}",
  265. data: {
  266. id: data.id
  267. },
  268. success: function(res) {
  269. if(res.code == 0) {
  270. layer.msg(res.msg, {
  271. anim: 0
  272. },function(){
  273. obj.del();
  274. layer.close(index);
  275. });
  276. } else {
  277. layer.msg(res.msg, {
  278. anim: 6
  279. });
  280. }
  281. }
  282. });
  283. });
  284. } else if(obj.event === 'receive') {
  285. layer.open({
  286. type: 2,
  287. title: '活动领取',
  288. content: "{:url('spellgroup/receive')}?id=" + data.id,
  289. maxmin: false,
  290. area: ['50%', '70%'],
  291. });
  292. } else if(obj.event === 'teamlist') {
  293. layer.open({
  294. type: 2,
  295. title: '团队数',
  296. content: "{:url('spellgroup/team')}/id/" + data.id + '/hour/' + data.hour,
  297. maxmin: false,
  298. area: ['50%', '70%'],
  299. });
  300. }
  301. });
  302. form.on('switch(show)', function (obj) {
  303. var id = obj.value;
  304. $.ajax({
  305. type: "post",
  306. url: '{:url("spellgroup/publish")}',
  307. data: {
  308. id: id
  309. },
  310. success: function (res) {
  311. layer.msg(res.msg);
  312. }
  313. });
  314. });
  315. $('.layui-btn.layuiadmin-btn-course').on('click', function() {
  316. var type = $(this).data('type');
  317. active[type] ? active[type].call(this) : '';
  318. });
  319. });
  320. </script>
  321. {/block}