<template>
|
<nut-input
|
class="nut-input-text bole-input-text"
|
type="text"
|
input-align="right"
|
readonly
|
@click="handleChooseLocation"
|
:modelValue="props.modelValue.address"
|
alwaysEmbed
|
>
|
<template #clear>
|
<slot name="clear"></slot>
|
</template>
|
<template #left>
|
<slot name="left"></slot>
|
</template>
|
<template #right>
|
<slot name="right">
|
<img :src="IconLocation" class="choose-location-input-icon" />
|
</slot>
|
</template>
|
</nut-input>
|
</template>
|
|
<script setup lang="ts">
|
import Taro from '@tarojs/taro';
|
import IconLocation from '../../assets/components/icon-location.png';
|
import { computed } from 'vue';
|
import { useAllAreaList } from '@12333/hooks';
|
|
defineOptions({
|
name: 'ChooseLocationInput',
|
});
|
|
type Props = {
|
modelValue: WeMapModel;
|
};
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<{
|
(e: 'update:modelValue', value: Props['modelValue']): void;
|
}>();
|
|
const { findAreaCodeFromName } = useAllAreaList();
|
|
const innerModelValue = computed({
|
get() {
|
return props.modelValue;
|
},
|
set(val) {
|
emit('update:modelValue', val);
|
},
|
});
|
|
function handleChooseLocation() {
|
Taro.chooseLocation({
|
success: function (res) {
|
console.log('res: ', res);
|
const latitude = res.latitude as unknown as number;
|
const longitude = res.longitude as unknown as number;
|
let provinceName = '';
|
let cityName = '';
|
let countyName = '';
|
let nameList = res.address.match(
|
/.+?(省|行政区|市|自治区|自治州|行政单位|盟|市辖区|旗|海域|岛|县|区)/g
|
);
|
if (nameList) {
|
if (nameList?.length === 2) {
|
provinceName = nameList[0];
|
cityName = nameList[0];
|
countyName = nameList[1];
|
} else {
|
provinceName = nameList[0];
|
cityName = nameList[1];
|
countyName = nameList[2];
|
}
|
}
|
emit('update:modelValue', {
|
latitude,
|
longitude,
|
provinceName,
|
cityName,
|
countyName,
|
provinceCode: findAreaCodeFromName(provinceName),
|
cityCode: findAreaCodeFromName(cityName),
|
countyCode: findAreaCodeFromName(countyName),
|
address: res.address,
|
addressName: res.name,
|
});
|
},
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.choose-location-input-icon {
|
width: 19px;
|
height: 25px;
|
margin-left: 10px;
|
}
|
</style>
|
