feiniao-farm-h5/src/views/old_mini/interactionList/confirmArea.vue

<template>
    <div class="edit-map">
        <custom-header name="确认农场区域"></custom-header>
        <div class="edit-map-content">
            <div class="edit-map-tip">操作提示：拖动圆点，即可调整地块边界</div>
            <div class="map-container" ref="mapContainer"></div>
            <div class="edit-map-footer">
                <div class="footer-back" @click="goBack">
                    <img class="back-icon" src="@/assets/img/home/go-back.png" alt="" />
                </div>
                <div class="footer-address-box">
                    <div class="footer-address">
                        <div class="address-title">111</div>
                        <div class="address-detail">2222</div>
                    </div>
                    <div class="address-btn" @click="goBack">修改地址</div>
                </div>
                <div class="edit-map-footer-btn">
                    <div class="btn-cancel" @click="goBack">取消</div>
                    <div class="btn-confirm" @click="confirm">确认</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 地形/建模航线提示弹窗（复用 droneConsultPopup：terrainRoute 立即获取 → terrainRouteSuccess 航线已生成） -->
    <drone-consult-popup v-model:show="showTerrainRoutePopup" :type="terrainPopupType"
        @confirm="onTerrainRouteConfirm" />
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import DroneConsultPopup from "@/components/popup/droneConsultPopup.vue";
import { ref, onMounted, onActivated, onDeactivated } from "vue";
import DrawRegionMap from "./map/drawRegionMap.js";
import { useRouter, useRoute } from "vue-router";
import { convertPointToArray } from "@/utils/index";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
const route = useRoute();
const mapContainer = ref(null);
const drawRegionMap = new DrawRegionMap();

const type = ref('droneConsult');
const gardenName = ref('荔博园')
const showTerrainRoutePopup = ref(false);
/** 弹窗类型：terrainRoute 立即获取 | terrainRouteSuccess 航线已生成 */
const terrainPopupType = ref("terrainRoute");

onMounted(() => {
    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
    drawRegionMap.initMap(point, mapContainer.value);
});

onActivated(() => {
    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";

    // 先绘制地块
    const polygonData = route.query.polygonData;

    if (polygonData) {
        drawRegionMap.setAreaGeometry(JSON.parse(polygonData)?.geometryArr);
    }

    // 再设置地图中心位置，确保视图在 mapCenter
    drawRegionMap.setMapPosition(convertPointToArray(point));
});

onDeactivated(() => {
    drawRegionMap.clearLayer()
})
const goBack = () => {
    // drawRegionMap.clearLayer()
    router.back()
};

const onTerrainRouteConfirm = () => {
    if (terrainPopupType.value === "terrainRoute") {
        setTimeout(() => {
            terrainPopupType.value = "terrainRouteSuccess";
            showTerrainRoutePopup.value = true;
        }, 1000);
    } else {
        showTerrainRoutePopup.value = false;
        router.back();
    }
};

const confirm = () => {
    if (type.value === "droneConsult") {
        terrainPopupType.value = "terrainRoute";
        showTerrainRoutePopup.value = true;
    }
    // const polygonData = drawRegionMap.getAreaGeometry();
    // sessionStorage.setItem("drawRegionPolygonData", JSON.stringify(polygonData));
    // router.back();
};
</script>

<style lang="scss" scoped>
.edit-map {
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .edit-map-content {
        width: 100%;
        height: 100%;
        position: relative;

        .edit-map-tip {
            position: absolute;
            top: 23px;
            left: calc(50% - 256px / 2);
            z-index: 1;
            font-size: 12px;
            color: #fff;
            padding: 9px 20px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 20px;
        }

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

        .edit-map-footer {
            position: absolute;
            bottom: 80px;
            left: 12px;
            width: calc(100% - 24px);
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .footer-back {
                padding: 6px 7px 9px;
                background: #fff;
                border-radius: 8px;

                .back-icon {
                    width: 20px;
                    height: 18px;
                }
            }

            .footer-address-box {
                width: 100%;
                box-sizing: border-box;
                margin: 19px 0 14px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fff;
                border-radius: 14px;
                padding: 14px 12px;

                .footer-address {
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.6);

                    .address-title {
                        font-weight: 500;
                        font-size: 16px;
                        color: #000;
                    }
                }

                .address-btn {
                    color: #2199f8;
                    border: 1px solid #2199f8;
                    border-radius: 25px;
                    padding: 6px 10px;
                    flex: none;
                }
            }

            .edit-map-footer-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                gap: 8px;

                div {
                    flex: 1;
                    max-width: 100px;
                    text-align: center;
                    color: #666666;
                    font-size: 14px;
                    padding: 8px 0;
                    border-radius: 25px;
                    background: #fff;
                }

                .btn-confirm {
                    background: #000;
                    background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
                    color: #fff;
                }
            }
        }
    }
}
</style>