hainan_2024_zhenghe/h5/pages/main/question/src/city.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		useStore
	} from '@/store'
	const $emit = defineEmits(['setValue'])
	const $store = useStore()

	const address_data = ref([])
	const getAddressData = async () => {
		const response = await $api('AddressData')
		$response(response, () => {
			address_data.value = response.data.data.map((i) => {
				return {
					text: i.name,
					value: i.code,
					children: i.children.map((ii) => {
						return {
							text: ii.name,
							value: ii.code,
							children: ii.children.map((iii) => {
								return {
									text: iii.name,
									value: iii.code
								}
							})
						}
					})
				}
			})
			//getUserInfo();
		})
	}

	const $props = defineProps({
		info: {
			type: Object,
			default: () => {
				return {
					id: 0
				}
			}
		},
		index: {
			type: String,
			default: ''
		}
	});

	const mountedAction = () => {
		getAddressData()
	}

	const onKeyInput = (e) => {
		$emit('setValue', $props.index, e.detail.value)
	}

	onMounted(() => {
		mountedAction()
	})
</script>
<template>
	<view>
		<view class="input_wrapper">
			<uni-data-picker v-if="address_data.length !== 0" v-model="$props.info['value']" placeholder="请选择地址"
				popup-title="请选择城市" :localdata="address_data" :step-searh="true" @change="onKeyInput">
			</uni-data-picker>
		</view>
	</view>
</template>
<style scoped>
	.input_wrapper {
		width: 100%;
		height: 60rpx;
		margin-top: 20rpx;
	}

	.input_wrapper input {
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
	}
</style>