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

<template>
    <div class="home-index">
        <div class="top-row">
            <el-input class="search-bar" placeholder="搜索农场">
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>
            <div class="filter-row">
                <el-select class="filter-item" v-model="value" placeholder="选择地区">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select class="filter-item" v-model="value" placeholder="选择品类">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>

        <!-- 农场信息卡片 -->
        <div class="farm-card">
            <div class="farm-header">
                <div class="farm-header-left">
                    <div class="farm-title">
                        <span>{{ farmInfo.name }}</span>
                        <div class="title-tags">
                            <div class="title-tag tag-danger">
                                <span>干旱预警</span>
                                <el-icon>
                                    <ArrowRight />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="farm-subtitle">{{ farmInfo.address }}</div>
                </div>
                <div class="farm-more" @click="handleMoreClick">详情</div>
            </div>

            <div class="farm-content" v-if="isShowPl">
                <div class="farm-pl">
                    <span class="pl-label">品类:</span>
                    <div class="title-tags">
                        <div class="title-tag">荔枝</div>
                        <div class="title-tag">水稻</div>
                    </div>
                </div>
                <div class="farm-invite">邀请互动</div>
            </div>
            <div v-else class="farm-content-grid">
                <div class="title-tags">
                    <div class="title-tag">荔枝-桂味 糯米糍</div>
                </div>
                <div class="content-grid">
                    <div class="label-column">
                        <div class="label-cell" v-for="row in rows" :key="row.label">
                            {{ row.label }}
                        </div>
                    </div>
                    <div class="main-grid">
                        <div class="row" v-for="row in rows" :key="row.label">
                            <div v-for="card in row.cards" :key="card.id" class="status-card" :class="card.type"
                                @click="handleBlockClick(card)">
                                <badge class="status-badge" dot v-if="card.title === '冲楸异常'" :offset="[80, -10]"></badge>
                                <div class="status-title">
                                    {{ card.title }}
                                </div>
                                <div class="status-sub" v-if="card.sub">
                                    {{ card.sub }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-bottom-fixed-btns center-btn">
            <div class="bottom-btn primary-btn" @click="handleAddClient">新增客户</div>
        </div>
    </div>
    <!-- 新增客户弹窗 -->
    <action-sheet v-model:show="showAddClient">
        <div class="add-client-actions">
            <div class="add-client-btn add-client-btn--self" @click="handleAddClientSelf">
                自行创建
            </div>
            <div class="add-client-btn add-client-btn--invite" @click="handleAddClientInvite">
                邀请用户创建
            </div>
        </div>
    </action-sheet>
</template>

<script setup>
import { ref } from "vue";
import { Badge,ActionSheet } from 'vant';
import { useRouter } from "vue-router";
const router = useRouter();

const showAddClient = ref(false);
const handleAddClientSelf = () => {
    showAddClient.value = false;
    router.push("/create_farm?type=add");
};
const handleAddClientInvite = () => {
    showAddClient.value = false;
    router.push("/create_farm?type=add");
};

const handleAddClient = () => {
    showAddClient.value = true;
};


const isShowPl = ref(false);
const value = ref('')
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]

const farmInfo = ref({
    name: "从化荔博园合作社",
    address: "广东省广州市从化区某某街道",
});

const rows = ref([
    {
        label: "农情",
        cards: [
            {
                id: 1,
                title: "新梢萌动",
                sub: "预计3天后进入",
                type: "risk-strong",
            },
            {
                id: 2,
                title: "冲楸异常",
                sub: "占比3%",
                type: "normal",
                badge: true,
            },
            {
                id: 3,
                title: "病虫风险",
                sub: "一级风险",
                type: "danger",
            },
        ],
    },
    {
        label: "农事",
        cards: [
            {
                id: 4,
                title: "第一段防治",
                sub: "待完成",
                type: "risk-strong",
            },
            {
                id: 5,
                title: "控梢",
                sub: "待触发",
                type: "normal",
            },
            {
                id: 6,
                title: "无",
                sub: "",
                type: "disabled",
            },
        ],
    },
]);


const handleBlockClick = (block) => {
    // 预留点击跳转/弹窗逻辑
    console.log("点击卡片：", block);
};

const handleMoreClick = () => {
    router.push("/agricultural_details");
};
</script>

<style scoped lang="scss">
.home-index {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 12px 12px 24px;
    background: #f5f7fa;

    .top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .search-bar {
            width: 104px;

            ::v-deep {
                .el-input__wrapper {
                    border-radius: 25px;
                    border: 0.5px solid rgba(0, 0, 0, 0.2);
                    box-shadow: none;
                }
            }
        }

        .filter-row {
            display: flex;
            gap: 8px;

            .filter-item {
                width: 100px;
            }
        }
    }

    .farm-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 12px;
        border: 0.5px solid rgba(0, 0, 0, 0.2);

        .title-tags {
            display: flex;
            align-items: center;
            gap: 4px;

            .title-tag {
                font-size: 13px;
                padding: 2px 8px;
                border-radius: 2px;
                background: #E8F3FF;
                color: #2199F8;
                display: flex;
                align-items: center;
                gap: 2px;

                &.tag-danger {
                    background: rgba(255, 149, 61, 0.2);
                    color: #FF953D;
                }
            }
        }

        .farm-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;

            .farm-header-left {
                .farm-title {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 16px;
                    color: #1D2129;
                    margin-bottom: 4px;
                }

                .farm-subtitle {
                    font-size: 12px;
                    color: rgba(32, 32, 32, 0.4);
                }
            }

            .farm-more {
                font-size: 12px;
                color: rgba(37, 47, 56, 0.5);
            }
        }

        .farm-content {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .farm-pl {
                display: flex;
                align-items: center;
                gap: 5px;

                .pl-label {
                    color: rgba(32, 32, 32, 0.4);
                }
            }

            .farm-invite {
                font-size: 16px;
                color: #fff;
                padding: 5px 10px;
                background: #2199F8;
                border-radius: 2px;
                font-family: "PangMenZhengDao";
            }
        }

        .farm-content-grid {
            .content-grid {
                display: flex;
                gap: 8px;
                margin-top: 10px;

                .label-column {
                    .label-cell {
                        padding: 13px 3px;
                        letter-spacing: 3px;
                        border-radius: 2px;
                        background: rgba(134, 134, 134, 0.05);
                        color: #666666;
                        font-size: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        writing-mode: vertical-rl;
                    }

                    .label-cell+.label-cell {
                        margin-top: 10px;
                    }
                }

                .main-grid {
                    flex: 1;

                    .row {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 6px;
                        margin-bottom: 10px;

                        .status-card {
                            border-radius: 2px;
                            padding: 10px 0;
                            background: #ffffff;
                            border: 0.5px solid #e5e6eb;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .status-badge {
                                // position: absolute;
                                // top: 0;
                                // right: 0;
                            }

                            .status-title {
                                font-size: 16px;
                            }

                            .status-sub {
                                font-size: 10px;
                                color: rgba(32, 32, 32, 0.4);
                            }

                            &.risk-strong {
                                background: #FF6A6A;
                                border-color: #FF6A6A;

                                .status-title,
                                .status-sub {
                                    color: #ffffff;
                                }
                            }

                            &.danger {
                                background: #FFE9E9;
                                border-color: #ff8e8e;

                                .status-sub {
                                    color: #FF6A6A;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .custom-bottom-fixed-btns {
        &.center-btn {
            justify-content: center;
        }
    }
}
.add-client-actions {
    padding: 16px 20px 24px;
    background: #ffffff;
    .add-client-btn {
        width: 100%;
        text-align: center;
        border-radius: 6px;
        font-size: 16px;
        color: #ffffff;
        padding: 10px 0;
    }

    .add-client-btn--self {
        background: #2199f8;
        margin-bottom: 12px;
    }

    .add-client-btn--invite {
        background: #ff953d;
    }
}
</style>