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

pages/index/components/grouping.vue

@@ -0,0 +1,77 @@
+<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>