(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);