feat：添加农场相册功能

src/components/chatWindow.vue

@@ -39,7 +39,7 @@
                         <div v-if="msg.messageType === 'report'" class="dialog-message" @click="handleReportClick(msg)">
                             <template v-if="(msg.reportType || msg.content.reportType) === 'farm_report'">
                                 <div class="report-title">{{ msg.title ||msg.content.title }}</div>
-                                <div class="dialog-title">这是我的果园情况，请查看~</div>
+                                <div class="dialog-title">这是{{curRole == 2 ? '该农场' : '我'}}的果园情况，请查看~</div>
                                 <img src="https://birdseye-img.sysuimars.com/birdseye-look-mini/share-report-bg.png" alt="" class="monitor-image" />
                             </template>
                             <template v-else>
@@ -90,7 +90,7 @@
                         <div v-if="msg.messageType === 'report'" class="dialog-message" @click="handleReportClick(msg)">
                             <template v-if="(msg.reportType || msg.content.reportType) === 'farm_report'">
                                 <div class="report-title">{{ msg.title ||msg.content.title }}</div>
-                                <div class="dialog-title">这是我的果园情况，请查看~</div>
+                                <div class="dialog-title">这是{{curRole == 2 ? '该农场' : '我'}}果园情况，请查看~</div>
                                 <img src="https://birdseye-img.sysuimars.com/birdseye-look-mini/share-report-bg.png" alt="" class="monitor-image" />
                             </template>
                             <template v-else>
@@ -674,20 +674,20 @@ const functionButtons = ref([
             sendFarmReportDialog();
         },
     },
-    {
-        text: "农事卡片",
-        handler: () => {
-            // 跳转到农事卡片页面
-            router.push(`/farm_card?farmId=${farmVal.value}`);
-        },
-    },
-    {
-        text: '农场相册',
-        handler: () => {
-            // 跳转到农场相册页面
-            router.push(`/farm_photo`);
-        }
-    }
+    // {
+    //     text: "农事卡片",
+    //     handler: () => {
+    //         // 跳转到农事卡片页面
+    //         router.push(`/farm_card?farmId=${farmVal.value}`);
+    //     },
+    // },
+    // {
+    //     text: '农场相册',
+    //     handler: () => {
+    //         // 跳转到农场相册页面
+    //         router.push(`/farm_photo?farmId=${farmVal.value}&isCheck=true`);
+    //     }
+    // }
 ]);
 
 // 辅助函数

src/views/old_mini/home/patrolPhoto.vue

@@ -47,11 +47,20 @@
                                 <photo-consumer
                                     v-for="src in dateItem.images"
                                     intro="执行照片"
-                                    :key="src"
+                                    :key="src.uid || src.path"
                                     :src="src.path"
                                 >
-                                    <div class="photo-img">
+                                    <div
+                                        class="photo-img"
+                                        :class="{
+                                            'is-disabled': isCheck && selectedImageIds.length >= MAX_SELECT_COUNT && !isImageSelected(src.uid)
+                                        }"
+                                        @click="handleImageClick($event, src)"
+                                    >
                                         <img :src="src.path" />
+                                        <div class="photo-check" v-if="isCheck" @click.stop="toggleImageSelect(src)">
+                                            <span class="check-icon" :class="{ checked: isImageSelected(src.uid) }"></span>
+                                        </div>
                                     </div>
                                 </photo-consumer>
                             </photo-provider>
@@ -60,14 +69,19 @@
                 </List>
             </div>
         </div>
+        <div class="custom-bottom-fixed-btns" v-if="isCheck">
+            <div class="secondary-btn">已选择 {{ selectedImageIds.length }} 项</div>
+            <div class="bottom-btn primary-btn" @click="handleSend">发送</div>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { List } from "vant";
-import { base_img_url2, resize } from "@/api/config";
+import { ElMessage } from "element-plus";
+import { base_img_url2 } from "@/api/config";
 import customHeader from "@/components/customHeader.vue";
 
 const router = useRouter();
@@ -95,6 +109,33 @@ const isRequestingImages = ref(false);
 // 当前页码
 const currentPageIndex = ref(0);
 const farmId = ref(766);
+const selectedImageIds = ref([]);
+const MAX_SELECT_COUNT = 3; // 最多选择3张
+const buildImageUid = (image) =>
+    image?.id ?? image?.resId ?? image?.resFilename ?? image?.filename ?? image?.path;
+const isImageSelected = (uid) => selectedImageIds.value.includes(uid);
+const toggleImageSelect = (image) => {
+    
+    if (!image?.uid) return;
+    const uid = image.uid;
+    if (isImageSelected(uid)) {
+        // 取消选择
+        selectedImageIds.value = selectedImageIds.value.filter((item) => item !== uid);
+    } else {
+        // 尝试选择新图片
+        if (selectedImageIds.value.length >= MAX_SELECT_COUNT) {
+            ElMessage.warning(`最多只能选择${MAX_SELECT_COUNT}张图片`);
+            return;
+        }
+        selectedImageIds.value = [...selectedImageIds.value, uid];
+    }
+};
+const handleImageClick = (event, image) => {
+    if (!isCheck.value) return;
+    event?.preventDefault();
+    event?.stopPropagation();
+    toggleImageSelect(image);
+};
 
 // 格式化日期显示
 const formatDate = (dateStr) => {
@@ -195,6 +236,7 @@ const loadNextDateImages = () => {
                 // 处理图片数据，添加图片路径
                 const photoArr = data.images.map((item) => ({
                     ...item,
+                    uid: buildImageUid(item),
                     path: base_img_url2 + (item.resFilename || item.filename) + "?x-oss-process=image/resize,w_300",
                 }));
 
@@ -258,11 +300,27 @@ const getPhotoList = () => {
     loadNextDateImages();
 };
 
-
+const isCheck = ref(false);
 onMounted(() => {
+    isCheck.value = route.query.isCheck;
     farmId.value = route.query.farmId;
     findHasImagesDate();
 });
+
+const handleSend = () => {
+    const selectedFilenames = [];
+    // 遍历所有日期的图片，找到选中的图片
+    photoListByDate.value.forEach((dateItem) => {
+        dateItem.images.forEach((image) => {
+            if (isImageSelected(image.uid)) {
+                // 返回 filename 或 resFilename
+                selectedFilenames.push(image.resFilename || image.filename);
+            }
+        });
+    });
+    console.log("选中的图片filename:", selectedFilenames);
+    return selectedFilenames;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -364,12 +422,58 @@ onMounted(() => {
                         .photo-img {
                             width: 110px;
                             height: 110px;
+                            position: relative;
+                            box-sizing: border-box;
+                            border: 2px solid transparent;
+                            border-radius: 8px;
+                            overflow: hidden;
+                            transition: border-color 0.2s ease, opacity 0.2s ease;
+                            &.is-disabled {
+                                opacity: 0.5;
+                                cursor: not-allowed;
+                            }
                             img {
                                 width: 100%;
                                 height: 100%;
                                 border-radius: 8px;
                                 object-fit: cover;
                             }
+                            .photo-check {
+                                position: absolute;
+                                top: 5px;
+                                right: 5px;
+                                width: 20px;
+                                height: 20px;
+                                border: 2px solid #fff;
+                                border-radius: 50%;
+                                background: rgba(217, 217, 217, 0.4);
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                overflow: hidden;
+                                .check-icon {
+                                    width: 100%;
+                                    height: 100%;
+                                    position: relative;
+                                    border-radius: 50%;
+                                    &.checked {
+                                        background: #2199f8;
+                                        border-color: #2199f8;
+                                        &::after {
+                                            content: "";
+                                            position: absolute;
+                                            top: 3px;
+                                            left: 7px;
+                                            width: 4px;
+                                            height: 8px;
+                                            border: 2px solid #fff;
+                                            border-top: 0;
+                                            border-left: 0;
+                                            transform: rotate(45deg);
+                                        }
+                                    }
+                                }
+                            }
                         }
                     }
                 }