feiniao-farm-h5/src/components/farmHeader.vue

<template>
    <div class="farm-header">
        <div class="farm-header__info">
            <el-avatar class="farm-header__avatar" :size="46" :src="circleUrl" />
            <div class="farm-header__text">
                <div class="farm-header__name van-ellipsis">{{ farmName }}</div>
                <div class="farm-header__location van-ellipsis">{{ farmLocation }}</div>
            </div>
        </div>
        <div class="farm-header__more" @click="goAllGarden">
            <el-icon class="farm-header__more-icon">
                <Switch />
            </el-icon>
            <span>{{ t("agriFile.moreFarms") }}</span>
        </div>
    </div>
</template>

<script setup>
import { onActivated, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Switch } from "@element-plus/icons-vue";
import { useI18n } from "@/i18n";
import { DEFAULT_CROP_AVATAR, resolveCropIcon, resolveFarmCropName } from "@/utils/cropIcon";

const { t } = useI18n();
const router = useRouter();
const store = useStore();

const farmName = ref("");
const farmLocation = ref("");
const circleUrl = ref(DEFAULT_CROP_AVATAR);

const applyFarmInfo = (farm = {}) => {
    farmName.value = farm.farm_name || farm.name || t("agriFile.farmName");
    farmLocation.value = farm.farm_address || farm.rawAddress || farm.city || t("agriFile.farmLocation");
    // 优先按品种匹配 type_icon；无匹配再用封面 / 默认图
    circleUrl.value = resolveCropIcon(
        resolveFarmCropName(farm),
        farm.cover || farm.image || farm.avatar || DEFAULT_CROP_AVATAR
    );
};

const hasSelectedFarm = (farm) => {
    if (!farm || typeof farm !== "object") return false;
    return !!(farm.farm_id || farm.id || farm.farm_name || farm.name);
};

const resolveFarmPointWkt = (farm) => {
    if (farm.geom_wkt && /^POINT\s*\(/i.test(String(farm.geom_wkt).trim())) {
        return farm.geom_wkt;
    }
    if (farm.farm_location && /^POINT\s*\(/i.test(String(farm.farm_location).trim())) {
        return farm.farm_location;
    }
    return farm.geom_wkt || farm.wkt || "";
};

const normalizeFarm = (farm) => {
    const id = farm.farm_id ?? farm.id;
    return {
        ...farm,
        id,
        name: farm.farm_name || farm.name,
        wkt: resolveFarmPointWkt(farm),
        rawAddress: farm.farm_address || farm.city || "",
    };
};

const saveSelectedFarm = (farm) => {
    localStorage.setItem("selectedFarmId", farm.id);
    localStorage.setItem("selectedFarmName", farm.name || "");
    localStorage.setItem("selectedFarmPoint", farm.wkt || "");
    localStorage.setItem("selectedFarmData", JSON.stringify(farm));
};

function getMiniUserId() {
    return store.state.home.miniUserId || localStorage.getItem("MINI_USER_ID");
}

const loadFirstFarmAsSelected = async () => {
    const id = getMiniUserId();
    if (!id) {
        applyFarmInfo();
        return;
    }
    try {
        const res = await VE_API.questionnaire.getFarms({ id });
        const list = Array.isArray(res?.data) ? res.data : [];
        const first = list[0];
        if (!first) {
            applyFarmInfo();
            return;
        }
        const farm = normalizeFarm(first);
        saveSelectedFarm(farm);
        applyFarmInfo(farm);
    } catch {
        applyFarmInfo();
    }
};

const loadFarmInfo = async () => {
    try {
        const farm = JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
        if (hasSelectedFarm(farm)) {
            applyFarmInfo(farm);
            return;
        }
        await loadFirstFarmAsSelected();
    } catch {
        await loadFirstFarmAsSelected();
    }
};

const goAllGarden = () => {
    router.push("/all_garden");
};

onMounted(loadFarmInfo);
onActivated(loadFarmInfo);

defineExpose({ loadFarmInfo });
</script>

<style lang="scss" scoped>
.farm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

    .farm-header__info {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
        :deep(.el-avatar) {
            flex: none;
        }
    }

    .farm-header__text {
        min-width: 0;
    }

    .farm-header__name {
        font-size: 20px;
        font-family: "PangMenZhengDao";
        background: linear-gradient(180deg, #FFE2AE 0%, #FFD489 100%);
        /* 裁切背景到文字 */
        -webkit-background-clip: text;
        background-clip: text;
        /* 文字填充透明，露出渐变背景 */
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .farm-header__location {
        margin-top: 2px;
        color: #999999;
        font-size: 12px;
    }

    .farm-header__more {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        padding: 6px 10px;
        border-radius: 16px;
        border: 1px solid rgba(255, 212, 137, 0.1);
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
    }
}
</style>