feiniao-farm-h5/src/views/old_mini/mine/pages/serviceDetail.vue

<template>
    <div class="service-detail-page">
        <custom-header name="农场详情"></custom-header>
        <div class="service-detail-content">
            <farm-info-card
                v-if="
                    farmInfoData.farmName !== '' ||
                    farmInfoData.area !== '' ||
                    farmInfoData.variety !== '' ||
                    farmInfoData.address !== ''
                "
                class="record-box"
                :data="farmInfoData"
            >
            </farm-info-card>
            <div class="farm-service-box">
                <div class="service-title">
                    <img src="@/assets/img/home/label-icon.png" alt="" />
                    <span>农事服务</span>
                </div>
                <stats-box :stats-data="serviceStatsData" />
                <div
                    v-for="(section, index) in detailList"
                    :key="index"
                    class="content-section"
                >
                    <record-item
                        :record-item-data="section"
                        content-mode="serviceDetail"
                        title-mode="default"
                        title-right-text="生成成果报告"
                        class="recipe-item"
                        showFarmImage
                        @titleRightClick="handleTitleRightClick"
                    />
                </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"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
import StatsBox from "@/components/pageComponents/StatsBox.vue";
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import recordItem from "@/components/recordItem.vue";
import { Empty } from "vant";
const route = useRoute();
const router = useRouter();
const farmIdVal = ref(null);
onMounted(() => {
    farmIdVal.value = route.query.farmId;
    getFarmDetail();
    getFarmPastServiceCost();
    getDetailList();
});

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

// 计算属性，确保数据符合 FarmInfoCard 的验证要求
const farmInfoData = computed(() => {
    return {
        farmName: farmDetail.value.name || "",
        area: farmDetail.value.mianji ? farmDetail.value.mianji + "亩" : "",
        variety: farmDetail.value.typeName || "",
        address: farmDetail.value.address || "",
        maxWidth: "100%",
    };
});

const serviceStatsData = ref([]);
const getFarmPastServiceCost = () => {
    VE_API.user.getFarmPastServiceCost({ farmId: farmIdVal.value }).then(({ data }) => {
        serviceStatsData.value = [
            { value: data?.totalCost, unit: "元", desc: "成交额" },
            { value: data?.serviceCount, unit: "次", desc: "服务次数" },
        ];
    });
};

const detailList = ref([]);
const getDetailList = () => {
    const params = {
        farmId: farmIdVal.value,
        limit: 99,
        page: 1,
        flowStatus: "5",
    };
    VE_API.user.getDetailList(params).then(({ data }) => {
        detailList.value = data || [];
    });
};

const handleTitleRightClick = ({ id }) => {
    router.push({
        path: "/achievement_report",
        query: { miniJson: JSON.stringify({ id }) },
    });
};
</script>

<style lang="scss" scoped>
.service-detail-page {
    width: 100%;
    height: 100vh;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .service-detail-content {
        flex: 1;
        overflow-y: auto;
        padding: 10px 12px;
        .record-box {
            margin-bottom: 0;
        }
        .farm-service-box {
            padding: 16px 12px;
            background: #fff;
            border-radius: 8px;
            margin-top: 12px;
            .service-title {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 16px;
                color: #000;
                font-weight: 500;
                padding-bottom: 12px;
                border-bottom: 1px solid #f5f5f5;
                img {
                    width: 14px;
                    height: 8px;
                }
            }
            .content-section {
                .recipe-item {
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    margin: 12px 0 0 0;
                }
            }
        }
    }
}
</style>