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

<template>
    <popup
        v-model:show="visible"
        round
        teleport="body"
        :z-index="20000"
        class="restore-planting-popup"
        :close-on-click-overlay="true"
    >
        <div class="popup-content">
            <img
                class="restore-planting-popup__decor"
                src="@/assets/img/agricultural/question.png"
                alt=""
            />
            <div class="restore-planting-popup__header">
                <div class="restore-planting-popup__title">
                    <div>{{ t("agriFile.restoreFillQuestions") }}</div>
                    <div>{{ t("agriFile.restorePlantingService") }}</div>
                </div>
            </div>

            <!-- 问题一：选择时间 -->
            <div v-if="questionType === 'time'" class="restore-planting-popup__card">
                <div class="restore-planting-popup__question">
                    <template v-if="highlightWord && questionText.includes(highlightWord)">
                        <span>{{ questionText.split(highlightWord)[0] }}</span>
                        <span class="restore-planting-popup__keyword">{{ highlightWord }}</span>
                        <span>{{ questionText.split(highlightWord).slice(1).join(highlightWord) }}</span>
                    </template>
                    <template v-else>{{ questionText }}</template>
                </div>
                <div class="restore-planting-popup__hint">{{ hintText }}</div>

                <div class="restore-planting-popup__photo">
                    <img :src="sampleImage" alt="" />
                </div>

                <el-date-picker
                    v-model="selectedDate"
                    class="restore-planting-popup__date-picker"
                    type="date"
                    format="YYYY.MM.DD"
                    value-format="YYYY.MM.DD"
                    :placeholder="t('agriFile.selectTime')"
                    :editable="false"
                    :clearable="false"
                    teleported
                    popper-class="restore-planting-date-popper"
                    style="width: 100%"
                />
            </div>

            <!-- 问题二：物候期选择 -->
            <div v-else class="restore-planting-popup__card">
                <div class="restore-planting-popup__question">
                    <template v-if="phenologyHighlight && phenologyQuestion.includes(phenologyHighlight)">
                        <span>{{ phenologyQuestion.split(phenologyHighlight)[0] }}</span>
                        <span class="restore-planting-popup__keyword">{{ phenologyHighlight }}</span>
                        <span>{{ phenologyQuestion.split(phenologyHighlight).slice(1).join(phenologyHighlight) }}</span>
                    </template>
                    <template v-else>{{ phenologyQuestion }}</template>
                </div>

                <div class="restore-planting-popup__photo restore-planting-popup__photo--guide">
                    <img :src="phenologyImage" alt="" />
                    <photo-provider :photo-closable="true">
                        <photo-consumer :src="patrolGuideImage" :intro="patrolGuideImage">
                            <div class="restore-planting-popup__guide-btn">
                                {{ t("agriFile.viewPatrolGuide") }}
                            </div>
                        </photo-consumer>
                    </photo-provider>
                </div>

                <div class="restore-planting-popup__options">
                    <div
                        v-for="item in phenologyOptions"
                        :key="item.value"
                        class="restore-planting-popup__option"
                        :class="{ active: phenologyAnswer === item.value }"
                        @click="handlePhenologySelect(item.value)"
                    >
                        <span>{{ item.label }}</span>
                        <span v-if="phenologyAnswer === item.value" class="restore-planting-popup__option-check">
                            <el-icon><Check /></el-icon>
                        </span>
                    </div>
                </div>
            </div>

            <div class="restore-planting-popup__actions">
                <div
                    class="restore-planting-popup__btn restore-planting-popup__btn--primary"
                    :class="{ disabled: submitting }"
                    @click="handleConfirm"
                >
                    {{ questionType === "time" ? t("agriFile.confirmNow") : t("agriFile.submitInfo") }}
                </div>
            </div>
        </div>
    </popup>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { Popup } from "vant";
import { Check } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useI18n } from "@/i18n";
import { base_img_url2 } from "@/api/config";

const { t } = useI18n();

// ---------------------------------------------------------------------------
// Props
// ---------------------------------------------------------------------------
const props = defineProps({
    /** 分区 id，初始互动接口必填 */
    zoneId: { type: [Number, String], default: 42 },
});

// ---------------------------------------------------------------------------
// 常量
// ---------------------------------------------------------------------------
const PHENOLOGY_PREFIX = "您的农场是否进入到 ";
const DEFAULT_SAMPLE_IMAGE = require("@/assets/img/agricultural/baidian.png");
const DEFAULT_PHENOLOGY_IMAGE = require("@/assets/img/common/sd-1.jpg");
/** 巡园向导预览图 */
const PATROL_GUIDE_IMAGE_PATH =
    "e84a8f1b-9842-434c-951f-068ff6963f31/6c8b7135-95b7-4c04-82ef-a2daeb674d0c/DJI_202608190758_001_6c8b7135-95b7-4c04-82ef-a2daeb674d0c/DJI_20260819080818_0085_V_code-ws0fsmg8zg8u.jpeg";
const patrolGuideImage = base_img_url2 + PATROL_GUIDE_IMAGE_PATH;

// ---------------------------------------------------------------------------
// 页面状态
// ---------------------------------------------------------------------------
/** 弹窗显隐由接口数据控制，默认不展示 */
const visible = ref(false);
const questionType = ref("time"); // time | phenology
const selectedDate = ref("");
const phenologyAnswer = ref("");
const submitting = ref(false);

const hasDateInteract = ref(false);
const hasOptionsInteract = ref(false);
/** date_interact 原始数据，提交时可能用到 */
const dateInteractData = ref(null);
/** options_interact.interact 映射表，key 为 start_with 同类序号 */
const interactMap = ref({});
/** 当前展示的物候期序号（对应 interact 的 key） */
const currentInteractKey = ref("");
/** 用户确认「已到达」后写入，提交接口使用 */
const selectedPeriodCode = ref("");

const questionText = ref("");
const highlightWord = ref("");
const hintText = ref("");
const sampleImage = ref(DEFAULT_SAMPLE_IMAGE);
const phenologyQuestion = ref("");
const phenologyHighlight = ref("");
const phenologyImage = ref(DEFAULT_PHENOLOGY_IMAGE);

// ---------------------------------------------------------------------------
// 计算属性
// ---------------------------------------------------------------------------
const phenologyOptions = computed(() => [
    { value: "not_reached", label: t("agriFile.notReached") },
    { value: "reached", label: t("agriFile.reached") },
    { value: "passed", label: t("agriFile.passed") },
]);

const interactKeys = computed(() =>
    Object.keys(interactMap.value).sort((a, b) => Number(a) - Number(b))
);

// ---------------------------------------------------------------------------
// 工具函数
// ---------------------------------------------------------------------------
/** 当天日期 YYYY-MM-DD */
const formatToday = () => {
    const d = new Date();
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
};

/** 日期选择器 YYYY.MM.DD → 接口 YYYY-MM-DD */
const toApiDate = (value) => (value ? String(value).replace(/\./g, "-") : "");

/** 拼接 CDN 图片地址 */
const resolveImageUrl = (path) => {
    if (!path) return "";
    if (/^https?:\/\//i.test(path)) return path;
    return base_img_url2 + String(path).replace(/^\//, "");
};

/** 从 interact_theme 引号中提取高亮词，如「来梢」 */
const extractHighlightWord = (text) => {
    if (!text) return "";
    const match = String(text).match(/[“"「]([^”"」]+)[”"」]/);
    return match ? match[1] : "";
};

/** Message 需高于弹窗 z-index: 20000 */
const showMessage = (message, type = "warning") => {
    ElMessage({
        message,
        type,
        customClass: "restore-planting-message",
        zIndex: 40000,
    });
};

const showWarning = (message) => showMessage(message, "warning");

const resetForm = () => {
    questionType.value = hasDateInteract.value ? "time" : "phenology";
    selectedDate.value = "";
    phenologyAnswer.value = "";
    selectedPeriodCode.value = "";
};

// ---------------------------------------------------------------------------
// 业务逻辑：填充问题 / 物候期切换
// ---------------------------------------------------------------------------
const applyDateInteract = (data) => {
    dateInteractData.value = data;
    questionText.value = data.interact_theme || "";
    highlightWord.value = extractHighlightWord(data.interact_theme);
    hintText.value = data.interact_reason || "";
    sampleImage.value = resolveImageUrl(data.guide_url) || DEFAULT_SAMPLE_IMAGE;
};

/** 按 interact key 刷新问题二文案与配图 */
const applyPhenologyByKey = (key) => {
    const item = interactMap.value[key];
    if (!item) return;
    currentInteractKey.value = String(key);
    const name = item.period_name || "";
    phenologyHighlight.value = name;
    phenologyQuestion.value = `${PHENOLOGY_PREFIX}${name} ?`;
    phenologyImage.value = resolveImageUrl(item.url) || DEFAULT_PHENOLOGY_IMAGE;
    selectedPeriodCode.value = "";
};

/** 暂未到达 → 前一个；已过 → 后一个 */
const movePhenology = (direction) => {
    const keys = interactKeys.value;
    const idx = keys.indexOf(String(currentInteractKey.value));
    if (idx < 0) return false;
    const nextIdx = direction === "prev" ? idx - 1 : idx + 1;
    if (nextIdx < 0 || nextIdx >= keys.length) {
        showWarning(direction === "prev" ? "已是最早物候期" : "已是最晚物候期");
        return false;
    }
    applyPhenologyByKey(keys[nextIdx]);
    phenologyAnswer.value = "";
    return true;
};

const applyQuestionData = (data) => {
    hasDateInteract.value = !!data?.date_interact;
    hasOptionsInteract.value = !!data?.options_interact?.interact;

    if (hasDateInteract.value) {
        applyDateInteract(data.date_interact);
    }

    if (hasOptionsInteract.value) {
        interactMap.value = data.options_interact.interact || {};
        const startKey = String(data.options_interact.start_with ?? interactKeys.value[0] ?? "");
        applyPhenologyByKey(startKey);
    }

    // 有时间题优先展示；仅物候题则直接进入问题二
    questionType.value = hasDateInteract.value ? "time" : "phenology";
    visible.value = hasDateInteract.value || hasOptionsInteract.value;
};

/** 请求接口判断是否展示，并填充问题内容 */
const checkShouldShow = async () => {
    try {
        const res = await VE_API.questionnaire.getInitialInteraction({
            zone_id: props.zoneId,
            date: formatToday(),
            // date: '2025-07-10',
        });
        if (res?.code === 200 && res.data) {
            applyQuestionData(res.data);
        } else {
            visible.value = false;
        }
    } catch (e) {
        visible.value = false;
    }
};

// ---------------------------------------------------------------------------
// 事件处理 / 生命周期
// ---------------------------------------------------------------------------
onMounted(() => {
    checkShouldShow();
});

/**
 * 暂未到达 / 已过：立刻切到相邻物候期；
 * 已到达：选中并记下当前 period_code，供提交使用
 */
const handlePhenologySelect = (value) => {
    if (value === "not_reached") {
        movePhenology("prev");
        return;
    }
    if (value === "passed") {
        movePhenology("next");
        return;
    }
    phenologyAnswer.value = "reached";
    const current = interactMap.value[currentInteractKey.value];
    selectedPeriodCode.value = current?.period_code || "";
};

/**
 * 组装保存感知结果载荷
 * @param {'time'|'phenology'} type 问题一不含 period_code；问题二不含 interact_code
 */
const buildSubmitPayload = (type = "time") => {
    const payload = {
        zone_id: Number(props.zoneId) || props.zoneId,
        date: toApiDate(selectedDate.value) || formatToday(),
    };
    if (type === "time") {
        payload.interact_code = dateInteractData.value?.interact_code || "";
    } else {
        payload.period_code = selectedPeriodCode.value || "";
    }
    return payload;
};

/** 从 axios 错误中取出可读信息 */
const getRequestErrorMessage = (err) => {
    const data = err?.response?.data;
    if (typeof data === "string" && data) return data;
    if (data?.msg) return data.msg;
    if (data?.message) return data.message;
    if (err?.message) return err.message;
    return "提交失败，请稍后再试";
};

/**
 * 调用保存感知结果接口
 * @param {'time'|'phenology'} type
 * @param {{ closeOnSuccess?: boolean }} options closeOnSuccess=false 时成功后不关弹窗（用于继续答问题二）
 */
const submitInteractResult = async (type = "time", { closeOnSuccess = true } = {}) => {
    if (submitting.value) return false;
    submitting.value = true;
    try {
        const res = await VE_API.questionnaire.saveInteractResult(buildSubmitPayload(type));
        if (res?.code === 200) {
            if (closeOnSuccess) {
                showMessage(res.msg || "提交成功", "success");
                visible.value = false;
                resetForm();
            }
            return true;
        }
        showMessage(res?.msg || "提交失败，请稍后再试", "error");
        return false;
    } catch (err) {
        showMessage(getRequestErrorMessage(err), "error");
        return false;
    } finally {
        submitting.value = false;
    }
};

const handleConfirm = async () => {
    if (submitting.value) return;

    // 问题一：立即确认 → 提交（不含 period_code）
    if (questionType.value === "time") {
        if (!selectedDate.value) {
            showWarning(t("agriFile.selectTime"));
            return;
        }
        const ok = await submitInteractResult("time", {
            // 还有问题二则提交成功后继续展示，不关弹窗
            closeOnSuccess: !hasOptionsInteract.value,
        });
        if (ok && hasOptionsInteract.value) {
            questionType.value = "phenology";
        }
        return;
    }

    // 问题二：需已选择「已到达」并写入 period_code；提交不含 interact_code
    if (phenologyAnswer.value !== "reached" || !selectedPeriodCode.value) {
        const current = interactMap.value[currentInteractKey.value];
        if (phenologyAnswer.value === "reached" && current?.period_code) {
            selectedPeriodCode.value = current.period_code;
        } else {
            showWarning("请确认当前物候期是否已到达");
            return;
        }
    }

    await submitInteractResult("phenology");
};

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

<style scoped lang="scss">
.restore-planting-popup {
    width: 86%;
    padding: 18px 14px 16px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #d7ecff 0%, #ffffff 28%);
    overflow: visible;

    &__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    &__title {
        font-size: 22px;
        line-height: 25px;
        color: #111;
        div {
            font-family: "PangMenZhengDao";
        }
    }

    .popup-content {
        position: relative;
    }

    &__decor {
        position: absolute;
        top: -8px;
        right: -4px;
        width: 78px;
        height: 78px;
        object-fit: contain;
        pointer-events: none;
    }

    &__card {
        margin-top: 12px;
        padding: 10px 12px 12px;
        border-radius: 12px;
        background: #eaf5ff;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    &__question {
        font-size: 15px;
        line-height: 24px;
        color: #252525;
        font-weight: 500;
    }

    &__keyword {
        color: #2199f8;
    }

    &__hint {
        margin-top: 4px;
        font-size: 12px;
        line-height: 16px;
        color: #9e9e9e;
    }

    &__photo {
        position: relative;
        margin: 12px 0;
        border-radius: 8px;
        overflow: hidden;
        background: #dfeaf5;

        img {
            display: block;
            width: 100%;
            height: 148px;
            object-fit: cover;
        }

        &--guide img {
            height: 132px;
        }
    }

    &__guide-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        height: 28px;
        padding: 0 10px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__options {
        margin-top: 12px;
        display: flex;
        gap: 8px;
    }

    &__option {
        position: relative;
        flex: 1;
        height: 36px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #333;
        box-sizing: border-box;

        &.active {
            border-color: #2199f8;
            color: #2199f8;
        }
    }

    &__option-check {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        border-radius: 0 6px 0 6px;
        background: #2199f8;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    &__date-picker {
        width: 100%;

        :deep(.el-input__wrapper) {
            height: 40px;
            border-radius: 8px;
            box-shadow: none !important;
            background: #fff;
            padding: 0 12px;
        }

        :deep(.el-input__inner) {
            font-size: 14px;
            color: #333;
        }

        :deep(.el-input__prefix),
        :deep(.el-input__suffix) {
            color: rgba(0, 0, 0, 0.35);
        }
    }

    &__actions {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__btn {
        height: 40px;
        line-height: 40px;
        padding: 0 30px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        box-sizing: border-box;

        &--primary {
            // flex: 1;
            background: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
            color: #fff;

            &.disabled {
                opacity: 0.6;
                pointer-events: none;
            }
        }
    }
}
</style>

<!-- 日期面板 / 图片预览 / Message teleport 到 body，需高于弹窗 z-index: 20000 -->
<style lang="scss">
.restore-planting-date-popper {
    z-index: 30000 !important;
}

.PhotoSlider__Wrapper {
    z-index: 30001 !important;
}

.el-message.restore-planting-message {
    z-index: 40000 !important;
}
</style>