(function () {
/***
* 配送区域表格
* @param param
* @constructor
*/
function Delivery(param) {
this.tableElement = param.table;
this.RegionalChoice = new RegionalChoice(param.regional, param.datas);
this.initCreateRegion();
this.clickEditEvent();
this.clickDeleteEvent();
this.clickMethodEvent();
}
Delivery.prototype = {
/**
* 初始化添加区域事件
*/
initCreateRegion: function () {
var _this = this;
$(_this.tableElement).find('.add-region').click(function () {
// 渲染地域
var str = '';
$(_this.tableElement).find('input[type=hidden]').each(function (index, item) {
str += $(item).val() + ',';
});
var alreadyIds = str.length > 0 ? str.substring(0, str.length - 1).split(',') : [];
if (alreadyIds.length === 373) {
layer.msg('已经选择了所有区域~');
return false;
}
_this.RegionalChoice.render(alreadyIds);
_this.showRegionalModal(function () {
// 弹窗交互完成
var Checked = _this.RegionalChoice.getCheckedContent();
Checked.ids.length > 0 && _this.appendRulesTr(Checked.content, Checked.ids);
});
});
},
/**
* 创建可配送区域规则
*/
appendRulesTr: function (regionStr, checkedIds) {
var $html = $(
'' +
'| ' +
' ' +
' ' + regionStr +
' ' +
' ' +
' 编辑' +
' 删除' +
' ' +
' ' +
' | ' +
'' +
' ' +
' | ' +
'' +
' ' +
' | ' +
'' +
' ' +
' | ' +
'' +
' ' +
' | ' +
'
'
);
$(this.tableElement).children("tbody").find('tr:last').before($html);
},
/**
* 显示区域选择窗口
* @param callback
*/
showRegionalModal: function (callback) {
var _this = this;
var area = [$(window).width() > 800 ? '800px' : '95%', $(window).height() > 600 ? '600px' : '95%'];
layer.open({
type: 1,
shade: false,
title: '选择可配送区域',
btn: ['确定', '取消'],
area: area, //宽高
content: $('.regional-choice'),
yes: function (index) {
callback && callback();
layer.close(index);
},
end: function () {
// 销毁已选中区域
_this.RegionalChoice.destroy();
}
});
},
/**
* 编辑区域事件
*/
clickEditEvent: function () {
var _this = this
, $table = $(_this.tableElement);
$table.on('click', '.edit', function () {
// 渲染地域
var $html = $(this).parent().parent()
, $content = $html.find('.selected-content')
, $input = $html.find('input[type=hidden]');
_this.RegionalChoice.render([], $input.val().split(','));
// 显示地区选择弹窗
_this.showRegionalModal(function () {
// 弹窗交互完成
var Checked = _this.RegionalChoice.getCheckedContent();
if (Checked.ids.length > 0) {
$content.html(Checked.content);
$input.val(Checked.ids);
}
});
});
},
/**
* 删除区域事件
*/
clickDeleteEvent: function () {
var $table = $(this.tableElement);
$table.on('click', '.delete', function () {
var $delete = $(this);
layer.confirm('确定要删除吗？', function (index) {
$delete.parents('tr').remove();
layer.close(index);
});
});
},
/**
* 切换计费方式
*/
clickMethodEvent: function () {
$('input:radio[name="delivery[method]"]').change(function (e) {
var $first = $('.first')
, $additional = $('.additional');
if (e.currentTarget.value === '20')
$first.text('首重 (Kg)') && $additional.text('续重 (Kg)');
else
$first.text('首件 (个)') && $additional.text('续件 (个)');
});
},
};
window.Delivery = Delivery;
})(window);
//******* 地区选择插件 *******//
(function () {
/***
* 地区选择插件
* @param container
* @param datas
* @constructor
*/
function RegionalChoice(container, datas) {
this.container = container;
this.datas = datas;
this.initInterface(); // 初始化地域界面
}
RegionalChoice.prototype = {
/**
* 条件渲染
* @param alreadyIds 已存在的区域ID: 用于新增
* @param checkedIds 已选中的区域ID: 用于编辑
* @param
*/
render: function (alreadyIds, checkedIds) {
alreadyIds = alreadyIds || [];
alreadyIds.length > 0 && this.setAlready(alreadyIds);
checkedIds = checkedIds || [];
checkedIds.length > 0 && this.setChecked(checkedIds);
},
/**
* 初始化地域界面
*/
initInterface: function () {
var _this = this;
$(_this.container).append(
$('', {
class: 'place-div'
}).append(
$('', {}).append(
$('', {
class: 'checkbtn'
})
.append(
$('', {})
// 全选框
.append(
$('', {
type: 'checkbox',
change: function () {
var checked = $(this).is(':checked'),
$allCheckbox = $('.place').find('input[type=checkbox]');
$('.ratio').html('');
$allCheckbox.prop('checked', checked);
}
})
)
.append(' 全国')
)
.append(
$('', {
class: 'clearCheck',
text: '清空',
click: function () {
_this.destroy();
}
})
)
).append(
// 省份
$('', {
class: 'place clearfloat'
}).append(function () {
return _this.getSmallPlace();
}())
)
)
);
},
/**
* 遍历省份
* @returns {jQuery}
* @constructor
*/
getSmallPlace: function () {
var _this = this;
return $('', {
class: 'smallplace clearfloat'
}).append(
$.map(_this.datas, function (item) {
return $('', {
class: 'place-tooltips'
})
.append(
$('', {})
.append(
$('', {
id: item.id,
type: 'checkbox',
class: 'province',
change: function () {
var $this = $(this)
, small = $this.parent().next('.citys').find('input')
, $placeTooltips = $this.parents('.place-tooltips');
if ($this.prop('checked')) {
small.prop('checked', true);
$placeTooltips.find('.ratio').html('(' + small.length + '/' + small.length + ')');
} else {
small.prop('checked', false);
$placeTooltips.find('.ratio').html('');
}
}
})
)
.append(
// 省份名称
$('', {
class: 'province_name',
text: item.name
})
)
.append(function () {
// 城市数量
if (item.city) {
return $('', {
class: 'ratio'
})
}
})
).append(function () {
// 城市列表
if (item.city) {
return $('', {
class: 'citys'
}).append(
$('', {
class: 'jt'
}).append($('', {}))
).append(
_this.getSmallCitys(item.city)
)
}
})
})
)
},
/**
* 遍历城市
* @param datas
* @returns {jQuery}
* @constructor
*/
getSmallCitys: function (datas) {
return $('', {
class: 'row-div clearfloat'
}).append(
$.map(datas, function (item) {
return $('', {}).append(
$('', {}).append(
$('', {
id: item.id,
type: 'checkbox',
name: 'city[]',
class: 'city',
change: function () {
var $citys = $(this).parents('.citys')
, $placeTooltips = $(this).parents('.place-tooltips')
, tf = $citys.find('input:checked').length
, $province = $placeTooltips.find('.province')
, $ratio = $placeTooltips.find('.ratio');
if (tf > 0) {
$province.prop('checked', true);
$ratio.html('(' + tf + '/' + $citys.find('input').length + ')');
} else if (tf === 0) {
$province.prop('checked', false);
$ratio.html('');
}
}
})
).append(
$('', {
text: item.name
})
)
)
})
)
},
/**
* 获取已选中的省市id
* @returns {array}
* @constructor
*/
getCheckedIds: function () {
var checkedIds = [];
$('input[type=checkbox][name="city[]"]:checked').each(function (index, item) {
checkedIds.push(item.id);
});
return checkedIds;
},
/**
* 获取已选中的省市id (树状)
* @returns {Array}
*/
getCheckedTree: function () {
var _this = this;
// 遍历省份
var data = [];
$('input.province:checked').each(function (index, province) {
var $this = $(this)
, $citys = $this.parent().next()
, $cityInputChecked = $citys.find('input.city:checked')
, cityData = []
, cityTotal = Object.keys(_this.datas[province.id].city).length;
// 遍历城市
if (cityTotal !== $cityInputChecked.length) {
$cityInputChecked.each(function (index, item) {
cityData.push({id: item.id, name: $(this).next().text()});
});
}
data.push({
id: province.id,
name: $this.next().text(),
city: cityData
});
});
return data;
},
/**
* 获取已选中地区内容
* @returns {{content: string, checkedIds: *|Array}}
*/
getCheckedContent: function () {
// 获取已选中的省市id
var dataTree = this.getCheckedTree()
, checkedIds = this.getCheckedIds()
, content = '';
if (checkedIds.length === 373) {
content = '全国';
} else {
var str = '';
dataTree.forEach(function (item) {
str += item.name;
if (item.city.length > 0) {
var cityStr = '';
item.city.forEach(function (city) {
cityStr += city.name + '、';
});
str += ' ('
+ cityStr.substring(0, cityStr.length - 1) + ')';
}
str += '、';
});
content = str.substring(0, str.length - 1);
}
return {
content: content,
ids: checkedIds
};
},
/**
* 批量选中
* @param checkedIds 已选中的区域ID: 用于编辑
* @constructor
*/
setChecked: function (checkedIds) {
var $place = $('.place-div');
$.each(checkedIds, function (i, id) {
$place.find('#' + id).trigger('click');
});
},
/**
* 批量删除已存在的区域
* @param alreadyIds 已存在的区域ID: 用于新增
* @constructor
*/
setAlready: function (alreadyIds) {
var $place = $('.place-div');
$.each(alreadyIds, function (i, id) {
var $p = $place.find('#' + id).parent().parent()
, $siblings = $p.siblings();
$siblings.length > 0 ? $p.remove() : $p.closest('.place-tooltips').remove();
});
},
/**
* 清空
*/
destroy: function () {
var $place = $('.place-div');
$place.find('input[type=checkbox]').prop('checked', false);
$place.find('.ratio').html('');
}
};
window.RegionalChoice = RegionalChoice;
})(window);