<template>
<view>
<uni-popup ref="popup" type="bottom" :is-mask-click="false" :mask-click="false" border-radius="10px 10px 0 0" mask-background-color="rgba(0,0,0,0.1)">
<view class="customer-type-selection-main-style">
<view style="flex: 1;"></view>
<view class="customer-type-selection-style content">
<view class="customer-type-selection-title-style">请选择</view>
<view class="content_box">
<!-- 省 -->
<view class="item_box">
<view v-for="(item, index) in prevince" :key="index" v-if="prevince.length > 0">
<view :class="{activeStyle: previnceActive === index }" class="customer-type-selection-content-style" @click="checkItem1(item, index)">{{item}}</view>
</view>
</view>
<!-- 市 -->
<view class="item_box">
<view v-for="(item, index) in city" :key="index" v-if="city.length > 0">
<view :class="{activeStyle: cityActive === index }" class="customer-type-selection-content-style" @click="checkItem2(item,index)">{{item}}</view>
</view>
</view>
<!-- 区 -->
<!-- 户籍地址不展示区 -->
<view class="item_box" v-if="keywords !== 'RegisteredProvince'">
<view v-for="(item, index) in county" :key="index" v-if="county.length > 0">
<view :class="{activeStyle: countyActive === index }" class="customer-type-selection-content-style" @click="checkItem3(item,index)">{{item}}</view>
</view>
</view>
<!-- <view class="emptyMsg" v-if="mode == 1 && city.length == 0">请先选择所属省份</view> -->
<!-- <view class="emptyMsg" v-if="mode == 2 && county.length == 0">请先选择所属省份</view> -->
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
// 弹框
const popup = ref(null);
// 父组件传来的值
const props = defineProps([ 'keywords' ])
// 省
let prevince = reactive([
'广东省', '湖南省','云南省', '江西省','山东省', '北京省','广东省', '湖南省','云南省', '江西省','山东省', '北京省','广东省', '湖南省','云南省', '江西省','山东省', '北京省'
])
// 选中下标
let previnceActive = ref(null)
// 市
let city = reactive(['h市', 'a市', 's市','h市', 'a市', 's市','h市', 'a市', 's市','h市', 'a市', 's市','h市', 'a市', 's市'])
// 选中下标
let cityActive = ref(null)
// 区
let county = reactive(['海定区', '四环区', '天海区'])
// 选中下标
let countyActive = ref(null)
// 选中数据
let addrData = {
prevince:{
addrName: '',
code: ''
},
city:{
addrName: '',
code: ''
},
county:{
addrName: '',
code: ''
}
}
const open = () => {
popup.value.open('bottom')
}
// 父组件调用该方法进行渲染列表
const renderList = (list) => {
console.log(list, '父组件给的列表')
}
let emits = defineEmits([`informData`])
// 点击省
const checkItem1 = (val,index) => {
console.log(val)
// addrData[0] = val
addrData.prevince.addrName = val
previnceActive.value = index
}
// 点击市
const checkItem2 = (val,index) => {
console.log(val)
// addrData[1] = val
addrData.city.addrName = val
cityActive.value = index
console.log(props.keywords, '子组件的keywords')
if (props.keywords === 'RegisteredProvince') {
// 户籍地址仅需要省市内容
emits(`informData`, addrData)
setTimeout(() => {
popup.value.close('bottom')
reset()
}, 200)
}
// emits(`informData`, val) // 调用父组件方法并传值 @informData="informData"
}
// 点击区
const checkItem3 = (val,index) => {
console.log(val)
// addrData[2] = val
addrData.county.addrName = val
countyActive.value = index
console.log(addrData, '选中的省市区')
emits(`informData`, addrData)
setTimeout(() => {
popup.value.close('bottom')
reset()
}, 200)
}
// 清空数据
const reset = () => {
// city.length = 0
// county.length = 0
previnceActive.value = null
cityActive.value = null
countyActive.value = null
addrData = {
prevince:{
addrName: '',
code: ''
},
city:{
addrName: '',
code: ''
},
county:{
addrName: '',
code: ''
}
}
}
defineExpose({ renderList, open })
</script>
<style>
.content_box{
display: flex;
overflow: auto;
margin-top: 12px;
}
.item_box{
overflow: auto;
height: 100%;
flex:1;
padding: 0 2px;
}
.content{
background-color: #fff;
}
.activeStyle{
background-color: #eee;
}
/* .customer-type-selection-main-style {
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
} */
.customer-type-selection-style {
width: 100%;
height: 400px;
border-radius: 6px 6px, 0px, 0px;
background: #fff;
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
display: flex;
padding-bottom: 10px;
flex-direction: column;
}
.customer-type-selection-title-style {
height: 23px;
margin-top: 10px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0px;
/* line-height: 22.4px; */
color: rgba(51, 51, 51, 1);
text-align: center;
vertical-align: top;
}
.customer-type-selection-content-style {
margin-top: 10px;
font-size: 16px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22.4px;
color: rgba(51, 51, 51, 1);
text-align: center;
vertical-align: top;
padding:6px 0;
}
.emptyMsg{
padding:12px;
text-align: center;
color: gray;
}
</style>
效果图