feiniao-farm-h5/src/views/old_mini/interactionList/components/morePopup.vue

<template>
    <popup v-model:show="showMore" class="more-popup" round>
        <div class="more-content">
            <!-- 搜索框 -->
            <!-- <div class="search-bar">
                <el-icon class="search-icon">
                    <Search />
                </el-icon>
                <input
                    v-model="keyword"
                    class="search-input"
                    type="text"
                    placeholder="请输入病虫害名称"
                />
            </div> -->

            <!-- 类型切换 -->
            <!-- <div class="type-tabs">
                <div
                    class="tab-item all-tab"
                    :class="{ active: activeType === 'all' }"
                    @click="changeType('all')"
                >
                    全部
                </div>
                <div
                    class="tab-item"
                    :class="{ active: activeType === 'disease' }"
                    @click="changeType('disease')"
                >
                    病害
                </div>
                <div
                    class="tab-item"
                    :class="{ active: activeType === 'pest' }"
                    @click="changeType('pest')"
                >
                    虫害
                </div>
            </div> -->

            <!-- 病虫害列表 -->
            <div class="card-grid">
                <div
                    v-for="(item, key) in filteredList"
                    :key="key"
                    class="card-item"
                    @click="showExample(filteredList, item, key)"
                >
                    <div class="thumb-wrap">
                        <img class="thumb" :src="item.image" :alt="item.name" />
                    </div>
                    <div class="card-name">{{ item.name || "病害" }}</div>
                </div>
                <div v-if="!filteredList.length" class="empty-text">暂无数据</div>
            </div>
        </div>
    </popup>

    <!-- 示例照片轮播组件 -->
    <example-popup
        v-model:show="showExamplePopup"
        :images="exampleList.map(item => item.image)"
        :start-index="exampleStartIndex"
        :title="exampleTitle"
    />
</template>

<script setup>
import { ref, computed } from "vue";
import { Popup } from "vant";
import { Search } from "@element-plus/icons-vue";
import ExamplePopup from "./examplePopup.vue";

const showMore = ref(false);
const keyword = ref("");
const activeType = ref("all"); // all / disease / pest

// 病虫害数据（后续可通过接口或外部传入）
const items = ref([
    // 示例数据，占位用，后续可替换为接口返回
    {
        id: 1,
        name: "蒂蛀虫",
        type: "pest",
        image: "https://birdseye-img-ali-cdn.sysuimars.com/birdseye-look-mini/94379/1768801082504.png",
        images: [
            "https://birdseye-img-ali-cdn.sysuimars.com/birdseye-look-mini/94379/1768801082504.png",
        ],
    },
]);

const filteredList = computed(() => {
    let list = items.value || [];
    if (activeType.value !== "all") {
        list = list.filter((it) => it.type === activeType.value);
    }
    if (keyword.value.trim()) {
        const k = keyword.value.trim().toLowerCase();
        list = list.filter((it) => (it.name || "").toLowerCase().includes(k));
    }
    return list;
});

const openPopup = () => {
    showMore.value = true;
};

const changeType = (type) => {
    activeType.value = type;
};

// 预留给外部设置数据的能力
const setItems = (list) => {
    items.value = Array.isArray(list) ? list : [];
};

// 示例轮播相关
const showExamplePopup = ref(false);
const exampleList = ref([]);
const exampleStartIndex = ref(0);
const exampleTitle = ref("示例图");

const showExample = (list, item, index) => {
    exampleList.value = list;
    exampleStartIndex.value = index;
    exampleTitle.value = item.name || "示例图";
    showExamplePopup.value = true;
};

defineExpose({
    openPopup,
    setItems,
});
</script>

<style lang="scss" scoped>
.more-popup {
    width: calc(100% - 40px);
    border-radius: 16px;
    background: #fff;
    padding: 16px 0 20px 16px;
    box-sizing: border-box;
    max-height: 90%;
    overflow: hidden;
}

.more-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.search-bar {
    display: flex;
    align-items: center;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 6px 12px;
    margin-bottom: 16px;
    margin-right: 16px;

    .search-icon {
        font-size: 18px;
        color: #c0c4cc;
        margin-right: 6px;
    }

    .search-input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
    }

    .search-input::placeholder {
        color: rgba(0, 0, 0, 0.5);
    }
}

.type-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding-right: 16px;

    .tab-item {
        flex: 1;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 999px;
        font-size: 15px;
        background: rgba(218, 218, 218, 0.2);
        color: #000;
        &.all-tab {
            flex: none;
            width: 73px;
        }
    }

    .tab-item.active {
        background: #2199f8;
        color: #fff;
    }
}

.card-grid {
    padding-right: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 12px;
    grid-column-gap: 5px;
    margin-top: 4px;
    padding-bottom: 4px;
    overflow-y: auto;
    /* 让列表区域在内容较多时内部滚动 */
    max-height: 70vh;

    .card-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .thumb-wrap {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        background: #f5f5f5;
    }

    .thumb {
        width: 100%;
        height: 76px;
        object-fit: cover;
        display: block;
    }

    .card-name {
        margin-top: 5px;
        font-size: 12px;
        color: #000;
        text-align: center;
    }

    .empty-text {
        grid-column: 1 / -1;
        text-align: center;
        font-size: 14px;
        color: #999;
        padding: 16px 0;
    }
}
</style>