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

<template>
    <div class="agricultural-dynamics">
        <!-- 标题 -->
        <div class="title">农情动态</div>

        <!-- 标签页导航 -->
        <div class="tab-nav">
            <div
                v-for="tab in tabs"
                :key="tab.value"
                class="tab-item"
                :class="{ active: activeTab === tab.value }"
                @click="handleTabClick(tab.value)"
            >
                {{ tab.label }}
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 气象预警内容/农事预警内容 -->
            <div v-if="activeTab !== 4" class="content-list">
                <div v-for="(item, index) in warningList" :key="index" class="content-item" @click="handleItem(item)">
                    <div class="item-image">
                        <img :src="item.media[0]" />
                    </div>
                    <div class="item-content">
                        <div class="item-text van-ellipsis" v-html="item.content"></div>
                        <div class="item-date">{{ item.createTime.slice(0, 10)  }}</div>
                    </div>
                </div>
            </div>

            <!-- 专家问答内容 -->
            <div v-else class="content-list expert-qa">
                <div v-for="(item, index) in expertQAList" :key="index" class="qa-item" @click="handleItem(item)">
                    <div class="question-header">
                        <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
                        <div class="question-title">{{ item.title }}</div>
                    </div>
                    <div class="expert-info">
                        <el-avatar class="expert-avatar" :size="16" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <div class="expert-details">
                            <span class="expert-name">{{ item.name }}</span>
                            <span class="expert-title">{{ item.expertTitle }}</span>
                            <span class="qa-date">{{ item.createTime.slice(0, 10) }}</span>
                        </div>
                    </div>
                    <div class="answer-content">
                        {{ item.content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const activeTab = ref(2);

const tabs = [
    { label: "气象预警", value: 2 },
    { label: "农事预警", value: 3 },
    { label: "专家问答", value: 4 },
];

// 气象/农事预警数据
const warningList = ref([]);

// 专家问答数据
const expertQAList = ref([]);

const handleTabClick = (value) => {
    activeTab.value = value;
    getWarningList();
};

const handleItem = () => {
    if (activeTab.value === 4) {
        router.push("/expert_detail");
    } else {
        router.push("/warning_detail");
    }
};

onMounted(() => {
    getWarningList();
});

const getWarningList = () => {
    const params = {
        page: 1,
        limit: 10,
        topicId: activeTab.value,
    };
    VE_API.home.warningPageList(params).then((res) => {
        if(activeTab.value === 4){
            expertQAList.value = res.data || [];
        }else{
            warningList.value = res.data || [];
        }
    });
};
</script>

<style scoped lang="scss">
.agricultural-dynamics {
    padding: 0 10px;

    .title {
        font-size: 16px;
        font-weight: bold;
        color: #1d2129;
        margin-bottom: 16px;
    }

    .tab-nav {
        display: flex;
        margin-bottom: 16px;

        .tab-item {
            margin-right: 20px;
            padding-bottom: 6px;
            &.active {
                color: #2199f8;
                border-bottom: 2px solid #2199f8;
            }
        }
    }

    .content-area {
        .content-list {
            .content-item {
                display: flex;
                align-items: center;
                overflow-x: hidden;
                .item-image {
                    width: 114px;
                    height: 74px;
                    margin-right: 12px;
                    flex-shrink: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 8px;
                    }
                }

                .item-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 68px;
                    max-width: calc(100% - 130px);

                    .item-text {
                        color: #1d2129;
                        ::v-deep {
                            p{
                                margin: 0;
                            }
                        }
                    }

                    .item-date {
                        color: #86909c;
                        font-size: 13px;
                    }
                }
            }
            .content-item + .content-item {
                margin-top: 12px;
            }

            // 专家问答样式
            &.expert-qa {
                .qa-item {
                    padding: 0 12px;

                    .question-header {
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                        gap: 8px;

                        .question-icon {
                            width: 20px;
                            height: 20px;
                        }

                        .question-title {
                            font-size: 16px;
                            font-weight: 600;
                        }
                    }

                    .expert-info {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        margin-bottom: 8px;
                        .expert-details {
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: #666666;
                        }
                    }

                    .answer-content {
                        color: #333333;
                        .font-bold {
                            font-weight: 500;
                        }
                    }
                }
                .qa-item + .qa-item {
                    margin-top: 16px;
                }
            }
        }
    }
}
</style>