265 lines
6.6 KiB
Vue
265 lines
6.6 KiB
Vue
<template>
|
||
<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true"
|
||
:safe-area-inset-bottom="true" close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble"
|
||
@close="close">
|
||
<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
|
||
ref="tabs" />
|
||
<view class="area-box">
|
||
<view class="u-flex" :class="{ 'change': isChange }">
|
||
<view class="area-item">
|
||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||
<scroll-view :scroll-y="true" style="height: 100%">
|
||
<u-cell-group>
|
||
<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false"
|
||
:index="index" :key="index" @click="provinceChange(index)">
|
||
<template v-slot:right-icon>
|
||
<u-icon v-if="isChooseP && province === index" size="17"
|
||
name="checkbox-mark"></u-icon>
|
||
</template>
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="area-item">
|
||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||
<scroll-view :scroll-y="true" style="height: 100%">
|
||
<u-cell-group v-if="isChooseP">
|
||
<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
|
||
:key="index" @click="cityChange(index)">
|
||
<template v-slot:right-icon>
|
||
<u-icon v-if="isChooseC && city === index" size="17"
|
||
name="checkbox-mark"></u-icon>
|
||
</template>
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="area-item">
|
||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||
<scroll-view :scroll-y="true" style="height: 100%">
|
||
<u-cell-group v-if="isChooseC">
|
||
<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
|
||
:key="index" @click="areaChange(index)">
|
||
<template v-slot:right-icon>
|
||
<u-icon v-if="isChooseA && area === index" size="17"
|
||
name="checkbox-mark"></u-icon>
|
||
</template>
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, PropType } from 'vue';
|
||
import provincesSource from "./province.js";
|
||
import citysSource from "./city.js";
|
||
import areasSource from "./area.js";
|
||
|
||
// 定义接口
|
||
interface Region {
|
||
label: string;
|
||
value: string;
|
||
}
|
||
|
||
interface CitySelectResult {
|
||
province: Region;
|
||
city: Region;
|
||
area: Region;
|
||
}
|
||
|
||
interface TabItem {
|
||
name: string;
|
||
}
|
||
|
||
// Props 定义
|
||
const props = defineProps({
|
||
// 通过双向绑定控制组件的弹出与收起
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
||
defaultRegion: {
|
||
type: Array as PropType<string[]>,
|
||
default: () => []
|
||
},
|
||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
||
areaCode: {
|
||
type: Array as PropType<string[]>,
|
||
default: () => []
|
||
},
|
||
// 是否允许通过点击遮罩关闭Picker
|
||
maskCloseAble: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 弹出的z-index值
|
||
zIndex: {
|
||
type: [String, Number],
|
||
default: 0
|
||
}
|
||
});
|
||
|
||
// 事件定义
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', value: boolean): void;
|
||
(e: 'close'): void;
|
||
(e: 'city-change', result: CitySelectResult): void;
|
||
}>();
|
||
|
||
const cityValue = ref("");
|
||
const isChooseP = ref(false); // 是否已经选择了省
|
||
const province = ref(0); // 省级下标
|
||
const provinces = ref<Region[]>(provincesSource);
|
||
const isChooseC = ref(false); // 是否已经选择了市
|
||
const city = ref(0); // 市级下标
|
||
const citys = ref<Region[]>(citysSource[0]);
|
||
const isChooseA = ref(false); // 是否已经选择了区
|
||
const area = ref(0); // 区级下标
|
||
const areas = ref<Region[]>(areasSource[0][0]);
|
||
const tabsIndex = ref(0);
|
||
const tabs = ref();
|
||
|
||
// 计算属性
|
||
const isChange = computed(() => {
|
||
return tabsIndex.value > 1;
|
||
});
|
||
|
||
const genTabsList = computed((): TabItem[] => {
|
||
let tabsList: TabItem[] = [{
|
||
name: "请选择"
|
||
}];
|
||
|
||
if (isChooseP.value) {
|
||
tabsList[0].name = provinces.value[province.value].label;
|
||
tabsList[1] = {
|
||
name: "请选择"
|
||
};
|
||
}
|
||
|
||
if (isChooseC.value) {
|
||
tabsList[1].name = citys.value[city.value].label;
|
||
tabsList[2] = {
|
||
name: "请选择"
|
||
};
|
||
}
|
||
|
||
if (isChooseA.value) {
|
||
tabsList[2].name = areas.value[area.value].label;
|
||
}
|
||
|
||
return tabsList;
|
||
});
|
||
|
||
const uZIndex = computed(() => {
|
||
// 如果用户有传递z-index值，优先使用
|
||
return props.zIndex ? props.zIndex : 1075; // 假设$u.zIndex.popup为1075
|
||
});
|
||
|
||
// 方法
|
||
const setProvince = (label = "", value = "") => {
|
||
provinces.value.map((v, k) => {
|
||
if (value ? v.value == value : v.label == label) {
|
||
provinceChange(k);
|
||
}
|
||
});
|
||
};
|
||
|
||
const setCity = (label = "", value = "") => {
|
||
citys.value.map((v, k) => {
|
||
if (value ? v.value == value : v.label == label) {
|
||
cityChange(k);
|
||
}
|
||
});
|
||
};
|
||
|
||
const setArea = (label = "", value = "") => {
|
||
areas.value.map((v, k) => {
|
||
if (value ? v.value == value : v.label == label) {
|
||
isChooseA.value = true;
|
||
area.value = k;
|
||
}
|
||
});
|
||
};
|
||
|
||
const close = () => {
|
||
emit('update:modelValue', false);
|
||
emit('close');
|
||
};
|
||
|
||
const tabsChange = (value: { index: number }) => {
|
||
tabsIndex.value = value.index;
|
||
};
|
||
|
||
const provinceChange = (index: number) => {
|
||
isChooseP.value = true;
|
||
isChooseC.value = false;
|
||
isChooseA.value = false;
|
||
province.value = index;
|
||
citys.value = citysSource[index];
|
||
tabsIndex.value = 1;
|
||
};
|
||
|
||
const cityChange = (index: number) => {
|
||
isChooseC.value = true;
|
||
isChooseA.value = false;
|
||
city.value = index;
|
||
areas.value = areasSource[province.value][index];
|
||
tabsIndex.value = 2;
|
||
};
|
||
|
||
const areaChange = (index: number) => {
|
||
isChooseA.value = true;
|
||
area.value = index;
|
||
const result: CitySelectResult = {
|
||
province: provinces.value[province.value],
|
||
city: citys.value[city.value],
|
||
area: areas.value[area.value]
|
||
};
|
||
emit('city-change', result);
|
||
close();
|
||
};
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
if (props.areaCode.length == 3) {
|
||
setProvince("", props.areaCode[0]);
|
||
setCity("", props.areaCode[1]);
|
||
setArea("", props.areaCode[2]);
|
||
} else if (props.defaultRegion.length == 3) {
|
||
setProvince(props.defaultRegion[0], "");
|
||
setCity(props.defaultRegion[1], "");
|
||
setArea(props.defaultRegion[2], "");
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.area-box {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
height: 800rpx;
|
||
|
||
>view {
|
||
width: 150%;
|
||
transition: transform 0.3s ease-in-out 0s;
|
||
transform: translateX(0);
|
||
|
||
&.change {
|
||
transform: translateX(-33.3333333%);
|
||
}
|
||
}
|
||
|
||
.area-item {
|
||
width: 33.3333333%;
|
||
height: 800rpx;
|
||
}
|
||
}
|
||
</style> |