feiniao-farm-h5/src/views/old_mini/home/components/farmInfoPopup.vue

<template>
    <Popup
        v-model:show="show"
        :overlay-style="{ zIndex: 9999 }"
        teleport="body"
        class="farm-info-popup"
        closeable>
        <div class="popup-content-box">
            <div class="popup-title">基本信息</div>
            <div class="popup-content">
                <div class="map-box">
                    <div class="map" ref="mapContainer"></div>
                    <!-- <div class="map-text" @click="handleEditMap">点击编辑地块</div> -->
                </div>
                <cell-group inset class="cell-group">
                    <field v-model="farmInfo.name" readonly label="农场名称" />
                    <field readonly label="农场面积">
                        <template #input>
                            <span>{{ farmInfo.mianji }}亩</span>
                        </template>
                    </field>
                    <field readonly label="种植作物">
                        <template #input>
                            <span>{{ farmInfo.speciesName }}-{{ farmInfo.typeName }}</span>
                        </template>
                    </field>
                    <!-- <field v-model="farmInfo.userType" readonly label="客户类型">
                        <template #input>
                            <span>{{ userTypeMap[farmInfo.userType] }}</span>
                        </template>
                    </field> -->
                    <field v-model="farmInfo.fzr" readonly label="联系人" />
                    <field v-model="farmInfo.tel" readonly label="联系电话" />
                    <field class="address-field" v-model="farmInfo.address" readonly label="农场位置" />
                    
                    <field v-model="farmInfo.baseType" readonly label="基地类型">
                        <template #input>
                            <!-- <span>{{ userTypeMap[farmInfo.userType] }}</span> -->
                            <span>{{ farmInfo?.baseType }}</span>
                        </template>
                    </field>
                    <checkbox
                        v-if="!showBtn"
                        class="checkbox"
                        icon-size="16px"
                        shape="square"
                        v-model="farmInfo.defaultOption"
                        >是否勾选为默认农场</checkbox
                    >
                </cell-group>
            </div>
            <div class="popup-footer" v-if="!showBtn || showEditBtn">
                <div class="footer-btn no-btn" @click="handleCancel">取消</div>
                <div class="footer-btn yes-btn" @click="handleEdit">去编辑</div>
            </div>
        </div>
    </Popup>
</template>

<script setup>
import { Popup, Field, CellGroup, Checkbox } from "vant";
import { ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import IndexMap from "../map/index.js";
import { useStore } from "vuex";

const userTypeMap = {
    1: "普通用户",
    2: "托管用户",
    3: "优质客户",
};

const props = defineProps({
    farmId: {
        type: [Number, String],
        default: null,
    },
    showBtn: {
        type: Boolean,
        default: false,
    },
    showEditBtn: {
        type: Boolean,
        default: false,
    },
});

const store = useStore();
const router = useRouter();
const show = ref(false);
const mapContainer = ref(null);
const indexMap = new IndexMap();

// 农场信息
const farmInfo = ref();
const handleShow = () => {
    VE_API.farm.getFarmDetail({ farmId: props.farmId }).then((res) => {
        if (res.code === 0) {
            farmInfo.value = res.data;
            show.value = true;
            nextTick(() => {
                const point = farmInfo.value.pointWkt;
                const geometryArr = farmInfo.value.geomWkt;

                // 如果地图已经初始化，则更新中心点和地块；否则初始化地图
                if (indexMap.kmap) {
                    indexMap.updateCenter(point);
                    // 如果有地块数据，则添加地块
                    if (geometryArr && geometryArr.length > 0) {
                        indexMap.setAreaGeometry([geometryArr]);
                    }
                } else {
                    indexMap.initMap(point, mapContainer.value);
                    // 初始化地图后，如果有地块数据，则添加地块
                    if (geometryArr && geometryArr.length > 0) {
                        indexMap.setAreaGeometry([geometryArr]);
                    }
                }
            });
        }
    });
};

const handleEditMap = () => {
    // 在跳转前，将当前农场的地块数据存储到store中
    if (farmInfo.value.geomWkt) {
        const polygonData = {
            geometryArr: [farmInfo.value.geomWkt],
            isConfirmed: false,
        };
        store.commit("home/SET_FARM_POLYGON", polygonData);
    }

    router.push(
        `/edit_map?mapCenter=${farmInfo.value.pointWkt}&pointName=${farmInfo.value.address}&pointAddress=${JSON.parse(
            farmInfo.value.district
        )}&type=edit`
    );
};

const handleEdit = () => {
    setTimeout(() => {
        show.value = false;
    }, 150);

    // 在跳转前，将当前农场的地块数据存储到store中
    if (farmInfo.value.geomWkt) {
        const polygonData = {
            geometryArr: [farmInfo.value.geomWkt],
            mianji: farmInfo.value.mianji,
            isConfirmed: true, // 编辑模式下标记为已确认
        };
        store.commit("home/SET_FARM_POLYGON", polygonData);
    }

    // 将农场数据存储到store中，供编辑页面使用
    store.commit("home/SET_EDIT_FARM_DATA", farmInfo.value);

    const from = props.showEditBtn ? "details" : "monitor";
    router.push(`/create_farm?type=edit&farmId=${props.farmId}&from=${from}`);
};

const handleCancel = () => {
    show.value = false;
};

defineExpose({ handleShow });
</script>

<style lang="scss" scoped>
.farm-info-popup {
    width: 100%;
    border-radius: 8px;
    z-index: 9999 !important;
    overflow: hidden;
    .popup-content-box {
        background: url("@/assets/img/home/popup-mask.png") no-repeat center left / 100% 100%;
        padding: 20px;
    }
    ::v-deep {
        .van-popup__close-icon {
            color: #000;
        }
    }
    .popup-title {
        text-align: center;
        font-size: 24px;
        font-family: "PangMenZhengDao";
    }
    .popup-content {
        margin: 12px 0;
        .map-box {
            width: 100%;
            height: 150px;
            position: relative;
            .map {
                width: 100%;
                height: 100%;
                clip-path: inset(0px round 5px);
                pointer-events: none;
            }
            .map-text {
                position: absolute;
                right: 6px;
                bottom: 8px;
                font-size: 12px;
                color: #ffffff;
                padding: 8px 12px;
                border-radius: 20px;
                background: rgba(0, 0, 0, 0.5);
                border: 1px solid rgba(255, 255, 255, 0.5);
            }
        }
        .cell-group {
            margin: 12px 0 0;
            .address-field {
                position: relative;
                &::before {
                    position: absolute;
                    box-sizing: border-box;
                    content: " ";
                    pointer-events: none;
                    right: 16px;
                    bottom: 0;
                    left: 16px;
                    border-bottom: 1px solid #ebedf0;
                    transform: scaleY(0.5);
                }
            }
        }
    }
    .checkbox {
        pointer-events: none;
        padding: 12px 14px;
    }
    .popup-footer {
        display: flex;
        gap: 13px;
        .footer-btn {
            text-align: center;
            flex: 1;
            padding: 8px 0;
            border-radius: 25px;
        }
        .no-btn {
            color: #666666;
            border: 1px solid #999999;
        }
        .yes-btn {
            background: #2199f8;
            color: #fff;
        }
    }
}
</style>