77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<view class="AreaSelect flex-start">
|
|
<view class="selector" v-for="(province,index) in provinces" :key="index">
|
|
<view class="item"
|
|
:style="selectedProvince && provincestyle == index?'background: #fff;font-weight: bold;':''"
|
|
@click="selectProvince(province,index)">
|
|
{{ province.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
defineEmits
|
|
} from 'vue';
|
|
import {
|
|
cityData
|
|
} from './cityData.js';
|
|
const emits = defineEmits(['grouping']);
|
|
// 省份列表
|
|
const provinces = ref([{
|
|
detail: [],
|
|
dictId: 56,
|
|
dictName: "category",
|
|
isChild: null,
|
|
name: "双人餐",
|
|
value: "2"
|
|
}, {
|
|
detail: [],
|
|
dictId: 56,
|
|
dictName: "category",
|
|
isChild: null,
|
|
name: "双人餐",
|
|
value: "2"
|
|
}]);
|
|
// 选中的省份
|
|
const selectedProvince = ref(null);
|
|
// 显示省份列表
|
|
const showProvinceList = ref(true);
|
|
|
|
// 切换省份列表显示状态
|
|
const toggleProvinceList = () => {
|
|
showProvinceList.value = !showProvinceList.value;
|
|
// showCityList.value = false;
|
|
// showDistrictList.value = false;
|
|
};
|
|
// 选择省份 选中状态
|
|
const provincestyle = ref(null)
|
|
// 选择省份
|
|
const selectProvince = (province, index) => {
|
|
selectedProvince.value = province;
|
|
provincestyle.value = index
|
|
emits('grouping', selectedProvince.value.name);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.AreaSelect {
|
|
max-height: 60vh;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
align-items: flex-start;
|
|
overflow: auto;
|
|
|
|
.selector {
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: 0 0 0 20rpx;
|
|
|
|
.item {
|
|
padding: 16rpx 24rpx;
|
|
background: #f9f9f9;
|
|
}
|
|
}
|
|
}
|
|
</style> |