index.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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. -->
  61. <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>
  62. </script>
  63. </div>
  64. </div>
  65. </div>
  66. {include file="public/footer" /}
  67. <script>
  68. var music = function(){
  69. if($('#music').length == 0){
  70. $('body').append('<div id="music"></div>');
  71. }
  72. var wxAudio = wk.lay_audio({elem:'#music',src:'/static/admin/images/default.mp3'});
  73. $('#music').hide();
  74. wxAudio.audioPlay();
  75. }
  76. layui.use(['index', 'table','util'], function () {
  77. var $ = layui.$
  78. , form = layui.form
  79. , table = layui.table
  80. table.render({
  81. elem: '#LAY-table-manage'
  82. , url: '{:url("admin/Aipimagesearch/index")}'
  83. ,response: {
  84. statusCode: 220 //成功的状态码,默认:0
  85. }
  86. , page: true
  87. , even: false //开启隔行背景
  88. , size: 'lg' //sm小尺寸的表格 lg大尺寸
  89. // ,width:100
  90. , cellMinWidth: 150
  91. , height: "full-220"
  92. , limits: [10, 20, 30, 40, 50]
  93. , limit: "{:config('pages')}"
  94. , loading: true
  95. , toolbar:'#123'
  96. , id: 'LAY-table'
  97. , cols: [[
  98. {type: 'checkbox', fixed: 'left',}
  99. , {field: 'oid', width: 60, title: 'ID', sort: true, align: 'center'}
  100. , {field: 'product_image', width: 300, title: '产品图片', align: 'center',templet: '#imgTpl'}
  101. , {field: 'pruduct_name', width: 300, title: '产品名', align: 'center'}
  102. // , {field: 'product_parameter', width: 300, title: '参数图', align: 'center',templet: '#imgTp2'}
  103. , {field: 'create_time', width: 300, title: '上传时间',sort: true, align: 'center',templet:"<div>{{layui.util.toDateString(d.create_time,'yyyy年MM月dd日')}}</div>"}
  104. , {fixed: 'right', width: 300, title: '操作', align: 'center', toolbar: '#opeBar'}
  105. ]]
  106. ,done: function (res, curr, count) {
  107. $('.layui-cricle').viewer({
  108. url: 'data-original',
  109. });
  110. $.each(res.data,function(index,item) {
  111. wk.lay_audio({elem:'#music_'+item['id'],src:item['music'],width:'250px'});
  112. });
  113. }
  114. });
  115. //监听状态开关操作
  116. form.on('switch(OnOff)', function (obj) {
  117. var num = '';
  118. obj.elem.checked == true? num = 1: num = 2;
  119. //用户状态
  120. wk.status(this.value,num, '{:url("user_state")}',obj);
  121. });
  122. //事件
  123. var active = {
  124. getCheckData: function(){
  125. //批量删除
  126. wk.batchDel(getIds(),"{:url('batchDelUser')}");
  127. }
  128. ,forbiddenAll: function(){
  129. //批量禁用
  130. wk.batchForbidden(getIds(),2,"{:url('forbiddenAdmin')}");
  131. }
  132. ,usingAll: function(){
  133. //批量启用
  134. wk.usingAll(getIds(),1,"{:url('usingAdmin')}");
  135. }
  136. ,excelAll: function(){
  137. //导出Excel
  138. wk.excelAll(getIds(),$("form").serialize(),"{:url('excelAdmin')}");
  139. }
  140. };
  141. $('.layuiBtn').on('click', function () {
  142. var type = $(this).data('type');
  143. active[type] ? active[type].call(this) : '';
  144. });
  145. var getIds = function () {
  146. var ids = [];
  147. var checkStatus = table.checkStatus('LAY-table')
  148. ,data = checkStatus.data;
  149. $.each(data,function(index,item){
  150. ids.push(item['id'])
  151. });
  152. return ids;
  153. }
  154. //倒计时
  155. // var thisTimer, setCountdown = function(){
  156. // lay('#test3').addClass('layui-disabled').attr('disabled').text('完了');
  157. // var endTime = new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate(),new Date().getHours(),new Date().getMinutes(),new Date().getSeconds() + 60).getTime() //结束日期
  158. // ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  159. // clearTimeout(thisTimer);
  160. // util.countdown(endTime, serverTime, function(date, serverTime, timer){
  161. // var str = date[3] + '秒';
  162. // if(date[3] == 0){
  163. // lay('#test3').removeClass('layui-disabled').removeAttr('disabled').text('完了');
  164. // }else{
  165. // lay('#test2').html(str);
  166. // }
  167. // thisTimer = timer;
  168. // });
  169. // };
  170. // var date = new Date();
  171. // setCountdown(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds() + 60);
  172. });
  173. var thisTimer, setCountdown = function(){
  174. $('#test3').addClass('layui-disabled').attr('disabled','disabled');
  175. var endTime = new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate(),new Date().getHours(),new Date().getMinutes(),new Date().getSeconds() + 60).getTime() //结束日期
  176. ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  177. clearTimeout(thisTimer);
  178. layui.util.countdown(endTime, serverTime, function(date, serverTime, timer){
  179. var str = date[3];
  180. if(date[3] == 0){
  181. $('#test3').removeClass('layui-disabled').removeAttr('disabled');
  182. $('#test2').html(60);
  183. }else{
  184. $('#test2').html(str);
  185. }
  186. thisTimer = timer;
  187. });
  188. };
  189. </script>
  190. </body>
  191. </html>