feiniao-farm-h5/src/components/pageComponents/locationSearch.vue

<template>
    <el-select class="location-search" v-model="locationVal" filterable remote clearable reserve-keyword :placeholder="$t('搜索位置')"
        :remote-method="remoteMethod" :loading="loading" @change="handleSearchRes" popper-class="location-search-popper"
        :class="customClass" @clear="handleClear">
        <el-option v-for="(item, index) in locationOptions.list" :key="index" :label="item.title"
            :value="{ value: item.point, item }">
            <span>{{ item.title }}</span>
            <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
        </el-option>
        <template #prefix>
            <el-icon><Search /></el-icon>
        </template>
    </el-select>
</template>

<script setup>
import { ref, reactive } from "vue";
import { transformFromGCJToWGS } from "@/utils/WSCoordinate.js";

const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const props = defineProps({
    userLocation: {
        type: String,
        default: "113.61702297075017,23.584863449735067",
    },
    customClass: {
        type: String,
        default: "",
    },
});

const emit = defineEmits(["change"]);

const locationVal = ref(null);
const locationOptions = reactive({
    list: [],
});
const loading = ref(false);

const remoteMethod = async (keyword) => {
    if (keyword) {
        locationOptions.list = [];
        loading.value = true;
        const params = {
            key: MAP_KEY,
            keyword,
            location: props.userLocation,
        };
        await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
            if (data && data.length) {
                data.forEach((item) => {
                    item.point = item.location.lat + "," + item.location.lng;
                    locationOptions.list.push(item);
                });
            }
        });
        VE_API.old_mini_map.search(params).then(({ data }) => {
            loading.value = false;
            data.forEach((item) => {
                item.point = item.location.lat + "," + item.location.lng;
                locationOptions.list.push(item);
            });
        });
    } else {
        locationOptions.list = [];
    }
};

const handleSearchRes = (v) => {
    if (!v) return;
    const parts = v.value.split(",");
    let { latitude, longitude } = transformFromGCJToWGS(parseFloat(parts[0]), parseFloat(parts[1]));
    const coordinateArray = [longitude, latitude];

    emit("change", {
        coordinateArray,
        point: `POINT (${coordinateArray[0]} ${coordinateArray[1]})`,
        address: v.item?.title || v.item?.address,
        pointAddress: v.item?.province + v.item?.city + v.item?.district,
        city: v.item?.city + v.item?.district || '',
        adcode: v.item?.adcode != null ? String(v.item.adcode) : "",
        item: v.item,
    });
};

const handleClear = () => {
    emit("change", {
        coordinateArray: null,
        point: null,
        address: null,
    });
    locationVal.value = null;
    locationOptions.list = [];
    loading.value = false;
};
</script>

<style lang="scss">
.location-search {
    width: 100%;

    .el-select__wrapper {
        background: rgba(0, 0, 0, 0.7);
        box-shadow: none;
        border-radius: 25px;
        border: 1px solid rgba(255, 255, 255, 0.4);
    }
    .el-select__placeholder{
        color: rgba(255, 255, 255, 0.7);
    }
    .el-select__input {
        color: rgba(255, 255, 255, 0.9);
    }

    .el-select__prefix,
    .el-select__caret,
    .el-select__clear {
        color: rgba(255, 255, 255, 0.45);
    }
}

.location-search-popper {
    background: #1c1c1c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;

    .el-select-dropdown__wrap {
        max-height: 280px;
    }

    .el-select-dropdown__list {
        max-width: 96vw;
        padding: 4px 0;
        overflow-x: auto;
    }

    .el-select-dropdown__item {
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.85);
        height: auto;
        min-height: 40px;
        line-height: 20px;
        padding: 8px 12px;

        &.is-hovering,
        &:hover {
            background: rgba(232, 197, 106, 0.12);
        }

        &.is-selected {
            color: #e8c56a;
            font-weight: 500;
            background: rgba(232, 197, 106, 0.08);
        }
    }

    .sub-title {
        padding-left: 6px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.4);
        flex-shrink: 0;
    }

    .el-select-dropdown__empty,
    .el-select-dropdown__loading {
        color: rgba(255, 255, 255, 0.4);
    }

    .el-popper__arrow::before {
        background: #1c1c1c !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
}
</style>