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

<template>
    <popup
        v-model:show="visible"
        round
        teleport="body"
        class="diagnosis-report-popup"
        :z-index="20000"
        :close-on-click-overlay="true"
    >
        <img class="diagnosis-report-popup__image" src="@/assets/img/agricultural/report.png" alt="" />
        <div class="diagnosis-report-popup__title">
            <div>{{ t("agriFile.plantingDiagnosisReport") }}</div>
            <div>{{ t("agriFile.reportGenerated") }}</div>
        </div>
        <div class="diagnosis-report-popup__btn" @click="handleView">{{ t("agriFile.clickToView") }}</div>
        <div class="diagnosis-report-popup__hint">{{ t("agriFile.viewInDiagnosisHint") }}</div>
    </popup>
</template>

<script setup>
import { onActivated, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { Popup } from "vant";
import { useI18n } from "@/i18n";

const { t } = useI18n();
const router = useRouter();

const SHOWN_CACHE_PREFIX = "DIAGNOSIS_REPORT_POPUP_SHOWN_";

/** 弹窗显隐由组件内接口控制，默认不展示 */
const visible = ref(false);

/** 当前缓存中选中的农场 / 分区 id */
const getSelectedFarmId = () => {
    try {
        const farm = JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
        return String(
            localStorage.getItem("selectedFarmId") || farm.farm_id || farm.id || ""
        );
    } catch {
        return String(localStorage.getItem("selectedFarmId") || "");
    }
};

const getSelectedZoneId = () => {
    try {
        const farm = JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
        const zoneId = farm.zone_id ?? farm.zoneId ?? "";
        return zoneId === "" || zoneId == null ? "" : String(zoneId);
    } catch {
        return "";
    }
};

const getShownCacheKey = (farmId, zoneId) =>
    `${SHOWN_CACHE_PREFIX}${farmId}_${zoneId || ""}`;
const hasShownPopup = (farmId, zoneId) =>
    !!localStorage.getItem(getShownCacheKey(farmId, zoneId));

const markPopupShown = (farmId, zoneId) => {
    if (!farmId) return;
    localStorage.setItem(getShownCacheKey(farmId, zoneId), "1");
};

/** 当前选中农场；接口必传 farm_id / zone_id */
const readSelectedFarm = () => {
    try {
        return JSON.parse(localStorage.getItem("selectedFarmData") || "null") || {};
    } catch {
        return {};
    }
};

const readFarmId = () => {
    const farm = readSelectedFarm();
    const id = farm.farm_id ?? farm.id;
    if (id != null && id !== "") return id;
    return localStorage.getItem("selectedFarmId") || "";
};

const readZoneId = () => {
    const farm = readSelectedFarm();
    const id = farm.zone_id ?? farm.zoneId;
    return id != null && id !== "" ? id : "";
};

let checking = false;

/** exists=2 且本地未展示过时弹窗（不依赖物候确认） */
const checkShouldShow = async () => {
    const farmId = getSelectedFarmId();
    const zoneId = getSelectedZoneId();
    if (!farmId || hasShownPopup(farmId, zoneId)) {
        visible.value = false;
        return;
    }
    checking = true;
    try {
        const res = await VE_API.questionnaire.checkReportGenerated({
            farm_id: farmId,
            zone_id: zoneId,
        });
        const shouldShow = res?.code === 200 && Number(res?.data?.exists) === 1;
        visible.value = shouldShow;
        if (shouldShow) markPopupShown(farmId, zoneId);
    } catch {
        visible.value = false;
    } finally {
        checking = false;
    }
};

const handleView = () => {
    const farmId = getSelectedFarmId();
    const zoneId = getSelectedZoneId();
    markPopupShown(farmId, zoneId);
    visible.value = false;
    router.push("/diagnosis_report");
};

// 用户点遮罩关闭时也记为已展示，避免反复弹出
watch(visible, (val, oldVal) => {
    if (oldVal && !val) markPopupShown(getSelectedFarmId(), getSelectedZoneId());
});

onActivated(() => {
    checkShouldShow();
});

defineExpose({
    checkShouldShow,
});
</script>

<style scoped lang="scss">
.diagnosis-report-popup {
    width: 78%;
    padding: 90px 20px 22px;
    text-align: center;
    overflow: visible;
    background: linear-gradient(360deg, #FFFFFF 0%, #D3EBFF 100%);

    &__image {
        display: block;
        width: 138px;
        height: 138px;
        margin: 0 auto 16px;
        position: absolute;
        top: -54px;
        left: 50%;
        transform: translateX(-50%);
    }

    &__title {
        font-size: 30px;
        color: #010101;
        line-height: 32px;
        div{
            font-family: "pangmenzhengdao";
        }
    }

    &__btn {
        width: 162px;
        margin: 18px auto 10px;
        padding: 8px 0;
        border-radius: 25px;
        background: linear-gradient(180deg, #96D1FF 0%, #2199F8 100%);
        color: #fff;
        font-size: 16px;
    }

    &__hint {
        color: #1D1919;
    }
}
</style>