277 lines
9.1 KiB
Vue
277 lines
9.1 KiB
Vue
<template>
|
||
<u-popup
|
||
v-model="popupValue"
|
||
:class="customClass"
|
||
:style="$u.toStyle(customStyle)"
|
||
mode="bottom"
|
||
:popup="false"
|
||
:mask="true"
|
||
:closeable="true"
|
||
:safe-area-inset-bottom="true"
|
||
close-icon-color="var(--u-white-color)"
|
||
:z-index="uZIndex"
|
||
:maskCloseAble="props.maskCloseAble"
|
||
@close="close"
|
||
>
|
||
<u-tabs
|
||
v-if="popupValue"
|
||
:list="genTabsList"
|
||
:is-scroll="true"
|
||
:current="tabsIndex"
|
||
@change="tabsChange"
|
||
ref="tabs"
|
||
></u-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-item
|
||
v-for="(item, index) in provincesList"
|
||
:title="item.label"
|
||
:arrow="false"
|
||
:index="index"
|
||
:key="index"
|
||
@click="provinceChange(index)"
|
||
>
|
||
<template v-if="isChooseP && province === index" #right-icon>
|
||
<u-icon size="34" name="checkbox-mark"></u-icon>
|
||
</template>
|
||
</u-cell-item>
|
||
</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-item
|
||
v-for="(item, index) in citys"
|
||
:title="item.label"
|
||
:arrow="false"
|
||
:index="index"
|
||
:key="index"
|
||
@click="cityChange(index)"
|
||
>
|
||
<template v-if="isChooseC && city === index" #right-icon>
|
||
<u-icon size="34" name="checkbox-mark"></u-icon>
|
||
</template>
|
||
</u-cell-item>
|
||
</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-item
|
||
v-for="(item, index) in areas"
|
||
:title="item.label"
|
||
:arrow="false"
|
||
:index="index"
|
||
:key="index"
|
||
@click="areaChange(index)"
|
||
>
|
||
<template v-if="isChooseA && area === index" #right-icon>
|
||
<u-icon size="34" name="checkbox-mark"></u-icon>
|
||
</template>
|
||
</u-cell-item>
|
||
</u-cell-group>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-city-select',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import provinces from '../../libs/util/province';
|
||
import citysData from '../../libs/util/city';
|
||
import areasData from '../../libs/util/area';
|
||
import { CitySelectProps } from './types';
|
||
import { $u } from '../..';
|
||
|
||
/**
|
||
* u-city-select 城市选择器
|
||
* @description 用于选择省、市、区三级行政区域，支持回显和自定义初始值。
|
||
* @property {Boolean} modelValue 控制弹窗显示与隐藏（v-model）
|
||
* @property {Array} defaultRegion 默认选中的省市区名称数组，如 ['山东省', '青岛市', '崂山区']
|
||
* @property {Array} areaCode 默认选中的省市区编码数组，如 ['440000', '440100', '440106']
|
||
* @property {Boolean} maskCloseAble 是否允许点击遮罩关闭弹窗（默认 true）
|
||
* @property {String|Number} zIndex 弹窗层级（默认 0，自动适配）
|
||
* @event update:modelValue v-model 绑定值变化时触发
|
||
* @event city-change 选择省市区后触发，返回选中的省市区对象
|
||
* @example <u-city-select v-model="show" :defaultRegion="['山东省', '青岛市', '崂山区']" @city-change="onChange"></u-city-select>
|
||
*/
|
||
const props = defineProps(CitySelectProps);
|
||
|
||
// emits 定义
|
||
const emit = defineEmits(['update:modelValue', 'city-change']);
|
||
|
||
// 省市区选择相关响应式数据
|
||
const cityValue = ref('');
|
||
const isChooseP = ref(false); // 是否已选省
|
||
const province = ref(0); // 省下标
|
||
const provincesList = ref(provinces);
|
||
const isChooseC = ref(false); // 是否已选市
|
||
const city = ref(0); // 市下标
|
||
const citys = ref(citysData[0]);
|
||
const isChooseA = ref(false); // 是否已选区
|
||
const area = ref(0); // 区下标
|
||
const areas = ref(areasData[0][0]);
|
||
const tabsIndex = ref(0);
|
||
|
||
// v-model 双向绑定
|
||
const popupValue = computed({
|
||
get: () => props.modelValue,
|
||
set: val => emit('update:modelValue', val)
|
||
});
|
||
|
||
// 是否切换到区级
|
||
const isChange = computed(() => tabsIndex.value > 1);
|
||
|
||
// 顶部 tab 列表
|
||
const genTabsList = computed(() => {
|
||
const tabsList = [{ name: '请选择' }];
|
||
if (isChooseP.value) {
|
||
tabsList[0].name = provincesList.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;
|
||
});
|
||
|
||
// z-index 计算
|
||
const uZIndex = computed(() => (props.zIndex ? props.zIndex : (uni as any).$u?.zIndex?.popup || 1075));
|
||
|
||
// 初始化选中项
|
||
function init() {
|
||
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], '');
|
||
}
|
||
}
|
||
|
||
// 选中省
|
||
function setProvince(label = '', value = '') {
|
||
provincesList.value.forEach((v, k) => {
|
||
if (value ? v.value == value : v.label == label) {
|
||
provinceChange(k);
|
||
}
|
||
});
|
||
}
|
||
// 选中市
|
||
function setCity(label = '', value = '') {
|
||
citys.value.forEach((v, k) => {
|
||
if (value ? v.value == value : v.label == label) {
|
||
cityChange(k);
|
||
}
|
||
});
|
||
}
|
||
// 选中区
|
||
function setArea(label = '', value = '') {
|
||
areas.value.forEach((v, k) => {
|
||
if (value ? v.value == value : v.label == label) {
|
||
isChooseA.value = true;
|
||
area.value = k;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 关闭弹窗
|
||
function close() {
|
||
emit('update:modelValue', false);
|
||
}
|
||
// tab 切换
|
||
function tabsChange(index: number) {
|
||
tabsIndex.value = index;
|
||
}
|
||
// 省点击
|
||
function provinceChange(index: number) {
|
||
isChooseP.value = true;
|
||
isChooseC.value = false;
|
||
isChooseA.value = false;
|
||
province.value = index;
|
||
citys.value = citysData[index];
|
||
tabsIndex.value = 1;
|
||
}
|
||
// 市点击
|
||
function cityChange(index: number) {
|
||
isChooseC.value = true;
|
||
isChooseA.value = false;
|
||
city.value = index;
|
||
areas.value = areasData[province.value][index];
|
||
tabsIndex.value = 2;
|
||
}
|
||
// 区点击
|
||
function areaChange(index: number) {
|
||
isChooseA.value = true;
|
||
area.value = index;
|
||
const result = {
|
||
province: provincesList.value[province.value],
|
||
city: citys.value[city.value],
|
||
area: areas.value[area.value]
|
||
};
|
||
emit('city-change', result);
|
||
close();
|
||
}
|
||
|
||
// 挂载时初始化
|
||
onMounted(init);
|
||
</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>
|