feiniao-farm-h5/src/views/old_mini/entry_information/selectLocation.vue

<template>
    <div class="select-location">
        <custom-header :name="headerName"></custom-header>
        <div class="select-location-content">
            <div class="search-bar">
                <location-search
                    class="location-search"
                    :user-location="userLocation"
                    @change="handleLocationChange"
                />
            </div>
            <div class="map-container" ref="mapContainer"></div>
            <div class="locate-btn" @click="handleLocate">
                <img class="locate-icon" src="@/assets/img/map/map-icon.png" alt="" />
            </div>
        </div>
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn primary-btn" @click="handleSubmit">确认点位</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import customHeader from "@/components/customHeader.vue";
import locationSearch from "@/components/pageComponents/locationSearch.vue";
import SelectLocationMap, { mapLocation, POINT_ICON } from "./map/selectLocationMap.js";
import { convertPointToArray } from "@/utils/index";

const SESSION_KEY_RESIDENT = "ENTRY_RESIDENT_LOCATION";
const SESSION_KEY_GROWTH = "GROWTH_REPORT_LOCATION";
/** 默认定位：河北宁晋县 */
const DEFAULT_POINT = "POINT(114.91863572509733 37.67702031436258)";
const DEFAULT_USER_LOCATION = "114.91863572509733,37.67702031436258";
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const router = useRouter();
const route = useRoute();
const store = useStore();
const mapContainer = ref(null);
const isPlantPoint = route.query.pointType === "plant";
const fromGrowthReport = route.query.from === "growth_report";
const fromService = route.query.from === "entry_service";
const headerName = fromGrowthReport ? "切换位置" : fromService ? "选择位置" : "选择种植点位";
const sessionKey = fromGrowthReport ? SESSION_KEY_GROWTH : SESSION_KEY_RESIDENT;
const iconSrc =
    route.query.iconType && POINT_ICON[route.query.iconType]
        ? POINT_ICON[route.query.iconType]
        : isPlantPoint
          ? POINT_ICON.plant
          : POINT_ICON.resident;

const userLocation = ref(
    store.state.home.miniUserLocation || localStorage.getItem("MINI_USER_LOCATION") || DEFAULT_USER_LOCATION
);
/** 搜索选中时带出的区县编码、地区名 */
const selectedAdcode = ref("");
const selectedRegion = ref("");

const selectLocationMap = new SelectLocationMap({
    iconSrc,
    onMapClick: () => {
        selectedAdcode.value = "";
        selectedRegion.value = "";
    },
});

function getDefaultPoint() {
    if (route.query.mapCenter) return route.query.mapCenter;
    return (
        localStorage.getItem("MINI_USER_LOCATION_POINT") ||
        store.state.home.miniUserLocationPoint ||
        DEFAULT_POINT
    );
}

function toPointWkt(coordinate) {
    const lng = Number(coordinate[0]);
    const lat = Number(coordinate[1]);
    return `POINT(${lng} ${lat})`;
}

async function fetchAdcodeByCoordinate(coordinate) {
    if (!coordinate?.length) return { adcode: "", region: "" };
    try {
        const { result } = await VE_API.old_mini_map.location({
            key: MAP_KEY,
            location: `${coordinate[1]},${coordinate[0]}`,
        });
        const adcode = result?.ad_info?.adcode;
        const region =
            result?.ad_info?.district ||
            result?.ad_info?.city ||
            result?.address_component?.district ||
            result?.address_component?.city ||
            "";
        return {
            adcode: adcode != null && adcode !== "" ? String(adcode) : "",
            region: region || "",
        };
    } catch {
        return { adcode: "", region: "" };
    }
}

onMounted(() => {
    const point = getDefaultPoint();
    selectLocationMap.initMap(point, mapContainer.value);
});

onUnmounted(() => {
    selectLocationMap.clearLayer();
});

const handleLocationChange = (payload) => {
    if (!payload?.coordinateArray) {
        selectedAdcode.value = "";
        selectedRegion.value = "";
        return;
    }
    selectedAdcode.value = payload.adcode ? String(payload.adcode) : "";
    selectedRegion.value =
        payload.item?.district || payload.item?.city || payload.city || "";
    selectLocationMap.setMapPosition(payload.coordinateArray);
};

const handleLocate = () => {
    selectedAdcode.value = "";
    selectedRegion.value = "";
    const point =
        localStorage.getItem("MINI_USER_LOCATION_POINT") ||
        store.state.home.miniUserLocationPoint ||
        DEFAULT_POINT;
    const coordinate = convertPointToArray(point).map(Number);
    selectLocationMap.setMapPosition(coordinate);
};

const handleSubmit = async () => {
    const coordinate = mapLocation.data;
    if (!coordinate) {
        ElMessage.warning(
            fromGrowthReport || fromService ? "请选择位置" : isPlantPoint ? "请选择种植点位" : "请选择常驻点位"
        );
        return;
    }
    const point = toPointWkt(coordinate);
    let adcode = selectedAdcode.value;
    let region = selectedRegion.value;
    if (!adcode || !region) {
        const meta = await fetchAdcodeByCoordinate(coordinate);
        adcode = adcode || meta.adcode;
        region = region || meta.region;
    }
    sessionStorage.setItem(
        sessionKey,
        JSON.stringify({
            point,
            coordinate: [Number(coordinate[0]), Number(coordinate[1])],
            adcode: adcode || "",
            region: region || "",
        })
    );
    router.back();
};
</script>

<style lang="scss" scoped>
.select-location {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;

    .select-location-content {
        position: relative;
        flex: 1;
        overflow: hidden;

        .search-bar {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            z-index: 2;
        }

        .map-container {
            width: 100%;
            height: 100%;
        }

        .locate-btn {
            position: absolute;
            right: 12px;
            bottom: 40px;
            z-index: 2;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

            .locate-icon {
                width: 16px;
                height: 18px;
            }
        }
    }

    .custom-bottom-fixed-btns {
        position: relative;
        background: #fff;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);

        .bottom-btn {
            padding: 0 30px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-radius: 25px;
        }

        .primary-btn {
            background: #2199f8;
            color: #fff;
        }
    }
}
</style>