314 lines
14 KiB
JavaScript
314 lines
14 KiB
JavaScript
|
(function () {
|
||
|
|
|
||
|
|
/***
|
||
|
|
* 配送区域设置
|
||
|
|
* @param options
|
||
|
|
* @constructor
|
||
|
|
*/
|
||
|
|
function delivery(options) {
|
||
|
|
var option = $.extend(true, {
|
||
|
|
el: '#app',
|
||
|
|
name: '',
|
||
|
|
method: 10,
|
||
|
|
regions: {},
|
||
|
|
cityCount: 0,
|
||
|
|
formData: []
|
||
|
|
}, options);
|
||
|
|
var app = this.createVueApp(option);
|
||
|
|
app.initializeForms();
|
||
|
|
}
|
||
|
|
|
||
|
|
delivery.prototype = {
|
||
|
|
|
||
|
|
createVueApp: function (option) {
|
||
|
|
return new Vue({
|
||
|
|
el: option.el,
|
||
|
|
data: {
|
||
|
|
// 模板名称
|
||
|
|
name: option.name,
|
||
|
|
// 计费方式
|
||
|
|
method: option.method,
|
||
|
|
// 所有地区
|
||
|
|
regions: option.regions,
|
||
|
|
// 全选状态
|
||
|
|
checkAll: false,
|
||
|
|
// 当前选择的地区id集
|
||
|
|
checked: {
|
||
|
|
province: [],
|
||
|
|
citys: []
|
||
|
|
},
|
||
|
|
// 禁止选择的地区id集
|
||
|
|
disable: {
|
||
|
|
province: [],
|
||
|
|
citys: [],
|
||
|
|
treeData: {}
|
||
|
|
},
|
||
|
|
// 已选择的区域和运费form项
|
||
|
|
forms: []
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
// 初始化forms
|
||
|
|
initializeForms: function () {
|
||
|
|
var app = this;
|
||
|
|
if (!option.formData.length) return false;
|
||
|
|
option.formData.forEach(function (form) {
|
||
|
|
// 转换为整数型
|
||
|
|
for (var key in form.citys) {
|
||
|
|
if (form.citys.hasOwnProperty(key)) {
|
||
|
|
form.citys[key] = parseInt(form.citys[key]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
form['treeData'] = app.getTreeData({
|
||
|
|
province: form.province,
|
||
|
|
citys: form.citys
|
||
|
|
});
|
||
|
|
app.forms.push(form);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 添加配送区域
|
||
|
|
onAddRegionEvent: function () {
|
||
|
|
var app = this;
|
||
|
|
// 判断是否选择了全国
|
||
|
|
var total = 0;
|
||
|
|
app.forms.forEach(function (item) {
|
||
|
|
total += item.citys.length;
|
||
|
|
});
|
||
|
|
if (total >= option.cityCount) {
|
||
|
|
layer.msg('已经选择了所有区域~');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// 显示选择可配送区域弹窗
|
||
|
|
app.onShowCheckBox({
|
||
|
|
complete: function (checked) {
|
||
|
|
// 选择完成后新增form项
|
||
|
|
app.forms.push({
|
||
|
|
province: checked.province,
|
||
|
|
citys: checked.citys,
|
||
|
|
treeData: app.getTreeData(checked)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 全选
|
||
|
|
onCheckAll: function (checked) {
|
||
|
|
var app = this;
|
||
|
|
app.checkAll = checked;
|
||
|
|
// 遍历能选择的地区
|
||
|
|
for (var key in app.regions) {
|
||
|
|
if (app.regions.hasOwnProperty(key)) {
|
||
|
|
var item = app.regions[key];
|
||
|
|
if (!app.isPropertyExist(item.id, app.disable.treeData)
|
||
|
|
|| !app.disable.treeData[item.id].isAllCitys) {
|
||
|
|
var provinceId = parseInt(item.id);
|
||
|
|
this.checkedProvince(provinceId, app.checkAll);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 标记不可选的地区
|
||
|
|
onDisableRegion: function (ignoreFormIndex) {
|
||
|
|
var app = this;
|
||
|
|
// 清空禁选地区
|
||
|
|
var disable = {province: [], citys: []};
|
||
|
|
for (var key in app.forms) {
|
||
|
|
if (app.forms.hasOwnProperty(key)) {
|
||
|
|
if (ignoreFormIndex > -1 && ignoreFormIndex === parseInt(key)) continue;
|
||
|
|
var item = app.forms[key];
|
||
|
|
disable.province = app.arrayMerge(disable.province, item.province);
|
||
|
|
disable.citys = app.arrayMerge(disable.citys, item.citys);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
app.disable = {
|
||
|
|
province: disable.province,
|
||
|
|
citys: disable.citys,
|
||
|
|
treeData: app.getTreeData(disable)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
// 将选中的区域id集格式化为树状格式
|
||
|
|
getTreeData: function (checkedData) {
|
||
|
|
var app = this;
|
||
|
|
var treeData = {};
|
||
|
|
checkedData.province.forEach(function (provinceId) {
|
||
|
|
var province = app.regions[provinceId]
|
||
|
|
, citys = []
|
||
|
|
, cityCount = 0;
|
||
|
|
for (var cityIndex in province.city) {
|
||
|
|
if (province.city.hasOwnProperty(cityIndex)) {
|
||
|
|
var cityItem = province.city[cityIndex];
|
||
|
|
if (app.inArray(cityItem.id, checkedData.citys)) {
|
||
|
|
citys.push({id: cityItem.id, name: cityItem.name});
|
||
|
|
}
|
||
|
|
cityCount++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
treeData[province.id] = {
|
||
|
|
id: province.id,
|
||
|
|
name: province.name,
|
||
|
|
citys: citys,
|
||
|
|
isAllCitys: citys.length === cityCount
|
||
|
|
};
|
||
|
|
});
|
||
|
|
return treeData;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 编辑配送区域
|
||
|
|
onEditerForm: function (formIndex, formItem) {
|
||
|
|
var app = this;
|
||
|
|
// 显示选择可配送区域弹窗
|
||
|
|
app.onShowCheckBox({
|
||
|
|
editerFormIndex: formIndex,
|
||
|
|
checkedData: {
|
||
|
|
province: formItem.province,
|
||
|
|
citys: formItem.citys
|
||
|
|
},
|
||
|
|
complete: function (data) {
|
||
|
|
// var formItem = app.forms[formIndex];
|
||
|
|
formItem.province = data.province;
|
||
|
|
formItem.citys = data.citys;
|
||
|
|
formItem.treeData = app.getTreeData(data);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 删除配送区域
|
||
|
|
onDeleteForm: function (formIndex) {
|
||
|
|
var app = this;
|
||
|
|
layer.confirm('确定要删除吗？'
|
||
|
|
, {title: '友情提示'}
|
||
|
|
, function (index) {
|
||
|
|
app.forms.splice(formIndex, 1);
|
||
|
|
layer.close(index);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 显示选择可配送区域弹窗
|
||
|
|
onShowCheckBox: function (option) {
|
||
|
|
var app = this;
|
||
|
|
var options = $.extend(true, {
|
||
|
|
editerFormIndex: -1,
|
||
|
|
checkedData: null,
|
||
|
|
complete: $.noop()
|
||
|
|
}, option);
|
||
|
|
// 已选中的数据
|
||
|
|
app.checked = options.checkedData ? options.checkedData : {
|
||
|
|
province: [],
|
||
|
|
citys: []
|
||
|
|
};
|
||
|
|
// 标记不可选的地区
|
||
|
|
app.onDisableRegion(options.editerFormIndex);
|
||
|
|
// 取消全选按钮
|
||
|
|
app.checkAll = false;
|
||
|
|
// 开启弹窗
|
||
|
|
layer.open({
|
||
|
|
type: 1,
|
||
|
|
shade: false,
|
||
|
|
title: '选择可配送区域',
|
||
|
|
btn: ['确定', '取消'],
|
||
|
|
area: ['820px', '520px'], //宽高
|
||
|
|
content: $(this.$refs['choice']),
|
||
|
|
yes: function (index) {
|
||
|
|
if (app.checked.citys.length <= 0) {
|
||
|
|
layer.msg('请选择区域~');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
options.complete(app.checked);
|
||
|
|
layer.close(index);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 选择省份
|
||
|
|
onCheckedProvince: function (e) {
|
||
|
|
var provinceId = parseInt(e.target.value);
|
||
|
|
this.checkedProvince(provinceId, e.target.checked);
|
||
|
|
},
|
||
|
|
|
||
|
|
checkedProvince: function (provinceId, checked) {
|
||
|
|
var app = this;
|
||
|
|
// 更新省份选择
|
||
|
|
var index = app.checked.province.indexOf(provinceId);
|
||
|
|
if (!checked) {
|
||
|
|
index > -1 && app.checked.province.splice(index, 1);
|
||
|
|
} else {
|
||
|
|
index === -1 && app.checked.province.push(provinceId);
|
||
|
|
}
|
||
|
|
// 更新城市选择
|
||
|
|
var cityIds = app.regions[provinceId].city;
|
||
|
|
for (var cityIndex in cityIds) {
|
||
|
|
if (cityIds.hasOwnProperty(cityIndex)) {
|
||
|
|
var cityId = parseInt(cityIndex);
|
||
|
|
var checkedIndex = app.checked.citys.indexOf(cityId);
|
||
|
|
if (!checked) {
|
||
|
|
checkedIndex > -1 && app.checked.citys.splice(checkedIndex, 1)
|
||
|
|
} else {
|
||
|
|
checkedIndex === -1 && app.checked.citys.push(cityId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 选择城市
|
||
|
|
onCheckedCity: function (e, provinceId) {
|
||
|
|
var cityId = parseInt(e.target.value);
|
||
|
|
if (!e.target.checked) {
|
||
|
|
var index = this.checked.citys.indexOf(cityId);
|
||
|
|
index > -1 && this.checked.citys.splice(index, 1)
|
||
|
|
} else {
|
||
|
|
this.checked.citys.push(cityId);
|
||
|
|
}
|
||
|
|
// 更新省份选中状态
|
||
|
|
this.onUpdateProvinceChecked(parseInt(provinceId));
|
||
|
|
},
|
||
|
|
|
||
|
|
// 更新省份选中状态
|
||
|
|
onUpdateProvinceChecked: function (provinceId) {
|
||
|
|
var provinceIndex = this.checked.province.indexOf(provinceId);
|
||
|
|
var isExist = provinceIndex > -1;
|
||
|
|
if (!this.onHasCityChecked(provinceId)) {
|
||
|
|
isExist && this.checked.province.splice(provinceIndex, 1);
|
||
|
|
} else {
|
||
|
|
!isExist && this.checked.province.push(provinceId);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 是否存在城市被选中
|
||
|
|
onHasCityChecked: function (provinceId) {
|
||
|
|
var app = this;
|
||
|
|
var cityIds = this.regions[provinceId].city;
|
||
|
|
for (var cityId in cityIds) {
|
||
|
|
if (cityIds.hasOwnProperty(cityId)
|
||
|
|
&& app.inArray(parseInt(cityId), app.checked.citys))
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 数组中是否存在指定的值
|
||
|
|
inArray: function (val, array) {
|
||
|
|
return array.indexOf(val) > -1;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 对象的属性是否存在
|
||
|
|
isPropertyExist: function (key, obj) {
|
||
|
|
return obj.hasOwnProperty(key);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 数组合并
|
||
|
|
arrayMerge: function (arr1, arr2) {
|
||
|
|
return arr1.concat(arr2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.delivery = delivery;
|
||
|
|
|
||
|
|
})(window);
|