|
@@ -6,7 +6,10 @@
|
|
|
<div class="growth-hero__top">
|
|
<div class="growth-hero__top">
|
|
|
<div class="growth-hero__main">
|
|
<div class="growth-hero__main">
|
|
|
<div class="growth-hero__title-row">
|
|
<div class="growth-hero__title-row">
|
|
|
- <span class="growth-hero__title">{{ theme }}</span>
|
|
|
|
|
|
|
+ <span class="growth-hero__title">速长窗口不追肥?后期发育慢人一步,直接掉队!</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="growth-hero__tags">
|
|
|
|
|
+
|
|
|
<span class="growth-hero__tag growth-hero__tag--level">
|
|
<span class="growth-hero__tag growth-hero__tag--level">
|
|
|
<el-icon>
|
|
<el-icon>
|
|
|
<BellFilled />
|
|
<BellFilled />
|
|
@@ -15,7 +18,6 @@
|
|
|
</span>
|
|
</span>
|
|
|
<span class="growth-hero__tag growth-hero__tag--zone">{{ zoneName }}</span>
|
|
<span class="growth-hero__tag growth-hero__tag--zone">{{ zoneName }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="growth-hero__reason">{{ reason }}</div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
<div class="growth-hero__share">
|
|
<div class="growth-hero__share">
|
|
|
<Icon name="share" />
|
|
<Icon name="share" />
|
|
@@ -37,13 +39,13 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="interact-card__qa">
|
|
<div class="interact-card__qa">
|
|
|
<div class="interact-card__question">{{ t("agriFile.interactQuestionText") }}</div>
|
|
<div class="interact-card__question">{{ t("agriFile.interactQuestionText") }}</div>
|
|
|
- <div class="interact-card__row">
|
|
|
|
|
- <el-input v-model="ratio" class="interact-card__input" type="number" inputmode="decimal"
|
|
|
|
|
- :placeholder="t('agriFile.ratioPlaceholder')">
|
|
|
|
|
- <template #suffix>%</template>
|
|
|
|
|
- </el-input>
|
|
|
|
|
- <div class="interact-card__submit" @click="handleSubmit">{{ t("agriFile.submit") }}</div>
|
|
|
|
|
|
|
+ <div class="interact-card__options">
|
|
|
|
|
+ <div v-for="item in interactOptions" :key="item.id" class="interact-option"
|
|
|
|
|
+ :class="{ selected: selectedOptionId === item.id }" @click="selectedOptionId = item.id">
|
|
|
|
|
+ <span class="interact-option__text">{{ item.name }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="interact-card__submit" @click="handleSubmit">{{ t("agriFile.submit") }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="interact-card__ref">
|
|
<div class="interact-card__ref">
|
|
|
<span class="interact-card__ref-label">{{ t("agriFile.referenceImage") }}</span>
|
|
<span class="interact-card__ref-label">{{ t("agriFile.referenceImage") }}</span>
|
|
@@ -75,25 +77,32 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="guide-card__upload" @click="handleUploadClick">
|
|
<div class="guide-card__upload" @click="handleUploadClick">
|
|
|
- <el-icon><Plus /></el-icon>
|
|
|
|
|
|
|
+ <el-icon>
|
|
|
|
|
+ <Plus />
|
|
|
|
|
+ </el-icon>
|
|
|
<span>{{ t("agriFile.uploadPhoto") }}</span>
|
|
<span>{{ t("agriFile.uploadPhoto") }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <album-upload-popup v-model:show="showUploadPopup" />
|
|
|
|
|
- <leave-confirm-popup
|
|
|
|
|
- v-model:show="showLeavePopup"
|
|
|
|
|
- @confirm="confirmLeave"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <album-upload-popup v-model:show="showUploadPopup" @confirm="handleUploadConfirm" />
|
|
|
|
|
+ <tip-popup v-model:show="showSuccessPopup" type="executeSuccess" text="您已上传成功" text2="请等待诊断报告生成" hideBtn>
|
|
|
|
|
+ <template #footer>
|
|
|
|
|
+ <div class="bottom-btn-container">
|
|
|
|
|
+ <div class="bottom-btn primary-btn" @click="handleComplete">完成</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </tip-popup>
|
|
|
|
|
+ <leave-confirm-popup v-model:show="showLeavePopup" @confirm="confirmLeave" />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { computed, ref } from "vue";
|
|
|
|
|
|
|
+import { computed, nextTick, onActivated, ref } from "vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import { Icon } from 'vant';
|
|
import { Icon } from 'vant';
|
|
|
import { ElMessage } from "element-plus";
|
|
import { ElMessage } from "element-plus";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
import albumUploadPopup from "../components/albumUploadPopup.vue";
|
|
import albumUploadPopup from "../components/albumUploadPopup.vue";
|
|
|
import leaveConfirmPopup from "@/components/popup/leaveConfirmPopup.vue";
|
|
import leaveConfirmPopup from "@/components/popup/leaveConfirmPopup.vue";
|
|
|
|
|
+import tipPopup from "@/components/popup/tipPopup.vue";
|
|
|
import { useI18n } from "@/i18n";
|
|
import { useI18n } from "@/i18n";
|
|
|
|
|
|
|
|
const { t } = useI18n();
|
|
const { t } = useI18n();
|
|
@@ -105,8 +114,15 @@ const theme = computed(() => t("agriFile.interactTheme"));
|
|
|
const level = computed(() => t("agriFile.riskLevel2"));
|
|
const level = computed(() => t("agriFile.riskLevel2"));
|
|
|
const reason = computed(() => t("agriFile.interactReason"));
|
|
const reason = computed(() => t("agriFile.interactReason"));
|
|
|
const zoneName = computed(() => t("agriFile.zoneOne"));
|
|
const zoneName = computed(() => t("agriFile.zoneOne"));
|
|
|
-const ratio = ref("");
|
|
|
|
|
|
|
+/** 互动选项,后续由接口赋值 */
|
|
|
|
|
+const interactOptions = ref([
|
|
|
|
|
+ { id: 1, name: "选项一" },
|
|
|
|
|
+ { id: 2, name: "选项二" },
|
|
|
|
|
+ { id: 3, name: "选项三" },
|
|
|
|
|
+]);
|
|
|
|
|
+const selectedOptionId = ref(null);
|
|
|
const showUploadPopup = ref(false);
|
|
const showUploadPopup = ref(false);
|
|
|
|
|
+const showSuccessPopup = ref(false);
|
|
|
const showLeavePopup = ref(false);
|
|
const showLeavePopup = ref(false);
|
|
|
const situationList = [
|
|
const situationList = [
|
|
|
{ nameKey: "agriFile.growthAbnormal" },
|
|
{ nameKey: "agriFile.growthAbnormal" },
|
|
@@ -114,25 +130,54 @@ const situationList = [
|
|
|
];
|
|
];
|
|
|
|
|
|
|
|
const handleSubmit = () => {
|
|
const handleSubmit = () => {
|
|
|
- if (ratio.value === "" || ratio.value == null) {
|
|
|
|
|
- ElMessage.warning(t("agriFile.ratioPlaceholder"));
|
|
|
|
|
|
|
+ if (selectedOptionId.value == null) {
|
|
|
|
|
+ ElMessage.warning(t("agriFile.pleaseSelectOption"));
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- ElMessage.success(t("agriFile.submit"));
|
|
|
|
|
|
|
+ ElMessage.success(t("agriFile.submitSuccess"));
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const needDraw = ref(true);
|
|
|
const handleUploadClick = () => {
|
|
const handleUploadClick = () => {
|
|
|
|
|
+ if (needDraw.value) {
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/add_zone",
|
|
|
|
|
+ query: {
|
|
|
|
|
+ type: "farm",
|
|
|
|
|
+ targetUrl: isAbnormal.value ? "/pest_interact" : "/growth_track",
|
|
|
|
|
+ ...(isAbnormal.value ? { isAbnormal: "true" } : {}),
|
|
|
|
|
+ ...(route.query.id ? { trackId: route.query.id } : {}),
|
|
|
|
|
+ ...(route.query.type ? { trackType: route.query.type } : {}),
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
if (isAbnormal.value) {
|
|
if (isAbnormal.value) {
|
|
|
- router.push("/pest_interact");
|
|
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/pest_interact",
|
|
|
|
|
+ });
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
showUploadPopup.value = true;
|
|
showUploadPopup.value = true;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const hasRatio = () => ratio.value !== "" && ratio.value != null;
|
|
|
|
|
|
|
+const handleUploadConfirm = () => {
|
|
|
|
|
+ showSuccessPopup.value = true;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleComplete = () => {
|
|
|
|
|
+ showSuccessPopup.value = false;
|
|
|
|
|
+ router.replace("/agri_file");
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleContinueUpload = () => {
|
|
|
|
|
+ showSuccessPopup.value = false;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const hasAnswered = () => selectedOptionId.value != null;
|
|
|
|
|
|
|
|
const handleBack = () => {
|
|
const handleBack = () => {
|
|
|
- // if (!isAbnormal.value && !hasRatio()) {
|
|
|
|
|
|
|
+ // if (!isAbnormal.value && !hasAnswered()) {
|
|
|
// showLeavePopup.value = true;
|
|
// showLeavePopup.value = true;
|
|
|
// return;
|
|
// return;
|
|
|
// }
|
|
// }
|
|
@@ -142,6 +187,16 @@ const handleBack = () => {
|
|
|
const confirmLeave = () => {
|
|
const confirmLeave = () => {
|
|
|
router.back();
|
|
router.back();
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+onActivated(() => {
|
|
|
|
|
+ if (route.query.showUpload !== "1") return;
|
|
|
|
|
+ needDraw.value = false;
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ showUploadPopup.value = true;
|
|
|
|
|
+ const { showUpload, ...restQuery } = route.query;
|
|
|
|
|
+ router.replace({ path: route.path, query: restQuery });
|
|
|
|
|
+ });
|
|
|
|
|
+});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -176,7 +231,7 @@ const confirmLeave = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&__title {
|
|
&__title {
|
|
|
- font-size: 28px;
|
|
|
|
|
|
|
+ font-size: 22px;
|
|
|
font-family: "PangMenZhengDao";
|
|
font-family: "PangMenZhengDao";
|
|
|
margin-top: -5px;
|
|
margin-top: -5px;
|
|
|
}
|
|
}
|
|
@@ -200,14 +255,15 @@ const confirmLeave = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
- &__reason {
|
|
|
|
|
|
|
+ &__tags {
|
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
|
- padding: 4px 10px;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
- background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&__share {
|
|
&__share {
|
|
|
|
|
+ flex: none;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
gap: 4px;
|
|
@@ -286,23 +342,63 @@ const confirmLeave = () => {
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- &__row {
|
|
|
|
|
|
|
+ &__options {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
|
|
- gap: 10px;
|
|
|
|
|
- margin-top: 8px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &__input {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&__submit {
|
|
&__submit {
|
|
|
- padding: 6px 21px;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+ margin: 12px auto 0;
|
|
|
|
|
+ padding: 8px 0;
|
|
|
|
|
+ border-radius: 25px;
|
|
|
background: #2199f8;
|
|
background: #2199f8;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .interact-option {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border: 1px solid transparent;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+
|
|
|
|
|
+ &__text {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ padding: 0 6px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.selected {
|
|
|
|
|
+ border-color: #2199f8;
|
|
|
|
|
+
|
|
|
|
|
+ .interact-option__text {
|
|
|
|
|
+ color: #2199f8;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -1px;
|
|
|
|
|
+ right: -1px;
|
|
|
|
|
+ width: 18px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ background: url("@/assets/img/home/checked-bg-top.png") no-repeat bottom right / 18px 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&__ref {
|
|
&__ref {
|
|
@@ -453,4 +549,33 @@ const confirmLeave = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.bottom-btn-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .bottom-btn {
|
|
|
|
|
+ padding: 0 25px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+
|
|
|
|
|
+ &.secondary-btn {
|
|
|
|
|
+ color: #b1b1b1;
|
|
|
|
|
+ border: 1px solid #eaeaea;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.primary-btn {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ background: #2199f8;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|