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

<template>
    <Popup v-model:show="show" 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 v-model="farmInfo.area" readonly label="农场面积" />
                    <field v-model="farmInfo.plant" readonly label="种植作物" />
                    <field class="address-field" v-model="farmInfo.address" readonly label="农场位置" />
                </cell-group>
            </div>
            <div class="popup-footer">
                <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 } from "vant";
import { ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import IndexMap from "../map/index.js";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const show = ref(false);
const mapContainer = ref(null);
const indexMap = new IndexMap();
const farmInfo = ref({
    name: "从化荔博园",
    area: "1000亩",
    plant: "荔枝",
    address: "广东省广州市从化区",
});

const handleShow = () => {
    show.value = true;
    nextTick(() => {
        const point = store.state.home.miniUserLocationPoint
        indexMap.initMap(point, mapContainer.value);
    });
};

const handleEditMap = () => {
    router.push("/edit_map");
    // indexMap.clearLayer();
};

const handleEdit = () => {
    router.push("/create_farm");
};

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

defineExpose({handleShow});
</script>

<style lang="scss" scoped>
.farm-info-popup {
    width: 100%;
    border-radius: 8px;
    .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);
                }
            }
        }
    }
    .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>