实物图聊天记录增加滑动预览功能

pages/orderDetailNew/components/pageOne.vue

@@ -16,7 +16,7 @@
             <view class="image-upload-container">
                 <view class="image-list">
                     <view class="image-item" v-for="(item, index) in trueUploadList" :key="'truePic-' + index">
-                        <pic-comp :src="item.fileUrl"></pic-comp>
+                        <pic-comp @needPreviewPic='previewImageTrue' :src="item.fileUrl"></pic-comp>
                         <view class="delete-btn" @click="deleteImage(item)">×</view>
                     </view>
                     <view class="upload-btn" @click="uploadImage('truePic', currentReceipt.id)">
@@ -33,7 +33,7 @@
                 <view class="image-list">
                     <view class="image-item" v-for="(item, index) in chatRecordsUploadList"
                         :key="'chatRecords-' + index">
-                        <pic-comp :src="item.fileUrl"></pic-comp>
+                        <pic-comp @needPreviewPic='previewImageChat' :src="item.fileUrl"></pic-comp>
                         <view class="delete-btn" @click="deleteImage(item)">×</view>
                     </view>
                     <view class="upload-btn" @click="uploadImage('chatRecords', currentReceipt.id)">
@@ -364,6 +364,23 @@ export default {
                 }
             })
         },
+        // 预览真实图片
+        previewImageTrue(src) {
+            const urlList = this.trueUploadList.map(item => item.fileUrl);
+
+            uni.previewImage({
+                urls: urlList,
+                current: src
+            })
+        },
+        previewImageChat(src) {
+            const urlList = this.chatRecordsUploadList.map(item => item.fileUrl);
+
+            uni.previewImage({
+                urls: urlList,
+                current: src
+            })
+        }
 
     },
 

pages/orderDetailNew/components/pageThree.vue

@@ -50,7 +50,7 @@
                                 'can-drop': canDropIndex === index
                             }" @touchstart.stop="onTouchStart($event, index)" @touchmove.stop="onTouchMove($event)"
                             @touchend.stop="onTouchEnd" @touchcancel.stop="onTouchEnd">
-                            <pic-comp :src="item.fileUrl"></pic-comp>
+                            <pic-comp @needPreviewPic='previewImageDetail' :src="item.fileUrl"></pic-comp>
                             <view class="image-type-tag">{{ getImageType(index) }}</view>
                             <view class="detail-delete-btn" @click.stop="handleYinCang(item, index)">×</view>
                         </view>
@@ -462,6 +462,14 @@ export default {
                 this.detailImages.splice(itemIndex, 1);
                 uni.$u.toast('图片已隐藏');
             }
+        },
+        previewImageDetail(src) {
+            const urlList = this.detailImages.map(item => item.fileUrl);
+
+            uni.previewImage({
+                urls: urlList,
+                current: src
+            })
         }
     }
 }

pages/orderDetailNew/components/pageTwo.vue

@@ -111,7 +111,7 @@
                 <div class="detail-image-upload-container">
                     <view class="detail-image-list">
                         <view class="detail-image-item" v-for="(item, index) in detailImages" :key="'detail-' + index">
-                            <pic-comp :src="item.fileUrl"></pic-comp>
+                            <pic-comp @needPreviewPic='previewImageDetail' :src="item.fileUrl"></pic-comp>
                             <view class="detail-delete-btn" @click="deleteImage(item)">×</view>
                         </view>
                         <view class="detail-upload-btn" @click="uploadImage('detailImages', currentReceipt.id)">
@@ -276,7 +276,7 @@ export default {
                         console.error(`保存图片失败: ${url}`, error);
                         failedImages.push(url);
                     }
-                    
+
                     // 更新进度
                     uni.showLoading({
                         title: `正在保存图片... (${i + 1}/${imageUrls.length})`,
@@ -517,6 +517,15 @@ export default {
             })
         },
 
+        previewImageDetail(src) {
+            const urlList = this.detailImages.map(item => item.fileUrl);
+
+            uni.previewImage({
+                urls: urlList,
+                current: src
+            })
+        }
+
 
 
 

pages/orderDetailNew/components/picComp.vue

@@ -13,10 +13,7 @@ export default {
     },
     methods: {
         click() {
-            uni.previewImage({
-                urls: [this.src],
-                current: this.src
-            })
+            this.$emit('needPreviewPic', this.src)
         }
     }
 }