|
|
@@ -0,0 +1,433 @@
|
|
|
+<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>
|