leromro-mini/pages_home/pages/certification/Address.vue

<template>
    <view class="address-main">
        <pickerAddress @change="(info) => addressChange(info, item)"
            :selectValue="[formData.provinceInd, formData.cityInd, formData.districtInd]"
            style="width: 100%;"
            >
            <view
            class="inp"
                :class="formData.provinceName && formData.cityName && formData.districtName ? 'form-input' : 'form-placeholder'">
                {{ addressValue }}
            </view>
        </pickerAddress>
        <view class="icon-address" @click="onCityWx"></view>
    </view>
</template>
<script setup>
import { reactive, ref,inject } from "vue";
import { splitAddress, getCityCode, getAdressCode } from '@/utils/adress'
import { regionAddresstree } from '@/api/home.js'

import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
import { computed } from "vue";
const formData = inject('formData');

const props = defineProps({
    column: {
        type: Array,
        default: [],
    },
    isCode: {
        type: Boolean,
        default: true
    }
});
// const formData = reactive({
//     sex: null,
//     city: null,

//     provinceName: '', // 省
//     provinceCode: '',
//     provinceInd: 21,

//     cityName: '', // 市
//     cityCode: '',
//     cityInd: 0,

//     districtName: '',
//     districtCode: '',
//     districtInd: 17,
// });

const addressValue = computed(() => {
    if (formData.provinceName && formData.cityName && formData.districtName) {
        return [formData.provinceName, formData.cityName, formData.districtName].join('/');
    }
    return '请填写所在区域'
})

function addressChange(info) {
    console.log(info, '>>>>data');

    if (!info || !info.data) {
        console.error('Invalid address change info:', info);
        return;
    }

    if (!Array.isArray(info.data) || info.data.length < 3) {
        console.error('Invalid address data:', info.data);
        return;
    }

    const code = Array.isArray(info.code) ? info.code : ['', '', ''];

    let indexArray;
    if (Array.isArray(info.index)) {
        indexArray = info.index;
    } else if (info.index && typeof info.index[Symbol.iterator] === 'function') {
        indexArray = Array.from(info.index);
    } else {
        indexArray = [0, 0, 0];
    }


    Object.assign(formData, {
        provinceName: info.data[0],
        provinceCode: info.code[0],
        provinceInd: indexArray[0] || 0,
        cityName: info.data[1],
        cityCode: info.code[1],
        cityInd: indexArray[1] || 0,
        districtName: info.data[2],
        districtCode: info.code[2],
        districtInd: indexArray[2] || 0
    })
    console.log('formData===>', formData);

}
function onCityWx() {
    console.log('地区选点');
    wx.chooseLocation({
        success: async function (res) {
            console.log('res.address', res);

            const result = splitAddress(res.address);
            const res_dara = await regionAddresstree();
            const handlecityData = getCityCode([result.province, result.city, result.district].join(' '), res_dara.data)


            const api_res = await getAdressCode({ latitude: res.latitude, longitude: res.longitude }, res_dara.data)
            console.log("=================>", handlecityData, api_res)
            addressChange(api_res.cityCode)
            Object.assign(formData, {
                address: result.detail
            })
        },
        fail: function (err) {
            console.log(err);
            uni.showToast({
                title: '获取地址失败',
                icon: 'error',
            });
        },
    })
}




</script>
<style lang="scss" scoped>
.address-main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .inp {
        flex: 1;
    }

}
.form-input {
    flex: 1;
    font-family: PingFang SC;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #130F26;

}

.form-placeholder {
    color: #C9CDD4;
}

.icon-address {
    width: 36rpx;
    height: 36rpx;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAMBSURBVFiF7ZcxaBNRGMd/33k1FURQHDpUUKRYoUMHhYIK6eBSCpqWomMdrUmtFBFBMIOCQ4ulqXVwcXEQsdUqLg5mcCjo0EFowYJCHTKIBXVI7OU+h6QQc+/ukrs4CP63d9/3/t8v79597wX+6x+TRJmkE0MncHUQ1T6QboSOSoAC6Boiy6g8l9zC8l8F0vHUGSAL9DY4ZQXIyuzi85YC6dhAB3biATDYqHGdXtLmXJDpF19jA2l6uBvLfQ10RoTZ1hdc67TMPV2LDFSFeQPVPRJfBZzyKZlfWvdLsHxhRpPtWO6TFsIAdGDveKKjyfamgdiz9ybQ00KYbfVWvY0yvrLqJt4A7BDzIpAHPlTHPUAS8F2BSgGKlEuHZP5VoT5kLmgnJkNhVB9T/jVRb6pjAx3s2DmDyDnfuUI7duIycN0bMtUaT20Q/FXdk9nFdCDveGoOuBSQ8kVmFw+EAlW/rNUAoxX2bR6XbN4B0MxQJxaV1dgqPtpeMc0mbb7tfUdQE3Wto/VtwLupRYM3suh0DUwfoquoTqE6hZ34qJmhPgDJ5h1Ep0O8PLVMQEeCTXhbk3sf2F0T3Q1uzphrlB4OB0LbAnlmnn2uGXpfh8gxn1yDme5qAEiKQR46cfZgzXDFUOS9T66JyFPLC6Ti29YBcDhZk3sR+FkT/YlrZYy5JhlqmYA+eJ79MUMmNZu0ASS3sIxT6gKuAldxSl3bdyDNJm0smQwB8tSK1odU5iS3kPGNA5oZyiEa1KuMfcjcjVUfIwG/TjSt46n9OKUrxk5tJ+6Cng8CRnhkfmziqZh+opEzSerOMiWJhMyDIo75LPO9D2kmdQfhWohxVN2W2cUbpoD/9ePHZhYxfNZxJazwffOWX9gXSB7mi2yVRwDPssZQga3yiDzM+/Y6/xUCZH5pHdfqbxFUAdfqD7q+QqP/OuLfrSswIRf8hoFiQjUM0xRQRKimYJoGahKqaZhIQA1CRYKJDBQCFRkmFpAPVCyY2EB1UMSFaZk0Pdyt6eHuVnj9BiyJPmU/kRUQAAAAAElFTkSuQmCC);
    background-position: center;
    background-size: 36rpx auto;
    background-repeat: no-repeat;
    // margin-right: 32rpx;
}
</style>