首页,我的 写扫码点餐之前提交1.0.0

pages/index/components/AreaSelect.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="AreaSelect flex-start">
+		<!-- 省份选择 -->
+		<view class="selector">
+			<!--{{ selectedProvince ? selectedProvince.name : '请选择省份' }}-->
+			<view v-if="showProvinceList" class="option-list"
+				style="background: #f9f9f9;height: 60vh;border-radius: 0 0 0 20rpx;">
+				<view v-for="(province,index) in provinces" :key="province.code"
+					:style="selectedProvince && provincestyle ==index?'background: #fff;font-weight: bold;':''"
+					@click="selectProvince(province,index)">
+					{{ province.name }}
+				</view>
+			</view>
+		</view>
+		<!-- 城市选择，只有选择了省份才显示 -->
+		<view v-if="selectedProvince" class="selector">
+			<!--{{ selectedCity ? selectedCity.name : '请选择城市' }}-->
+			<view v-if="showCityList" class="option-list">
+				<view v-for="(city,index) in cities" :key="city.code"
+					:style="selectedCity && citiesstyle == index?'font-weight: bold;':''"
+					@click="selectCity(city,index)">
+					{{ city.name }}
+				</view>
+			</view>
+		</view>
+		<!-- 区县选择，只有选择了城市才显示 -->
+		<view v-if="selectedCity" class="selector" @click="toggleDistrictList">
+			<!--{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }} -->
+			<view v-if="showDistrictList" class="option-list">
+				<view v-for="(district,index) in districts" :key="district.code"
+					:style="selectedDistrict && districtsstyle == index?'font-weight: bold;':''"
+					@click="selectDistrict(district,index)">
+					{{ district.name }}
+				</view>
+			</view>
+		</view>
+		<!-- 输出选中的内容 -->
+		<!-- <view v-if="(selectedProvince &&!selectedCity) || (selectedCity &&!selectedDistrict) || selectedDistrict">
+			你选中的地区是：
+			{{ selectedProvince ? selectedProvince.name : '' }}
+			{{ selectedCity ? selectedCity.name : '' }}
+			{{ selectedDistrict ? selectedDistrict.name : '' }}
+		</view> -->
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		defineEmits
+	} from 'vue';
+	import {
+		cityData
+	} from './cityData.js';
+	const emits = defineEmits(['updateValue']);
+	// 省份列表
+	const provinces = ref(cityData);
+	// 选中的省份
+	const selectedProvince = ref(null);
+	// 显示省份列表
+	const showProvinceList = ref(true);
+	// 城市列表
+	const cities = ref([]);
+	// 选中的城市
+	const selectedCity = ref(null);
+	// 显示城市列表
+	const showCityList = ref(true);
+	// 区县列表
+	const districts = ref([]);
+	// 选中的区县
+	const selectedDistrict = ref(null);
+	// 显示区县列表
+	const showDistrictList = 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;
+		cities.value = province.children || [];
+		selectedCity.value = null;
+		districts.value = [];
+		selectedDistrict.value = null;
+		provincestyle.value = index
+		// showProvinceList.value = false;
+	};
+
+	// 切换城市列表显示状态
+	const toggleCityList = () => {
+		showCityList.value = !showCityList.value;
+		// showProvinceList.value = false;
+		// showDistrictList.value = false;
+	};
+
+	// 切换城市列表显示状态
+	const citiesstyle = ref(null)
+	// 选择城市
+	const selectCity = (city, index) => {
+		selectedCity.value = city;
+		districts.value = city.children || [];
+		citiesstyle.value = index
+		if (districts.value.length == 0) {
+			emits('updateValue', selectedCity.value.name ? selectedCity.value.name : '')
+		}
+		// showCityList.value = false;
+	};
+
+	// 切换区县列表显示状态
+	const toggleDistrictList = () => {
+		showDistrictList.value = !showDistrictList.value;
+		// showProvinceList.value = false;
+		// showCityList.value = false;
+	};
+
+	// 切换区县选择
+	const districtsstyle = ref(null)
+	// 选择区县
+	const selectDistrict = (district, index) => {
+		selectedDistrict.value = district;
+		districtsstyle.value = index
+		emits('updateValue', selectedDistrict.value.name ? selectedDistrict.value.name : selectedCity.value.name)
+	};
+</script>
+
+<style scoped lang="scss">
+	.AreaSelect {
+		height: 60vh;
+		border-radius: 0 0 20rpx 20rpx;
+		background: #fff;
+		align-items: flex-start;
+		overflow: auto;
+		.selector {
+			position: relative;
+			width: 30%;
+			cursor: pointer;
+			background: #f9f9f9;
+
+			.option-list {
+				position: absolute;
+				top: 100%;
+				left: 0;
+				width: 100%;
+				background-color: #fff;
+				z-index: 1;
+
+				.Selected {}
+
+				view {
+					padding: 16rpx 24rpx;
+					cursor: pointer;
+
+					view:hover {
+						background-color: #f0f0f0;
+					}
+				}
+			}
+		}
+	}
+</style>