|
|
|
import { VantComponent } from '../common/component';
|
|
|
|
import { pickerProps } from '../picker/shared';
|
|
|
|
import { requestAnimationFrame } from '../common/utils';
|
|
|
|
const EMPTY_CODE = '000000';
|
|
|
|
VantComponent({
|
|
|
|
classes: ['active-class', 'toolbar-class', 'column-class'],
|
|
|
|
props: Object.assign(Object.assign({}, pickerProps), {
|
|
|
|
value: {
|
|
|
|
type: String,
|
|
|
|
observer(value) {
|
|
|
|
this.code = value;
|
|
|
|
this.setValues();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
areaList: {
|
|
|
|
type: Object,
|
|
|
|
value: {},
|
|
|
|
observer: 'setValues',
|
|
|
|
},
|
|
|
|
columnsNum: {
|
|
|
|
type: null,
|
|
|
|
value: 3,
|
|
|
|
},
|
|
|
|
columnsPlaceholder: {
|
|
|
|
type: Array,
|
|
|
|
observer(val) {
|
|
|
|
this.setData({
|
|
|
|
typeToColumnsPlaceholder: {
|
|
|
|
province: val[0] || '',
|
|
|
|
city: val[1] || '',
|
|
|
|
county: val[2] || '',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
data: {
|
|
|
|
columns: [{ values: [] }, { values: [] }, { values: [] }],
|
|
|
|
typeToColumnsPlaceholder: {},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
this.setValues();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getPicker() {
|
|
|
|
if (this.picker == null) {
|
|
|
|
this.picker = this.selectComponent('.van-area__picker');
|
|
|
|
}
|
|
|
|
return this.picker;
|
|
|
|
},
|
|
|
|
onCancel(event) {
|
|
|
|
this.emit('cancel', event.detail);
|
|
|
|
},
|
|
|
|
onConfirm(event) {
|
|
|
|
const { index } = event.detail;
|
|
|
|
let { value } = event.detail;
|
|
|
|
value = this.parseValues(value);
|
|
|
|
this.emit('confirm', { value, index });
|
|
|
|
},
|
|
|
|
emit(type, detail) {
|
|
|
|
detail.values = detail.value;
|
|
|
|
delete detail.value;
|
|
|
|
this.$emit(type, detail);
|
|
|
|
},
|
|
|
|
parseValues(values) {
|
|
|
|
const { columnsPlaceholder } = this.data;
|
|
|
|
return values.map((value, index) => {
|
|
|
|
if (
|
|
|
|
value &&
|
|
|
|
(!value.code || value.name === columnsPlaceholder[index])
|
|
|
|
) {
|
|
|
|
return Object.assign(Object.assign({}, value), {
|
|
|
|
code: '',
|
|
|
|
name: '',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return value;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onChange(event) {
|
|
|
|
const { index, picker, value } = event.detail;
|
|
|
|
this.code = value[index].code;
|
|
|
|
this.setValues().then(() => {
|
|
|
|
this.$emit('change', {
|
|
|
|
picker,
|
|
|
|
values: this.parseValues(picker.getValues()),
|
|
|
|
index,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
getConfig(type) {
|
|
|
|
const { areaList } = this.data;
|
|
|
|
return (areaList && areaList[`${type}_list`]) || {};
|
|
|
|
},
|
|
|
|
getList(type, code) {
|
|
|
|
if (type !== 'province' && !code) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
const { typeToColumnsPlaceholder } = this.data;
|
|
|
|
const list = this.getConfig(type);
|
|
|
|
let result = Object.keys(list).map((code) => ({
|
|
|
|
code,
|
|
|
|
name: list[code],
|
|
|
|
}));
|
|
|
|
if (code != null) {
|
|
|
|
// oversea code
|
|
|
|
if (code[0] === '9' && type === 'city') {
|
|
|
|
code = '9';
|
|
|
|
}
|
|
|
|
result = result.filter((item) => item.code.indexOf(code) === 0);
|
|
|
|
}
|
|
|
|
if (typeToColumnsPlaceholder[type] && result.length) {
|
|
|
|
// set columns placeholder
|
|
|
|
const codeFill =
|
|
|
|
type === 'province'
|
|
|
|
? ''
|
|
|
|
: type === 'city'
|
|
|
|
? EMPTY_CODE.slice(2, 4)
|
|
|
|
: EMPTY_CODE.slice(4, 6);
|
|
|
|
result.unshift({
|
|
|
|
code: `${code}${codeFill}`,
|
|
|
|
name: typeToColumnsPlaceholder[type],
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
},
|
|
|
|
getIndex(type, code) {
|
|
|
|
let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
|
|
|
|
const list = this.getList(type, code.slice(0, compareNum - 2));
|
|
|
|
// oversea code
|
|
|
|
if (code[0] === '9' && type === 'province') {
|
|
|
|
compareNum = 1;
|
|
|
|
}
|
|
|
|
code = code.slice(0, compareNum);
|
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
|
if (list[i].code.slice(0, compareNum) === code) {
|
|
|
|
return i;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
},
|
|
|
|
setValues() {
|
|
|
|
const picker = this.getPicker();
|
|
|
|
if (!picker) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let code = this.code || this.getDefaultCode();
|
|
|
|
const provinceList = this.getList('province');
|
|
|
|
const cityList = this.getList('city', code.slice(0, 2));
|
|
|
|
const stack = [];
|
|
|
|
const indexes = [];
|
|
|
|
const { columnsNum } = this.data;
|
|
|
|
if (columnsNum >= 1) {
|
|
|
|
stack.push(picker.setColumnValues(0, provinceList, false));
|
|
|
|
indexes.push(this.getIndex('province', code));
|
|
|
|
}
|
|
|
|
if (columnsNum >= 2) {
|
|
|
|
stack.push(picker.setColumnValues(1, cityList, false));
|
|
|
|
indexes.push(this.getIndex('city', code));
|
|
|
|
if (cityList.length && code.slice(2, 4) === '00') {
|
|
|
|
[{ code }] = cityList;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (columnsNum === 3) {
|
|
|
|
stack.push(
|
|
|
|
picker.setColumnValues(
|
|
|
|
2,
|
|
|
|
this.getList('county', code.slice(0, 4)),
|
|
|
|
false
|
|
|
|
)
|
|
|
|
);
|
|
|
|
indexes.push(this.getIndex('county', code));
|
|
|
|
}
|
|
|
|
return Promise.all(stack)
|
|
|
|
.catch(() => {})
|
|
|
|
.then(() => picker.setIndexes(indexes))
|
|
|
|
.catch(() => {});
|
|
|
|
},
|
|
|
|
getDefaultCode() {
|
|
|
|
const { columnsPlaceholder } = this.data;
|
|
|
|
if (columnsPlaceholder.length) {
|
|
|
|
return EMPTY_CODE;
|
|
|
|
}
|
|
|
|
const countyCodes = Object.keys(this.getConfig('county'));
|
|
|
|
if (countyCodes[0]) {
|
|
|
|
return countyCodes[0];
|
|
|
|
}
|
|
|
|
const cityCodes = Object.keys(this.getConfig('city'));
|
|
|
|
if (cityCodes[0]) {
|
|
|
|
return cityCodes[0];
|
|
|
|
}
|
|
|
|
return '';
|
|
|
|
},
|
|
|
|
getValues() {
|
|
|
|
const picker = this.getPicker();
|
|
|
|
if (!picker) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
return this.parseValues(picker.getValues().filter((value) => !!value));
|
|
|
|
},
|
|
|
|
getDetail() {
|
|
|
|
const values = this.getValues();
|
|
|
|
const area = {
|
|
|
|
code: '',
|
|
|
|
country: '',
|
|
|
|
province: '',
|
|
|
|
city: '',
|
|
|
|
county: '',
|
|
|
|
};
|
|
|
|
if (!values.length) {
|
|
|
|
return area;
|
|
|
|
}
|
|
|
|
const names = values.map((item) => item.name);
|
|
|
|
area.code = values[values.length - 1].code;
|
|
|
|
if (area.code[0] === '9') {
|
|
|
|
area.country = names[1] || '';
|
|
|
|
area.province = names[2] || '';
|
|
|
|
} else {
|
|
|
|
area.province = names[0] || '';
|
|
|
|
area.city = names[1] || '';
|
|
|
|
area.county = names[2] || '';
|
|
|
|
}
|
|
|
|
return area;
|
|
|
|
},
|
|
|
|
reset(code) {
|
|
|
|
this.code = code || '';
|
|
|
|
return this.setValues();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}); |
...
|
...
|
|
