app.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. /**
  2. * jquery全局函数封装
  3. */
  4. (function ($) {
  5. /**
  6. * Jquery类方法
  7. */
  8. $.fn.extend({
  9. superForm: function (option) {
  10. // 默认选项
  11. var options = $.extend(true, {}, {
  12. buildData: $.noop,
  13. validation: $.noop,
  14. success: $.noop
  15. }, option);
  16. // 表单元素
  17. var $form = $(this), $btnSubmit = $('.j-submit');
  18. $form.validator({
  19. onValid: function (validity) {
  20. $(validity.field).next('.am-alert').hide();
  21. },
  22. /**
  23. * 显示错误信息
  24. * @param validity
  25. */
  26. onInValid: function (validity) {
  27. var $field = $(validity.field)
  28. , $group = $field.parent()
  29. , $alert = $group.find('.am-alert');
  30. if ($field.data('validationMessage') !== undefined) {
  31. // 使用自定义的提示信息 或 插件内置的提示信息
  32. var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
  33. if (!$alert.length) {
  34. $alert = $('<div class="am-alert am-alert-danger"></div>').hide().appendTo($group);
  35. }
  36. $alert.html(msg).show();
  37. }
  38. },
  39. submit: function () {
  40. if (this.isFormValid() === true) {
  41. // 自定义验证
  42. if (options.validation.call(true) === false) {
  43. return false;
  44. }
  45. // 禁用按钮, 防止二次提交
  46. $btnSubmit.attr('disabled', true);
  47. // 表单提交
  48. $form.ajaxSubmit({
  49. type: 'post',
  50. dataType: 'json',
  51. data: options.buildData.call(true),
  52. success: function (result) {
  53. if (options.success === $.noop) {
  54. result.code === 1 ? $.show_success(result.msg, result.url)
  55. : $.show_error(result.msg);
  56. } else {
  57. options.success.call(true, result);
  58. }
  59. $btnSubmit.attr('disabled', false);
  60. }
  61. });
  62. }
  63. return false;
  64. }
  65. });
  66. },
  67. /**
  68. * 删除元素
  69. */
  70. delete: function (index, url, msg) {
  71. $(this).click(function () {
  72. var param = {};
  73. param[index] = $(this).attr('data-id');
  74. layer.confirm(msg ? msg : '确定要删除吗?', {title: '友情提示'}
  75. , function (index) {
  76. $.post(url, param, function (result) {
  77. result.code === 1 ? $.show_success(result.msg, result.url)
  78. : $.show_error(result.msg);
  79. });
  80. layer.close(index);
  81. }
  82. );
  83. });
  84. },
  85. /**
  86. * 选择图片文件
  87. * @param option
  88. */
  89. selectImages: function (option) {
  90. var $this = this
  91. // 配置项
  92. , defaults = {
  93. name: 'iFile' // input name
  94. , imagesList: '.uploader-list' // 图片列表容器
  95. , imagesItem: '.file-item' // 图片元素容器
  96. , imageDelete: '.file-item-delete' // 删除按钮元素
  97. , multiple: false // 是否多选
  98. , limit: null // 图片数量 (如果存在done回调函数则无效)
  99. , done: null // 选择完成后的回调函数
  100. }
  101. , options = $.extend({}, defaults, option);
  102. // 显示文件库 选择文件
  103. $this.fileLibrary({
  104. type: 'image'
  105. , done: function (data, $touch) {
  106. // 判断回调参数是否存在, 否则执行默认
  107. if (typeof options.done === 'function') {
  108. return options.done(data, $touch);
  109. }
  110. // 新增图片列表
  111. var list = options.multiple ? data : [data[0]];
  112. var $html = $(template('tpl-file-item', {list: list, name: options.name}))
  113. , $imagesList = $this.next(options.imagesList);
  114. if (
  115. options.limit > 0
  116. && $imagesList.find(options.imagesItem).length + list.length > options.limit
  117. ) {
  118. layer.msg('图片数量不能大于' + options.limit + '张', {anim: 6});
  119. return false;
  120. }
  121. // 注册删除事件
  122. $html.find(options.imageDelete).click(function () {
  123. $(this).parent().remove();
  124. });
  125. // 渲染html
  126. options.multiple ? $imagesList.append($html) : $imagesList.html($html);
  127. }
  128. });
  129. },
  130. /**
  131. * 封装:ajaxSubmit
  132. * @param option
  133. */
  134. myAjaxSubmit: function (option) {
  135. var $this = this;
  136. var options = $.extend({}, {
  137. type: 'post'
  138. , dataType: 'json'
  139. , url: ''
  140. , data: {}
  141. , success: $.noop
  142. }, option);
  143. $this.ajaxSubmit({
  144. type: options.type,
  145. dataType: options.dataType,
  146. url: options.url,
  147. data: options.data,
  148. success: function (result) {
  149. result.code === 1 ? $.show_success(result.msg, result.url)
  150. : $.show_error(result.msg);
  151. }
  152. });
  153. }
  154. });
  155. /**
  156. * Jquery全局函数
  157. */
  158. $.extend({
  159. /**
  160. * 对象转URL
  161. */
  162. urlEncode: function (data) {
  163. var _result = [];
  164. for (var key in data) {
  165. var value = null;
  166. if (data.hasOwnProperty(key)) value = data[key];
  167. if (value.constructor === Array) {
  168. value.forEach(function (_value) {
  169. _result.push(key + "=" + _value);
  170. });
  171. } else {
  172. _result.push(key + '=' + value);
  173. }
  174. }
  175. return _result.join('&');
  176. },
  177. /**
  178. * 操作成功弹框提示
  179. * @param msg
  180. * @param url
  181. */
  182. show_success: function (msg, url) {
  183. layer.msg(msg, {
  184. icon: 1
  185. , time: 1200
  186. // , anim: 1
  187. , shade: 0.5
  188. , end: function () {
  189. (url !== undefined && url.length > 0) ? window.location = url : window.location.reload();
  190. }
  191. });
  192. },
  193. /**
  194. * 操作失败弹框提示
  195. * @param msg
  196. * @param reload
  197. */
  198. show_error: function (msg, reload) {
  199. var time = reload ? 1200 : 0;
  200. layer.alert(msg, {
  201. title: '提示'
  202. , icon: 2
  203. , time: time
  204. , anim: 6
  205. , end: function () {
  206. reload && window.location.reload();
  207. }
  208. });
  209. },
  210. /**
  211. * 文件上传 (单文件)
  212. * 支持同一页面多个上传元素
  213. * $.uploadImage({
  214. * pick: '.upload-file', // 上传按钮
  215. * list: '.uploader-list' // 缩略图容器
  216. * });
  217. */
  218. uploadImage: function (option) {
  219. // 文件大小
  220. var maxSize = option.maxSize !== undefined ? option.maxSize : 2
  221. // 初始化Web Uploader
  222. , uploader = WebUploader.create({
  223. // 选完文件后,是否自动上传。
  224. auto: true,
  225. // 允许重复上传
  226. duplicate: true,
  227. // 文件接收服务端。
  228. server: STORE_URL + '/upload/image',
  229. // 选择文件的按钮。可选。
  230. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  231. pick: {
  232. id: option.pick,
  233. multiple: false
  234. },
  235. // 文件上传域的name
  236. fileVal: 'iFile',
  237. // 图片上传前不进行压缩
  238. compress: false,
  239. // 文件总数量
  240. // fileNumLimit: 1,
  241. // 文件大小2m => 2097152
  242. fileSingleSizeLimit: maxSize * 1024 * 1024,
  243. // 只允许选择图片文件。
  244. accept: {
  245. title: 'Images',
  246. extensions: 'gif,jpg,jpeg,bmp,png',
  247. mimeTypes: 'image/*'
  248. },
  249. // 缩略图配置
  250. thumb: {
  251. quality: 100,
  252. crop: false,
  253. allowMagnify: false
  254. },
  255. // 文件上传header扩展
  256. headers: {
  257. 'Accept': 'application/json, text/javascript, */*; q=0.01',
  258. 'X-Requested-With': 'XMLHttpRequest'
  259. }
  260. });
  261. // 验证大小
  262. uploader.on('error', function (type) {
  263. // console.log(type);
  264. if (type === "F_DUPLICATE") {
  265. // console.log("请不要重复选择文件!");
  266. } else if (type === "F_EXCEED_SIZE") {
  267. alert("文件大小不可超过" + maxSize + "m 哦!换个小点的文件吧!");
  268. }
  269. });
  270. // 当有文件添加进来的时候
  271. uploader.on('fileQueued', function (file) {
  272. var $uploadFile = $('#rt_' + file.source.ruid).parent()
  273. , $list = $uploadFile.next(option.list)
  274. , $li = $(
  275. '<div id="' + file.id + '" class="file-item thumbnail">' +
  276. '<img>' +
  277. '<input type="hidden" name="' + $uploadFile.data('name') + '" value="">' +
  278. '<i class="iconfont icon-shanchu file-item-delete"></i>' +
  279. '</div>'
  280. ),
  281. $img = $li.find('img'),
  282. $delete = $li.find('.file-item-delete');
  283. // 删除文件
  284. $delete.on('click', function () {
  285. uploader.removeFile(file);
  286. $delete.parent().remove();
  287. });
  288. // $list为容器jQuery实例
  289. $list.empty().append($li);
  290. // 创建缩略图
  291. // 如果为非图片文件,可以不用调用此方法。
  292. // thumbnailWidth x thumbnailHeight 为 100 x 100
  293. uploader.makeThumb(file, function (error, src) {
  294. if (error) {
  295. $img.replaceWith('<span>不能预览</span>');
  296. return;
  297. }
  298. $img.attr('src', src);
  299. }, 1, 1);
  300. });
  301. // 文件上传成功,给item添加成功class, 用样式标记上传成功。
  302. uploader.on('uploadSuccess', function (file, response) {
  303. if (response.code === 1) {
  304. var $item = $('#' + file.id);
  305. $item.addClass('upload-state-done')
  306. .children('input[type=hidden]').val(response.data.path);
  307. } else
  308. uploader.uploadError(file);
  309. });
  310. // 文件上传失败
  311. uploader.on('uploadError', function (file) {
  312. uploader.uploadError(file);
  313. });
  314. // 显示上传出错信息
  315. uploader.uploadError = function (file) {
  316. var $li = $('#' + file.id),
  317. $error = $li.find('div.error');
  318. // 避免重复创建
  319. if (!$error.length) {
  320. $error = $('<div class="error"></div>').appendTo($li);
  321. }
  322. $error.text('上传失败');
  323. };
  324. },
  325. /**
  326. * 显示模态对话框
  327. * @param option
  328. */
  329. showModal: function (option) {
  330. var options = $.extend({}, {
  331. title: ''
  332. , area: '340px'
  333. , closeBtn: 1
  334. , content: ''
  335. , btn: ['确定', '取消']
  336. , btnAlign: 'r'
  337. , success: $.noop
  338. , yes: $.noop
  339. , uCheck: false
  340. }, option);
  341. var $content;
  342. layer.open({
  343. type: 1
  344. , title: options.title
  345. , closeBtn: options.closeBtn
  346. , area: options.area
  347. , offset: 'auto'
  348. , anim: 1
  349. , shade: 0.3
  350. , btn: options.btn
  351. , btnAlign: options.btnAlign
  352. , content: options.content
  353. , success: function (layero) {
  354. $content = layero.find('.layui-layer-content');
  355. if (options.uCheck) {
  356. $content.find("input[type='checkbox'],input[type='radio']").uCheck();
  357. }
  358. options.success.call(true, $content);
  359. }
  360. , yes: function (index) {
  361. if (options.yes.call(true, $content)) {
  362. layer.close(index);
  363. }
  364. }
  365. });
  366. },
  367. /**
  368. * 获取指定天数的日期
  369. * @param day
  370. * @returns {string}
  371. */
  372. getDay: function (day) {
  373. var today = new Date();
  374. var targetdaySeconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
  375. today.setTime(targetdaySeconds); //注意,这行是关键代码
  376. return today.getFullYear() + "-" + $.doHandleMonth(today.getMonth() + 1) + "-" + $.doHandleMonth(today.getDate());
  377. },
  378. /**
  379. * 月份补0
  380. * @param month
  381. * @returns {*}
  382. */
  383. doHandleMonth: function (month) {
  384. return (month.toString().length === 1) ? ("0" + month) : month;
  385. },
  386. /**
  387. * 二维数据查找
  388. * @param array
  389. * @param key
  390. * @param value
  391. * @returns {*}
  392. */
  393. arrayFilterMultiple: function (array, key, value) {
  394. for (var index in array) {
  395. if (array[index][key] == value) return index;
  396. }
  397. return false;
  398. }
  399. });
  400. })(jQuery);
  401. /**
  402. * app.js
  403. */
  404. $(function () {
  405. /**
  406. * 点击侧边开关 (一级)
  407. */
  408. $('.switch-button').on('click', function () {
  409. var header = $('.tpl-header'), wrapper = $('.tpl-content-wrapper'), leftSidebar = $('.left-sidebar');
  410. if (leftSidebar.css('left') !== "0px") {
  411. header.removeClass('active') && wrapper.removeClass('active') && leftSidebar.css('left', 0);
  412. } else {
  413. header.addClass('active') && wrapper.addClass('active') && leftSidebar.css('left', -280);
  414. }
  415. });
  416. /**
  417. * 侧边栏开关 (二级)
  418. */
  419. $('.sidebar-nav-sub-title').click(function () {
  420. $(this).toggleClass('active');
  421. });
  422. // 刷新按钮
  423. $('.refresh-button').click(function () {
  424. window.location.reload();
  425. });
  426. // 删除图片 (数据库已有的)
  427. $('.file-item-delete').click(function () {
  428. var $this = $(this)
  429. , noClick = $this.data('noClick')
  430. , name = $this.data('name');
  431. if (noClick) {
  432. return false;
  433. }
  434. layer.confirm('您确定要删除该' + (name ? name : '图片') + '吗?', {
  435. title: '友情提示'
  436. }, function (index) {
  437. $this.parent().remove();
  438. layer.close(index);
  439. });
  440. });
  441. });