index.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. {include file="public/header" /}
  2. <style>
  3. .layui-table-view .layui-table[lay-size=lg] .layui-table-cell {height: 58px;line-height: 58px;}
  4. .wx-audio-content{padding:0px;border:0px;}
  5. .wx-audio-content .wx-audio-left .wx-audio-state{margin-bottom:15px;}
  6. .wx-audio-content .wx-audio-right .wx-audio-time{padding-top:0px;position: relative;bottom:6px;}
  7. .wx-audio-content .wx-audio-right .wx-audio-progrees{top:6px;}
  8. </style>
  9. <body>
  10. <div class="layui-fluid">
  11. <div class="layui-card">
  12. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  13. <div class="layui-form-item">
  14. <div class="layui-inline">
  15. <div class="layui-input-inline">
  16. <input type="text" name="start" class="layui-input" onclick="wk.lay_date(this);" placeholder="创建开始日期">
  17. </div>
  18. <div class="layui-form-mid">
  19. -
  20. </div>
  21. <div class="layui-input-inline">
  22. <input type="text" name="end" class="layui-input" onclick="wk.lay_date(this);" placeholder="创建结束日期">
  23. </div>
  24. </div>
  25. <div class="layui-inline">
  26. <div class="layui-input-inline">
  27. <input type="text" id="key" class="layui-input" name="product_name" placeholder="图库名称"/>
  28. </div>
  29. </div>
  30. <div class="layui-inline">
  31. <div class="layui-input-inline">
  32. <button class="layui-btn" lay-submit="" lay-filter="LAY-search">立即搜索</button>
  33. <button class="layui-btn layui-btn-normal" id="empty" lay-submit="" lay-filter="LAY-search">重置</button>
  34. </div>
  35. </div>
  36. </div>
  37. <div>
  38. <button class="layui-btn" data-type="add" onclick="wk.href('{:url('add')}')">
  39. <i class="fa fa-plus"></i> 添加图库
  40. </button>
  41. </div>
  42. </div>
  43. <div class="layui-card-body">
  44. <table id="LAY-table-manage" lay-filter="LAY-table-manage"></table>
  45. <!--图片模板-->
  46. <script type="text/html" id="imgTpl">
  47. <ul class="layui-cricle">
  48. <li><img src="{{d.product_image}}" class="layui-table-img layui-circle"onerror="this.src='/static/admin/images/timg.jpg'" /></li>
  49. </ul>
  50. </script>
  51. <!--图片模板-->
  52. <script type="text/html" id="imgTp2">
  53. <ul class="layui-cricle">
  54. <li><img src="{{d.product_parameter}}" class="layui-table-img layui-circle"onerror="this.src='/static/admin/images/timg.jpg'" /></li>
  55. </ul>
  56. </script>
  57. <!--操作模板-->
  58. <script type="text/html" id="opeBar">
  59. <a onclick="wk.layer_show('编辑文章','{:url('edit')}?id={{d.oid}}')" class="layui-btn layui-btn-xs" title="编辑"><i class="fa fa-pencil"></i></a>
  60. <a href="javascript:;" onclick="wk.confirm('{{d.oid}}','{:url('del')}')" class="layui-btn layui-btn-danger layui-btn-xs" title="删除"><i class="fa fa-trash-o"></i></a>
  61. </script>
  62. </div>
  63. </div>
  64. </div>
  65. {include file="public/footer" /}
  66. <script>
  67. var music = function(){
  68. if($('#music').length == 0){
  69. $('body').append('<div id="music"></div>');
  70. }
  71. var wxAudio = wk.lay_audio({elem:'#music',src:'/static/admin/images/default.mp3'});
  72. $('#music').hide();
  73. wxAudio.audioPlay();
  74. }
  75. layui.use(['index', 'table','util'], function () {
  76. var $ = layui.$
  77. , form = layui.form
  78. , table = layui.table
  79. table.render({
  80. elem: '#LAY-table-manage'
  81. , url: '{:url("admin/Aipimagesearch/index")}'
  82. ,response: {
  83. statusCode: 220 //成功的状态码,默认:0
  84. }
  85. , page: true
  86. , even: false //开启隔行背景
  87. , size: 'lg' //sm小尺寸的表格 lg大尺寸
  88. // ,width:100
  89. , cellMinWidth: 150
  90. , height: "full-220"
  91. , limits: [10, 20, 30, 40, 50]
  92. , limit: "{:config('pages')}"
  93. , loading: true
  94. , toolbar:'#123'
  95. , id: 'LAY-table'
  96. , cols: [[
  97. {type: 'checkbox', fixed: 'left',}
  98. , {field: 'oid', width: 60, title: 'ID', sort: true, align: 'center'}
  99. , {field: 'product_image', width: 300, title: '产品图片', align: 'center',templet: '#imgTpl'}
  100. , {field: 'pruduct_name', width: 300, title: '产品名', align: 'center'}
  101. , {field: 'product_parameter', width: 300, title: '参数图', align: 'center',templet: '#imgTp2'}
  102. , {field: 'create_time', width: 300, title: '创建时间',sort: true, align: 'center',templet:"<div>{{layui.util.toDateString(d.create_time,'yyyy年MM月dd日')}}</div>"}
  103. , {fixed: 'right', width: 300, title: '操作', align: 'center', toolbar: '#opeBar'}
  104. ]]
  105. ,done: function (res, curr, count) {
  106. $('.layui-cricle').viewer({
  107. url: 'data-original',
  108. });
  109. $.each(res.data,function(index,item) {
  110. wk.lay_audio({elem:'#music_'+item['id'],src:item['music'],width:'250px'});
  111. });
  112. }
  113. });
  114. //监听状态开关操作
  115. form.on('switch(OnOff)', function (obj) {
  116. var num = '';
  117. obj.elem.checked == true? num = 1: num = 2;
  118. //用户状态
  119. wk.status(this.value,num, '{:url("user_state")}',obj);
  120. });
  121. //事件
  122. var active = {
  123. getCheckData: function(){
  124. //批量删除
  125. wk.batchDel(getIds(),"{:url('batchDelUser')}");
  126. }
  127. ,forbiddenAll: function(){
  128. //批量禁用
  129. wk.batchForbidden(getIds(),2,"{:url('forbiddenAdmin')}");
  130. }
  131. ,usingAll: function(){
  132. //批量启用
  133. wk.usingAll(getIds(),1,"{:url('usingAdmin')}");
  134. }
  135. ,excelAll: function(){
  136. //导出Excel
  137. wk.excelAll(getIds(),$("form").serialize(),"{:url('excelAdmin')}");
  138. }
  139. };
  140. $('.layuiBtn').on('click', function () {
  141. var type = $(this).data('type');
  142. active[type] ? active[type].call(this) : '';
  143. });
  144. var getIds = function () {
  145. var ids = [];
  146. var checkStatus = table.checkStatus('LAY-table')
  147. ,data = checkStatus.data;
  148. $.each(data,function(index,item){
  149. ids.push(item['id'])
  150. });
  151. return ids;
  152. }
  153. //倒计时
  154. // var thisTimer, setCountdown = function(){
  155. // lay('#test3').addClass('layui-disabled').attr('disabled').text('完了');
  156. // var endTime = new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate(),new Date().getHours(),new Date().getMinutes(),new Date().getSeconds() + 60).getTime() //结束日期
  157. // ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  158. // clearTimeout(thisTimer);
  159. // util.countdown(endTime, serverTime, function(date, serverTime, timer){
  160. // var str = date[3] + '秒';
  161. // if(date[3] == 0){
  162. // lay('#test3').removeClass('layui-disabled').removeAttr('disabled').text('完了');
  163. // }else{
  164. // lay('#test2').html(str);
  165. // }
  166. // thisTimer = timer;
  167. // });
  168. // };
  169. // var date = new Date();
  170. // setCountdown(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds() + 60);
  171. });
  172. var thisTimer, setCountdown = function(){
  173. $('#test3').addClass('layui-disabled').attr('disabled','disabled');
  174. var endTime = new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate(),new Date().getHours(),new Date().getMinutes(),new Date().getSeconds() + 60).getTime() //结束日期
  175. ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  176. clearTimeout(thisTimer);
  177. layui.util.countdown(endTime, serverTime, function(date, serverTime, timer){
  178. var str = date[3];
  179. if(date[3] == 0){
  180. $('#test3').removeClass('layui-disabled').removeAttr('disabled');
  181. $('#test2').html(60);
  182. }else{
  183. $('#test2').html(str);
  184. }
  185. thisTimer = timer;
  186. });
  187. };
  188. </script>
  189. </body>
  190. </html>