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/home/current.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(113.6142086995688 23.585836479509055)";
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") || "113.61702297075017,23.584863449735067"
);
/** 搜索选中时带出的区县编码 */
const selectedAdcode = ref("");
/** 搜索选中时带出的地址文案 */
const selectedAddress = ref("");

const selectLocationMap = new SelectLocationMap({
    iconSrc,
    onMapClick: () => {
        selectedAdcode.value = "";
        selectedAddress.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 fetchLocationInfoByCoordinate(coordinate) {
    if (!coordinate?.length) return { adcode: "", address: "" };
    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 address =
            result?.formatted_addresses?.recommend ||
            result?.address ||
            (result?.address_component
                ? `${result.address_component.city || ""}${result.address_component.district || ""}`
                : "");
        return {
            adcode: adcode != null && adcode !== "" ? String(adcode) : "",
            address: address || "",
        };
    } catch {
        return { adcode: "", address: "" };
    }
}

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

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

const handleLocationChange = (payload) => {
    if (!payload?.coordinateArray) {
        selectedAdcode.value = "";
        selectedAddress.value = "";
        return;
    }
    selectedAdcode.value = payload.adcode ? String(payload.adcode) : "";
    selectedAddress.value = payload.address || payload.pointAddress || "";
    selectLocationMap.setMapPosition(payload.coordinateArray);
};

const handleLocate = () => {
    selectedAdcode.value = "";
    selectedAddress.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 address = selectedAddress.value;
    if (!adcode || !address) {
        const info = await fetchLocationInfoByCoordinate(coordinate);
        if (!adcode) adcode = info.adcode;
        if (!address) address = info.address;
    }
    const payload = {
        point,
        coordinate: [Number(coordinate[0]), Number(coordinate[1])],
        adcode: adcode || "",
        address: address || "",
    };
    sessionStorage.setItem(sessionKey, JSON.stringify(payload));
    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: rgba(20, 20, 22, 0.8);
            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: #121214;
        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: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);
            color: #000;
        }
    }
}
</style>