feiniao-farm-h5/src/views/old_mini/home/index.vue

<template>
    <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <!-- 地图 -->
        <div class="map-container" ref="mapContainer"></div>
        <!-- 新建按钮 -->
        <div class="add-button" v-show="showAddButton" @click="toSubPage">
            <el-icon class="add-button-icon"><CircleCloseFilled /></el-icon>
            <span>创建我的农场</span>
        </div>
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded"></div>
        <!-- 天气 -->
        <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
        <!-- 操作按钮 -->
        <div class="operation-button">
            <div class="button-group">
                <div class="button-item">
                    <img class="button-icon" src="@/assets/img/tab_bar/home-active.png" alt="">
                    <span>基本信息</span>
                </div>
                <div class="button-item" @click="toFarmPhoto">
                    <img class="button-icon" src="@/assets/img/home/photo-icon.png" alt="">
                    <span>农场相册</span>
                </div>
            </div>
            <div class="add-farm-button">
                <el-icon class="icon"><CircleCloseFilled /></el-icon>
                <span>新增农场</span>
            </div>
        </div>
        <!-- 浮动面板 -->
        <home-floating-panel
            class="home-floating-panel"
            :style="{ zIndex: zIndex }"
            @heightChange="heightChange"
        ></home-floating-panel>

        <!-- 农事信息弹窗 -->
        <detail-dialog></detail-dialog>
    </div>
</template>

<script setup>
import IndexMap from "./map/index.js";
import { onMounted, computed, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import weatherInfo from "@/components/weatherInfo.vue";
import detailDialog from "@/components/detailDialog.vue"
import homeFloatingPanel from "./components/homeFloatingPanel.vue";
const router = useRouter();

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);

const indexMap = new IndexMap();
const mapContainer = ref(null);
onMounted(() => {
    const point = store.state.home.miniUserLocationPoint
    indexMap.initMap(point, mapContainer.value);
});

const isExpanded = ref(false);
const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
};

const zIndex = ref(1);
const showAddButton = ref(true);
const heightChange = (height) => {
    zIndex.value = 1;
    showAddButton.value = true;
    if (height === 0) {
        showAddButton.value = false;
    } else if (height > 310 + tabBarHeight.value) {
        zIndex.value = 3;
    }
};

function toSubPage() {
    router.push({
        path: "/create_farm",
    });
}

function toFarmPhoto() {
    router.push({
        path: "/farm_photo",
    });
}
</script>

<style lang="scss" scoped>
.home-index {
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    .map-container {
        width: 100%;
        height: 100%;
    }
    .add-button {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background-image: linear-gradient(180deg, #70bffe 0%, #2199f8 100%);
        border-radius: 25px;
        padding: 12px 0;
        width: 187px;
        .add-button-icon {
            font-size: 20px;
            margin-right: 5px;
            transform: rotate(45deg);
        }
    }
    .weather-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
        z-index: 2;
    }
    .weather-info {
        position: absolute;
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        z-index: 2;
    }
    .operation-button{
        position: absolute;
        top: 117px;
        left: 12px;
        width: calc(100% - 24px);
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 500;
        .button-group{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .button-item{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                color: rgba(0, 0, 0, 0.8);
                background-color: #fff;
                .button-icon{
                    width: 13px;
                    height: 13px;
                }
            }
            .button-item:first-child{
                margin-right: 10px;
            }
        }
        .add-farm-button{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: #fff;
            .icon{
                font-size: 16px;
                transform: rotate(45deg);
            }
        }
        .button-item,
        .add-farm-button{
            border-radius: 25px;
            padding: 8px 12px;
        }
    }
    .home-floating-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
}
</style>