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

<template>
    <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <img class="banner" src="@/assets/img/home/banner.png" alt="" />
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded"></div>
        <!-- 天气 -->
        <weather-info class="weather-info" @weatherExpanded="weatherExpanded" :isGarden="false"></weather-info>
        <div class="farm-monitor-container">
            <div class="farm-monitor-left" @click="handleCardClick(monitorCards.left)">
                <div class="title">{{ monitorCards.left.title }}</div>
                <div class="content">{{ monitorCards.left.content }}</div>
                <div class="arrow">
                    <el-icon class="icon"><ArrowRightBold /></el-icon>
                </div>
            </div>
            <div class="farm-monitor-right">
                <div
                    v-for="(item, index) in monitorCards.right"
                    :key="index"
                    class="right-item"
                    :class="{ expert: index === 1 }"
                    @click="handleCardClick(item)"
                >
                    <div class="title">
                        <span>{{ item.title }}</span>
                        <el-icon class="icon"><ArrowRightBold /></el-icon>
                    </div>
                    <div class="content">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <AgriculturalDynamics />
    </div>
    <!-- 创建农场弹窗 -->
    <popup v-model:show="showFarmPopup" round class="create-farm-popup">
        <template v-if="farmPopupType === 'create'">
            <img  class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
            <div class="create-farm-text">
                <div>您当前还没有农场</div>
                <div>请先创建农场</div>
            </div>
        </template>
        <template v-else>
            <img class="farm-check-icon" src="@/assets/img/home/right.png" alt="">
            <div class="create-farm-text success-text">农场创建成功</div>
        </template>
        <div class="create-farm-btn" @click="handleBtn">{{ farmPopupType === 'create' ? '去创建农场' : '我知道了' }}</div>
    </popup>
    <!-- 问题提醒 -->
    <problem-reminder></problem-reminder>
</template>

<script setup>
import { ref, computed, onMounted, onActivated } from "vue";
import { useStore } from "vuex";
import { Popup } from "vant";
import weatherInfo from "@/components/weatherInfo.vue";
import AgriculturalDynamics from "./components/AgriculturalDynamics.vue";
import { useRouter, useRoute } from "vue-router";
import wx from "weixin-js-sdk";
import problemReminder from "./components/problemReminder.vue";

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
const router = useRouter();
const route = useRoute();

const showFarmPopup = ref(false);
const farmPopupType = ref("create");

// 监测卡片数据
const monitorCards = ref({
    left: {
        title: "农场监测",
        content: "实时监测农场环境和作物生长情况",
        route: "/monitor",
    },
    right: [
        {
            title: "病虫识别",
            content: "智能识别病虫害，提供防治建议",
            route: "/pest",
        },
        {
            title: "专家咨询",
            content: "专业农技专家在线解答疑问",
            route: "/chat_frame?userId=81881&name=专家1",
        },
    ],
});

// 卡片点击事件
const handleCardClick = (card) => {
    // showFarmPopup.value = true;
    if(card.route === "/pest"){
        const dropdownGardenItem = ref({
            organId:766,
            periodId:1,
            wktVal:'wktVal',
            address:'address',
            district:'district',
            name:'荔博园',
        });
        wx.miniProgram.navigateTo({
            url: `/pages/subPages/new_recognize/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
        });
    }else{
        router.push(card.route);
    }
};

const handleBtn = () => {
    if(farmPopupType.value === 'create'){
        router.push("/create_farm?isReload=true&from=home");
    }
    showFarmPopup.value = false;
}

onActivated(() => {
    // 检测是否从创建农场页面成功返回
    if (route.query.showSuccess === 'true') {
        farmPopupType.value = 'success';
        showFarmPopup.value = true;
        
        // 清除URL参数，避免刷新页面时再次显示弹窗
        router.replace({ 
            path: '/home', 
            query: { reload: route.query.reload } 
        });
    }
});

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

<style scoped lang="scss">
.home-index {
    width: 100%;
    height: 100vh;
    overflow: auto;
    position: relative;
    .banner {
        width: 100%;
        height: 200px;
        position: relative;
        z-index: 1;
    }
    .weather-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
        z-index: 2;
    }
    .weather-info {
        width: calc(100% - 20px);
        position: absolute;
        top: calc(200px - 28px);
        left: 10px;
        z-index: 3;
    }
    .farm-monitor-container {
        padding-top: 60px;
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 10px;
        height: 170px;
        .farm-monitor-left,
        .farm-monitor-right {
            .title {
                font-size: 16px;
                color: #1d2129;
                font-weight: 500;
                .icon {
                    font-size: 12px;
                    margin-left: 2px;
                }
            }
            .content {
                margin-top: 6px;
                font-size: 12px;
                color: rgba(29, 33, 41, 0.5);
                line-height: 1.5;
            }
            .arrow {
                border-radius: 5px;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 34px;
                height: 25px;
                margin-top: 10px;
                font-size: 11px;
            }
        }
        .farm-monitor-left {
            flex: 1;
            height: 100%;
            padding: 25px 10px;
            box-sizing: border-box;
            background: url("@/assets/img/home/farm-bg-1.png") no-repeat center center / 100% 100%;
        }
        .farm-monitor-right {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 7px;
            .right-item {
                padding: 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;
                background: url("@/assets/img/home/farm-bg-2.png") no-repeat center center / 100% 100%;
            }
            .expert {
                background: url("@/assets/img/home/farm-bg-3.png") no-repeat center center / 100% 100%;
            }
        }
    }
}
.create-farm-popup {
    width: 75%;
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .create-farm-icon{
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    .farm-check-icon{
        width: 68px;
        height: 68px;
        margin-bottom: 12px;
    }
    .create-farm-text{
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 32px;
        text-align: center;
        &.success-text{
            font-size: 23px;
            font-weight: 400;
        }
    }
    .create-farm-btn{
        width: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 25px;
        font-size: 16px;
        background: #2199F8;
        color: #fff;
        text-align: center;
    }
}
</style>