reservation-uniapp-250509/service-uniapp-client/components/selectArea.vue

<template>
	<!-- 选择地区 -->
	<van-popup v-model:show="showArea" round position="bottom" @close="showArea = false">
		<!-- <van-picker
	  title="地区选择" :columns="columns1" @confirm="onConfirm" @cancel="onCancel"
	/> -->
		<van-picker title="选择地区" 
		:columns="columns" 
		:columns-field-names="customFieldName" 
		@cancel="onCancel"
		@confirm="onConfirm" />
	</van-popup>
</template>

<script>
	export default {
		props: ['show'],
		name: "selectArea",
		data() {
			return {
				showArea: false,
				columns: [],
				columns1: [{
						text: '星沙区',
						value: '星沙区'
					},
					{
						text: '雨花区',
						value: '雨花区'
					},
					{
						text: '岳麓区',
						value: '岳麓区'
					},
					{
						text: '天心区',
						value: '天心区'
					},
					{
						text: '开福区',
						value: '开福区'
					}
				],
				customFieldName: {
					text: 'name',
					value: 'name',
					children: 'children'
				}
			}
		},
		watch: {
			show: {
				handler(newValue, oldValue) {
					this.showArea = newValue
				},
				immediate: true
			}
		},
		created() {
			this.getCurrentArea();
		},
		methods: {
			onConfirm(selectArea) {
				
				this.$store.commit('setArea', selectArea.selectedOptions[2])
				this.showArea = false
				this.$emit('select')
				// this.$emit('select', selectArea.selectedValues.pop())
			},
			onCancel() {
				this.$emit('close')
			},
			getCurrentArea() { //获取当前开放区域
				let self = this;
				this.$api('getCurrentArea', this.queryParams, res => {
					if (res.code == 200) {
						this.columns = this.handleTree(res.result, 'id', 'pid')
						// 使用pop移除并返回数组的最后一个元素
						// const lastElement = this.columns[0].children[0].children.pop();
						// this.columns[0].children[0].children.unshift(lastElement)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>