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
                        >
                            <el-option
                                v-for="item in CROP_OPTIONS"
                                :key="item"
                                :label="item"
                                :value="item"
                            />
                        </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" @click="handleNext">确认信息</div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
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 HAS_FARM_KEY = "HAS_ENTRY_FARM";
/** 新增农场信息（点位、品类等） */
const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";
/** 默认定位：河北宁晋县 */
const DEFAULT_POINT = "POINT(114.91863572509733 37.67702031436258)";
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
/** 河北主要作物（固定下拉选项） */
const CROP_OPTIONS = ["玉米", "冬小麦", "水稻", "马铃薯", "大豆", "谷子", "高粱", "莜麦"];

const router = useRouter();

const formRef = ref(null);
const previewMapRef = ref(null);
let previewMap = null;
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));
}

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 "";
    }
}

const handleNext = async () => {
    if (!formRef.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 point = form.location || saved?.point || "";
    const farmData = {
        name: form.name,
        phone: form.phone,
        crop,
        point,
        coordinate: saved?.coordinate || null,
        region,
        adcode: saved?.adcode || "",
    };
    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 }).catch(() => {});
    localStorage.setItem(HAS_FARM_KEY, "1");
    clearFormDraft();
    router.replace("/growth_report");
    ElMessage.success("上传成功，报告正在生成中...");
};

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

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

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

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

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