linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

城市选择器bug修复

Browse Source
main
D 2 years ago
parent 7b2cc20729
commit fa26bb8796
1 changed files with 181 additions and 191 deletions
Show Stats Download Patch File Download Diff File

372
src/components/u-city-select/u-city-select.vue
Unescape Escape View File

@ -1,23 +1,19 @@
<template> <template>
<u-popup :show="modelValue" mode="bottom" :popup="false" <u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
:mask="true" :closeable="true" :safe-area-inset-bottom="true" close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
close-icon-color="#ffffff" :z-index="uZIndex" <u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
:maskCloseAble="maskCloseAble" @close="close"> ref="tabs" />
<u-tabs v-if="modelValue" :list="genTabsList"
:scrollable="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
<view class="area-box"> <view class="area-box">
<view class="u-flex" :class="{ 'change':isChange }"> <view class="u-flex" :class="{ 'change': isChange }">
<view class="area-item"> <view class="area-item">
<view class="u-padding-10 u-bg-gray" style="height: 100%;"> <view class="u-padding-10 u-bg-gray" style="height: 100%;">
<scroll-view :scroll-y="true" style="height: 100%"> <scroll-view :scroll-y="true" style="height: 100%">
<u-cell-group> <u-cell-group>
<u-cell v-for="(item,index) in provinces" <u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index"
:title="item.label" :arrow="false" :key="index" @click="provinceChange(index)">
:index="index" :key="index"
@click="provinceChange(index)">
<template v-slot:right-icon> <template v-slot:right-icon>
<u-icon v-if="isChooseP&&province===index" <u-icon v-if="isChooseP && province === index" size="17"
size="17" name="checkbox-mark"></u-icon> name="checkbox-mark"></u-icon>
</template> </template>
</u-cell> </u-cell>
</u-cell-group> </u-cell-group>
@ -28,13 +24,10 @@
<view class="u-padding-10 u-bg-gray" style="height: 100%;"> <view class="u-padding-10 u-bg-gray" style="height: 100%;">
<scroll-view :scroll-y="true" style="height: 100%"> <scroll-view :scroll-y="true" style="height: 100%">
<u-cell-group v-if="isChooseP"> <u-cell-group v-if="isChooseP">
<u-cell v-for="(item,index) in citys" <u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
:title="item.label" :arrow="false" :key="index" @click="cityChange(index)">
:index="index" :key="index"
@click="cityChange(index)">
<template v-slot:right-icon> <template v-slot:right-icon>
<u-icon v-if="isChooseC&&city===index" <u-icon v-if="isChooseC && city === index" size="17" name="checkbox-mark"></u-icon>
size="17" name="checkbox-mark"></u-icon>
</template> </template>
</u-cell> </u-cell>
</u-cell-group> </u-cell-group>
@ -45,13 +38,10 @@
<view class="u-padding-10 u-bg-gray" style="height: 100%;"> <view class="u-padding-10 u-bg-gray" style="height: 100%;">
<scroll-view :scroll-y="true" style="height: 100%"> <scroll-view :scroll-y="true" style="height: 100%">
<u-cell-group v-if="isChooseC"> <u-cell-group v-if="isChooseC">
<u-cell v-for="(item,index) in areas" <u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
:title="item.label" :arrow="false" :key="index" @click="areaChange(index)">
:index="index" :key="index"
@click="areaChange(index)">
<template v-slot:right-icon> <template v-slot:right-icon>
<u-icon v-if="isChooseA&&area===index" <u-icon v-if="isChooseA && area === index" size="17" name="checkbox-mark"></u-icon>
size="17" name="checkbox-mark"></u-icon>
</template> </template>
</u-cell> </u-cell>
</u-cell-group> </u-cell-group>
@ -64,188 +54,188 @@
</template> </template>
<script> <script>
import provinces from "./province.js"; import provinces from "./province.js";
import citys from "./city.js"; import citys from "./city.js";
import areas from "./area.js"; import areas from "./area.js";
/** /**
* city-select 省市区级联选择器 * city-select 省市区级联选择器
* @property {String Number} z-index 弹出时的z-index值（默认1075） * @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true） * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String} default-region 默认选中的地区，中文形式 * @property {String} default-region 默认选中的地区，中文形式
* @property {String} default-code 默认选中的地区，编号形式 * @property {String} default-code 默认选中的地区，编号形式
*/ */
export default { export default {
name: 'u-city-select', name: 'u-city-select',
props: { props: {
// 通过双向绑定控制组件的弹出与收起 // 通过双向绑定控制组件的弹出与收起
modelValue: { modelValue: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"] // 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
defaultRegion: { defaultRegion: {
type: Array, type: Array,
default () { default() {
return []; return [];
}
},
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
default () {
return [];
}
},
// 是否允许通过点击遮罩关闭Picker
maskCloseAble: {
type: Boolean,
default: true
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
} }
}, },
data() { // 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
return { areaCode: {
cityValue: "", type: Array,
isChooseP: false, //是否已经选择了省 default() {
province: 0, //省级下标 return [];
provinces: provinces,
isChooseC: false, //是否已经选择了市
city: 0, //市级下标
citys: citys[0],
isChooseA: false, //是否已经选择了区
area: 0, //区级下标
areas: areas[0][0],
tabsIndex: 0,
} }
}, },
mounted() { // 是否允许通过点击遮罩关闭Picker
this.init(); maskCloseAble: {
type: Boolean,
default: true
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
}
},
data() {
return {
cityValue: "",
isChooseP: false, //是否已经选择了省
province: 0, //省级下标
provinces: provinces,
isChooseC: false, //是否已经选择了市
city: 0, //市级下标
citys: citys[0],
isChooseA: false, //是否已经选择了区
area: 0, //区级下标
areas: areas[0][0],
tabsIndex: 0,
}
},
mounted() {
this.init();
},
computed: {
isChange() {
return this.tabsIndex > 1;
}, },
computed: { genTabsList() {
isChange() { let tabsList = [{
return this.tabsIndex > 1; name: "请选择"
}, }];
genTabsList() { if (this.isChooseP) {
let tabsList = [{ console.log(this.province)
tabsList[0]['name'] = this.provinces[this.province]['label'];
tabsList[1] = {
name: "请选择"
};
}
if (this.isChooseC) {
tabsList[1]['name'] = this.citys[this.city]['label'];
tabsList[2] = {
name: "请选择" name: "请选择"
}]; };
if (this.isChooseP) { }
console.log(this.province) if (this.isChooseA) {
tabsList[0]['name'] = this.provinces[this.province]['label']; tabsList[2]['name'] = this.areas[this.area]['label'];
tabsList[1] = { }
name: "请选择" return tabsList;
}; },
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
}
},
emits: ['city-change'],
methods: {
init() {
if (this.areaCode.length == 3) {
this.setProvince("", this.areaCode[0]);
this.setCity("", this.areaCode[1]);
this.setArea("", this.areaCode[2]);
} else if (this.defaultRegion.length == 3) {
this.setProvince(this.defaultRegion[0], "");
this.setCity(this.defaultRegion[1], "");
this.setArea(this.defaultRegion[2], "");
};
},
setProvince(label = "", value = "") {
this.provinces.map((v, k) => {
if (value ? v.value == value : v.label == label) {
this.provinceChange(k);
} }
if (this.isChooseC) { })
tabsList[1]['name'] = this.citys[this.city]['label']; },
tabsList[2] = { setCity(label = "", value = "") {
name: "请选择" this.citys.map((v, k) => {
}; if (value ? v.value == value : v.label == label) {
this.cityChange(k);
} }
if (this.isChooseA) { })
tabsList[2]['name'] = this.areas[this.area]['label']; },
setArea(label = "", value = "") {
this.areas.map((v, k) => {
if (value ? v.value == value : v.label == label) {
this.isChooseA = true;
this.area = k;
} }
return tabsList; })
},
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
}
}, },
emits: ['city-change'], close() {
methods: { this.$emit('update:modelValue', false);
init() { },
if (this.areaCode.length == 3) { tabsChange(value) {
this.setProvince("", this.areaCode[0]); this.tabsIndex = value.index;
this.setCity("", this.areaCode[1]); console.log('debug=>', this.tabsIndex);
this.setArea("", this.areaCode[2]); },
} else if (this.defaultRegion.length == 3) { provinceChange(index) {
this.setProvince(this.defaultRegion[0], ""); this.isChooseP = true;
this.setCity(this.defaultRegion[1], ""); this.isChooseC = false;
this.setArea(this.defaultRegion[2], ""); this.isChooseA = false;
}; this.province = index;
}, this.citys = citys[index];
setProvince(label = "", value = "") { this.tabsIndex = 1;
this.provinces.map((v, k) => { },
if (value ? v.value == value : v.label == label) { cityChange(index) {
this.provinceChange(k); this.isChooseC = true;
} this.isChooseA = false;
}) this.city = index;
}, this.areas = areas[this.province][index];
setCity(label = "", value = "") { this.tabsIndex = 2;
this.citys.map((v, k) => { },
if (value ? v.value == value : v.label == label) { areaChange(index) {
this.cityChange(k); this.isChooseA = true;
} this.area = index;
}) let result = {};
}, result.province = this.provinces[this.province];
setArea(label = "", value = "") { result.city = this.citys[this.city];
this.areas.map((v, k) => { result.area = this.areas[this.area];
if (value ? v.value == value : v.label == label) { this.$emit('city-change', result);
this.isChooseA = true; this.close();
this.area = k;
}
})
},
close() {
this.$emit('update:modelValue', false);
},
tabsChange(index) {
this.tabsIndex = index;
},
provinceChange(index) {
this.isChooseP = true;
this.isChooseC = false;
this.isChooseA = false;
this.province = index;
this.citys = citys[index];
this.tabsIndex = 1;
},
cityChange(index) {
this.isChooseC = true;
this.isChooseA = false;
this.city = index;
this.areas = areas[this.province][index];
this.tabsIndex = 2;
},
areaChange(index) {
this.isChooseA = true;
this.area = index;
let result = {};
result.province = this.provinces[this.province];
result.city = this.citys[this.city];
result.area = this.areas[this.area];
this.$emit('city-change', result);
this.close();
}
} }
} }
}
</script> </script>
<style lang="scss"> <style lang="scss">
.area-box { .area-box {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 800rpx; height: 800rpx;
>view { >view {
width: 150%; width: 150%;
transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s;
transform: translateX(0); transform: translateX(0);
&.change { &.change {
transform: translateX(-33.3333333%); transform: translateX(-33.3333333%);
}
} }
}
.area-item { .area-item {
width: 33.3333333%; width: 33.3333333%;
height: 800rpx; height: 800rpx;
}
} }
</style> }
@/components/u-city-select/province.js@/components/u-city-select/city.js@/components/u-city-select/area.js </style>
Write Preview
Loading…
Cancel
Save