You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.5 KiB
117 lines
2.5 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-03-29 16:05:06
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-05-21 20:04:47
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<view>
|
|
<UiCell title="所在区域" @click="show = true">
|
|
<template slot="value">
|
|
<input class="cityInput" disabled :value="valueText" placeholder="请选择省市区" />
|
|
</template>
|
|
</UiCell>
|
|
<u-picker
|
|
:show="show"
|
|
ref="picker"
|
|
keyName="name"
|
|
:columns="columnsData"
|
|
:defaultIndex="defaultIndex"
|
|
@cancel="show = false"
|
|
@change="changeCity"
|
|
@confirm="confirm"
|
|
/>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import UiCell from "./UiCell";
|
|
import Province from '@/common/dicts/area.json';
|
|
const DefaultCityColumn = Province[0].children;
|
|
const DefaultAreaColumn = DefaultCityColumn[0].children;
|
|
export default {
|
|
components: { UiCell },
|
|
props: {
|
|
value : {
|
|
type : Array,
|
|
default : []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
columnsData : [],
|
|
defaultIndex : []
|
|
};
|
|
},
|
|
computed:{
|
|
valueText(){
|
|
return this.value.map(i => i.name).join('/');
|
|
},
|
|
|
|
},
|
|
watch:{
|
|
value(val){
|
|
this.setColumAndDefalut(val);
|
|
}
|
|
},
|
|
mounted(){
|
|
this.setColumAndDefalut(this.value);
|
|
|
|
},
|
|
methods: {
|
|
/**
|
|
* 设置列数据和默认选中值
|
|
*/
|
|
setColumAndDefalut(val){
|
|
|
|
if(val.length){
|
|
// 省选中值下标
|
|
const provinceIndex = Province.findIndex(item => val[0].code === item.code) || 0;
|
|
|
|
// 市选数据
|
|
const city = Province[provinceIndex].children;
|
|
const cityIndex = city.findIndex(item => val[1].code === item.code) || 0;
|
|
|
|
// 区数据
|
|
const area = city[cityIndex].children;
|
|
const areaIndex = area.findIndex(item => val[2].code === item.code) || 0;
|
|
|
|
this.columnsData = [Province, city, area];
|
|
this.defaultIndex = [provinceIndex, cityIndex, areaIndex]
|
|
}else{
|
|
this.columnsData = [Province, DefaultCityColumn, DefaultAreaColumn];
|
|
}
|
|
},
|
|
changeCity(val) {
|
|
if(val.columnIndex == 2){
|
|
return;
|
|
}
|
|
let newIndexs = val.indexs;
|
|
if(val.columnIndex == 0){
|
|
newIndexs[1] = 0;
|
|
}
|
|
newIndexs[2] = 0;
|
|
this.defaultIndex = newIndexs;
|
|
|
|
const city = val.value[0].children;
|
|
const area = city[newIndexs[1]].children;
|
|
|
|
this.$refs.picker.setColumnValues(1, city);
|
|
this.$refs.picker.setColumnValues(2, area);
|
|
},
|
|
confirm(value) {
|
|
this.show = false;
|
|
this.$emit('input', value.value)
|
|
this.$emit('change', value.value)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.cityInput{
|
|
flex: 1;
|
|
font-size: $font-size-base;
|
|
padding-left: 40rpx;
|
|
}
|
|
</style> |