list.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  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-form-label{
  21. width: auto;
  22. }
  23. .layui-laydate-range {
  24. width: 581px;
  25. }
  26. .layui-table-page>div {
  27. display: flex;
  28. justify-content: flex-start;
  29. }
  30. .layui-btn-primary,.layui-btn-primary:hover {
  31. border: 1px solid #249EFB;
  32. background-color: #fff;
  33. color: #249EFB;
  34. }
  35. .layui-form-item .layui-inline{
  36. margin-right: 0px;
  37. }
  38. .layui-btn-normal,.layui-btn-normal:hover {
  39. border:1px solid #249EFB;
  40. background-color: #fff;
  41. color: #249EFB;
  42. }
  43. .layui-btn-danger,.layui-btn-danger:hover {
  44. color: #FF5722;
  45. border: 1px solid #FF5722;
  46. background-color: #fff;
  47. }
  48. .layui-form-selected dl{z-index:99999999 ;}
  49. </style>
  50. <body>
  51. <div class="layui-fluid">
  52. <div class="layui-card">
  53. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  54. <div class="layui-form-item">
  55. <div class="layui-inline" style="float: left;">
  56. {auth:check name="turntable/add_activity"}
  57. <button class="layui-btn layui-btn-primary layuiadmin-btn-course" data-type="add">添加活动</button>
  58. {/auth:check}
  59. </div>
  60. <div style="float:right;">
  61. <div class="layui-inline">
  62. <label class="layui-form-label">活动名称</label>
  63. <div class="layui-input-inline">
  64. <input type="text" name="keyword" placeholder="请输入活动名称" autocomplete="off" class="layui-input">
  65. </div>
  66. </div>
  67. <div class="layui-inline">
  68. <label class="layui-form-label">活动时间</label>
  69. <div class="layui-input-inline select-date">
  70. <input type="text" name="date" id="select_date" placeholder="活动时间" autocomplete="off" class="layui-input">
  71. </div>
  72. </div>
  73. <div class="layui-inline" style="margin-right: 0px;">
  74. <label class="layui-form-label">上传人</label>
  75. <div class="layui-input-inline">
  76. <select name="employee_id" id="employee">
  77. <option value="">请选择人员</option>
  78. {volist name="employee" id="e"}
  79. <option value="{$e.id}">{$e.name}</option>
  80. {/volist}
  81. </select>
  82. </div>
  83. </div>
  84. <div class="layui-inline">
  85. <button class="layui-btn layuiadmin-btn-course searchBtn" lay-submit lay-filter="LAY-user-front-search">
  86. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  87. </button>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="layui-card-body" style="text-align: center;">
  93. <table id="company-activity" lay-filter="company-activity"></table>
  94. <script type="text/html" id="acttime">
  95. {{# if(d.start_date && d.end_date){ }}
  96. {{d.start_date}}-{{d.end_date}}
  97. {{# }else{ }}
  98. <span style="color: #cccccc;">无</span>
  99. {{# } }}
  100. </script>
  101. <script type="text/html" id="status">
  102. {{# if(d.status==1){ }}
  103. <span>进行中</span>
  104. {{# }else{ }}
  105. <span style="color: #cccccc;">关闭</span>
  106. {{# } }}
  107. </script>
  108. <script type="text/html" id="show">
  109. <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="show" {{ d.status == 1 ? 'checked' : '' }} id="clickshow">
  110. </script>
  111. <script type="text/html" id="table-user-bind">
  112. {auth:check name="turntable/add_activity"}
  113. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
  114. 编辑
  115. </a>
  116. {/auth:check}
  117. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="customer">
  118. 抽奖行为
  119. </a>
  120. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="prize_list">
  121. 奖品详情
  122. </a>
  123. </script>
  124. <script type="text/html" id="employee_name">
  125. {{# if(d.opt_name){ }}
  126. <span>{{d.opt_name}}</span>
  127. {{# }else{ }}
  128. <span style="color: #cccccc;">无</span>
  129. {{# } }}
  130. </script>
  131. </div>
  132. </div>
  133. </div>
  134. </body>
  135. {/block} {block name="js"}
  136. <script>
  137. layui.config({
  138. base: '__LAYUI__/',
  139. urlbase: '/sys'
  140. }).extend({
  141. index: 'lib/index' //主入口模块
  142. }).use(['index', 'form', 'table','laydate'], function() {
  143. var $ = layui.$,
  144. form = layui.form,
  145. laydate = layui.laydate,
  146. table = layui.table;
  147. //日期范围
  148. laydate.render({
  149. elem: '#select_date',
  150. range:true
  151. });
  152. //监听搜索
  153. form.on('submit(LAY-user-front-search)', function(data) {
  154. var field = data.field;
  155. //执行重载
  156. table.reload('company-activity', {
  157. where: field
  158. });
  159. });
  160. //事件
  161. var active = {
  162. add: function() {
  163. layer.open({
  164. type: 2,
  165. title: ['活动添加', 'color:#333333;background-color:#D8E6F1;'],
  166. content: '{:url("turntable/add_activity")}',
  167. resize: false,
  168. area: ['80%', '80%'],
  169. // btn: ['确定', '取消'],
  170. yes: function(index, layero) {
  171. //点击确认触发 iframe 内容中的按钮提交
  172. // var submit = layero.find('iframe').contents().find("#activity-submit");
  173. // submit.click();
  174. }
  175. });
  176. }
  177. };
  178. //活动列表
  179. table.render({
  180. elem: '#company-activity',
  181. // autoSort: false,
  182. // url: layui.setter.urlbase + '/Activity/list.html',
  183. url: "{:url('turntable/list')}",
  184. height: 'full-160',
  185. cols: [
  186. [
  187. // {align:'center',field: 'number',title: '活动编号',width: '7%',templet:'#numbertpl'},
  188. {align:'center',field: 'title',title: '活动名称',width: '10%',templet:'#titletpl'},
  189. {align:'center',field: 'acttime',title: '活动时间',width: '10%',templet:'#acttime'},
  190. {align:'center',field: 'status',title: '活动状态',minWidth: 100,templet:'#status'},
  191. {align:'center',field: 'share_num',title: '转发数量',minWidth: 100},
  192. {align:'center',field: 'lottery_num',title: '抽奖人数',minWidth: 100},
  193. {align:'center',field: 'yes_crm',title: '中奖客户',minWidth: 100},
  194. {align:'center',field: 'yes_num',title: '中奖数量',minWidth: 100,templet:'#end_datetpl'},
  195. {align:'center',field: 'good_num',title: '奖品数量',minWidth: 80},
  196. {align:'center',field: 'wiped_num',title: '兑奖数量',minWidth: 80},
  197. {align:'center',field: 'addtime',title: '创建时间',minWidth: 80},
  198. {align:'center',title: '开关',minWidth: 100,templet:'#show'},
  199. {align:'center',templet: '#employee_name',title: '上传人',maxWidth: 80},
  200. {align:'center',title: '操作',width:'20%',align: 'center',toolbar: '#table-user-bind',fixed: 'right', }
  201. ]
  202. ],
  203. page: true,
  204. // limit: 30,
  205. // height: 'full-220',
  206. text: '对不起,加载出现异常!'
  207. });
  208. //监听
  209. table.on('tool(company-activity)', function(obj) {
  210. var data = obj.data;
  211. if (obj.event === 'customer') {
  212. layer.open({
  213. type: 2,
  214. title: ['抽奖行为', 'color:#333333;background-color:#D8E6F1;'],
  215. content: "{:url('turntable/winning_customer')}?id=" + data.id,
  216. // content: layui.setter.urlbase + "/activity/edit/id/" + data.id,
  217. resize: false,
  218. area: ['80%', '80%'],
  219. // btn: ['确定', '取消'],
  220. yes: function(index, layero) {
  221. //点击确认触发 iframe 内容中的按钮提交
  222. // var submit = layero.find('iframe').contents().find("#activity-submit");
  223. // submit.click();
  224. }
  225. });
  226. } else if (obj.event === 'prize_list') {
  227. layer.open({
  228. type: 2,
  229. title: ['奖品详情', 'color:#333333;background-color:#D8E6F1;'],
  230. content: "{:url('turntable/prize_list')}?id=" + data.id,
  231. resize: false,
  232. area: ['80%', '80%'],
  233. yes: function(index, layero) {
  234. //点击确认触发 iframe 内容中的按钮提交
  235. // var submit = layero.find('iframe').contents().find("#activity-submit");
  236. // submit.click();
  237. }
  238. });
  239. } else if(obj.event === 'edit') {
  240. layer.open({
  241. type: 2,
  242. title: ['活动修改', 'color:#333333;background-color:#D8E6F1;'],
  243. content: "{:url('turntable/edit_activity')}?id=" + data.id,
  244. // content: layui.setter.urlbase + "/activity/edit/id/" + data.id,
  245. resize: false,
  246. area: ['80%', '80%'],
  247. // btn: ['确定', '取消'],
  248. yes: function(index, layero) {
  249. //点击确认触发 iframe 内容中的按钮提交
  250. // var submit = layero.find('iframe').contents().find("#activity-submit");
  251. // submit.click();
  252. }
  253. });
  254. } else if(obj.event === 'del') {
  255. layer.confirm('确定删除此活动?',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
  256. $.ajax({
  257. type: 'post',
  258. // url: layui.setter.urlbase + "/activity/del",
  259. url: "{:url('activity/del')}",
  260. data: {
  261. id: data.id
  262. },
  263. success: function(res) {
  264. if(res.code == 0) {
  265. layer.msg(res.msg, {
  266. anim: 0
  267. },function(){
  268. //执行重载
  269. table.reload('company-activity');
  270. // obj.del();
  271. layer.close(index);
  272. });
  273. } else {
  274. layer.msg(res.msg, {
  275. anim: 6
  276. });
  277. }
  278. }
  279. });
  280. });
  281. } else if(obj.event === 'end'){
  282. layer.confirm('确定结束此活动?',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
  283. $.ajax({
  284. type: 'post',
  285. // url: layui.setter.urlbase + "/activity/del",
  286. url: "{:url('activity/end')}",
  287. data: {
  288. id: data.id
  289. },
  290. success: function(res) {
  291. if(res.code == 0) {
  292. layer.msg(res.msg, {
  293. anim: 0
  294. },function(){
  295. //执行重载
  296. table.reload('company-activity');
  297. // obj.del();
  298. layer.close(index);
  299. });
  300. } else {
  301. layer.msg(res.msg, {
  302. anim: 6
  303. });
  304. }
  305. }
  306. });
  307. });
  308. }
  309. });
  310. // form.on('switch(show)', function (obj) {
  311. // var id = obj.value;
  312. // $.ajax({
  313. // type: "post",
  314. // url: '{:url("activity/show")}',
  315. // data: {
  316. // id: id
  317. // },
  318. // success: function (res) {
  319. // layer.msg(res.msg);
  320. // }
  321. // });
  322. // });
  323. $('.layui-btn.layuiadmin-btn-course').on('click', function() {
  324. var type = $(this).data('type');
  325. active[type] ? active[type].call(this) : '';
  326. });
  327. //发布
  328. form.on('switch(show)', function (obj) {
  329. var id = obj.value;
  330. $.ajax({
  331. type: "post",
  332. url: '{:url("turntable/up_act_sta")}',
  333. data: {
  334. id: id
  335. },
  336. success: function (res) {
  337. if (res.code == 0) {
  338. layer.msg(res.msg, {time: 2000});
  339. } else {
  340. table.reload('company-activity');
  341. layer.msg(res.msg, {time: 2000});
  342. }
  343. }
  344. });
  345. });
  346. });
  347. </script>
  348. {/block}