Merge branch 'farmer' of http://www.sysuimars.cn:3000/feiniao/feiniao-farm-h5 into farmer

src/components/taskItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="farm-item" :class="{ done: props.status, hall: isHall }">
+    <div class="farm-item" :class="{ done: props.status, ['farm-item-' + itemIndex]: itemIndex }">
         <div class="item-top">
             <div class="top-l">
                 <el-popover
@@ -20,7 +20,10 @@
                             : ""
                     }}
                 </div>
-                <div class="item-time" v-else>{{ itemData?.executeDate }}</div>
+                <div class="item-time" v-if="itemIndex !== 3">{{ itemData?.executeDate }}</div>
+                <div class="item-tag" v-if="itemIndex === 3">
+                    {{ farmWorkType[itemData?.farmWorkType || 0] }}
+                </div>
             </div>
             <div class="top-r" @click="toDetail(props.status, itemData.id, itemData.farmWorkLibId)">
                 {{ props.status === 0 ? "" : "查看详情" }}
@@ -49,13 +52,6 @@
                         <div class="farm-addr">{{ itemData?.address }}</div>
                     </div>
                 </div>
-                <div class="right-wrap" v-if="isHall">
-                    <div class="click-item" v-if="!itemData?.isFollow" @click="handleFollow(itemData)">
-                        <el-icon><Plus /></el-icon>
-                        <span>关注</span>
-                    </div>
-                    <span v-else class="follow-text" @click="handleFollow(itemData)">已关注</span>
-                </div>
             </div>
             <slot name="footer"></slot>
         </div>
@@ -67,13 +63,13 @@
                         <span class="value">{{ prescriptionText }}</span>
                     </div>
                 </div>
-                <div class="desc-info" v-if="itemIndex === 1 && itemData?.reviewDate">
+                <div class="desc-info" v-if="(itemIndex === 1 || itemIndex === 3) && itemData?.reviewDate">
                     <div class="desc-info-item">
                         <span>复核时间：</span>
                         <span class="value">{{ itemData?.reviewDate }}</span>
                     </div>
                 </div>
-                <div class="desc-info" v-if="itemIndex === 2 && itemData?.reviewIntervalDays">
+                <div class="desc-info" v-if="(itemIndex === 2 && itemData?.reviewIntervalDays) || (itemIndex === 3 && itemData?.reviewIntervalDays && !itemData?.reviewDate)">
                     <div class="desc-info-item">
                         <span>复核时间：</span>
                         <span class="value">{{ reviewDate }}</span>
@@ -87,7 +83,7 @@
                         >
                     </div>
                 </div>
-                <div v-if="itemIndex === 1 && itemData.reviewImage?.length" class="review-image two-image">
+                <div v-if="(itemIndex === 1 || itemIndex === 3) && itemData.reviewImage?.length" class="review-image two-image">
                     <!-- 第一张：执行照片 -->
                     <div class="review-image-item" v-if="itemData.executeEvidenceList?.length">
                         <photo-provider :photo-closable="true">
@@ -186,10 +182,7 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
-    isHall: {
-        type: Boolean,
-        default: false,
-    },
+    // 0: 待完成，1：已完成，2：待复核，3：农户版已完成
     itemIndex: {
         type: Number,
         default: 0,
@@ -204,6 +197,13 @@ const toPage = () => {
     router.push("/report_detail");
 };
 
+const farmWorkType = {
+    0: "预警农事",
+    1: "标准农事",
+    2: "建议农事",
+    3: "自建农事",
+};
+
 const handleFollow = ({ farmId, isFollow }) => {
     ElMessageBox.confirm(`${isFollow ? "确定要取消关注该农场吗？" : "确定要关注该农场吗？"}`, "提示", {
         confirmButtonText: "确定",
@@ -342,7 +342,7 @@ function formatArea(val) {
 }
 
 const toDetail = (status, id, farmWorkId) => {
-    if (status === 1) {
+    if (status === 1 || status === 3) {
         // 复核成效
         router.push({
             path: "/review_work",
@@ -374,6 +374,22 @@ const toDetail = (status, id, farmWorkId) => {
             color: rgba(0, 0, 0, 0.6);
         }
     }
+    &.farm-item-3 {
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        .item-top {
+            .item-name {
+                padding: 0;
+                background: none;
+                border: none;
+                color: #000000;
+            }
+        }
+        .item-box {
+            border-color: #F5F5F5;
+        }
+    }
     .top-r {
         flex: none;
     }
@@ -391,7 +407,7 @@ const toDetail = (status, id, farmWorkId) => {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 10px 12px;
+        padding: 8px 12px;
         color: #2199f8;
         font-size: 14px;
         .top-l {
@@ -404,6 +420,16 @@ const toDetail = (status, id, farmWorkId) => {
             padding-right: 8px;
             flex: none;
         }
+        .item-tag {
+            font-size: 12px;
+            color: #000000;
+            padding: 0 10px;
+            background: rgba(119, 119, 119, 0.1);
+            border-radius: 20px;
+            font-weight: normal;
+            height: 26px;
+            line-height: 26px;
+        }
         .item-name {
             margin-right: 8px;
             color: #2199f8;

src/components/weatherInfo.vue

@@ -53,7 +53,15 @@
             </div>
             <weather-chart class="weather-chart" :weather-data="weatherData"></weather-chart>
         </div>
+        <!-- 农场信息 -->
+        <farm-info-popup
+            ref="myFarmInfoRef"
+            :showEditBtn="false"
+            :showBtn="true"
+            :farmId="farmId"
+        ></farm-info-popup>
     </div>
+
 </template>
 
 <script setup>
@@ -61,6 +69,7 @@ import { ref, onActivated, computed, watch, onMounted } from "vue";
 import weatherChart from "./weatherChart.vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import farmInfoPopup from "@/views/old_mini/home/components/farmInfoPopup.vue";
 const store = useStore();
 
 const props = defineProps({
@@ -112,8 +121,9 @@ async function setFarmByGardenId(gardenIdValue) {
     
     // 先刷新农场列表，确保数据是最新的
     return new Promise((resolve) => {
-        VE_API.farm.userFarmSelectOption({agriculturalQuery: false}).then(({data}) => {
-            const fullData = data.filter(item => item.userType === 2);
+        VE_API.farm.userFarmSelectOption({agriculturalQuery: true}).then(({data}) => {
+            // const fullData = data.filter(item => item.userType === 2);
+            const fullData = data;
             farmList.value = fullData || [];
             if (fullData && fullData.length > 0) {
                 const targetFarm = fullData.find(farm => farm.id == gardenIdValue);
@@ -183,8 +193,9 @@ function selectFarmFromList(data) {
 
 // 获取农场列表（不处理传入的gardenId）
 function getFarmListWithoutGardenId() {
-    VE_API.farm.userFarmSelectOption({agriculturalQuery: false}).then(({data}) => {
-        const fullData = data.filter(item => item.userType === 2);
+    VE_API.farm.userFarmSelectOption({agriculturalQuery: true}).then(({data}) => {
+        // const fullData = data.filter(item => item.userType === 2);
+        const fullData = data;
         farmList.value = fullData || [];
         if (fullData && fullData.length > 0) {
             selectFarmFromList(fullData);
@@ -262,9 +273,9 @@ function getLocationName() {
         });
 }
 
+const myFarmInfoRef = ref(null);
 const handleAddGarden = () => {
-    console.log('handleAddGarden');
-    // router.push(`/create_farm?isReload=true&from=monitor`)
+    myFarmInfoRef.value.handleShow();
 }
 
 // 获取天气数据

src/views/old_mini/agri_record/index.vue

@@ -11,7 +11,7 @@
                     @weatherExpanded="weatherExpanded"
                     @changeGarden="changeGarden"
                     :isGarden="true"
-                    :gardenId="defaultGardenId"
+                    :gardenId="gardenId"
                 ></weather-info>
             </div>
             <div class="record-list">
@@ -20,8 +20,8 @@
                     <div class="task-item" v-for="(item, index) in taskList" :key="item.id || item.workRecordId">
                         <task-item
                             :key="1 + '-' + index"
-                            :itemIndex="1"
-                            :status="1"
+                            :itemIndex="3"
+                            :status="3"
                             :item-data="item"
                         >
                         </task-item>
@@ -48,19 +48,11 @@ onMounted(() => {
 onActivated(() => {
     getRecordList();
 });
-
-const defaultGardenId = ref(null);
 const taskList = ref([]);
 const loading = ref(false);
 const noData = ref(false);
 const getRecordList = () => {
-    const params = {
-        role: 2,
-        flowStatus: 5,  
-        includePrescription: true,
-    }
-    VE_API.z_farm_work_record
-        .getSimpleList(params)
+    VE_API.user.farmServiceRecord({ farmId: gardenId.value })
         .then(({ data }) => {
             loading.value = false;
             taskList.value = [...data, ...data];
@@ -144,6 +136,13 @@ const changeGarden = ({ id }) => {
     .record-list {
         position: relative;
         top: 100px;
+        .empty-data {
+            text-align: center;
+            padding-top: 20px;
+        }
+        .task-item + .task-item {
+            margin-top: 10px;
+        }
     }
 }
 </style>

src/views/old_mini/home/components/farmInfoPopup.vue

@@ -1,5 +1,10 @@
 <template>
-    <Popup v-model:show="show" class="farm-info-popup" closeable>
+    <Popup
+        v-model:show="show"
+        :overlay-style="{ zIndex: 9999 }"
+        teleport="body"
+        class="farm-info-popup"
+        closeable>
         <div class="popup-content-box">
             <div class="popup-title">基本信息</div>
             <div class="popup-content">
@@ -27,7 +32,14 @@
                     <field v-model="farmInfo.fzr" readonly label="联系人" />
                     <field v-model="farmInfo.tel" readonly label="联系电话" />
                     <field class="address-field" v-model="farmInfo.address" readonly label="农场位置" />
-                    <checkbox v-if="!showBtn" class="checkbox" icon-size="16px" shape="square" v-model="farmInfo.defaultOption">是否勾选为默认农场</checkbox>
+                    <checkbox
+                        v-if="!showBtn"
+                        class="checkbox"
+                        icon-size="16px"
+                        shape="square"
+                        v-model="farmInfo.defaultOption"
+                        >是否勾选为默认农场</checkbox
+                    >
                 </cell-group>
             </div>
             <div class="popup-footer" v-if="!showBtn || showEditBtn">
@@ -46,9 +58,9 @@ import IndexMap from "../map/index.js";
 import { useStore } from "vuex";
 
 const userTypeMap = {
-    1: '普通用户',
-    2: '托管用户',
-    3: '优质客户',
+    1: "普通用户",
+    2: "托管用户",
+    3: "优质客户",
 };
 
 const props = defineProps({
@@ -133,11 +145,11 @@ const handleEdit = () => {
         };
         store.commit("home/SET_FARM_POLYGON", polygonData);
     }
-    
+
     // 将农场数据存储到store中，供编辑页面使用
     store.commit("home/SET_EDIT_FARM_DATA", farmInfo.value);
-    
-    const from = props.showEditBtn ? 'details' : 'monitor';
+
+    const from = props.showEditBtn ? "details" : "monitor";
     router.push(`/create_farm?type=edit&farmId=${props.farmId}&from=${from}`);
 };
 
@@ -152,6 +164,7 @@ defineExpose({ handleShow });
 .farm-info-popup {
     width: 100%;
     border-radius: 8px;
+    z-index: 9999 !important;
     overflow: hidden;
     .popup-content-box {
         background: url("@/assets/img/home/popup-mask.png") no-repeat center left / 100% 100%;

src/views/old_mini/home/components/knowledgeCard.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="knowledge-card">
+        <div class="knowledge-header">
+                <div class="knowledge-title">
+                    <div
+                        class="title-item"
+                        :class="{ active: activeKnowledgeId === 6 }"
+                        @click="handleKnowledgeClick(6)">
+                        种植知识库
+                    </div>
+                    <div
+                        class="title-item"
+                        :class="{ active: activeKnowledgeId === 7 }"
+                        @click="handleKnowledgeClick(7)">
+                        实战知识库
+                    </div>
+                </div>
+                <div class="more-text">更多<el-icon class="more-icon"><ArrowRight /></el-icon></div>
+            </div>
+            <div class="knowledge-content">
+                <div class="knowledge-item" @click="handleBannerClick(item.id)" v-for="(item, index) in knowledgeList" :key="index">
+                    <img class="thumb" :src="item.media?.[0]" alt="" />
+                    <div class="card-body-left">
+                        <div class="title van-multi-ellipsis--l2">{{ item.title }}</div>
+                        <div class="date">{{item.createTime }}</div>
+                    </div>
+                </div>
+                <div class="no-data" v-if="knowledgeList.length === 0">暂无数据</div>
+            </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const activeKnowledgeId = ref(6);
+
+const handleKnowledgeClick = (index) => {
+    activeKnowledgeId.value = index;
+    getKnowledgeList();
+};
+
+const handleBannerClick = (id) => {
+    router.push(`/warning_detail?id=${id}`);
+}
+
+const knowledgeList = ref([])
+onMounted(() => {
+    getKnowledgeList();
+})
+
+const getKnowledgeList = () => {
+    const params = {
+        page: 1,
+        limit: 10,
+        topicId: activeKnowledgeId.value,
+    };
+    VE_API.home.warningPageList(params).then(({ data }) => {
+        knowledgeList.value = [...data, ...data];
+    })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.knowledge-card {
+    padding: 0 10px;
+    .knowledge-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .knowledge-title {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: #BFBFBF;
+            .title-item {
+                cursor: pointer;
+                font-size: 18px;
+                font-family: "PangMenZhengDao";
+                &.active {
+                    color: #2199f8;
+                }
+            }
+        }
+        .more-text {
+            font-size: 13px;
+            color: #4E5969;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+        }
+    }
+    .knowledge-content {
+        padding: 8px 0;
+        .knowledge-item {
+            display: flex;
+            gap: 12px;
+            // padding: 12px 10px;
+            // background: #ffffff;
+            border-radius: 12px;
+            align-items: center;
+            height: 74px;
+            box-sizing: border-box;
+            .thumb {
+                width: 112px;
+                height: 74px;
+                border-radius: 8px;
+                object-fit: cover;
+                flex: none;
+            }
+            .card-body-left {
+                flex: 1;
+                height: 95%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                font-size: 14px;
+                line-height: 22px;
+                .date {
+                    font-size: 13px;
+                    color: #86909c;
+                    margin-top: 4px;
+                }
+            }
+        }
+        .knowledge-item + .knowledge-item {
+            margin-top: 12px;
+        }
+        .item-content {
+            font-size: 14px;
+            color: #666666;
+        }
+    }
+    .no-data {
+        font-size: 14px;
+        color: #999999;
+        text-align: center;
+        margin-top: 20px;
+    }
+}
+</style>

src/views/old_mini/home/index.vue

@@ -32,7 +32,7 @@
                     v-for="(item, index) in monitorCards.right"
                     :key="index"
                     class="right-item"
-                    :class="{ expert: index === 1 }"
+                    :class="{ expert: index === 1, 'one': curRole == 0 }"
                     @click="handleCardClick(item)"
                 >
                     <div class="title">
@@ -43,7 +43,12 @@
                 </div>
             </div>
         </div>
-        <AgriculturalDynamics />
+        <template v-if="curRole == 0">
+            <knowledge-card />
+        </template>
+        <template v-else>
+            <AgriculturalDynamics />
+        </template>
     </div>
     <tip-popup
         v-model:show="showTipPopup"
@@ -58,13 +63,14 @@
 </template>
 
 <script setup>
-import { ref, computed, onActivated } from "vue";
+import { ref, computed, onActivated, onMounted } from "vue";
 import { useStore } from "vuex";
 import weatherInfo from "@/components/weatherInfo.vue";
 import AgriculturalDynamics from "./components/AgriculturalDynamics.vue";
 import { useRouter, useRoute } from "vue-router";
 import wx from "weixin-js-sdk";
 import tipPopup from "@/components/popup/tipPopup.vue";
+import knowledgeCard from "./components/knowledgeCard.vue";
 
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
@@ -112,11 +118,11 @@ const monitorCards = ref({
             content: "智能识别  快速诊断",
             route: "/pest",
         },
-        {
-            title: "新增客户",
-            content: "农情先知  高效管理",
-            route: "/create_farm?type=client&isReload=true&from=home",
-        },
+        // {
+        //     title: "新增客户",
+        //     content: "农情先知  高效管理",
+        //     route: "/create_farm?type=client&isReload=true&from=home",
+        // },
     ],
 });
 
@@ -158,6 +164,18 @@ onActivated(() => {
 });
 
 
+const curRole = ref(localStorage.getItem("SET_USER_CUR_ROLE"));
+onMounted(() => {
+    if (curRole.value == 2) {
+        monitorCards.value.right.push({
+            title: "新增客户",
+            content: "农情先知  高效管理",
+            route: "/create_farm?type=client&isReload=true&from=home",
+        });
+    }
+});
+
+
 // 查询当前农资店的成员列表（只保留有"任务接单"权限的成员）
 const getManagerList = async () => {
     const { data } = await VE_API.mine.listManagerList({ onlyExecutor: true });
@@ -313,6 +331,9 @@ const handleBannerClick = () => {
             .expert {
                 background: url("@/assets/img/home/farm-bg-3.png") no-repeat center center / 100% 100%;
             }
+            .one {
+                background: url("@/assets/img/home/farm-bg-5.png") no-repeat center center / 100% 100%;
+            }
         }
     }
 }

src/views/old_mini/modify_work/reviewWork.vue

@@ -80,9 +80,7 @@
                 <div class="info-box bottom-box">
                     <div class="recheck-box">
                         <div class="recheck-ablum">
-                            <!-- <div class="img-list over-img-box">
-                                <album-carousel :key="1" labelText="农事前" :images="triggerImg"></album-carousel>
-                            </div> -->
+
                             <div class="img-list over-img-box">
                                 <album-carousel
                                     class="execute-img"
@@ -104,10 +102,8 @@
                                     :images="workItem.reviewImage"
                                 ></album-carousel>
                             </div>
-                            <!-- <div class="img-list over-img-box" v-if="combinedReviewImages.length">
-                                <album-carousel :key="3" :isAchievementImgs="true" :images="combinedReviewImages"></album-carousel>
-                            </div> -->
-                            <div class="img-list" v-if="(!workItem.reviewImage || !workItem.reviewImage.length) && workItem?.needReview">
+
+                            <div class="img-list" v-if="(!workItem.reviewImage || !workItem.reviewImage.length) && workItem?.needReview && curRole.value == '2'">
                                 <div
                                     class="recheck-text-wrap active"
                                     :class="{
@@ -156,68 +152,6 @@
                                     </div>
                                 </div>
                             </div>
-                            <!-- <div class="img-list" v-else>
-                                <div
-                                    class="recheck-text-wrap no-events"
-                                    :class="{
-                                        active: !diffInDays(workItem.reviewDate) > 0 && curRole === '0',
-                                        'yse-events': curRole === '0' && !diffInDays(workItem.reviewDate) > 0,
-                                        'center-wrap': !imageArr2.length,
-                                    }"
-                                >
-                                    <div class="date" v-show="workItem.reviewDate">{{ workItem.reviewDate }}</div>
-                                    <upload
-                                        exampleImg
-                                        @handleUpload="handleUpload2"
-                                        class="upload-wrap"
-                                        :style="{
-                                            height:
-                                                imageArr2.length && !diffInDays(workItem.reviewDate) > 0
-                                                    ? 'auto'
-                                                    : '254px',
-                                        }"
-                                    >
-                                        <template
-                                            v-if="
-                                                diffInDays(workItem.reviewDate) == 0 ||
-                                                diffInDays(workItem.reviewDate) == null
-                                            "
-                                        >
-                                            <img
-                                                class="img-icon"
-                                                :src="
-                                                    require(`@/assets/img/gallery/img-icon${
-                                                        curRole === '0' ? '-act' : ''
-                                                    }.png`)
-                                                "
-                                                alt=""
-                                            />
-                                            <div class="recheck-text">
-                                                {{ curRole === "2" ? "等待农户上传" : "点击上传照片" }}
-                                            </div>
-                                            <div
-                                                class="recheck-desc"
-                                                v-show="curRole === '2' && diffInDays(workItem.reviewDate) != 0"
-                                            >
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <img class="img-icon" src="@/assets/img/gallery/img-icon.png" alt="" />
-                                            <div class="recheck-text">等待复核</div>
-                                            <div class="recheck-desc" v-show="diffInDays(workItem.reviewDate) >= 0">
-                                                （剩余{{ diffInDays(workItem.reviewDate) }}天）
-                                            </div>
-                                        </template>
-                                    </upload>
-                                    <div
-                                        class="submit"
-                                        v-show="imageArr2.length && !diffInDays(workItem.reviewDate) > 0"
-                                        @click="handleSubmit('reviewImage2')"
-                                    >
-                                        确认上传
-                                    </div>
-                                </div>
-                            </div> -->
                         </div>
                     </div>
                 </div>
@@ -273,11 +207,6 @@
                     </div>
                     <div class="review-image-item" v-if="triggerImg?.length">
                         <div class="review-image-item-title">复核照片</div>
-                        <!-- <img
-                            class="review-image-item-img left-img"
-                            :src="base_img_url2 + triggerImg[triggerImg.length - 1].cloudFilename"
-                            alt=""
-                        /> -->
                         <img
                         class="review-image-item-img left-img"
                         :src="leftCoverImg"
@@ -291,11 +220,6 @@
 
                     </div>
                     <div class="review-image-item" v-if="workItem?.reviewImage?.length">
-                        <!-- <img
-                            class="review-image-item-img right-img"
-                            :src="base_img_url2 + workItem.reviewImage[workItem.reviewImage.length - 1]"
-                            alt=""
-                        /> -->
                         <img
                         class="review-image-item-img right-img"
                         :src="rightCoverImg"
@@ -383,7 +307,7 @@ onActivated(() => {
 });
 
 const getButtonText = () => {
-    return (agriculturalRole.value === 1 || (agriculturalRole.value === 2 && workItem.value.executorUserId != userId.value)) && !workItem.value?.reviewImage?.length && workItem.value?.needReview;
+    return (agriculturalRole.value === 1 || (agriculturalRole.value === 2 && workItem.value.executorUserId != userId.value)) && !workItem.value?.reviewImage?.length && workItem.value?.needReview && curRole.value == '2';
 };
 
 const getDetail = () => {

src/views/old_mini/user/farmDetails.vue

@@ -110,7 +110,7 @@
                         <template #right>
                             <span @click="handleShareReport()">查看更多</span>
                         </template>
-                        <div class="photo-img-wrap">
+                        <div class="photo-img-wrap" v-loading="imgsLoading">
                             <photo-provider :photo-closable="true">
                                 <photo-consumer
                                     v-for="(src, index) in cropAlbum"
@@ -128,10 +128,10 @@
                 </tab>
             </tabs>
         </div>
-        <!-- <div class="custom-bottom-fixed-btns">
-            <div class="bottom-btn secondary-btn" @click="handleShareFarm">分享农场</div>
-            <div class="bottom-btn primary-btn" @click="handleChatFarm">在线沟通</div>
-        </div> -->
+        <div class="custom-bottom-fixed-btns center-btn">
+            <div class="bottom-btn primary-btn" @click="handleShareFarm">分享认领农场</div>
+            <!-- <div class="bottom-btn primary-btn" @click="handleChatFarm">在线沟通</div> -->
+        </div>
     </div>
     <fn-share-sheet v-model:show="showShare" @select="onSelect" :options="[{ name: '微信', icon: 'wechat' }]" />
     <!-- 农场信息 -->
@@ -253,9 +253,11 @@ const getPhenologyBroadcast = () => {
 };
 
 const cropAlbum = ref([]);
+const imgsLoading = ref(false);
 // 获取作物相册的三张照片（参考 patrolPhoto 的获取逻辑）
 const getFarmPhoto = async () => {
     if (!farmIdVal.value) return;
+    imgsLoading.value = true;
     try {
         // 先获取有图片的日期列表
         const dateParams = {
@@ -300,6 +302,8 @@ const getFarmPhoto = async () => {
     } catch (e) {
         console.error("获取农场相册失败", e);
         cropAlbum.value = [];
+    } finally {
+        imgsLoading.value = false;
     }
 };
 
@@ -375,11 +379,14 @@ const handleTitleRightClick = (section) => {
     width: 100%;
     height: 100vh;
     background: #F2F3F5;
+    .center-btn {
+        justify-content: center;
+    }
     .farm-details-content {
         box-sizing: border-box;
         padding: 10px 12px;
         overflow: auto;
-        height: calc(100% - 40px);
+        height: calc(100% - 40px - 60px);
         box-sizing: border-box;
         .custom-tabs {
             ::v-deep {