feiniao-farm-h5/src/views/old_mini/agri_file/pages/growthTrack.vue

<template>
    <div class="growth-track-page">
        <custom-header
            :name="pageTitle"
            :isGoBack="!isFromShare"
            :isClose="isFromShare"
            :showClose="false"
            @goback="handleBack"
        />
        <div class="growth-track-body">
            <div class="growth-hero">
                <div class="growth-hero__top">
                    <div class="growth-hero__main">
                        <div class="growth-hero__title-row">
                            <span class="growth-hero__title">{{ theme }}</span>
                            <span class="growth-hero__tag growth-hero__tag--level">
                                <el-icon>
                                    <BellFilled />
                                </el-icon>
                                {{ level }}
                            </span>
                            <span class="growth-hero__tag growth-hero__tag--zone">{{ zoneName }}</span>
                        </div>
                        <div class="growth-hero__reason">{{ reason }}</div>
                    </div>
                    <div class="growth-hero__share" @click="handleShare">
                        <Icon name="share" />
                        <span>{{ t("agriFile.forward") }}</span>
                    </div>
                </div>
            </div>
            <div class="growth-content">
                <div class="growth-content__title">{{ t("agriFile.agriAssessment") }}</div>
                <div class="growth-content__desc">{{ assessmentDesc }}</div>
            </div>
            <div class="interact-card">
                <div class="interact-card__head">
                    <div class="interact-card__tab">
                        <img class="interact-card__star" src="@/assets/img/agricultural/start.png" alt="" />
                        <span>{{ t("agriFile.interactQuestion") }}</span>
                    </div>
                </div>
                <div class="interact-card__qa">
                    <div class="interact-card__question">{{ interactProblem }}</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 class="interact-card__submit" @click="handleSubmit">{{ t("agriFile.submit") }}</div>
                </div>
            </div>
            <div class="guide-card">
                <div class="guide-title">{{ t("agriFile.patrolGuide") }}</div>
                <photo-provider :photo-closable="true">
                    <photo-consumer :src="guideImage">
                        <img class="guide-card__img" :src="guideImage" alt="" />
                    </photo-consumer>
                </photo-provider>
            </div>
        </div>
        <div class="guide-card__upload" @click="handleUploadClick">
            <el-icon>
                <Plus />
            </el-icon>
            <span>{{ t("agriFile.uploadPhoto") }}</span>
        </div>
        <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>
</template>

<script setup>
import { computed, nextTick, onActivated, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Icon } from "vant";
import { ElMessage } from "element-plus";
import customHeader from "@/components/customHeader.vue";
import albumUploadPopup from "../components/albumUploadPopup.vue";
import leaveConfirmPopup from "@/components/popup/leaveConfirmPopup.vue";
import tipPopup from "@/components/popup/tipPopup.vue";
import { useI18n } from "@/i18n";
import { base_img_url2 } from "@/api/config";
import wx from "weixin-js-sdk";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

// ---------- 常量 ----------
const DEFAULT_GUIDE_IMAGE = require("@/assets/img/agricultural/patrol-guide.png");

// ---------- 页面状态 ----------
const interactTasks = ref([]);
const currentTaskIndex = ref(0);
const selectedOptionId = ref(null);
const showUploadPopup = ref(false);
const showSuccessPopup = ref(false);
const showLeavePopup = ref(false);
const needDraw = ref(true); // status≠1 时需先勾画种植范围

// ---------- 计算属性 ----------
const pageTitle = computed(() => route.query.pageName || t("agriFile.patrolGrowthTitle"));
const id = computed(() => route.query.id);

/** 通过分享进入：无返回箭头 */
const isFromShare = computed(() => {
    if (isTruthyFlag(route.query.fromShare)) return true;
    const paramsPage = parseMaybeJson(route.query.paramsPage);
    if (isTruthyFlag(paramsPage?.fromShare)) return true;
    const miniJson = parseMaybeJson(route.query.miniJson);
    if (isTruthyFlag(miniJson?.fromShare)) return true;
    if (isTruthyFlag(parseMaybeJson(miniJson?.paramsPage)?.fromShare)) return true;
    return false;
});

const currentTask = computed(() => interactTasks.value[currentTaskIndex.value] || null);
const currentContent = computed(() => currentTask.value?.interact_content || {});

const theme = computed(
    () => currentContent.value.interact_title || t("agriFile.interactTheme")
);
const reason = computed(
    () => currentContent.value.interact_theme || t("agriFile.interactReason")
);
const level = computed(() => t("agriFile.riskLevel2"));
const zoneName = computed(() => t("agriFile.zoneOne"));
const assessmentDesc = computed(
    () => currentContent.value.interact_explain || t("agriFile.agriAssessmentDesc")
);
const interactProblem = computed(
    () => currentContent.value.interact_problem || t("agriFile.interactQuestionText")
);
const guideImage = computed(
    () => resolveImageUrl(currentContent.value.guide_url) || DEFAULT_GUIDE_IMAGE
);
const interactOptions = computed(() => {
    const options = currentContent.value.interact_options;
    if (!Array.isArray(options)) return [];
    return options.map((name, index) => ({
        id: index + 1,
        name: String(name),
    }));
});

// ---------- 工具函数 ----------
function isTruthyFlag(value) {
    return value === 1 || value === "1" || value === true || value === "true";
}

function parseMaybeJson(value) {
    if (value == null || value === "") return null;
    if (typeof value === "object") return value;
    try {
        return JSON.parse(value);
    } catch {
        return null;
    }
}

function resolveImageUrl(path) {
    if (!path) return "";
    const text = String(path).trim();
    if (!text) return "";
    if (/^https?:\/\//i.test(text)) return text;
    return base_img_url2 + text.replace(/^\//, "");
}

function getSelectedFarm() {
    try {
        return JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
    } catch {
        return {};
    }
}

const hasAnswered = () => selectedOptionId.value != null;

// ---------- 业务逻辑 ----------
const applyTaskIndex = (index) => {
    currentTaskIndex.value = index;
    selectedOptionId.value = null;
};

const fetchInternalInteractTasks = async () => {
    try {
        const res = await VE_API.questionnaire.getInternalInteractTasks({ zone_id: id.value });
        const tasks = res?.data?.interact_tasks;
        interactTasks.value = Array.isArray(tasks) ? tasks : [];
        applyTaskIndex(0);
    } catch (e) {
        console.warn("[growthTrack] getInternalInteractTasks failed", e);
        interactTasks.value = [];
    }
};

/** status=1 有范围无需勾画；status=0 无范围需要勾画 */
const fetchZoneRangeStatus = async () => {
    const farm = getSelectedFarm();
    const farmId = farm.farm_id ?? farm.id;
    const zoneId = id.value || farm.zone_id || farm.zoneId;
    if (farmId == null || farmId === "" || zoneId == null || zoneId === "") {
        needDraw.value = true;
        return;
    }
    try {
        const res = await VE_API.questionnaire.checkZoneRange({
            farm_id: farmId,
            zone_id: zoneId,
        });
        needDraw.value = Number(res?.data?.status) !== 1;
    } catch (e) {
        console.warn("[growthTrack] checkZoneRange failed", e);
        needDraw.value = true;
    }
};

// ---------- 事件处理 / 生命周期 ----------
const handleShare = () => {
    const query = {
        askInfo: { title: "转发巡园要点", content: "是否分享给好友" },
        shareText: reason.value || "速长窗口不追肥？后期发育慢人一步，直接掉队！",
        targetUrl: "growth_track",
        paramsPage: JSON.stringify({
            id: id.value,
            fromShare: 1,
            ...(route.query.pageName ? { pageName: route.query.pageName } : {}),
        }),
        imageUrl: "https://birdseye-img.sysuimars.com/temp/field.png",
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

const handleSubmit = () => {
    if (selectedOptionId.value == null) {
        ElMessage.warning(t("agriFile.pleaseSelectOption"));
        return;
    }
    // 选第二项：切换到下一条内部感知任务
    const isSecondOption = selectedOptionId.value === 2;
    if (isSecondOption && currentTaskIndex.value < interactTasks.value.length - 1) {
        applyTaskIndex(currentTaskIndex.value + 1);
        return;
    }
    ElMessage.success(t("agriFile.submitSuccess"));
};

/** 需勾画则先画范围；否则直接上传 */
const handleUploadClick = () => {
    if (needDraw.value) {
        router.push({
            path: "/add_zone",
            query: {
                type: "farm",
                targetUrl: "/growth_track",
                ...(route.query.id ? { trackId: route.query.id } : {}),
            },
        });
        return;
    }
    showUploadPopup.value = true;
};

const handleUploadConfirm = async ({ images, date } = {}) => {
    const cloud_url = Array.isArray(images) ? images : [];
    if (!cloud_url.length) {
        ElMessage.warning("请先上传照片");
        return;
    }
    const farm = getSelectedFarm();
    try {
        const res = await VE_API.questionnaire.uploadImages({
            cloud_url,
            farm_id: farm.farm_id ?? farm.id ?? "",
            zone_id: id.value || "",
            category_code: farm.category_code || "",
            zone_name: farm.variety_name || "",
            create_time: date,
        });
        if (res?.code === 200) {
            showSuccessPopup.value = true;
            return;
        }
        ElMessage.error(res?.msg || "上传失败，请稍后再试");
    } catch {
        ElMessage.error("上传失败，请稍后再试");
    }
};

const handleComplete = () => {
    showSuccessPopup.value = false;
    router.replace("/agri_file");
};

const handleBack = () => {
    if (!hasAnswered()) {
        showLeavePopup.value = true;
        return;
    }
    router.back();
};

const confirmLeave = () => {
    router.back();
};

onActivated(() => {
    fetchZoneRangeStatus();
    fetchInternalInteractTasks();
    if (route.query.showUpload !== "1") return;
    nextTick(() => {
        showUploadPopup.value = true;
        const { showUpload, ...restQuery } = route.query;
        router.replace({ path: route.path, query: restQuery });
    });
});
</script>

<style lang="scss" scoped>
.growth-track-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f5f5f5;

    .growth-track-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        .growth-hero {
            padding: 18px 10px 38px;
            background: #2199f8;
            color: #fff;

            &__top {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            &__title-row {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            &__title {
                font-size: 28px;
                font-family: "PangMenZhengDao";
                margin-top: -5px;
            }

            &__reason {
                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%);
            }

            &__tag {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 1px 4px;
                border-radius: 2px;
                background: #fff;
                font-size: 12px;
            }

            &__tag--level {
                color: #ff6a6a;
            }

            &__tag--zone {
                color: #2199f8;
            }

            &__share {
                flex: none;
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 4px 14px;
                border-radius: 25px;
                background: rgba(19, 125, 209, 0.5);
                color: #fff;
            }
        }
    }

    .growth-content {
        position: relative;
        z-index: 1;
        margin: -24px 10px 12px;
        padding: 10px;
        border-radius: 8px;
        background: #fff;

        &__title {
            color: #4f4f4f;
            font-size: 16px;
            font-family: "PangMenZhengDao";
        }

        &__desc {
            margin-top: 4px;
            color: #9c9c9c;
            font-size: 14px;
        }
    }

    .interact-card {
        margin: 0 10px 10px;
        overflow: hidden;
        border: 1px solid rgba(33, 153, 248, 0.5);
        border-radius: 12px;
        background: #fff;

        &__head {
            position: relative;
            background: linear-gradient(180deg, #e5f4ff 0%, #ffffff 72%);
        }

        &__tab {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 32px;
            padding: 0 32px 10px 8px;
            color: #fff;
            font-size: 16px;
            font-family: "PangMenZhengDao";
            background: url("@/assets/img/agricultural/title-bg.png") no-repeat center / 100% 100%;

            span {
                margin-top: -3px;
            }
        }

        &__star {
            width: 16px;
            height: 14px;
        }

        &__qa {
            margin: 10px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(33, 153, 248, 0.1);
        }

        &__question {
            font-size: 14px;
            font-weight: 500;
        }

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

        &__submit {
            width: 120px;
            margin: 12px auto 0;
            padding: 8px 0;
            border-radius: 25px;
            background: #2199f8;
            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;
            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;
                }
            }
        }
    }

    .guide-card__upload {
        position: fixed;
        right: 7px;
        bottom: 94px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #2199f8;
        color: #fff;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        font-size: 15px;
    }

    .guide-card__upload span {
        margin-top: 3px;
        font-size: 10px;
    }

    .guide-title {
        position: relative;
        z-index: 1;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 2px;
            z-index: -1;
            width: 90px;
            height: 6px;
            border-radius: 25px;
            background: linear-gradient(90deg, #2199f8 0%, rgba(255, 255, 255, 0.37) 100%);
            opacity: 0.4;
        }
    }

    .guide-card {
        position: relative;
        margin: 10px;
        padding: 10px;
        border-radius: 8px;
        background: #fff;

        &__img {
            display: block;
            width: 100%;
            margin-top: 8px;
        }
    }
}

.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;

        &.primary-btn {
            flex: 1;
            background: #2199f8;
            color: #fff;
        }
    }
}
</style>