feiniao-farm-h5/src/views/old_mini/user/farmDetails.vue

<template>
    <div class="farm-details-page">
        <custom-header name="农场详情"></custom-header>
        <div class="farm-details-content">
            <farm-info-card
                :data="{
                    farmName: farmDetail.name,
                    area: farmDetail.mianji + '亩',
                    variety: farmDetail.typeName,
                    address: farmDetail.address,
                    mapImage: '/map.png',
                    maxWidth:'58px',
                }"
            >
                <template #right>
                    <div @click="handleFarmInfo">基本信息</div>
                </template>
            </farm-info-card>
            <tabs v-model:active="activeTab" class="custom-tabs" scrollspy sticky offset-top="40" background="#f5f7fb">
                <tab title="农情互动" class="tab-item">
                    <common-box title="农情互动">
                        <template #right>
                            <span @click="handleDetail('farm_list')">查看详情</span>
                        </template>
                        <template v-if="farmWorkData.quest">
                            <div class="question-header">
                                <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
                                <div class="question-title">{{ farmWorkData.quest }}</div>
                            </div>
                            <template v-if="farmWorkData.images.length">
                                <div class="answer-content">
                                    答：{{ farmWorkData.agriDate }} {{ farmWorkData.answerLabel }}出现{{
                                        farmWorkData.indicatorName
                                    }}
                                </div>
                                <div class="answer-img">
                                    <img v-for="image in farmWorkData.images" :key="image" :src="config.base_img_url2 + image.cloudFilename" alt="" />
                                </div>
                            </template>
                            <div v-else class="answer-btn">
                                <div class="answer-btn-item">转发给客户</div>
                                <div class="answer-btn-item-group">
                                    <div class="answer-btn-item">否</div>
                                    <div class="answer-btn-item primary">是</div>
                                </div>
                            </div>
                        </template>
                        <empty
                            v-else
                            image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
                            image-size="80"
                            description="暂无数据"
                            class="empty-state"
                        />
                    </common-box>
                </tab>
                <tab title="农事服务" class="tab-item">
                    <common-box title="农事服务">
                        <template #right>
                            <span @click="handleDetail('service_list')">查看详情</span>
                        </template>
                        <tab-list
                            type="light"
                            v-model="farmServiceActiveTab"
                            :tabs="farmServiceTabs"
                            @change="handleFarmServiceTabChange"
                        />
                        <stats-box :stats-data="serviceStatsData" />
                        <div v-for="(section, index) in detailList" :key="index" class="content-section">
                            <record-item
                                :record-item-data="section"
                                onlyRecipeName
                                :content-mode="farmServiceActiveTab === 0 ? 'serviceDetail' : ''"
                                title-mode="default"
                                :title-right-text="farmServiceActiveTab === 0 ? '分享成果' : ''"
                                :title-right-type="farmServiceActiveTab === 1 ? 'dot' : null"
                                :title-right-dot-text="farmServiceActiveTab === 1 ? '2区' : ''"
                                class="recipe-item"
                            />
                        </div>
                        <empty
                            v-if="detailList.length === 0"
                            image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
                            image-size="80"
                            description="暂无数据"
                            class="empty-state"
                        />
                    </common-box>
                </tab>
                <tab title="农场报告" class="tab-item">
                    <common-box title="农场报告">
                        <template #right>
                            <span @click="handleDetail('farm_report')">查看详情</span>
                        </template>
                        <span class="report-content"
                            >果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。果园面积共XX亩，共有XX棵生产树。</span
                        >
                    </common-box>
                </tab>
                <tab title="农事方案" class="tab-item plan-tab-item">
                    <common-box title="农事方案">
                        <template #right>
                            <span @click="handleDetail('agricultural_plan')">查看更多</span>
                        </template>
                        <record-item v-if="detailList.length > 0" :record-item-data="detailList[0]" title-mode="default" class="recipe-item" />
                        <empty
                            v-else
                            image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
                            image-size="80"
                            description="暂无数据"
                            class="empty-state"
                        />
                    </common-box>
                </tab>
            </tabs>
        </div>
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn secondary-btn">转发给客户</div>
            <div class="bottom-btn primary-btn">在线沟通</div>
        </div>
    </div>
    <!-- 农场信息 -->
    <farm-info-popup ref="farmInfoRef" :farmId="farmIdVal" :showBtn="true"></farm-info-popup>
</template>

<script setup>
import { ref, onMounted} from "vue";
import { useRoute, useRouter } from "vue-router";
import { Tab, Tabs, Empty } from "vant";
import customHeader from "@/components/customHeader.vue";
import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
import tabList from "@/components/pageComponents/TabList.vue";
import commonBox from "@/components/pageComponents/CommonBox.vue";
import StatsBox from "@/components/pageComponents/StatsBox.vue";
import recordItem from "@/components/recordItem.vue";
import farmInfoPopup from "../home/components/farmInfoPopup.vue";
import config from "@/api/config";
const router = useRouter();
const route = useRoute();
const activeTab = ref(0);
const farmServiceTabs = ["过往服务", "未来服务"];
const farmServiceActiveTab = ref(0);

const farmInfoRef = ref(null);
const handleFarmInfo = () => {
    farmInfoRef.value.handleShow();
};

const handleFarmServiceTabChange = (index) => {
    if (index === 0) {
        getFarmPastServiceCost();
        getDetailList();
    } else {
        getFutureFarmWorkList();
        serviceStatsData.value = [
            { value: "1258", unit: "元", desc: "预计收益" },
            { value: "1258", unit: "元", desc: "预计成本" },
        ];
    }
};

const serviceStatsData = ref([]);

onMounted(() => {
    farmIdVal.value = route.query.farmId;
    paramsPage.value = {
        farmId: farmIdVal.value,
        limit: 1,
        page: 1,
    }
    getFarmDetail();
    getFarmWorkList();
    getDetailList();
    getFarmPastServiceCost();
});

const farmIdVal = ref(null);
const farmDetail = ref({});
const paramsPage = ref({});
const getFarmDetail = () => {
    VE_API.user.getFarmDetail({ farmId: farmIdVal.value }).then(({ data }) => {
        farmDetail.value = data || {};
    });
};

const farmWorkData = ref({});
const getFarmWorkList = () => {
    VE_API.user.getFarmWorkList(paramsPage.value).then(({ data }) => {
        if (data && data.length > 0) {
            farmWorkData.value = data[0] || {};
        }
    });
};

const detailList = ref([]);
const getDetailList = () => {
    const params = {
        ...paramsPage.value,
        flowStatus: '4,5',
    };
    VE_API.user.getDetailList(params).then(({ data }) => {
        detailList.value = data || [];
    });
};
const getFutureFarmWorkList = () => {
    VE_API.user.getFutureFarmWorkList(paramsPage.value).then(({ data }) => {
        detailList.value = data || [];
    });
};

const getFarmPastServiceCost = () => {
    VE_API.user.getFarmPastServiceCost({ farmId: farmIdVal.value }).then(({ data }) => {
        serviceStatsData.value = [
            { value: data.totalCost, unit: "元", desc: "总收益" },
            { value: data.totalCost, unit: "元", desc: "投入成本" },
            { value: data.serviceCount, unit: "次", desc: "服务次数" },
        ];
    });
};
const handleDetail = (path) => {
    router.push(`/${path}?farmId=${farmIdVal.value}`);
};
</script>

<style scoped lang="scss">
.farm-details-page {
    width: 100%;
    height: 100vh;
    background: #f2f3f5;
    .farm-details-content {
        box-sizing: border-box;
        padding: 10px 12px 70px 12px;
        overflow: auto;
        height: calc(100% - 40px);
        box-sizing: border-box;
        .custom-tabs {
            ::v-deep {
                .van-tabs__wrap {
                    height: auto;
                }
                .van-tabs__nav {
                    .van-tab {
                        color: #8b8b8b;
                        background: #f7f8fa;
                        height: 34px;
                        font-weight: 400;
                        border-radius: 25px;
                    }
                    .van-tab--active {
                        color: #fff;
                        background: #2199f8;
                        font-weight: 400;
                    }
                }

                .van-tabs__line {
                    display: none;
                }
                .van-tabs__nav--line {
                    padding: 12px 0;
                }
            }
            .tab-item + .tab-item {
                margin-top: 12px;
            }
        }
        .question-header {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            gap: 8px;
            font-weight: 500;
            .question-icon {
                width: 22px;
                height: 20px;
            }
        }
        .answer-content {
            color: #333333;
            margin: 6px 0 10px 0;
        }
        .answer-img {
            display: flex;
            gap: 5px;
            img {
                flex: 1;
                max-width: 105px;
                height: 105px;
                border-radius: 5px;
                object-fit: cover;
            }
        }
        .content-section {
            .recipe-item {
                border: 1px solid rgba(0, 0, 0, 0.1);
                margin: 12px 0 0 0;
            }
        }
        .plan-tab-item {
            .recipe-item {
                padding: 0;
            }
        }
        .plan-list-wrapper {
            height: 500px;
            margin-top: 12px;
        }
        .report-content {
            font-size: 13px;
        }
        .answer-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            > div {
                display: flex;
                gap: 10px;
            }
        }
        .answer-btn-item {
            padding: 7px 12px;
            border-radius: 25px;
            font-size: 12px;
            text-align: center;
            background: rgba(33, 153, 248, 0.1);
            color: #2199f8;
            min-width: 52px;
            box-sizing: border-box;
            &.primary {
                background: #2199f8;
                color: #ffffff;
            }
        }
        .empty-state {
            ::v-deep .van-empty {
                padding: 40px 0;
            }
        }
    }
}
</style>