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

<template>
    <div class="service-records-page">
        <custom-header name="服务记录"></custom-header>
        <div class="record-list">
            <div v-for="(item, index) in recordList" :key="index" class="record-card" @click="handleItemClick(item)">
                <img class="thumb" :src=" base_img_url2 + item.executeEvidenceList[0] + resize" alt="照片" />
                <div class="card-body">
                    <div class="card-header">
                        <div class="title van-ellipsis">{{ item.farmWorkName }}</div>
                        <div class="date">{{ item.executeDate }}</div>
                    </div>
                    <div class="line">
                        <span class="label">农场名称：</span>
                        <span class="text van-ellipsis">{{ item.farmName }}</span>
                    </div>
                    <div class="line">
                        <span class="label">药肥处方：</span>
                        <span class="text van-ellipsis">{{ getPrescriptionText(item) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useRouter } from "vue-router";
import { base_img_url2 } from "@/api/config";
const router = useRouter();
const resize = "?x-oss-process=image/resize,w_300";
// 服务记录列表数据
const recordList = ref([]);

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

const getSimpleList = async () => {
    const { data } = await VE_API.mine.getSimpleList({
        role: localStorage.getItem("SET_USER_CUR_ROLE"),
        includePrescription: true,
        isServiceRecord: true,
        flowStatus: "5",
    });
    if (data.length > 0) {
        recordList.value = data;
    }
};

// 处理列表项点击
const handleItemClick = (data) => {
    router.push(`/review_work?miniJson={"id":${data.id},"goBack":true,"isBtn":true}`);
};

// 获取药肥处方文本（从prescriptionList中提取pesticideFertilizerList的defaultName，用+连接）
const getPrescriptionText = (item) => {
    if (!item.prescriptionList || !Array.isArray(item.prescriptionList) || item.prescriptionList.length === 0) {
        return item.prescription || "暂无";
    }

    const nameList = [];
    item.prescriptionList.forEach((prescription) => {
        if (prescription.pesticideFertilizerList && Array.isArray(prescription.pesticideFertilizerList)) {
            prescription.pesticideFertilizerList.forEach((pesticide) => {
                if (pesticide.defaultName || pesticide.pesticideFertilizerName) {
                    nameList.push(pesticide.defaultName || pesticide.pesticideFertilizerName);
                }
            });
        }
    });

    return nameList.length > 0 ? nameList.join(" + ") : item.prescription || "暂无";
};
</script>
<style lang="scss" scoped>
.service-records-page {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    .record-list {
        padding: 10px 12px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .record-card {
        display: flex;
        gap: 16px;
        padding: 10px;
        background: #ffffff;
        border-radius: 16px;
        align-items: center;
        .thumb {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            object-fit: cover;
        }
        .card-body {
            width: calc(100% - 64px - 16px);
            .card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 4px;
                }
                .date {
                    font-size: 12px;
                    color: #999999;
                }
            }
            .line {
                font-size: 12px;
                color: #666;
                display: flex;
                align-items: center;
                .label {
                    color: #bbb;
                }
                .text {
                    flex: 1;
                }
            }
        }
    }
}
</style>