feat：修改服务记录页面

src/views/old_mini/mine/pages/serviceDetail.vue

@@ -1,15 +1,17 @@
 <template>
     <div class="service-detail-page">
-        <custom-header name="服务详情"></custom-header>
+        <custom-header name="农场详情"></custom-header>
         <div class="service-detail-content">
             <farm-info-card
-                v-if="farmInfoData.farmName !== '' || farmInfoData.area !== '' || farmInfoData.variety !== '' || farmInfoData.address !== ''"
+                v-if="
+                    farmInfoData.farmName !== '' ||
+                    farmInfoData.area !== '' ||
+                    farmInfoData.variety !== '' ||
+                    farmInfoData.address !== ''
+                "
                 class="record-box"
                 :data="farmInfoData"
             >
-                <template #right>
-                    <div @click="handleChatFarm">在线沟通</div>
-                </template>
             </farm-info-card>
             <div class="farm-service-box">
                 <div class="service-title">
@@ -17,12 +19,17 @@
                     <span>农事服务</span>
                 </div>
                 <stats-box :stats-data="serviceStatsData" />
-                <div v-for="(section, index) in detailList" :key="index" class="content-section" @click="handleClick(section)">
+                <div
+                    v-for="(section, index) in detailList"
+                    :key="index"
+                    class="content-section"
+                    @click="handleClick(section)"
+                >
                     <record-item
                         :record-item-data="section"
                         content-mode="serviceDetail"
                         title-mode="default"
-                        title-right-text="分享成果"
+                        title-right-text="生成成果报告"
                         class="recipe-item"
                         showFarmImage
                         @titleRightClick="handleTitleRightClick"
@@ -73,11 +80,11 @@ const getFarmDetail = () => {
 // 计算属性，确保数据符合 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: '58px',
+        farmName: farmDetail.value.name || "",
+        area: farmDetail.value.mianji ? farmDetail.value.mianji + "亩" : "",
+        variety: farmDetail.value.typeName || "",
+        address: farmDetail.value.address || "",
+        maxWidth: "58px",
     };
 });
 
@@ -106,22 +113,22 @@ const getDetailList = () => {
 };
 
 const handleClick = (section) => {
-    router.push(`/review_work?miniJson=${JSON.stringify({id:section.id,goBack: true})}`);
+    router.push(`/review_work?miniJson=${JSON.stringify({ id: section.id, goBack: true })}`);
 };
 
 const handleChatFarm = () => {
-    if(farmDetail.value.farmersMiniUserId != null){
+    if (farmDetail.value.farmersMiniUserId != null) {
         router.push(`/chat_frame?userId=${farmDetail.value.farmersMiniUserId}&farmId=${farmIdVal.value}`);
-    }else{
-        ElMessage.warning('尚未绑定用户,暂时无法沟通');
+    } else {
+        ElMessage.warning("尚未绑定用户,暂时无法沟通");
     }
 };
 
 const reviewPopupRef = ref(null);
-const handleTitleRightClick = ({id, reviewImage}) => {
-    VE_API.z_farm_work_record.getTriggerImg({ farmWorkRecordId:id }).then(({ data }) => {
-        const preImg = data.length ? base_img_url2 + data[data.length - 1].cloudFilename : '';
-        const resImg = reviewImage?.length ? base_img_url2 + reviewImage[reviewImage.length - 1] : '';
+const handleTitleRightClick = ({ id, reviewImage }) => {
+    VE_API.z_farm_work_record.getTriggerImg({ farmWorkRecordId: id }).then(({ data }) => {
+        const preImg = data.length ? base_img_url2 + data[data.length - 1].cloudFilename : "";
+        const resImg = reviewImage?.length ? base_img_url2 + reviewImage[reviewImage.length - 1] : "";
         reviewPopupRef.value.handleShowPopup(id, preImg, resImg);
     });
 };

src/views/old_mini/mine/pages/serviceRecords.vue

@@ -1,36 +1,37 @@
 <template>
     <div class="service-records-page">
         <custom-header name="服务记录"></custom-header>
-        <div class="select-group">
-            <el-select class="select-item" v-model="dateValue" placeholder="Select">
-                <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="select-item" v-model="areaValue" placeholder="Select">
-                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </div>
         <div class="record-list">
-            <farm-info-card
-                v-for="(item, index) in recordList"
+            <div
+                v-for="(item, index) in renderList"
                 :key="index"
-                :data="{
-                    farmName: item.farmName,
-                    area: item.mianji + '亩',
-                    variety: item.typeName,
-                    address: item.address,
-                    serviceCount: item.serviceCount,
-                }"
-                @click="handleItemClick(item)"
-                class="record-item"
-            />
+                class="record-card"
+                @click="handleItemClick(item.raw)"
+            >
+                <img class="thumb" :src="item.thumb" alt="农场缩略图" @error="handleImgError" />
+                <div class="card-body">
+                    <div class="card-header">
+                        <div class="title van-ellipsis">{{ item.title }}</div>
+                        <div class="date">2025.05.28</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">{{ item.prescription }}</span>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import customHeader from "@/components/customHeader.vue";
-import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
 import { useRouter } from "vue-router";
+import defaultThumb from "@/assets/img/home/farm.png";
 const router = useRouter();
 
 // 服务记录列表数据
@@ -43,64 +44,91 @@ onMounted(() => {
 const getUserList = async () => {
     const { data } = await VE_API.user.userList();
     if (data.length) {
-        recordList.value = data.filter(item => item.serviceCount != 0);
+        recordList.value = data.filter((item) => item.serviceCount != 0);
     }
 };
+const formatDate = (dateStr) => {
+    if (!dateStr) return "--";
+    const date = new Date(dateStr);
+    if (Number.isNaN(date.getTime())) return dateStr;
+    const y = date.getFullYear();
+    const m = `${date.getMonth() + 1}`.padStart(2, "0");
+    const d = `${date.getDate()}`.padStart(2, "0");
+    return `${y}.${m}.${d}`;
+};
+const renderList = computed(() =>
+    recordList.value.map((item) => {
+        const title = item.workName || item.typeName || item.variety || "农事服务";
+        const farmName = item.farmName || item.name || "未填写";
+        const prescription = item.prescription || item.drugPrescription || item.drugName || item.remark || "暂无信息";
+        const date = formatDate(item.serviceDate || item.planDate || item.updateTime || item.createTime);
+        const thumb = item.cover || item.imageUrl || item.imgUrl || item.thumb || defaultThumb;
+        return {
+            raw: item,
+            title,
+            farmName,
+            prescription,
+            date,
+            thumb,
+        };
+    })
+);
 // 处理列表项点击
 const handleItemClick = (data) => {
     router.push(`/service_detail?farmId=${data.farmId}`);
 };
-
-const dateValue = ref("1");
-const dateOptions = [
-    { value: "1", label: "农事类型" },
-    { value: "2", label: "2" },
-    { value: "3", label: "3" },
-];
-const areaValue = ref("1");
-const areaOptions = [
-    { value: "1", label: "区域筛选" },
-    { value: "2", label: "2" },
-    { value: "3", label: "3" },
-];
+const handleImgError = (e) => {
+    e.target.src = defaultThumb;
+};
 </script>
 <style lang="scss" scoped>
 .service-records-page {
     width: 100%;
     min-height: 100vh;
-    background: #f7f7f7;
-    .select-group {
+    background: #f5f5f5;
+    .record-list {
+        padding: 10px 12px 20px;
         display: flex;
-        padding-top: 6px;
-        .select-item {
-            ::v-deep {
-                .el-select__wrapper {
-                    text-align: center;
-                    gap: 2px;
-                    box-shadow: none;
-                    justify-content: center;
-                    background: none;
-                }
-                .el-select__selection {
-                    flex: none;
-                    width: fit-content;
-                }
-                .el-select__placeholder {
-                    position: static;
-                    transform: none;
-                    width: fit-content;
-                    color: rgba(0, 0, 0, 0.2);
+        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;
                 }
-                .el-select__caret {
-                    color: rgba(0, 0, 0, 0.2);
+                .date {
+                    font-size: 12px;
+                    color: #999999;
                 }
             }
+            .line {
+                font-size: 12px;
+                color: #666;
+            }
+            .label {
+                color: #bbb;
+            }
         }
     }
-    .record-list {
-        padding: 6px 12px;
-        height: calc(100vh - 100px);
-        overflow: auto;
-    }
 }
 </style>