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

<template>
    <popup
        v-model:show="showValue"
        round
        teleport="body"
        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 class="restore-planting-popup__bbox">
                        <span>{{ stageTag }}</span>
                    </div>
                    <div class="restore-planting-popup__detect">{{ detectText }}</div> -->
                </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"
                    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="" />
                    <div class="restore-planting-popup__guide-btn" @click="handleViewGuide">
                        {{ t("agriFile.viewPatrolGuide") }}
                    </div>
                </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="phenologyAnswer = 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--ghost" @click="handleChangeQuestion">
                    {{ t("agriFile.changeQuestion") }}
                </div>
                <div class="restore-planting-popup__btn restore-planting-popup__btn--primary" @click="handleConfirm">
                    {{ questionType === 'time' ? t("agriFile.confirmNow") : t("agriFile.submitInfo") }}
                </div>
            </div>
        </div>
    </popup>
</template>

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

const { t } = useI18n();

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    questionText: {
        type: String,
        default: "还记得农场的 “来梢” 的时间吗？",
    },
    highlightWord: {
        type: String,
        default: "来梢",
    },
    hintText: {
        type: String,
        default: "时间误差 5-7 天无需担心，系统将结合作物生长模拟模型自动校准",
    },
    sampleImage: {
        type: String,
        default: require("@/assets/img/agricultural/baidian.png"),
    },
    stageTag: {
        type: String,
        default: "白点",
    },
    detectText: {
        type: String,
        default: "生育期检测：当前检测到白点期",
    },
    phenologyQuestion: {
        type: String,
        default: "您的农场是否进入到 某某物候期 ?",
    },
    phenologyHighlight: {
        type: String,
        default: "某某物候期",
    },
    phenologyImage: {
        type: String,
        default: require("@/assets/img/common/sd-1.jpg"),
    },
});

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

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

const questionType = ref("time"); // time | phenology
const selectedDate = ref("");
const phenologyAnswer = ref("reached");

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

watch(
    () => props.show,
    (visible) => {
        if (visible) {
            questionType.value = "time";
            selectedDate.value = "";
            phenologyAnswer.value = "reached";
        }
    }
);

const handleChangeQuestion = () => {
    questionType.value = questionType.value === "time" ? "phenology" : "time";
    emit("changeQuestion", questionType.value);
};

const handleViewGuide = () => {
    emit("viewGuide");
};

const handleConfirm = () => {
    emit("confirm", {
        type: questionType.value,
        date: selectedDate.value,
        phenologyAnswer: phenologyAnswer.value,
    });
    showValue.value = false;
};
</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 {
        // position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        // padding-right: 72px;
        // min-height: 64px;
    }

    &__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: 16px;
        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;
        }
    }

    &__bbox {
        position: absolute;
        top: 36%;
        left: 50%;
        width: 72px;
        height: 72px;
        transform: translate(-50%, -50%);
        border: 2px solid #2199f8;
        box-sizing: border-box;
        pointer-events: none;

        span {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 4px;
            font-size: 12px;
            line-height: 16px;
            color: #2199f8;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.85);
        }
    }

    &__detect {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 8px 10px;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 12px;
        line-height: 18px;
    }

    &__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: space-between;
        gap: 12px;
    }

    &__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;

        &--ghost {
            background: rgba(236, 236, 236, 0.5);
            color: rgba(0, 0, 0, 0.6);
        }

        &--primary {
            background: linear-gradient(180deg, #76C3FF 0%, #2199F8 100%);
            color: #fff;
        }
    }
}
</style>