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.$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>