feiniao-farm-h5/src/components/popup/selectRegionPopup.vue

<template>
    <popup v-model:show="showValue" round class="select-region-popup" z-index="10000" teleport="body">
        <div class="image-wrapper">
            <div class="map-container" ref="mapContainer"></div>
        </div>
        <div class="content">
            <div class="title">{{ title }}</div>
            <div class="sub-title">{{ subTitle }}</div>
        </div>
        <div class="actions">
            <div class="btn btn-ghost" @click="handleSkip">{{ t('跳过') }}</div>
            <div class="btn btn-primary" @click="handleConfirm">{{ t('去勾选') }}</div>
        </div>
    </popup>
</template>

<script setup>
import { useI18n } from "@/i18n";
const { t } = useI18n();
import { Popup } from "vant";
import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
import DrawRegionMap from "@/views/old_mini/interactionList/map/drawRegionMap.js";

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "勾选 区域",
    },
    subTitle: {
        type: String,
        default: "精准匹配农情信息，高效管理分区",
    },
    /** 地图中心点，WKT POINT 格式 */
    centerPoint: {
        type: String,
        default: "POINT (113.6142086995688 23.585836479509055)",
    },
});

const emit = defineEmits(["update:show", "skip", "confirm"]);

const mapContainer = ref(null);
const drawRegionMap = new DrawRegionMap();

const showValue = computed({
    get: () => props.show,
    set: (value) => emit("update:show", value),
});

const handleSkip = () => {
    emit("skip");
    emit("update:show", false);
};

const handleConfirm = () => {
    emit("confirm");
    emit("update:show", false);
};

const initMap = () => {
    if (!mapContainer.value) return;
    if (drawRegionMap.kmap) return;
    // 在弹窗中以只读模式展示地图（仅中心点，不回显地块）
    drawRegionMap.initMap(props.centerPoint, mapContainer.value, false, false, true);
};

const destroyMap = () => {
    if (drawRegionMap && drawRegionMap.kmap && drawRegionMap.destroyMap) {
        drawRegionMap.destroyMap();
    }
};

onMounted(() => {
    if (showValue.value) {
        nextTick(() => {
            initMap();
        });
    }
});

watch(
    () => showValue.value,
    (val) => {
        if (val) {
            nextTick(() => {
                destroyMap();
                initMap();
            });
        } else {
            destroyMap();
        }
    }
);

onBeforeUnmount(() => {
    destroyMap();
});
</script>

<style scoped lang="scss">
.select-region-popup {
    width: 100%;
    padding: 20px;

    .image-wrapper {
        width: 100%;
        background: #ffffff;
    }

    .map-container {
        width: 100%;
        height: 180px;
        border-radius: 8px;
        overflow: hidden;
    }

    .content {
        margin-top: 12px;
        text-align: center;

        .title {
            font-size: 22px;
            margin-bottom: 4px;
        }

        .sub-title {
            font-size: 20px;
        }
    }

    .actions {
        display: flex;
        justify-content: space-between;
        margin-top: 28px;
        gap: 10px;
        .btn {
            height: 40px;
            line-height: 40px;
            border-radius: 25px;
            text-align: center;
        }

        .btn-ghost {
            width: 110px;
            border: 1px solid rgba(153, 153, 153, 0.5);
            color: #666666;
        }

        .btn-primary {
            width: 162px;
            background: #2199f8;
            color: #ffffff;
            border: 1px solid #2199f8;
        }
    }
}
</style>