feiniao-farm-h5/src/views/old_mini/entry_information/components/baInformation.vue

<template>
    <div class="ba-information">
        <div class="ba-information__content">
            <div class="page-header">
                <div class="page-title">请完善农场信息</div>
            </div>

            <div class="info-card">
                <div class="section-title">
                    <img class="title-icon" src="@/assets/img/home/label-icon.png" alt="" />
                    <span>基本信息</span>
                </div>

                <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-position="left"
                    label-width="72px"
                    class="info-form"
                    require-asterisk-position="right"
                >
                    <el-form-item label="姓名" prop="name">
                        <el-input
                            v-model="form.name"
                            placeholder="请输入名字"
                            maxlength="20"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input
                            v-model="form.phone"
                            placeholder="请输入手机号"
                            maxlength="11"
                            clearable
                            type="tel"
                        />
                    </el-form-item>
                    <el-form-item label="种植品类" prop="crop">
                        <el-select
                            v-model="form.crop"
                            class="crop-select"
                            placeholder="选择品类"
                            placement="bottom-end"
                            popper-class="crop-select-popper"
                            teleported
                            :loading="cropLoading"
                        >
                            <el-option
                                v-for="item in cropOptions"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="种植点位" prop="location" class="location-form-item">
                        <div class="location-block" @click="goSelectLocation">
                            <div class="map-preview">
                                <div class="map-preview__map" ref="previewMapRef"></div>
                                <div v-if="!form.location" class="map-preview__mask">点击地图选择种植点位</div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="custom-bottom-fixed-btns">
            <div
                class="bottom-btn primary-btn"
                :class="{ disabled: submitting }"
                @click="handleNext"
            >
                {{ submitting ? "提交中..." : "确认信息" }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import SelectLocationMap from "../map/selectLocationMap.js";

const LOCATION_KEY = "ENTRY_RESIDENT_LOCATION";
const FORM_KEY = "ENTRY_BA_FORM";
const STEP_KEY = "ENTRY_INFORMATION_STEP";
const EQUIPMENT_KEY = "ENTRY_SELECTED_EQUIPMENT";
/** 本地标记：用户已新增农场 */
const HAS_FARM_KEY = "HAS_ENTRY_FARM";
/** 新增农场信息（点位、品类等） */
const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";
/** 默认定位：河北宁晋县 */
const DEFAULT_POINT = "POINT(114.91863572509733 37.67702031436258)";
/** 默认区县：河北宁晋县 */
const DEFAULT_COUNTY_CODE = "130528";
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const router = useRouter();
const route = useRoute();
const store = useStore();

const formRef = ref(null);
const previewMapRef = ref(null);
let previewMap = null;
const cropOptions = ref([]);
const cropLoading = ref(false);
const submitting = ref(false);
/** 区县接口附带的气象预警 / 胁迫，确认时写入 ENTRY_FARM_DATA */
const weatherMeta = reactive({
    weatherRisk: "",
    weatherStress: "",
});
const form = reactive({
    name: "",
    phone: "",
    crop: undefined,
    location: "",
});

const rules = {
    name: [
        { required: true, message: "请输入名字", trigger: "blur" },
        { min: 1, max: 20, message: "姓名长度不超过20个字", trigger: "blur" },
    ],
    phone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
        },
    ],
    crop: [{ required: true, message: "请选择种植品类", trigger: "change" }],
    location: [{ required: true, message: "请选择常驻点位", trigger: "change" }],
};

function getDefaultPoint() {
    return DEFAULT_POINT;
}

function readJson(key) {
    try {
        const raw = sessionStorage.getItem(key);
        return raw ? JSON.parse(raw) : null;
    } catch {
        return null;
    }
}

function saveFormDraft() {
    sessionStorage.setItem(
        FORM_KEY,
        JSON.stringify({ name: form.name, phone: form.phone, crop: form.crop })
    );
}

function restoreFormDraft() {
    const draft = readJson(FORM_KEY);
    if (!draft) return;
    if (draft.name != null) form.name = draft.name;
    if (draft.phone != null) form.phone = draft.phone;
    if (draft.crop) form.crop = draft.crop;
}

function utilWktToCoordinate(point) {
    const match = String(point).match(/POINT\s*\(([\d.\-]+)\s+([\d.\-]+)\)/i);
    if (!match) return null;
    return [Number(match[1]), Number(match[2])];
}

function initPreviewMap(point, showPoint = !!form.location) {
    if (!previewMapRef.value || !point) return;
    const previewPadding = [50, 0, 10, 0];
    const coordinate = utilWktToCoordinate(point);
    if (!previewMap) {
        previewMap = new SelectLocationMap();
        previewMap.initMap(point, previewMapRef.value, {
            enableClick: false,
            padding: previewPadding,
            showPoint,
        });
        return;
    }
    if (previewMap.kmap) {
        if (coordinate) {
            if (showPoint) {
                previewMap.showPoint(coordinate);
            } else {
                previewMap.hidePoint();
                previewMap.setMapPosition(coordinate, false);
            }
        }
        return;
    }
    previewMap.initMap(point, previewMapRef.value, {
        enableClick: false,
        padding: previewPadding,
        showPoint,
    });
}

function syncLocationFromSession() {
    const saved = readJson(LOCATION_KEY);
    if (saved?.point) {
        form.location = saved.point;
        formRef.value?.clearValidate("location");
        nextTick(() => initPreviewMap(saved.point, true));
        return;
    }
    nextTick(() => initPreviewMap(getDefaultPoint(), false));
}

/** 解析当前区县 code：优先选点 adcode，否则默认宁晋县 */
function resolveCountyCode() {
    const saved = readJson(LOCATION_KEY);
    if (saved?.adcode) return String(saved.adcode);
    return DEFAULT_COUNTY_CODE;
}

async function fetchCropOptions() {
    const countyCode = resolveCountyCode();
    cropLoading.value = true;
    try {
        const res = await VE_API.questionnaire.countyPhenophase({
            county_code: countyCode,
        });
        if (res?.code != null && res.code !== 200) {
            cropOptions.value = [];
            weatherMeta.weatherRisk = "";
            weatherMeta.weatherStress = "";
            ElMessage.error(res.msg || "获取种植品类失败");
            return;
        }
        weatherMeta.weatherRisk = res?.data?.weather_risk || "";
        weatherMeta.weatherStress = res?.data?.weather_stress || "";
        const list = Array.isArray(res?.data?.phenophases) ? res.data.phenophases : [];
        const options = [];
        const seen = new Set();
        list.forEach((item) => {
            const name = item?.crop_category_name;
            if (typeof name !== "string" || !name.trim() || seen.has(name)) return;
            seen.add(name);
            options.push({
                name,
                code: item?.phenophase_code != null ? String(item.phenophase_code) : "",
            });
        });
        cropOptions.value = options;
        if (form.crop && !seen.has(form.crop)) {
            form.crop = undefined;
        }
    } catch {
        cropOptions.value = [];
        weatherMeta.weatherRisk = "";
        weatherMeta.weatherStress = "";
        ElMessage.error("获取种植品类失败，请稍后再试");
    } finally {
        cropLoading.value = false;
    }
}

const goSelectLocation = () => {
    saveFormDraft();
    const mapCenter = form.location || getDefaultPoint();
    router.push({
        path: "/entry_select_location",
        query: { mapCenter },
    });
};

function clearFormDraft() {
    form.name = "";
    form.phone = "";
    form.crop = undefined;
    form.location = "";
    sessionStorage.removeItem(FORM_KEY);
    sessionStorage.removeItem(LOCATION_KEY);
    sessionStorage.removeItem(STEP_KEY);
}

/** 根据点位反查地区名（区县优先） */
async function resolveRegionName(point) {
    const coordinate = utilWktToCoordinate(point);
    if (!coordinate) return "";
    try {
        const { result } = await VE_API.old_mini_map.location({
            key: MAP_KEY,
            location: `${coordinate[1]},${coordinate[0]}`,
        });
        return (
            result?.ad_info?.district ||
            result?.ad_info?.city ||
            result?.address_component?.district ||
            result?.address_component?.city ||
            ""
        );
    } catch {
        return "";
    }
}

function toFiniteNumber(value, fallback) {
    const n = Number(value);
    return Number.isFinite(n) ? n : fallback;
}

/** 邀请管理员 id：优先路由参数 */
function resolveAdminId() {
    return toFiniteNumber(route.query.adminId ?? route.query.admin_id, 1);
}

function resolveUserId() {
    return toFiniteNumber(store.state.home.miniUserId || localStorage.getItem("MINI_USER_ID"), 1);
}

/** 已选农机 id（当前简化流程可能为空） */
function resolveMachineIds() {
    try {
        const cache = JSON.parse(sessionStorage.getItem(EQUIPMENT_KEY) || "null");
        if (!cache) return [];
        const list = Array.isArray(cache)
            ? cache
            : [...(cache.field || []), ...(cache.fruit || []), ...(cache.list || [])];
        return list
            .map((item) => Number(item?.id ?? item?.machine_id))
            .filter((id) => Number.isFinite(id));
    } catch {
        return [];
    }
}

const handleNext = async () => {
    if (!formRef.value || submitting.value) return;
    try {
        await formRef.value.validate();
    } catch {
        return;
    }

    const saved = readJson(LOCATION_KEY);
    let region = saved?.region || "";
    if (!region && form.location) {
        region = await resolveRegionName(form.location);
    }
    if (!region) {
        ElMessage.warning("无法识别种植点位所属地区，请重新选择");
        return;
    }

    const crop = form.crop;
    const selectedCrop = cropOptions.value.find((item) => item.name === crop);
    const cropCode = selectedCrop?.code || "";
    const point = form.location || saved?.point || "";
    const countyCode = toFiniteNumber(saved?.adcode || resolveCountyCode(), Number(DEFAULT_COUNTY_CODE));

    submitting.value = true;
    try {
        const res = await VE_API.questionnaire.addPlotInfo({
            user_name: form.name,
            tel: form.phone,
            admin_id: resolveAdminId(),
            user_id: resolveUserId(),
            machine_id: resolveMachineIds(),
            county_code: countyCode,
        });
        if (res?.code != null && res.code !== 200) {
            ElMessage.error(res.msg || "提交失败，请稍后再试");
            return;
        }

        const farmData = {
            name: form.name,
            phone: form.phone,
            crop,
            cropCode,
            point,
            coordinate: saved?.coordinate || null,
            region,
            adcode: saved?.adcode || String(countyCode),
            weatherRisk: weatherMeta.weatherRisk,
            weatherStress: weatherMeta.weatherStress,
        };
        localStorage.setItem(ENTRY_FARM_DATA_KEY, JSON.stringify(farmData));
        if (point) {
            localStorage.setItem("GROWTH_REPORT_MAP_POINT", point);
            localStorage.setItem("selectedFarmPoint", point);
        }
        VE_API.questionnaire.generateReport({ region, crop, tel: form.phone }).catch(() => {});
        localStorage.setItem(HAS_FARM_KEY, "1");
        clearFormDraft();
        router.replace("/growth_report");
        ElMessage.success("上传成功，报告正在生成中...");
    } catch {
        ElMessage.error("提交失败，请稍后再试");
    } finally {
        submitting.value = false;
    }
};

onMounted(() => {
    restoreFormDraft();
    syncLocationFromSession();
});

onActivated(() => {
    restoreFormDraft();
    syncLocationFromSession();
    fetchCropOptions();
});

onBeforeUnmount(() => {
    previewMap?.clearLayer();
    previewMap = null;
});
</script>

<style lang="scss" scoped>
.ba-information {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 80px;

    &__content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 16px 20px;
    }

    .page-header {
        padding: 8px 4px 16px;

        .page-title {
            font-size: 26px;
            color: #005599;
            font-family: "PangMenZhengDao";
            line-height: 36px;
        }

        .page-subtitle {
            margin-top: 4px;
            font-size: 14px;
            color: rgba(46, 46, 46, 0.4);
            line-height: 20px;
        }
    }

    .info-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px 14px 8px;
        box-shadow: 0 2px 12px rgba(33, 153, 248, 0.08);
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;

        .title-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            object-fit: contain;
        }
    }

    .info-form {
        :deep(.el-form-item) {
            margin-bottom: 0;
            padding: 10px 0;
        }

        :deep(.el-form-item__label) {
            color: #1a1a1a;
            font-size: 15px;
            font-weight: 400;
            padding: 0;
            line-height: 32px;
            height: 32px;
        }

        :deep(.el-form-item__content) {
            justify-content: flex-end;
            line-height: 32px;
        }

        :deep(.el-form-item__error) {
            padding-top: 4px;
            text-align: right;
        }

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: transparent;
            padding: 0;

            .el-input__inner {
                text-align: right;
                color: #1a1a1a;
                font-size: 15px;

                &::placeholder {
                    color: rgba(0, 0, 0, 0.25);
                }
            }
        }

        .crop-select {
            width: 120px;
            flex-shrink: 0;
            margin-left: auto;
            height: 32px;

            :deep(.el-select__wrapper) {
                box-shadow: none;
                background: transparent;
                padding: 0;
                height: 32px;
                min-height: 32px !important;
                width: 100%;
                align-items: center;
                flex-wrap: nowrap;
                justify-content: flex-end;
            }

            :deep(.el-select__selection) {
                position: relative;
                flex: 1;
                min-width: 0;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            :deep(.el-select__selected-item) {
                font-size: 15px;
                color: #1a1a1a;
                line-height: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            :deep(.el-select__placeholder) {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin: 0;
                font-size: 15px;
                color: #1a1a1a;
                line-height: 32px;
                transform: none;
            }

            /* EP：is-transparent 表示未选中的占位态，不是隐藏文字 */
            :deep(.el-select__placeholder.is-transparent) {
                color: #2199f8;
            }

            :deep(.el-select__suffix) {
                display: flex;
                align-items: center;
                height: 32px;
                flex-shrink: 0;
            }

            :deep(.el-select__caret) {
                color: #2199f8;
                font-size: 14px;
            }
        }

        .location-form-item {
            display: block;

            :deep(.el-form-item__label) {
                float: none;
                display: block;
                text-align: left;
                width: auto !important;
                margin-bottom: 10px;
                height: auto;
                line-height: 22px;
            }

            :deep(.el-form-item__content) {
                margin-left: 0 !important;
                line-height: normal;
                justify-content: flex-start;
            }

            :deep(.el-form-item__error) {
                text-align: left;
                padding-top: 6px;
            }
        }
    }

    .location-block {
        width: 100%;

        .map-preview {
            position: relative;
            width: 100%;
            height: 140px;
            border-radius: 8px;
            overflow: hidden;
            background: linear-gradient(135deg, #e8eef3 0%, #d4dde6 100%);

            &__map {
                width: 100%;
                height: 100%;
                pointer-events: none;
            }

            &__mask {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
                padding: 0 12px;
                height: 30px;
                line-height: 30px;
                background: rgba(0, 0, 0, 0.4);
                color: #fff;
                font-size: 14px;
                text-align: center;
                width: fit-content;
                border-radius: 8px 0 8px 0;
            }
        }
    }

    .custom-bottom-fixed-btns {
        background: #fff;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);

        .bottom-btn {
            padding: 0 30px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-radius: 25px;

            &.disabled {
                opacity: 0.6;
                pointer-events: none;
            }
        }

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

<style lang="scss">
.crop-select-popper {
    min-width: 120px !important;
}
</style>