hotrotation.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. layui.use([ 'laypage', 'layer', 'table', 'element','form','upload'], function(){
  2. var laypage = layui.laypage //分页
  3. ,$ = layui.jquery
  4. ,layer = layui.layer //弹层
  5. ,table = layui.table //表格
  6. ,element = layui.element //元素操作
  7. ,form = layui.form
  8. ,upload = layui.upload;
  9. var tableIds = 'videolist'; //表格ID
  10. //第一个实例
  11. table.render({
  12. elem: '#'+tableIds
  13. ,url: '/push/hotrotationforms' //数据接口
  14. ,where:{token:csrfToken}
  15. ,method:'post'
  16. ,page: true //开启分页
  17. ,height:600
  18. ,text:'数据加载中'
  19. ,id:'tablerReload'
  20. ,cols: [[ //表头
  21. {type:'numbers',title:'序号',width:50},
  22. {field: 'title', title: '轮播标题', align:'center'},
  23. {field: 'name', title: '归属楼盘名称', align:'center'},
  24. {field: 'img', title: '图片',width:200, align:'center',templet:function(d){
  25. return '<img class="layui_magnify" src="'+d.img+'"/>'
  26. }}
  27. ,
  28. {field: 'img_ft', title: '繁体图片',width:200, align:'center',templet:function(d){
  29. return '<img class="layui_magnify" src="'+d.img_ft+'"/>'
  30. }}
  31. , {field: 'url', title: '地址',width:200, align:'center',templet:function(d){
  32. return '<a href="'+d.url+'" target="_blank">'+d.url+'</a>';
  33. }}
  34. ,{field: 'sort', title: '排序',width:100, event:'sortData',edit: 'text', align:'center',sort: true,templet:"#sortBox"}
  35. ,{field: 'create_at', title: '添加时间',width:150, align:'center'}
  36. ,{field: 'is_show', title: '审核',align:'center',width:100, templet:function (d) {
  37. if(d.is_show == 2){
  38. return '<input type="checkbox" value="'+d.id+'" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
  39. } else {
  40. return '<input type="checkbox" checked value="'+d.id+'" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
  41. }
  42. }}
  43. ,{fixed: 'right',title:'操作', width: 165, align:'center', toolbar: '#operate'}
  44. ]]
  45. });
  46. table.reload('tablerReload'); //重新加载
  47. // 列表点击放大图片
  48. $('.layui-table-main').on('click','.layui_magnify', function(){
  49. var _src = $(this).attr('src');
  50. layui.layer.open({
  51. type: 1,
  52. title: false, //是否显示标题
  53. area: ['95%', '55%'],
  54. shade: 0.6, //透明度
  55. closeBtn: 1, //按钮 1有,0无
  56. shadeClose: true,
  57. content: '<img style="width:100%;height:100%" src="'+_src+'">',
  58. });
  59. });
  60. //监听指定开关
  61. form.on('switch(switchTest)', function(data){
  62. layer.confirm('确定要修改此操作吗?',{btn: ['确定', '取消']},function () {
  63. $.post('/push/hotimgdelshow',{id:data.value,type:'show'},function (data) {
  64. layer.msg(data.msg);
  65. table.reload('tablerReload');
  66. })
  67. },function (aa) {
  68. table.reload('tablerReload'); //重新加载
  69. })
  70. });
  71. //列表操作
  72. table.on('tool('+tableIds+')', function(obj){
  73. var layEvent = obj.event,
  74. data = obj.data;
  75. if(layEvent === 'edit'){
  76. var index = layer.open({
  77. type: 2,
  78. title: '修改轮播图',
  79. area:['800px','500px'],
  80. content: '/push/hotrotationedit?id='+data.id+'&house_name='+data.name,
  81. end:function () {
  82. table.reload('tablerReload'); //重新加载
  83. }
  84. });
  85. } else if(layEvent === 'del') {
  86. layer.confirm('您确定要删除吗?',{ btn: ['确定', '取消']},function () {
  87. $.post('/push/hotimgdelshow',{id:data.id,type:'del'},function (data) {
  88. layer.msg(data.msg);
  89. table.reload('tablerReload');
  90. })
  91. })
  92. }else if(layEvent === 'sortData'){ //修改排序
  93. table.on('edit('+tableIds+')', function(obj){
  94. var data = obj.data;
  95. $.post('/push/hotimgdelshow',{id:data.id,type:'sort',sort:data.sort},function (data) {
  96. if(data.code == 200)
  97. {
  98. layer.msg(data.msg);
  99. } else if(data.code == 300 ) {
  100. layer.msg(data.msg);
  101. }
  102. })
  103. })
  104. }
  105. });
  106. //添加图片上传
  107. upload.render({
  108. elem: '#test1'
  109. ,url: '/house/createimg'
  110. ,data:{token:csrfToken}
  111. ,field:'img'
  112. ,size:1000 //限制上传图片的大小,单位为KB
  113. ,exts: 'png|jpg|jpeg' //只允许上传压缩文件
  114. ,auto:false
  115. ,bindAction:'#addcity'
  116. ,choose: function(obj){
  117. obj.preview(function(index, file, result){
  118. $('#breviary_img').attr('src', result); //图片链接(base64)
  119. });
  120. }
  121. });
  122. //添加图片上传
  123. upload.render({
  124. elem: '#test2'
  125. ,url: '/house/createimg'
  126. ,data:{token:csrfToken}
  127. ,field:'img_ft'
  128. ,size:1000 //限制上传图片的大小,单位为KB
  129. ,exts: 'png|jpg|jpeg' //只允许上传压缩文件
  130. ,auto:false
  131. ,bindAction:'#addcity'
  132. ,choose: function(obj){
  133. obj.preview(function(index, file, result){
  134. $('#breviary_imgft').attr('src', result); //图片链接(base64)
  135. });
  136. }
  137. });
  138. // 图片放大浏览
  139. $('.layui_magnify').click(function(){
  140. var _src = $(this).attr('src');
  141. layui.layer.open({
  142. type: 1,
  143. title: false, //是否显示标题
  144. area: ['60%', '80%'],
  145. shade: 0.6, //透明度
  146. closeBtn: 1, //按钮 1有,0无
  147. shadeClose: true,
  148. content: '<img style="width:100%;height:100%" src="'+_src+'">',
  149. });
  150. })
  151. // 新增
  152. var $ = layui.$, active = {
  153. addData: function(){ //获取选中数据
  154. var index = layui.layer.open({
  155. type: 2,
  156. title: '添加轮播图',
  157. closeBtn: 1, //不显示关闭按钮
  158. area: ['800px','500px'],
  159. content: '/push/hotrotationadd' //iframe的url,no代表不显示滚动条
  160. ,success:function (layero, index) {
  161. },
  162. end:function () {
  163. table.reload('tablerReload');
  164. }
  165. });
  166. },
  167. reload:function(){//搜索
  168. var form = pfgs_serialize($('form'));
  169. var name = '';
  170. var house_name = '';
  171. if(form.input_house == 'name'){
  172. name = form.input_house_text;
  173. } else if(form.input_house == 'house_name'){
  174. house_name = form.input_house_text;
  175. }
  176. table.reload('tablerReload',{
  177. where:{
  178. title:name,
  179. house_name:house_name,
  180. city:form.input_city,
  181. type_name:form.type_name
  182. }
  183. })
  184. },
  185. };
  186. $('.demoTable .layui-btn').on('click', function(){
  187. var type = $(this).data('type');
  188. active[type] ? active[type].call(this) : '';
  189. });
  190. $('.The_house').focus(function(){
  191. // $('form').append('<input type="hidden" name="aa" value="aaa">');
  192. indexOpen = parent.layui.layer.open({
  193. type: 2,
  194. title: '选择需要添加的楼盘',
  195. area: ['','100%'],
  196. content: '/publicuse/housename',
  197. success:function (layero, index) {
  198. },
  199. end:function(){
  200. }
  201. });
  202. parent.layui.layer.full(indexOpen);
  203. //改变窗口大小时,重置弹窗的宽高,防止超出可视区域(如F12调出debug的操作)
  204. $(window).on("resize",function(){
  205. parent.layui.layer.full(indexOpen);
  206. })
  207. })
  208. //添加页面提交数据
  209. form.on('submit(adds)', function(data){
  210. var formData = new FormData($('form')[0]);
  211. if(formData.getAll('img')[0].size == 0){
  212. layer.msg('请选择图片');
  213. return false;
  214. }
  215. var index = layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8}); //数据提交提示
  216. $.ajax({
  217. cache : false,
  218. type : "post",
  219. url : "/push/hotrotationform",
  220. data : formData, // 你的formid
  221. contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
  222. processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
  223. error : function(request) {
  224. layer.close(index);
  225. layer.msg("请联系管理员");
  226. },
  227. success : function(data) {
  228. if(data.data != null){
  229. layer.msg(ReturnInfo(data.data),{icon:5});
  230. return ;
  231. }
  232. layer.msg(data.msg);
  233. }
  234. });
  235. return false;
  236. });
  237. form.on('submit(edit)', function(data){
  238. var index = layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8}); //数据提交提示
  239. // var oindex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  240. var formData = new FormData($('form')[0]);
  241. $.ajax({
  242. type : "post",
  243. url : "/push/hotrotationeditform",
  244. data : formData,
  245. contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
  246. processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
  247. error : function(request) {
  248. layer.close(index);
  249. layer.msg("请联系管理员");
  250. },
  251. success : function(data) {
  252. if(data.data != null){
  253. layer.msg(ReturnInfo(data.data),{icon:5});
  254. return ;
  255. }
  256. layer.msg(data.msg);
  257. parent.layer.close(oindex); //再执行关闭
  258. }
  259. });
  260. return false;
  261. });
  262. })