|
|
|
/**
|
|
|
|
* 三级地址联动
|
|
|
|
* @author: yyq<yanqing.yang@yoho.cn>
|
|
|
|
* @date: 2016/12/22
|
|
|
|
*/
|
|
|
|
var $ = require('yoho-jquery');
|
|
|
|
|
|
|
|
var areaSelect = {
|
|
|
|
init: function($el, area) {
|
|
|
|
this.$el = $el;
|
|
|
|
this.$areaText = $el.find('.area-text');
|
|
|
|
this.$provinceList = $el.find('.province-list');
|
|
|
|
this.$cityList = $el.find('.city-list');
|
|
|
|
this.$areaList = $el.find('.area-list');
|
|
|
|
|
|
|
|
this.bindEvent();
|
|
|
|
this.getAreaList(area || 0);
|
|
|
|
},
|
|
|
|
bindEvent: function() {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
this.$el.on('click', '.area-sel-tab', function(event) {
|
|
|
|
var $this = $(event.target);
|
|
|
|
|
|
|
|
if (!$this.hasClass('area-sel-tab') || $this.hasClass('tab-on')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.siblings('.area-sel-tab').removeClass('tab-on');
|
|
|
|
$this.addClass('tab-on');
|
|
|
|
}).on('click', '.area-box > span', function() {
|
|
|
|
that.$areaText.addClass('on-edit');
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$provinceList.on('click', 'span', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
data = $this.data();
|
|
|
|
|
|
|
|
if ($this.hasClass('on')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
that.$provinceList.find('.on').removeClass('on');
|
|
|
|
$this.addClass('on');
|
|
|
|
that.setOptionList('city');
|
|
|
|
that.setOptionList('area');
|
|
|
|
that.getAreaList(data.id || 0);
|
|
|
|
that.province = data;
|
|
|
|
that.$areaText.text(data.text || '');
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$cityList.on('click', 'span', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
data = $this.data();
|
|
|
|
|
|
|
|
if ($this.hasClass('on')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.siblings('.on').removeClass('on');
|
|
|
|
$this.addClass('on');
|
|
|
|
that.setOptionList('area');
|
|
|
|
that.getAreaList(data.id || 0);
|
|
|
|
that.city = data;
|
|
|
|
that.$areaText.text((that.province.text || '') + ' / ' + (data.text || ''));
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$areaList.on('click', 'span', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
data = $this.data();
|
|
|
|
|
|
|
|
that.$areaText.removeClass('on-edit');
|
|
|
|
|
|
|
|
if ($this.hasClass('on')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.siblings('.on').removeClass('on');
|
|
|
|
$this.addClass('on');
|
|
|
|
that.area = data;
|
|
|
|
that.$areaText.text((that.province.text || '') + ' / ' + (that.city.text || '') +
|
|
|
|
' / ' + (data.text || ''));
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
getAreaList: function(id, select) {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
if (id === 0 && this.provinceGroup) {
|
|
|
|
return this.setOptionList('province', this.provinceGroup, select);
|
|
|
|
}
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/cart/address/area',
|
|
|
|
data: {
|
|
|
|
id: id
|
|
|
|
}
|
|
|
|
}).then(function(data) {
|
|
|
|
var info = data.data,
|
|
|
|
type = 'province';
|
|
|
|
var i, idString;
|
|
|
|
|
|
|
|
if (data.code !== 200) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
idString = id.toString();
|
|
|
|
|
|
|
|
if (idString.length === 2) {
|
|
|
|
type = 'city';
|
|
|
|
} else if (idString.length === 4) {
|
|
|
|
type = 'area';
|
|
|
|
}
|
|
|
|
|
|
|
|
info = data.data;
|
|
|
|
|
|
|
|
if (id === 0) {
|
|
|
|
that.provinceGroup = {
|
|
|
|
'A-G': [],
|
|
|
|
'H-K': [],
|
|
|
|
'L-S': [],
|
|
|
|
'T-Z': []
|
|
|
|
};
|
|
|
|
for (i = 0; i < info.length; i++) {
|
|
|
|
if (info[i].pySort < 7) {
|
|
|
|
that.provinceGroup['A-G'].push(info[i]);
|
|
|
|
} else if (info[i].pySort < 11) {
|
|
|
|
that.provinceGroup['H-K'].push(info[i]);
|
|
|
|
} else if (info[i].pySort < 19) {
|
|
|
|
that.provinceGroup['L-S'].push(info[i]);
|
|
|
|
} else {
|
|
|
|
that.provinceGroup['T-Z'].push(info[i]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return that.setOptionList(type, that.provinceGroup, select);
|
|
|
|
}
|
|
|
|
return that.setOptionList(type, info, select);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
setOptionList: function(type, data) {
|
|
|
|
var _h = '', i, j;
|
|
|
|
|
|
|
|
if (type === 'province') {
|
|
|
|
data = data || {};
|
|
|
|
for (i in data) {
|
|
|
|
if (data.hasOwnProperty(i)) {
|
|
|
|
_h += '<p><label class="group-title">' + i + '</label>';
|
|
|
|
for (j = 0; j < data[i].length; j++) {
|
|
|
|
_h += '<span class="ai-' + data[i][j].id + '" data-id="' + data[i][j].id +
|
|
|
|
'" data-text="' + data[i][j].caption + '">' +
|
|
|
|
(data[i][j].is_support_express === 'Y' ? '*' : '') + data[i][j].caption + '</span>';
|
|
|
|
}
|
|
|
|
_h += '</p>';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.$provinceList.html(_h);
|
|
|
|
} else {
|
|
|
|
data = data || [];
|
|
|
|
for (j = 0; j < data.length; j++) {
|
|
|
|
_h += '<span class="ai-' + data[j].id + '" data-id="' + data[j].id +
|
|
|
|
'" data-text="' + data[j].caption + '">' +
|
|
|
|
(data[j].is_support_express === 'Y' ? '*' : '') + data[j].caption + '</span>';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (type === 'city') {
|
|
|
|
this.city = {};
|
|
|
|
this.$cityList.html(_h);
|
|
|
|
} else {
|
|
|
|
this.area = {};
|
|
|
|
this.$areaList.html(_h);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = areaSelect; |
...
|
...
|
|
