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.
shop-app/components/BsSelectCity.vue

104 lines
2.3 KiB

<!--
* @Author: ch
* @Date: 2022-03-29 16:05:06
* @LastEditors: ch
* @LastEditTime: 2022-04-06 21:34:20
* @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"
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';
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(){
console.log(Province.find(i => i.name == '重庆市'));
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, b, c) {
const city = val.value[0].children;
const area = val.value[1].children;
this.columnsData = [Province, city, 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: 28rpx;
padding-left: 40rpx;
}
</style>