feat:添加图片放大功能

src/components/album_compoents/albumCarouselItem.vue

@@ -3,17 +3,21 @@
         <!-- 图片列表 -->
         <div class="carousel-wrapper" :style="carouselStyle">
             <photo-provider v-if="images" :photo-closable="true" @visibleChange="handleVisibleChange">
-                <template v-for="(photo, index) in images" :key="photo.id">
-                    <div class="label-text">{{ labelText }}</div>
+                <photo-consumer
+                    class="carousel-img"
+                    v-for="(photo, index) in images"
+                    :key="photo.id"
+                    :src="base_img_url2 + (photo.cloudFilename ? photo.cloudFilename : photo)"
+                >
                     <img
-                        class="carousel-img"
                         :index="index"
                         :src="base_img_url2 + (photo.cloudFilename ? photo.cloudFilename : photo)"
                         alt=""
                     />
-                </template>
+                </photo-consumer>
             </photo-provider>
         </div>
+        <div class="label-text">{{ labelText }}</div>
 
         <!-- 左右箭头 -->
         <div @click.stop="prev" v-if="currentIndex !== 0" class="arrow left-arrow">
@@ -117,23 +121,25 @@ const clearAndRestartTimer = () => {
         transition: transform 0.5s ease;
         width: 100%;
         .carousel-img {
-            width: 100%;
-            min-width: 312px;
-            height: 255px;
-            object-fit: cover;
-        }
-        .label-text {
-            position: absolute;
-            top: 0;
-            left: 0;
-            padding: 4px 10px;
-            background: rgba(54, 52, 52, 0.8);
-            color: #fff;
-            font-size: 12px;
-            border-radius: 8px 0 8px 0;
-            z-index: 1;
+            min-width: 100%;
+            img {
+                min-width: 100%;
+                height: 255px;
+                object-fit: cover;
+            }
         }
     }
+    .label-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 4px 10px;
+        background: rgba(54, 52, 52, 0.8);
+        color: #fff;
+        font-size: 12px;
+        border-radius: 8px 0 8px 0;
+        z-index: 1;
+    }
     .blur-bg {
         position: absolute;
         top: 0;

src/components/recordItem.vue

@@ -32,7 +32,7 @@
                         {{ recordItemData.reCheckText || '暂无复核成效' }}
                     </div>
                 </div>
-                <div class="review-image">
+                <div class="review-image" v-if="showFarmImage">
                     <div class="image-wrapper" v-if="currentImageUrl">
                         <span class="image-label">农事前</span>
                         <img :src="currentImageUrl" alt="" />
@@ -145,6 +145,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    showFarmImage: {
+        type: Boolean,
+        default: false,
+    },
     recordItemData: {
         type: Object,
         default: () => ({}),
@@ -252,8 +256,10 @@ const currentImageUrl = computed(() => {
 
 // 监听 recordItemData.id 的变化，确保 ID 变化时重新获取
 watch(() => props.recordItemData?.id, (newId) => {
-    if (newId && !imageUrlMap.value[newId] && !loadingIds.value.has(newId)) {
-        fetchImageUrl(newId);
+    if(props.showFarmImage){
+        if (newId && !imageUrlMap.value[newId] && !loadingIds.value.has(newId)) {
+            fetchImageUrl(newId);
+        }
     }
 }, { immediate: true });
 </script>

src/views/old_mini/agri_services/components/farmDynamics.vue

@@ -1,50 +1,18 @@
 <template>
     <div class="farm-dynamics">
-        <tab-list
-            v-model="activePlanIndex"
-            :tabs="filterType"
-            @change="handlePlanClick"
-        />
+        <tab-list v-model="activePlanIndex" :tabs="filterType" @change="handlePlanClick" />
         <div class="task-content">
             <div class="expert-content">
                 <div v-for="(section, index) in contentData" :key="index" class="content-section">
                     <div class="section-id" :id="section.targetId"></div>
-                    <record-item :record-item-data="section" :onlyRecipeName="true" :showContent="activePlanIndex === 1" class="recipe-item">
-                        <template #title>
-                            <div class="box-title">
-                                <div class="title-l">
-                                    {{ section.farmWorkName }}
-                                    <span class="parent-text">{{ section.parentTitle || "标准农事" }}</span>
-                                </div>
-                                <div class="title-r">
-                                    <span class="r-dot"></span>
-                                    2区
-                                </div>
-                            </div>
-                        </template>
-                        <template #content v-if="activePlanIndex === 1">
-                            <!-- 未上传图片时显示 -->
-                            <div class="content-info" v-if="hasUploadedPhotos(section)">
-                                <div class="info-line">执行时间：<span class="info-val">{{ section.executeDate || '2025年11月11日' }}</span></div>
-                                <div class="info-line">药物处方：<span class="info-val">{{ getPrescriptionInfo(section) }}</span></div>
-                                <div class="reminder-box">
-                                    距离农事执行已<span class="highlight-number">15</span>天,请抓紧时间上传照片!
-                                </div>
-                            </div>
-                            <!-- 已上传图片时显示 -->
-                            <div class="content-info" v-else>
-                                <div class="info-line">药物处方：<span class="info-val">{{ getPrescriptionInfo(section) }}</span></div>
-                                <div class="review-title info-line">复核成效
-                                    <div class="info-val">
-                                        通过精准农业技术的应用,作物产量实现了两位数的增长,病虫害的发生率大幅下降,土壤肥力的提升
-                                    </div>
-                                </div>
-                                <div class="review-image">
-                                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
-                                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
-                                </div>
-                            </div>
-                        </template>
+                    <record-item
+                        :record-item-data="section"
+                        title-mode="default"
+                        title-right-type="dot"
+                        title-right-dot-text="2区"
+                        class="recipe-item"
+                        :showFarmImage="activePlanIndex === 5?true:false"
+                    >
                         <template #footer>
                             <div class="action-group" v-if="activePlanIndex === 0 || !hasUploadedPhotos(section)">
                                 <div class="action-l">查看详情</div>
@@ -53,11 +21,23 @@
                                     <div class="action-item primary-item">去确认</div>
                                 </div>
                                 <div class="action-r" v-if="activePlanIndex === 4">
-                                    <div class="action-item warning-item" :class="{ 'has-applied': section.hasApplied }" @click="handleApply(section, index)">{{ section.hasApplied ? '已发起需求' : '发起需求' }}</div>
+                                    <div
+                                        class="action-item warning-item"
+                                        :class="{ 'has-applied': section.hasApplied }"
+                                        @click="handleApply(section, index)"
+                                    >
+                                        {{ section.hasApplied ? "已发起需求" : "发起需求" }}
+                                    </div>
                                     <div class="action-item primary-item">确认完成</div>
                                 </div>
                                 <div class="action-r" v-if="activePlanIndex === 1">
-                                    <div class="action-item warning-item" :class="{ 'has-applied': section.hasApplied }" @click="handleApply(section, index)">{{ section.hasApplied ? '已发起需求' : '发起需求' }}</div>
+                                    <div
+                                        class="action-item warning-item"
+                                        :class="{ 'has-applied': section.hasApplied }"
+                                        @click="handleApply(section, index)"
+                                    >
+                                        {{ section.hasApplied ? "已发起需求" : "发起需求" }}
+                                    </div>
                                     <div class="action-item primary-item">上传照片</div>
                                 </div>
                             </div>
@@ -69,31 +49,34 @@
     </div>
     <!-- 需求发送成功弹窗 -->
     <popup v-model:show="showApplyPopup" round class="apply-popup">
-        <img class="check-icon" src="@/assets/img/home/right.png" alt="">
+        <img class="check-icon" src="@/assets/img/home/right.png" alt="" />
         <div class="apply-text">需求发送成功</div>
         <div class="apply-btn" @click="showApplyPopup = false">我知道了</div>
     </popup>
 </template>
 <script setup>
-import { ref,onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import recordItem from "@/components/recordItem.vue";
 import tabList from "@/components/pageComponents/TabList.vue";
 import { Popup } from "vant";
 
 const showApplyPopup = ref(false);
 
-const filterType = ref([{
-    title: "待完成",
-    value: 4,
-}, {
-    title: "已完成",
-    value: 5,
-}]);
+const filterType = ref([
+    {
+        title: "待完成",
+        value: 4,
+    },
+    {
+        title: "已完成",
+        value: 5,
+    },
+]);
 
 const activePlanIndex = ref(4);
 const handlePlanClick = (value) => {
     activePlanIndex.value = value;
-    getContentData()
+    getContentData();
 };
 
 onMounted(() => {
@@ -102,18 +85,20 @@ onMounted(() => {
 
 const contentData = ref([]);
 const getContentData = () => {
-    VE_API.z_farm_work_record.getSimpleList({
-        role: localStorage.getItem("SET_USER_CUR_ROLE"),
-        status: activePlanIndex.value,
-    }).then((res) => {
-        contentData.value = res.data;
-    });
+    VE_API.z_farm_work_record
+        .getSimpleList({
+            role: localStorage.getItem("SET_USER_CUR_ROLE"),
+            status: activePlanIndex.value === 4 ? "1,2,3,4" : activePlanIndex.value,
+        })
+        .then((res) => {
+            contentData.value = res.data;
+        });
 };
 
 const handleApply = (section, index) => {
     // 更新当前项的发起需求状态
-    showApplyPopup.value = true;
-    section.hasApplied = true;
+    // showApplyPopup.value = true;
+    // section.hasApplied = true;
 };
 
 const getPrescriptionInfo = (section) => {
@@ -207,23 +192,23 @@ const hasUploadedPhotos = (section) => {
                 padding-top: 8px;
                 .info-line {
                     font-size: 12px;
-                    color: #BBBBBB;
+                    color: #bbbbbb;
                     margin-bottom: 8px;
                     line-height: 1.4;
-                    .info-val{
+                    .info-val {
                         color: #666666;
                     }
                 }
                 .review-title {
-                    .info-val{
+                    .info-val {
                         margin-top: 5px;
                     }
                 }
-                .review-image{
+                .review-image {
                     display: flex;
                     align-items: center;
                     gap: 8px;
-                    img{
+                    img {
                         flex: 1;
                         height: 82px;
                         object-fit: cover;
@@ -235,7 +220,7 @@ const hasUploadedPhotos = (section) => {
                     border-radius: 4px;
                     padding: 6px 8px;
                     font-size: 12px;
-                    color: #2E2E2E;
+                    color: #2e2e2e;
                     line-height: 1.4;
                     margin-top: 8px;
                     .highlight-number {
@@ -244,8 +229,8 @@ const hasUploadedPhotos = (section) => {
                     }
                 }
             }
-            .action-r{
-                color: #1D2129;
+            .action-r {
+                color: #1d2129;
             }
             .action-group {
                 display: flex;
@@ -281,7 +266,7 @@ const hasUploadedPhotos = (section) => {
                             color: #ff831d;
                             &.has-applied {
                                 background: transparent;
-                                color: #AFAFAF;
+                                color: #afafaf;
                                 pointer-events: none;
                             }
                         }
@@ -312,24 +297,24 @@ const hasUploadedPhotos = (section) => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    .check-icon{
+    .check-icon {
         width: 68px;
         height: 68px;
         margin-bottom: 12px;
     }
-    .apply-text{
+    .apply-text {
         font-size: 24px;
         font-weight: 500;
         margin-bottom: 32px;
         text-align: center;
     }
-    .apply-btn{
+    .apply-btn {
         width: 100%;
         box-sizing: border-box;
         padding: 8px;
         border-radius: 25px;
         font-size: 16px;
-        background: #2199F8;
+        background: #2199f8;
         color: #fff;
         text-align: center;
     }

src/views/old_mini/home/index.vue

@@ -76,9 +76,12 @@ const showFarmPopup = ref(false);
 const farmPopupType = ref("create");
 
 const gardenId = ref(null);
+
+const isGarden = ref(false);
 const changeGarden = ({id}) => {
     gardenId.value = id;
     getExpertByFarmId();
+    isGarden.value = true;
 }
 
 const expertInfo = ref({});

src/views/old_mini/monitor/subPages/reviewResults.vue

@@ -4,37 +4,46 @@
         <div class="task-content">
             <div class="expert-content">
                 <template v-if="contentData.length > 0">
-                    <div v-for="(section, index) in contentData" :key="index" class="content-section">
-                        <div class="section-id" :id="section.targetId"></div>
-                        <record-item
-                            :record-item-data="section"
-                            :onlyRecipeName="true"
-                            content-mode="serviceDetail"
-                            title-mode="default"
-                            title-right-type="dot"
-                            title-right-dot-text="2区"
-                            class="recipe-item"
-                            @click="handleClick(section, index)"
-                        >
-                            <template #footer>
-                                <div class="action-group" v-if="!section.reviewImage.length">
-                                    <div class="action-l">查看详情</div>
-                                    <div class="action-r">
-                                        <div
-                                            class="action-item warning-item"
-                                            :class="{ 'has-applied': section.hasApplied }"
-                                            @click.stop="handleApply(section, index)"
-                                        >
-                                            {{ section.hasApplied ? "已发起需求" : "发起需求" }}
-                                        </div>
-                                        <div class="action-item primary-item" @click.stop="handleUploadPhoto(section)">
-                                            上传照片
+                    <List
+                        v-model:loading="loading"
+                        :finished="finished"
+                        :offset="100"
+                        loading-text="加载中..."
+                        finished-text="没有更多了"
+                        @load="onLoad"
+                    >
+                        <div v-for="(section, index) in contentData" :key="index" class="content-section">
+                            <div class="section-id" :id="section.targetId"></div>
+                            <record-item
+                                :record-item-data="section"
+                                content-mode="serviceDetail"
+                                title-mode="default"
+                                title-right-type="dot"
+                                title-right-dot-text="2区"
+                                class="recipe-item"
+                                showFarmImage
+                                @click="handleClick(section, index)"
+                            >
+                                <template #footer>
+                                    <div class="action-group" v-if="!section.reviewImage.length">
+                                        <div class="action-l">查看详情</div>
+                                        <div class="action-r">
+                                            <div
+                                                class="action-item warning-item"
+                                                :class="{ 'has-applied': section.hasApplied }"
+                                                @click.stop="handleApply(section, index)"
+                                            >
+                                                {{ section.hasApplied ? "已发起需求" : "发起需求" }}
+                                            </div>
+                                            <div class="action-item primary-item" @click.stop="handleUploadPhoto(section)">
+                                                上传照片
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </template>
-                        </record-item>
-                    </div>
+                                </template>
+                            </record-item>
+                        </div>
+                    </List>
                 </template>
                 <empty
                     v-else
@@ -73,7 +82,7 @@ import { Popup } from "vant";
 import customHeader from "@/components/customHeader.vue";
 import { useRouter, useRoute } from "vue-router";
 import upload from "@/components/upload";
-import { Empty } from "vant";
+import { Empty,List } from "vant";
 import { ElMessage } from "element-plus";
 
 const showApplyPopup = ref(false);
@@ -102,7 +111,7 @@ const handleUploadConfirm = () => {
         if (res.code === 0) {
             ElMessage.success('上传成功');
             showUpload.value = false;
-            getContentData();
+            resetAndLoad();
         }
     });
 };
@@ -113,28 +122,48 @@ const handleApply = (section, index) => {
     // section.hasApplied = true;
 };
 
-const hasUploadedPhotos = (section) => {
-    // 检查是否上传了图片，通过confirmPicture和executeEvidence字段判断
-    const hasConfirmPictures = section.confirmPicture && section.confirmPicture.length > 0;
-    const hasExecuteEvidence = section.executeEvidence && section.executeEvidence.length > 0;
-    return hasConfirmPictures || hasExecuteEvidence;
-};
-
 const contentData = ref([]);
-const getContentData = () => {
+const loading = ref(false);
+const finished = ref(false);
+const page = ref(1);
+const limit = ref(10);
+
+const onLoad = () => {
+    if (finished.value) return;
+    loading.value = true;
     const params = {
         farmId: route.query.farmId,
         flowStatus: 5,
-        page: 1,
-        limit: 10,
+        page: page.value,
+        limit: limit.value,
     };
-    VE_API.user.getDetailList(params).then((res) => {
-        contentData.value = res.data || [];
-    });
+    VE_API.user.getDetailList(params)
+        .then((res) => {
+            const list = res?.data || [];
+            if (Array.isArray(list) && list.length > 0) {
+                contentData.value = contentData.value.concat(list);
+                page.value += 1;
+                if (list.length < limit.value) {
+                    finished.value = true;
+                }
+            } else {
+                finished.value = true;
+            }
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const resetAndLoad = () => {
+    page.value = 1;
+    finished.value = false;
+    contentData.value = [];
+    onLoad();
 };
 
 onMounted(() => {
-    getContentData();
+    resetAndLoad();
 });
 
 const handleClick = (section, index) => {