468 lines
17 KiB
JavaScript
468 lines
17 KiB
JavaScript
/**
|
||
* jquery全局函数封装
|
||
*/
|
||
(function ($) {
|
||
/**
|
||
* Jquery类方法
|
||
*/
|
||
$.fn.extend({
|
||
|
||
superForm: function (option) {
|
||
// 默认选项
|
||
var options = $.extend(true, {}, {
|
||
buildData: $.noop,
|
||
validation: $.noop,
|
||
success: $.noop
|
||
}, option);
|
||
// 表单元素
|
||
var $form = $(this), $btnSubmit = $('.j-submit');
|
||
$form.validator({
|
||
onValid: function (validity) {
|
||
$(validity.field).next('.am-alert').hide();
|
||
},
|
||
/**
|
||
* 显示错误信息
|
||
* @param validity
|
||
*/
|
||
onInValid: function (validity) {
|
||
var $field = $(validity.field)
|
||
, $group = $field.parent()
|
||
, $alert = $group.find('.am-alert');
|
||
if ($field.data('validationMessage') !== undefined) {
|
||
// 使用自定义的提示信息 或 插件内置的提示信息
|
||
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
|
||
if (!$alert.length) {
|
||
$alert = $('<div class="am-alert am-alert-danger"></div>').hide().appendTo($group);
|
||
}
|
||
$alert.html(msg).show();
|
||
}
|
||
},
|
||
submit: function () {
|
||
if (this.isFormValid() === true) {
|
||
// 自定义验证
|
||
if (options.validation.call(true) === false) {
|
||
return false;
|
||
}
|
||
// 禁用按钮, 防止二次提交
|
||
$btnSubmit.attr('disabled', true);
|
||
// 表单提交
|
||
$form.ajaxSubmit({
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: options.buildData.call(true),
|
||
success: function (result) {
|
||
if (options.success === $.noop) {
|
||
result.code === 1 ? $.show_success(result.msg, result.url)
|
||
: $.show_error(result.msg);
|
||
} else {
|
||
options.success.call(true, result);
|
||
}
|
||
$btnSubmit.attr('disabled', false);
|
||
}
|
||
});
|
||
}
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 删除元素
|
||
*/
|
||
delete: function (index, url, msg) {
|
||
$(this).click(function () {
|
||
var param = {};
|
||
param[index] = $(this).attr('data-id');
|
||
layer.confirm(msg ? msg : '确定要删除吗？', {title: '友情提示'}
|
||
, function (index) {
|
||
$.post(url, param, function (result) {
|
||
result.code === 1 ? $.show_success(result.msg, result.url)
|
||
: $.show_error(result.msg);
|
||
});
|
||
layer.close(index);
|
||
}
|
||
);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 选择图片文件
|
||
* @param option
|
||
*/
|
||
selectImages: function (option) {
|
||
var $this = this
|
||
// 配置项
|
||
, defaults = {
|
||
name: 'iFile' // input name
|
||
, imagesList: '.uploader-list' // 图片列表容器
|
||
, imagesItem: '.file-item' // 图片元素容器
|
||
, imageDelete: '.file-item-delete' // 删除按钮元素
|
||
, multiple: false // 是否多选
|
||
, limit: null // 图片数量 (如果存在done回调函数则无效)
|
||
, done: null // 选择完成后的回调函数
|
||
}
|
||
, options = $.extend({}, defaults, option);
|
||
// 显示文件库 选择文件
|
||
$this.fileLibrary({
|
||
type: 'image'
|
||
, done: function (data, $touch) {
|
||
// 判断回调参数是否存在, 否则执行默认
|
||
if (typeof options.done === 'function') {
|
||
return options.done(data, $touch);
|
||
}
|
||
// 新增图片列表
|
||
var list = options.multiple ? data : [data[0]];
|
||
var $html = $(template('tpl-file-item', {list: list, name: options.name}))
|
||
, $imagesList = $this.next(options.imagesList);
|
||
if (
|
||
options.limit > 0
|
||
&& $imagesList.find(options.imagesItem).length + list.length > options.limit
|
||
) {
|
||
layer.msg('图片数量不能大于' + options.limit + '张', {anim: 6});
|
||
return false;
|
||
}
|
||
// 注册删除事件
|
||
$html.find(options.imageDelete).click(function () {
|
||
$(this).parent().remove();
|
||
});
|
||
// 渲染html
|
||
options.multiple ? $imagesList.append($html) : $imagesList.html($html);
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 封装：ajaxSubmit
|
||
* @param option
|
||
*/
|
||
myAjaxSubmit: function (option) {
|
||
var $this = this;
|
||
var options = $.extend({}, {
|
||
type: 'post'
|
||
, dataType: 'json'
|
||
, url: ''
|
||
, data: {}
|
||
, success: $.noop
|
||
}, option);
|
||
$this.ajaxSubmit({
|
||
type: options.type,
|
||
dataType: options.dataType,
|
||
url: options.url,
|
||
data: options.data,
|
||
success: function (result) {
|
||
result.code === 1 ? $.show_success(result.msg, result.url)
|
||
: $.show_error(result.msg);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
/**
|
||
* Jquery全局函数
|
||
*/
|
||
$.extend({
|
||
|
||
/**
|
||
* 对象转URL
|
||
*/
|
||
urlEncode: function (data) {
|
||
var _result = [];
|
||
for (var key in data) {
|
||
var value = null;
|
||
if (data.hasOwnProperty(key)) value = data[key];
|
||
if (value.constructor === Array) {
|
||
value.forEach(function (_value) {
|
||
_result.push(key + "=" + _value);
|
||
});
|
||
} else {
|
||
_result.push(key + '=' + value);
|
||
}
|
||
}
|
||
return _result.join('&');
|
||
},
|
||
|
||
/**
|
||
* 操作成功弹框提示
|
||
* @param msg
|
||
* @param url
|
||
*/
|
||
show_success: function (msg, url) {
|
||
layer.msg(msg, {
|
||
icon: 1
|
||
, time: 1200
|
||
// , anim: 1
|
||
, shade: 0.5
|
||
, end: function () {
|
||
(url !== undefined && url.length > 0) ? window.location = url : window.location.reload();
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 操作失败弹框提示
|
||
* @param msg
|
||
* @param reload
|
||
*/
|
||
show_error: function (msg, reload) {
|
||
var time = reload ? 1200 : 0;
|
||
layer.alert(msg, {
|
||
title: '提示'
|
||
, icon: 2
|
||
, time: time
|
||
, anim: 6
|
||
, end: function () {
|
||
reload && window.location.reload();
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 文件上传 (单文件)
|
||
* 支持同一页面多个上传元素
|
||
* $.uploadImage({
|
||
* pick: '.upload-file', // 上传按钮
|
||
* list: '.uploader-list' // 缩略图容器
|
||
* });
|
||
*/
|
||
uploadImage: function (option) {
|
||
// 文件大小
|
||
var maxSize = option.maxSize !== undefined ? option.maxSize : 2
|
||
// 初始化Web Uploader
|
||
, uploader = WebUploader.create({
|
||
// 选完文件后，是否自动上传。
|
||
auto: true,
|
||
// 允许重复上传
|
||
duplicate: true,
|
||
// 文件接收服务端。
|
||
server: STORE_URL + '/upload/image',
|
||
// 选择文件的按钮。可选。
|
||
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
||
pick: {
|
||
id: option.pick,
|
||
multiple: false
|
||
},
|
||
// 文件上传域的name
|
||
fileVal: 'iFile',
|
||
// 图片上传前不进行压缩
|
||
compress: false,
|
||
// 文件总数量
|
||
// fileNumLimit: 1,
|
||
// 文件大小2m => 2097152
|
||
fileSingleSizeLimit: maxSize * 1024 * 1024,
|
||
// 只允许选择图片文件。
|
||
accept: {
|
||
title: 'Images',
|
||
extensions: 'gif,jpg,jpeg,bmp,png',
|
||
mimeTypes: 'image/*'
|
||
},
|
||
// 缩略图配置
|
||
thumb: {
|
||
quality: 100,
|
||
crop: false,
|
||
allowMagnify: false
|
||
},
|
||
// 文件上传header扩展
|
||
headers: {
|
||
'Accept': 'application/json, text/javascript, */*; q=0.01',
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
});
|
||
// 验证大小
|
||
uploader.on('error', function (type) {
|
||
// console.log(type);
|
||
if (type === "F_DUPLICATE") {
|
||
// console.log("请不要重复选择文件！");
|
||
} else if (type === "F_EXCEED_SIZE") {
|
||
alert("文件大小不可超过" + maxSize + "m 哦！换个小点的文件吧！");
|
||
}
|
||
});
|
||
|
||
// 当有文件添加进来的时候
|
||
uploader.on('fileQueued', function (file) {
|
||
var $uploadFile = $('#rt_' + file.source.ruid).parent()
|
||
, $list = $uploadFile.next(option.list)
|
||
, $li = $(
|
||
'<div id="' + file.id + '" class="file-item thumbnail">' +
|
||
'<img>' +
|
||
'<input type="hidden" name="' + $uploadFile.data('name') + '" value="">' +
|
||
'<i class="iconfont icon-shanchu file-item-delete"></i>' +
|
||
'</div>'
|
||
),
|
||
$img = $li.find('img'),
|
||
$delete = $li.find('.file-item-delete');
|
||
// 删除文件
|
||
$delete.on('click', function () {
|
||
uploader.removeFile(file);
|
||
$delete.parent().remove();
|
||
});
|
||
// $list为容器jQuery实例
|
||
$list.empty().append($li);
|
||
// 创建缩略图
|
||
// 如果为非图片文件，可以不用调用此方法。
|
||
// thumbnailWidth x thumbnailHeight 为 100 x 100
|
||
uploader.makeThumb(file, function (error, src) {
|
||
if (error) {
|
||
$img.replaceWith('<span>不能预览</span>');
|
||
return;
|
||
}
|
||
$img.attr('src', src);
|
||
}, 1, 1);
|
||
});
|
||
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
|
||
uploader.on('uploadSuccess', function (file, response) {
|
||
if (response.code === 1) {
|
||
var $item = $('#' + file.id);
|
||
$item.addClass('upload-state-done')
|
||
.children('input[type=hidden]').val(response.data.path);
|
||
} else
|
||
uploader.uploadError(file);
|
||
});
|
||
// 文件上传失败
|
||
uploader.on('uploadError', function (file) {
|
||
uploader.uploadError(file);
|
||
});
|
||
// 显示上传出错信息
|
||
uploader.uploadError = function (file) {
|
||
var $li = $('#' + file.id),
|
||
$error = $li.find('div.error');
|
||
// 避免重复创建
|
||
if (!$error.length) {
|
||
$error = $('<div class="error"></div>').appendTo($li);
|
||
}
|
||
$error.text('上传失败');
|
||
};
|
||
},
|
||
|
||
/**
|
||
* 显示模态对话框
|
||
* @param option
|
||
*/
|
||
showModal: function (option) {
|
||
var options = $.extend({}, {
|
||
title: ''
|
||
, area: '340px'
|
||
, closeBtn: 1
|
||
, content: ''
|
||
, btn: ['确定', '取消']
|
||
, btnAlign: 'r'
|
||
, success: $.noop
|
||
, yes: $.noop
|
||
, uCheck: false
|
||
}, option);
|
||
|
||
var $content;
|
||
layer.open({
|
||
type: 1
|
||
, title: options.title
|
||
, closeBtn: options.closeBtn
|
||
, area: options.area
|
||
, offset: 'auto'
|
||
, anim: 1
|
||
, shade: 0.3
|
||
, btn: options.btn
|
||
, btnAlign: options.btnAlign
|
||
, content: options.content
|
||
, success: function (layero) {
|
||
$content = layero.find('.layui-layer-content');
|
||
if (options.uCheck) {
|
||
$content.find("input[type='checkbox'],input[type='radio']").uCheck();
|
||
}
|
||
options.success.call(true, $content);
|
||
}
|
||
, yes: function (index) {
|
||
if (options.yes.call(true, $content)) {
|
||
layer.close(index);
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
|
||
/**
|
||
* 获取指定天数的日期
|
||
* @param day
|
||
* @returns {string}
|
||
*/
|
||
getDay: function (day) {
|
||
var today = new Date();
|
||
var targetdaySeconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
|
||
today.setTime(targetdaySeconds); //注意，这行是关键代码
|
||
return today.getFullYear() + "-" + $.doHandleMonth(today.getMonth() + 1) + "-" + $.doHandleMonth(today.getDate());
|
||
},
|
||
|
||
/**
|
||
* 月份补0
|
||
* @param month
|
||
* @returns {*}
|
||
*/
|
||
doHandleMonth: function (month) {
|
||
return (month.toString().length === 1) ? ("0" + month) : month;
|
||
},
|
||
|
||
/**
|
||
* 二维数据查找
|
||
* @param array
|
||
* @param key
|
||
* @param value
|
||
* @returns {*}
|
||
*/
|
||
arrayFilterMultiple: function (array, key, value) {
|
||
for (var index in array) {
|
||
if (array[index][key] == value) return index;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
|
||
});
|
||
|
||
})(jQuery);
|
||
|
||
/**
|
||
* app.js
|
||
*/
|
||
$(function () {
|
||
|
||
/**
|
||
* 点击侧边开关 (一级)
|
||
*/
|
||
$('.switch-button').on('click', function () {
|
||
var header = $('.tpl-header'), wrapper = $('.tpl-content-wrapper'), leftSidebar = $('.left-sidebar');
|
||
if (leftSidebar.css('left') !== "0px") {
|
||
header.removeClass('active') && wrapper.removeClass('active') && leftSidebar.css('left', 0);
|
||
} else {
|
||
header.addClass('active') && wrapper.addClass('active') && leftSidebar.css('left', -280);
|
||
}
|
||
});
|
||
|
||
/**
|
||
* 侧边栏开关 (二级)
|
||
*/
|
||
$('.sidebar-nav-sub-title').click(function () {
|
||
$(this).toggleClass('active');
|
||
});
|
||
|
||
// 刷新按钮
|
||
$('.refresh-button').click(function () {
|
||
window.location.reload();
|
||
});
|
||
|
||
// 删除图片 (数据库已有的)
|
||
$('.file-item-delete').click(function () {
|
||
var $this = $(this)
|
||
, noClick = $this.data('noClick')
|
||
, name = $this.data('name');
|
||
|
||
if (noClick) {
|
||
return false;
|
||
}
|
||
layer.confirm('您确定要删除该' + (name ? name : '图片') + '吗？', {
|
||
title: '友情提示'
|
||
}, function (index) {
|
||
$this.parent().remove();
|
||
layer.close(index);
|
||
});
|
||
});
|
||
|
||
});
|