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 v-if="hintText" 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();

// ---------------------------------------------------------------------------
// 常量
// ---------------------------------------------------------------------------
const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";
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;

/** adjustPhenology：已到达 / 暂未到达 / 已过 */
const ADJUST_ACTION = {
    reached: 0,
    not_reached: 1,
    passed: 2,
};

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

/** 当前物候期编码，调整后用接口返回值替换 */
const currentPhenophaseCode = ref("");
const cropType = ref("");
const userTel = 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 readEntryFarmData = () => {
    try {
        return JSON.parse(localStorage.getItem(ENTRY_FARM_DATA_KEY) || "null");
    } catch {
        return null;
    }
};

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

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

/** 从物候问题中提取高亮词，如「灌浆期」 */
const extractPhenologyHighlight = (text) => {
    if (!text) return "";
    const match = String(text).match(/进入到\s*(.+?)\s*[?？]?$/);
    return match ? match[1].trim() : "";
};

/** 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 = "time";
    selectedDate.value = "";
    phenologyAnswer.value = "";
};

// ---------------------------------------------------------------------------
// 业务逻辑：加载 / 调整物候问题
// ---------------------------------------------------------------------------
/** 用 phenologyProblem 返回填充问题一、问题二 */
const applyQuestionData = (data) => {
    if (!data) return;

    const timeQuestion = data.phenophase_question_time || "";
    const phenoQuestion = data.phenophase_question || "";
    const pic = resolveImageUrl(data.phenophase_pic_url);

    questionText.value = timeQuestion;
    highlightWord.value = extractHighlightWord(timeQuestion);
    hintText.value = "";
    sampleImage.value = pic || DEFAULT_SAMPLE_IMAGE;

    phenologyQuestion.value = phenoQuestion;
    phenologyHighlight.value = extractPhenologyHighlight(phenoQuestion);
    phenologyImage.value = pic || DEFAULT_PHENOLOGY_IMAGE;

    // 有时间题先展示问题一，否则直接问题二
    questionType.value = timeQuestion ? "time" : "phenology";
    phenologyAnswer.value = "";
};

/** 拉取物候期问题 */
const fetchPhenologyProblem = async (phenophaseCode) => {
    const res = await VE_API.questionnaire.phenologyProblem({
        crop_type: cropType.value,
        phenophase_code: phenophaseCode,
    });
    if (res?.code !== 200 || !res.data) {
        throw new Error(res?.msg || "获取问题失败");
    }
    return res.data;
};

/** 先查报告状态，exists=2 不展示；否则拉取物候问题 */
const checkShouldShow = async () => {
    const farm = readEntryFarmData();
    const crop = farm?.crop || "";
    const code = farm?.cropCode || "";
    const tel = farm?.phone || "";
    if (!tel) {
        visible.value = false;
        return;
    }

    cropType.value = crop;
    currentPhenophaseCode.value = String(code || "");
    userTel.value = tel;

    try {
        const checkRes = await VE_API.questionnaire.checkReportGenerated({ tel });
        if (checkRes?.code !== 200 || Number(checkRes?.data?.exists) === 2) {
            visible.value = false;
            return;
        }
        if (!crop || !code) {
            visible.value = false;
            return;
        }
        const data = await fetchPhenologyProblem(currentPhenophaseCode.value);
        applyQuestionData(data);
        visible.value = !!(data.phenophase_question_time || data.phenophase_question);
    } catch {
        visible.value = false;
    }
};

/**
 * 暂未到达 / 已过：调 adjustPhenology，再用新 code 刷新问题二
 * @param {0|1|2} action
 */
const adjustAndRefreshQuestion = async (action) => {
    if (submitting.value) return;
    submitting.value = true;
    try {
        const adjustRes = await VE_API.questionnaire.adjustPhenology({
            phenophase_code: currentPhenophaseCode.value,
            action,
            tel: userTel.value,
        });
        if (adjustRes?.code !== 200) {
            showMessage(adjustRes?.msg || "调整物候期失败", "error");
            return;
        }
        const nextCode = adjustRes?.data?.adjusted_phenophase_code;
        if (nextCode == null || nextCode === "") {
            showMessage("暂无更多物候期可调整", "warning");
            return;
        }
        currentPhenophaseCode.value = String(nextCode);
        const data = await fetchPhenologyProblem(currentPhenophaseCode.value);
        // 调整后只替换问题二（及配图），停留在问题二
        const phenoQuestion = data.phenophase_question || "";
        const pic = resolveImageUrl(data.phenophase_pic_url);
        phenologyQuestion.value = phenoQuestion;
        phenologyHighlight.value = extractPhenologyHighlight(phenoQuestion);
        phenologyImage.value = pic || DEFAULT_PHENOLOGY_IMAGE;
        if (pic) sampleImage.value = pic;
        phenologyAnswer.value = "";
    } catch (err) {
        showMessage(err?.response?.data?.msg || err?.message || "调整物候期失败", "error");
    } finally {
        submitting.value = false;
    }
};

/** 已到达：确认当前物候期 */
const confirmReachedPhenology = async () => {
    if (submitting.value) return false;
    submitting.value = true;
    try {
        const res = await VE_API.questionnaire.adjustPhenology({
            phenophase_code: currentPhenophaseCode.value,
            action: ADJUST_ACTION.reached,
            tel: userTel.value,
        });
        if (res?.code !== 200) {
            showMessage(res?.msg || "提交失败，请稍后再试", "error");
            return false;
        }
        // 供诊断报告弹窗判断：已确认物候后才可弹出
        if (userTel.value) {
            localStorage.setItem(`PHENOLOGY_REACHED_${userTel.value}`, "1");
        }
        showMessage(res.msg || "提交成功", "success");
        visible.value = false;
        resetForm();
        return true;
    } catch (err) {
        showMessage(err?.response?.data?.msg || err?.message || "提交失败，请稍后再试", "error");
        return false;
    } finally {
        submitting.value = false;
    }
};

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

/**
 * 暂未到达 / 已过：调接口刷新问题；
 * 已到达：仅选中，提交时再调接口
 */
const handlePhenologySelect = async (value) => {
    if (value === "not_reached") {
        phenologyAnswer.value = value;
        await adjustAndRefreshQuestion(ADJUST_ACTION.not_reached);
        return;
    }
    if (value === "passed") {
        phenologyAnswer.value = value;
        await adjustAndRefreshQuestion(ADJUST_ACTION.passed);
        return;
    }
    phenologyAnswer.value = "reached";
};

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

    // 问题一：确认后直接进入问题二，不调接口
    if (questionType.value === "time") {
        if (!selectedDate.value) {
            showWarning(t("agriFile.selectTime"));
            return;
        }
        if (!phenologyQuestion.value) {
            showMessage("暂无物候期问题", "warning");
            visible.value = false;
            resetForm();
            return;
        }
        questionType.value = "phenology";
        return;
    }

    // 问题二：需选择「已到达」后提交
    if (phenologyAnswer.value !== "reached") {
        showWarning("请确认当前物候期是否已到达");
        return;
    }
    await confirmReachedPhenology();
};

defineExpose({
    checkShouldShow,
});
</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 {
            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>