/**
|
* CChinaArea
|
* @author Tevin
|
*/
|
|
<template>
|
<view class="c-china-area">
|
<picker
|
mode="multiSelector"
|
:range="range"
|
:value="current"
|
range-key="label"
|
@columnchange="evt=>updateColumns(evt.detail)"
|
@change="evt=>handleChange(evt.detail.value)"
|
>
|
<view @tap="evt=>handleOpen(evt)">
|
<AtInput
|
ref="input"
|
:name="itemData.name"
|
:title="itemData.label"
|
:required="itemData.required"
|
:error="itemData.error"
|
:placeholder="placeholder"
|
:value="selected"
|
>
|
<view class="at-icon at-icon-chevron-right" />
|
</AtInput>
|
</view>
|
</picker>
|
</view>
|
</template>
|
|
<script>
|
import { AtInput } from 'taro-ui-vue';
|
import ChinaLocations from './ChinaLocations';
|
import './cChinaArea.scss';
|
|
const { locationTree, getRegionNames } = ChinaLocations;
|
|
export default {
|
name: 'CChinaArea',
|
components: {
|
AtInput,
|
},
|
props: {
|
placeholder: String,
|
itemData: Object,
|
},
|
data() {
|
return {
|
range: [[], [], []],
|
current: [0, 0, 0],
|
};
|
},
|
computed: {
|
selected() {
|
const curVal = this.itemData.formData[this.itemData.name];
|
if (curVal && curVal.length === 3) {
|
return getRegionNames(curVal).join(' / ');
|
} else {
|
return '';
|
}
|
},
|
},
|
methods: {
|
handleOpen(evt) {
|
if (evt.target.className.indexOf('at-input__title') >= 0) {
|
evt.stopPropagation();
|
evt.preventDefault();
|
return;
|
}
|
const curVal = this.itemData.formData[this.itemData.name];
|
const range = [
|
locationTree,
|
locationTree[0].children,
|
locationTree[0].children[0].children,
|
];
|
const current = [0, 0, 0];
|
// 有值
|
if (curVal && curVal.length > 0) {
|
// 省
|
if (curVal[0]) {
|
const proviceIndex = locationTree.findIndex(
|
(provice) => provice.code === curVal[0]
|
);
|
if (proviceIndex >= 0) {
|
range[1] = locationTree[proviceIndex].children;
|
range[2] = locationTree[proviceIndex].children[0].children;
|
current[0] = proviceIndex;
|
// 市
|
if (curVal[1]) {
|
const cityIndex = range[1].findIndex((city) => city.code === curVal[1]);
|
if (cityIndex >= 0) {
|
range[2] = range[1].children[cityIndex].children;
|
current[1] = cityIndex;
|
}
|
// 区
|
if (curVal[2]) {
|
const areaIndex = range[2].findIndex(
|
(area) => area.code === curVal[2]
|
);
|
if (areaIndex >= 0) {
|
current[2] === areaIndex;
|
}
|
}
|
}
|
}
|
}
|
}
|
this.range = range;
|
this.current = current;
|
},
|
updateColumns(roll) {
|
if (roll.column === 0) {
|
const cities = locationTree[roll.value].children;
|
this.range.splice(1, 2, cities, cities[0].children);
|
this.current = [roll.value, 0, 0];
|
} else if (roll.column === 1) {
|
const areas = locationTree[this.current[0]].children[roll.value].children;
|
this.range.splice(2, 1, areas);
|
this.current = [this.current[0], roll.value, 0];
|
} else if (roll.column === 3) {
|
this.current.splice(2, 1, roll.value);
|
}
|
},
|
handleChange(detail) {
|
const codes = [];
|
const provice = locationTree[detail[0]];
|
codes[0] = provice.value;
|
const city = provice.children[detail[1]];
|
codes[1] = city.value;
|
const area = city.children[detail[2]];
|
codes[2] = area.value;
|
this.itemData.onChange(codes);
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
