新增图片压缩

pages/baoxiuList/baoxiuList.js

@@ -8,8 +8,6 @@ Page({
   data: {
     noticeList: [],
     imageList: [], // 存储图片路径的数组
-    showCustomPreview: false, // 是否显示自定义预览
-    currentPreviewImages: [], // 当前预览的图片数组
     // 添加维修类型映射
     repairTypeMap: [
       {name: '换表', value: '1'},
@@ -18,6 +16,10 @@ Page({
       {name: '换前后阀', value: '4'},
       {name: '其他', value: '5'}
     ],
+    previewImage: '',
+    currentImageIndex: 0,
+    showPreview: false,
+    previewImages: [],
   },
 
   /**
@@ -142,49 +144,70 @@ Page({
     });
   },
 
-  previewImage: function (e) {
-    // 获取当前点击项的id
-    const id = e.currentTarget.dataset.id;
-    // 根据id找到对应的投诉建议项
-    const item = this.data.noticeList.find(item => item.id === id);
-    debugger;
-    // 确保有附件
-    if (item && item.hasAttachment && item.attachments.length > 0) {
-      this.setData({
-        showCustomPreview: true,
-        currentPreviewImages: item.attachments,
-        currentPreviewIndex: 0
+  // 预览图片
+  previewImage(e) {
+    const { id, index } = e.currentTarget.dataset;
+    const { noticeList } = this.data;
+    
+    // 如果是点击列表项的预览按钮
+    if (id) {
+      const item = noticeList.find(item => item.id === id);
+      if (item && item.attachments && item.attachments.length > 0) {
+        wx.previewImage({
+          current: item.attachments[0], // 当前显示图片的链接
+          urls: item.attachments // 需要预览的图片链接列表
+        });
+      }
+    } 
+    // 如果是点击图片列表中的图片
+    else if (typeof index !== 'undefined') {
+      const { imageList } = this.data;
+      wx.previewImage({
+        current: imageList[index], // 当前显示图片的链接
+        urls: imageList // 需要预览的图片链接列表
       });
-    } else {
-      console.log('没有找到附件或附件为空');
     }
   },
 
   // 关闭预览
-  closePreview: function () {
+  closePreview() {
     this.setData({
-      showCustomPreview: false
+      showPreview: false,
+      currentImageIndex: 0,
+      previewImages: []
     });
   },
 
-  // 切换预览图片
-  changePreviewImage: function (e) {
-    const direction = e.currentTarget.dataset.direction;
-    let newIndex = this.data.currentPreviewIndex;
+  // 上一张图片
+  prevImage() {
+    const { currentImageIndex, previewImages } = this.data;
+    if (currentImageIndex > 0) {
+      this.setData({
+        currentImageIndex: currentImageIndex - 1
+      });
+    }
+  },
 
-    if (direction === 'prev') {
-      newIndex = newIndex > 0 ? newIndex - 1 : this.data.currentPreviewImages.length - 1;
-    } else {
-      newIndex = newIndex < this.data.currentPreviewImages.length - 1 ? newIndex + 1 : 0;
+  // 下一张图片
+  nextImage() {
+    const { currentImageIndex, previewImages } = this.data;
+    if (currentImageIndex < previewImages.length - 1) {
+      this.setData({
+        currentImageIndex: currentImageIndex + 1
+      });
     }
+  },
 
+  // 处理滑动事件
+  swiperChange(e) {
+    const current = e.detail.current;
     this.setData({
-      currentPreviewIndex: newIndex
+      currentImageIndex: current
     });
   },
 
   // 防止点击图片内容时关闭预览
-  preventBubble: function () {
+  preventBubble() {
     return;
   },
 

pages/baoxiuList/baoxiuList.wxml

@@ -46,30 +46,4 @@
       ></image>
     </block>
   </view>
-
-  <!-- 自定义图片预览组件 -->
-  <view class="custom-preview-container" wx:if="{{showCustomPreview}}" bindtap="closePreview">
-    <view class="custom-preview-content" catchtap="preventBubble">
-      <image 
-        class="preview-image" 
-        src="{{currentPreviewImages[currentPreviewIndex]}}" 
-        mode="aspectFit"
-      ></image>
-      
-      <view class="preview-controls">
-        <view class="preview-arrow left-arrow" catchtap="changePreviewImage" data-direction="prev">
-          <text class="arrow-text">《</text>
-        </view>
-        <view class="preview-arrow right-arrow" catchtap="changePreviewImage" data-direction="next">
-          <text class="arrow-text">》</text>
-        </view>
-      </view>
-      
-      <view class="preview-counter">
-        {{currentPreviewIndex + 1}}/{{currentPreviewImages.length}}
-      </view>
-      
-      <view class="close-button" catchtap="closePreview">×</view>
-    </view>
-  </view>
 </view>

pages/baoxiuList/baoxiuList.wxss

@@ -160,79 +160,112 @@ vertical-align: top;
   border-radius: 8rpx;
 }
 
-.custom-preview-container {
+.custom-preview {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
   z-index: 999;
+}
+
+.custom-preview-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.mask-close-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.preview-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.custom-preview-content {
-  width: 90%;
-  height: 70%;
-  position: relative;
+swiper.preview-image {
+  width: 100%;
+  height: calc(100% - 400rpx);
+  margin-top: 200rpx;
 }
 
-.preview-image {
+swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-content image.preview-image {
   width: 100%;
   height: 100%;
-  background-color: transparent;
+  object-fit: contain;
 }
 
-.preview-controls {
+.preview-arrow {
   position: absolute;
   top: 50%;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
   transform: translateY(-50%);
-}
-
-.preview-arrow {
-  width: 80rpx;
-  height: 80rpx;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
+  width: 70rpx;
+  height: 70rpx;
   display: flex;
   justify-content: center;
   align-items: center;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  z-index: 1001;
 }
 
-.arrow-text {
-  color: white;
-  font-size: 36rpx;
+.preview-arrow.left {
+  left: 30rpx;
+}
+
+.preview-arrow.right {
+  right: 30rpx;
+}
+
+.arrow-icon {
+  color: #fff;
+  font-size: 30rpx;
 }
 
 .preview-counter {
   position: absolute;
-  bottom: -60rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  color: white;
-  font-size: 28rpx;
-  background-color: rgba(0, 0, 0, 0.5);
-  padding: 10rpx 20rpx;
+  top: 200rpx;
+  left: 40rpx;
+  color: #fff;
+  font-size: 32rpx;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 12rpx 24rpx;
   border-radius: 30rpx;
+  z-index: 1001;
 }
 
 .close-button {
   position: absolute;
-  top: -50rpx;
-  right: 0;
-  width: 60rpx;
-  height: 60rpx;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 50%;
+  top: 200rpx;
+  right: 40rpx;
+  width: 70rpx;
+  height: 70rpx;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 40rpx;
+  color: #fff;
+  font-size: 50rpx;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  z-index: 1001;
 }
 

pages/baoxiudj/baoxiudj.js

@@ -32,6 +32,11 @@ Page({
   onLoad: function (options) {
     const isReplied = options.isReplied === 'true';
 
+    // 更新地址信息，确保是最新的户号地址
+    this.setData({
+      address: app.globalData.currentAccountInfo.address
+    });
+
     if (options.mode === 'preview') {
       this.setData({
         isPreviewMode: true,
@@ -153,15 +158,215 @@ Page({
         }
 
         if (validFiles.length > 0) {
-          let newImageList = that.data.imageList.concat(validFiles);
-          that.setData({
-            imageList: newImageList
+          wx.showLoading({
+            title: '图片压缩中...',
+            mask: true
+          });
+          
+          let processedFiles = new Array(validFiles.length);
+          let processCount = 0;
+          
+          // 处理每个图片
+          validFiles.forEach((file, index) => {
+            that.compressImage(file.tempFilePath).then(compressedPath => {
+              processCount++;
+              // 获取压缩后图片的信息
+              wx.getFileInfo({
+                filePath: compressedPath,
+                success: (fileInfo) => {
+                  console.log('原始大小:', file.size / 1024, 'KB');
+                  console.log('压缩后大小:', fileInfo.size / 1024, 'KB');
+                  
+                  // 在对应位置添加压缩后的图片路径
+                  processedFiles[index] = {
+                    tempFilePath: compressedPath,
+                    size: fileInfo.size
+                  };
+                  
+                  // 检查是否所有图片都已处理完成
+                  if (processCount === validFiles.length) {
+                    // 过滤掉可能的空值，并按顺序合并
+                    let newImageList = that.data.imageList.concat(processedFiles.filter(item => item));
+                    that.setData({
+                      imageList: newImageList
+                    });
+                    wx.hideLoading();
+                  }
+                },
+                fail: (err) => {
+                  console.error('获取文件信息失败:', err);
+                  processCount++;
+                  // 如果失败，也要检查是否处理完所有图片
+                  if (processCount === validFiles.length) {
+                    wx.hideLoading();
+                  }
+                }
+              });
+            }).catch(err => {
+              console.error('图片压缩失败:', err);
+              processCount++;
+              if (processCount === validFiles.length) {
+                wx.hideLoading();
+              }
+            });
           });
         }
       }
     });
   },
 
+  // 使用canvas进行图片压缩
+  compressImage: function(imagePath) {
+    return new Promise((resolve, reject) => {
+      // 获取图片信息
+      wx.getImageInfo({
+        src: imagePath,
+        success: (res) => {
+          // 先获取原图大小，单位KB
+          wx.getFileInfo({
+            filePath: imagePath,
+            success: (fileInfo) => {
+              const originalSize = fileInfo.size / 1024; // 原始大小，单位KB
+              // 根据原图大小确定压缩质量
+              let targetQuality = 0.8; // 默认压缩质量
+              
+              if (originalSize <= 500) {
+                // 如果原图已经小于500KB，保持较高质量
+                targetQuality = 0.9;
+              } else if (originalSize <= 1024) {
+                // 1MB以下，适当压缩
+                targetQuality = 0.7;
+              } else if (originalSize <= 2048) {
+                // 2MB以下，中等压缩
+                targetQuality = 0.5;
+              } else if (originalSize <= 5120) {
+                // 5MB以下，较大压缩
+                targetQuality = 0.3;
+              } else {
+                // 超过5MB，大幅压缩
+                targetQuality = 0.2;
+              }
+              wx.createSelectorQuery()
+                .select('#compressCanvas')
+                .fields({ node: true, size: true })
+                .exec((canvasRes) => {
+                  if (!canvasRes || !canvasRes[0] || !canvasRes[0].node) {
+                    // 如果找不到canvas节点，则返回原图
+                    resolve(imagePath);
+                    return;
+                  }
+                  
+                  const canvas = canvasRes[0].node;
+                  const ctx = canvas.getContext('2d');
+                  const image = canvas.createImage();
+                  
+                  image.onload = () => {
+                    // 计算要缩放的尺寸，保持宽高比
+                    let ratio = 1;
+                    // 根据原图大小调整尺寸
+                    if (originalSize > 5120) { // 5MB以上
+                      ratio = Math.min(1, 1200 / res.width, 1200 / res.height);
+                    } else if (originalSize > 2048) { // 2MB以上
+                      ratio = Math.min(1, 1500 / res.width, 1500 / res.height);
+                    } else if (originalSize > 1024) { // 1MB以上
+                      ratio = Math.min(1, 1800 / res.width, 1800 / res.height);
+                    } else {
+                      ratio = Math.min(1, 2000 / res.width, 2000 / res.height);
+                    }
+                    
+                    const targetWidth = Math.round(res.width * ratio);
+                    const targetHeight = Math.round(res.height * ratio);
+                    
+                    // 设置canvas尺寸
+                    canvas.width = targetWidth;
+                    canvas.height = targetHeight;
+                    // 清除画布
+                    ctx.clearRect(0, 0, targetWidth, targetHeight);
+                    // 绘制图片
+                    ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+                    // 压缩参数
+                    const compressOptions = {
+                      canvas: canvas,
+                      width: targetWidth,
+                      height: targetHeight,
+                      destWidth: targetWidth,
+                      destHeight: targetHeight,
+                      fileType: 'jpg',
+                      quality: targetQuality
+                    };
+                    
+                    // 第一次尝试压缩
+                    const tryCompress = (quality, attempt = 1) => {
+                      compressOptions.quality = quality;
+                      
+                      wx.canvasToTempFilePath({
+                        ...compressOptions,
+                        success: (result) => {
+                          // 检查压缩后的大小
+                          wx.getFileInfo({
+                            filePath: result.tempFilePath,
+                            success: (compressedInfo) => {
+                              const compressedSize = compressedInfo.size / 1024; // 压缩后大小，单位KB
+                              console.log(`压缩后大小 (质量:${quality})`, compressedSize, 'KB');
+                              // 如果压缩后大小仍大于500KB且尝试次数未达上限，继续压缩
+                              if (compressedSize > 500 && attempt < 3) {
+                                // 递减质量
+                                const newQuality = Math.max(0.1, quality - 0.2);
+                                console.log(`尝试重新压缩，质量降低至${newQuality}`);
+                                tryCompress(newQuality, attempt + 1);
+                              } 
+                              // 如果压缩后小于200KB且质量非最高，尝试提高质量
+                              else if (compressedSize < 200 && quality < 0.9 && attempt < 3) {
+                                // 递增质量
+                                const newQuality = Math.min(0.9, quality + 0.2);
+                                console.log(`尝试重新压缩，质量提高至${newQuality}`);
+                                tryCompress(newQuality, attempt + 1);
+                              }
+                              else {
+                                // 返回压缩后的图片
+                                resolve(result.tempFilePath);
+                              }
+                            },
+                            fail: (error) => {
+                              console.error('获取压缩后图片信息失败:', error);
+                              resolve(result.tempFilePath);
+                            }
+                          });
+                        },
+                        fail: (error) => {
+                          console.error('Canvas转图片失败:', error);
+                          // 如果转换失败则返回原图
+                          resolve(imagePath);
+                        }
+                      });
+                    };
+                    
+                    // 开始尝试压缩
+                    tryCompress(targetQuality);
+                  };
+                  
+                  image.onerror = () => {
+                    console.error('图片加载失败');
+                    resolve(imagePath);
+                  };
+                  
+                  image.src = imagePath;
+                });
+            },
+            fail: (error) => {
+              console.error('获取原始图片信息失败:', error);
+              resolve(imagePath);
+            }
+          });
+        },
+        fail: (error) => {
+          console.error('获取图片信息失败:', error);
+          resolve(imagePath);
+        }
+      });
+    });
+  },
+
   previewImage: function (e) {
     let index = e.currentTarget.dataset.index;
     wx.previewImage({
@@ -506,6 +711,11 @@ Page({
       this.setData({
         formSubmitted: false
       });
+    } else if (!this.data.isPreviewMode) {
+      // 非预览模式下，更新地址信息
+      this.setData({
+        address: app.globalData.currentAccountInfo.address
+      });
     }
   },
 

pages/baoxiudj/baoxiudj.wxml

@@ -78,7 +78,6 @@
     <view class="reply-content">{{replyContent}}</view>
   </view>
 
-  <!-- 提交按钮，仅在非预览模式下显示 -->
   <button class="submit-btn" bindtap="submitForm" wx:if="{{!isPreviewMode}}" disabled="{{isSubmitting}}">
     {{isSubmitting ? '提交中...' : '提交'}}
   </button>
@@ -98,4 +97,7 @@
       </view>
     </view>
   </view>
+  
+  <!-- 新增用canvas方法用于图片压缩 -->
+  <canvas type="2d" id="compressCanvas" style="position:fixed; left:-9999px; width:300px; height:300px;"></canvas>
 </view>

pages/huhaoguanli/huhaoguanli.js

@@ -155,7 +155,6 @@ Page({
 
   switchHuHao(e) {
     const huHaoInfo = e.currentTarget.dataset.item;
-debugger
     // 更新全局数据
     app.globalData.userWxInfo = {
       ...app.globalData.userWxInfo,

pages/tousujianyi/tousujianyi.js

@@ -142,14 +142,221 @@ Page({
         }
 
         if (validFiles.length > 0) {
-          let newImageList = that.data.imageList.concat(validFiles);
-          that.setData({
-            imageList: newImageList
+          wx.showLoading({
+            title: '图片压缩中...',
+            mask: true
+          });
+          
+          let processedFiles = new Array(validFiles.length);
+          let processCount = 0;
+          
+          // 处理每个图片
+          validFiles.forEach((file, index) => {
+            that.compressImage(file.tempFilePath).then(compressedPath => {
+              processCount++;
+              // 获取压缩后图片的信息
+              wx.getFileInfo({
+                filePath: compressedPath,
+                success: (fileInfo) => {
+                  console.log('原始大小:', file.size / 1024, 'KB');
+                  console.log('压缩后大小:', fileInfo.size / 1024, 'KB');
+                  
+                  // 在对应位置添加压缩后的图片路径
+                  processedFiles[index] = {
+                    tempFilePath: compressedPath,
+                    size: fileInfo.size
+                  };
+                  
+                  // 检查是否所有图片都已处理完成
+                  if (processCount === validFiles.length) {
+                    // 过滤掉可能的空值，并按顺序合并
+                    let newImageList = that.data.imageList.concat(processedFiles.filter(item => item));
+                    that.setData({
+                      imageList: newImageList
+                    });
+                    wx.hideLoading();
+                  }
+                },
+                fail: (err) => {
+                  console.error('获取文件信息失败:', err);
+                  processCount++;
+                  // 如果失败，也要检查是否处理完所有图片
+                  if (processCount === validFiles.length) {
+                    wx.hideLoading();
+                  }
+                }
+              });
+            }).catch(err => {
+              console.error('图片压缩失败:', err);
+              processCount++;
+              if (processCount === validFiles.length) {
+                wx.hideLoading();
+              }
+            });
           });
         }
       }
     });
   },
+  
+  // 使用canvas进行图片压缩
+  compressImage: function(imagePath) {
+    return new Promise((resolve, reject) => {
+      // 获取图片信息
+      wx.getImageInfo({
+        src: imagePath,
+        success: (res) => {
+          // 先获取原图大小，单位KB
+          wx.getFileInfo({
+            filePath: imagePath,
+            success: (fileInfo) => {
+              const originalSize = fileInfo.size / 1024; // 原始大小，单位KB
+              // 根据原图大小确定压缩质量
+              let targetQuality = 0.8; // 默认压缩质量
+              
+              if (originalSize <= 500) {
+                // 如果原图已经小于500KB，保持较高质量
+                targetQuality = 0.9;
+              } else if (originalSize <= 1024) {
+                // 1MB以下，适当压缩
+                targetQuality = 0.7;
+              } else if (originalSize <= 2048) {
+                // 2MB以下，中等压缩
+                targetQuality = 0.5;
+              } else if (originalSize <= 5120) {
+                // 5MB以下，较大压缩
+                targetQuality = 0.3;
+              } else {
+                // 超过5MB，大幅压缩
+                targetQuality = 0.2;
+              }
+              
+              // 创建canvas上下文
+              wx.createSelectorQuery()
+                .select('#compressCanvas')
+                .fields({ node: true, size: true })
+                .exec((canvasRes) => {
+                  if (!canvasRes || !canvasRes[0] || !canvasRes[0].node) {
+                    // 如果找不到canvas节点，则返回原图
+                    resolve(imagePath);
+                    return;
+                  }
+                  
+                  const canvas = canvasRes[0].node;
+                  const ctx = canvas.getContext('2d');
+                  const image = canvas.createImage();
+                  
+                  image.onload = () => {
+                    // 计算要缩放的尺寸，保持宽高比
+                    let ratio = 1;
+                    
+                    // 根据原图大小调整尺寸
+                    if (originalSize > 5120) { // 5MB以上
+                      ratio = Math.min(1, 1200 / res.width, 1200 / res.height);
+                    } else if (originalSize > 2048) { // 2MB以上
+                      ratio = Math.min(1, 1500 / res.width, 1500 / res.height);
+                    } else if (originalSize > 1024) { // 1MB以上
+                      ratio = Math.min(1, 1800 / res.width, 1800 / res.height);
+                    } else {
+                      ratio = Math.min(1, 2000 / res.width, 2000 / res.height);
+                    }
+                    
+                    const targetWidth = Math.round(res.width * ratio);
+                    const targetHeight = Math.round(res.height * ratio);
+                    
+                    // 设置canvas尺寸
+                    canvas.width = targetWidth;
+                    canvas.height = targetHeight;
+                    
+                    // 清除画布
+                    ctx.clearRect(0, 0, targetWidth, targetHeight);
+                    
+                    // 绘制图片
+                    ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+                    
+                    // 压缩参数
+                    const compressOptions = {
+                      canvas: canvas,
+                      width: targetWidth,
+                      height: targetHeight,
+                      destWidth: targetWidth,
+                      destHeight: targetHeight,
+                      fileType: 'jpg',
+                      quality: targetQuality
+                    };
+                    
+                    // 第一次尝试压缩
+                    const tryCompress = (quality, attempt = 1) => {
+                      compressOptions.quality = quality;
+                      
+                      wx.canvasToTempFilePath({
+                        ...compressOptions,
+                        success: (result) => {
+                          // 检查压缩后的大小
+                          wx.getFileInfo({
+                            filePath: result.tempFilePath,
+                            success: (compressedInfo) => {
+                              const compressedSize = compressedInfo.size / 1024; // 压缩后大小，单位KB
+                              console.log(`压缩后大小 (质量:${quality})`, compressedSize, 'KB');
+                              
+                              // 如果压缩后大小仍大于500KB且尝试次数未达上限，继续压缩
+                              if (compressedSize > 500 && attempt < 3) {
+                                // 递减质量
+                                const newQuality = Math.max(0.1, quality - 0.2);
+                                console.log(`尝试重新压缩，质量降低至${newQuality}`);
+                                tryCompress(newQuality, attempt + 1);
+                              } 
+                              // 如果压缩后小于200KB且质量非最高，尝试提高质量
+                              else if (compressedSize < 200 && quality < 0.9 && attempt < 3) {
+                                // 递增质量
+                                const newQuality = Math.min(0.9, quality + 0.2);
+                                console.log(`尝试重新压缩，质量提高至${newQuality}`);
+                                tryCompress(newQuality, attempt + 1);
+                              }
+                              else {
+                                // 返回压缩后的图片
+                                resolve(result.tempFilePath);
+                              }
+                            },
+                            fail: (error) => {
+                              console.error('获取压缩后图片信息失败:', error);
+                              resolve(result.tempFilePath);
+                            }
+                          });
+                        },
+                        fail: (error) => {
+                          console.error('Canvas转图片失败:', error);
+                          // 如果转换失败则返回原图
+                          resolve(imagePath);
+                        }
+                      });
+                    };
+                    
+                    // 开始尝试压缩
+                    tryCompress(targetQuality);
+                  };
+                  
+                  image.onerror = () => {
+                    console.error('图片加载失败');
+                    resolve(imagePath);
+                  };
+                  
+                  image.src = imagePath;
+                });
+            },
+            fail: (error) => {
+              console.error('获取原始图片信息失败:', error);
+              resolve(imagePath);
+            }
+          });
+        },
+        fail: (error) => {
+          console.error('获取图片信息失败:', error);
+          resolve(imagePath);
+        }
+      });
+    });
+  },
 
   previewImage: function (e) {
     let index = e.currentTarget.dataset.index;

pages/tousujianyi/tousujianyi.wxml

@@ -79,5 +79,8 @@
   <button class="submit-btn" bindtap="submitForm" wx:if="{{!isPreviewMode}}" disabled="{{isSubmitting}}">
     {{isSubmitting ? '提交中...' : '提交'}}
   </button>
+  
+  <!-- 的canvas用于图片压缩 -->
+  <canvas type="2d" id="compressCanvas" style="position:fixed; left:-9999px; width:300px; height:300px;"></canvas>
 
 </view>

pages/tousujianyiList/tousujianyiList.js

@@ -7,15 +7,15 @@ Page({
   data: {
     noticeList: [ ],
     imageList: [], // 存储图片路径的数组
-    showCustomPreview: false, // 是否显示自定义预览
-    currentPreviewImages: [], // 当前预览的图片数组
-    currentPreviewIndex: 0, // 当前预览的图片索引
     description: '',
     content: '',
     contact: '',
     phone: '',
     replyTime: '',
-    replyContent: ''
+    replyContent: '',
+    showCustomPreview: false,
+    currentPreviewIndex: 0,
+    currentPreviewImages: []
   },
 
   /**
@@ -117,42 +117,68 @@ Page({
   },
 
   previewImage: function(e) {
-    // 获取当前点击项的id
-    const id = e.currentTarget.dataset.id;
-    // 根据id找到对应的投诉建议项
-    const item = this.data.noticeList.find(item => item.id === id);
-    // 确保有附件
-    if (item && item.hasAttachment && item.attachments.length > 0) {
-      this.setData({
-        showCustomPreview: true,
-        currentPreviewImages: item.attachments,
-        currentPreviewIndex: 0
+    // 获取当前点击项的id或索引
+    const { id, index } = e.currentTarget.dataset;
+    
+    // 如果是点击列表项的预览按钮
+    if (id) {
+      // 根据id找到对应的投诉建议项
+      const item = this.data.noticeList.find(item => item.id === id);
+      
+      // 确保有附件
+      if (item && item.hasAttachment && item.attachments.length > 0) {
+        wx.previewImage({
+          current: item.attachments[0], // 当前显示图片的链接
+          urls: item.attachments // 需要预览的图片链接列表
+        });
+      } else {
+        console.log('没有找到附件或附件为空');
+      }
+    }
+    // 如果是点击图片列表中的图片
+    else if (typeof index !== 'undefined') {
+      const { imageList } = this.data;
+      wx.previewImage({
+        current: imageList[index], // 当前显示图片的链接
+        urls: imageList // 需要预览的图片链接列表
       });
-    } else {
-      console.log('没有找到附件或附件为空');
     }
   },
 
   // 关闭预览
   closePreview: function() {
     this.setData({
-      showCustomPreview: false
+      showCustomPreview: false,
+      currentPreviewIndex: 0,
+      currentPreviewImages: []
     });
   },
 
-  // 切换预览图片
-  changePreviewImage: function(e) {
-    const direction = e.currentTarget.dataset.direction;
-    let newIndex = this.data.currentPreviewIndex;
-    
-    if (direction === 'prev') {
-      newIndex = newIndex > 0 ? newIndex - 1 : this.data.currentPreviewImages.length - 1;
-    } else {
-      newIndex = newIndex < this.data.currentPreviewImages.length - 1 ? newIndex + 1 : 0;
+  // 上一张图片
+  prevImage: function() {
+    const { currentPreviewIndex } = this.data;
+    if (currentPreviewIndex > 0) {
+      this.setData({
+        currentPreviewIndex: currentPreviewIndex - 1
+      });
     }
-    
+  },
+
+  // 下一张图片
+  nextImage: function() {
+    const { currentPreviewIndex, currentPreviewImages } = this.data;
+    if (currentPreviewIndex < currentPreviewImages.length - 1) {
+      this.setData({
+        currentPreviewIndex: currentPreviewIndex + 1
+      });
+    }
+  },
+
+  // 处理滑动事件
+  swiperChange: function(e) {
+    const current = e.detail.current;
     this.setData({
-      currentPreviewIndex: newIndex
+      currentPreviewIndex: current
     });
   },
 

pages/tousujianyiList/tousujianyiList.wxml

@@ -45,30 +45,4 @@
       ></image>
     </block>
   </view>
-
-  <!-- 自定义图片预览组件 -->
-  <view class="custom-preview-container" wx:if="{{showCustomPreview}}" bindtap="closePreview">
-    <view class="custom-preview-content" catchtap="preventBubble">
-      <image 
-        class="preview-image" 
-        src="{{currentPreviewImages[currentPreviewIndex]}}" 
-        mode="aspectFit"
-      ></image>
-      
-      <view class="preview-controls">
-        <view class="preview-arrow left-arrow" catchtap="changePreviewImage" data-direction="prev">
-          <text class="arrow-text">《</text>
-        </view>
-        <view class="preview-arrow right-arrow" catchtap="changePreviewImage" data-direction="next">
-          <text class="arrow-text">》</text>
-        </view>
-      </view>
-      
-      <view class="preview-counter">
-        {{currentPreviewIndex + 1}}/{{currentPreviewImages.length}}
-      </view>
-      
-      <view class="close-button" catchtap="closePreview">×</view>
-    </view>
-  </view>
 </view>

pages/tousujianyiList/tousujianyiList.wxss

@@ -150,79 +150,113 @@
   border-radius: 8rpx;
 }
 
-.custom-preview-container {
+.custom-preview {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
   z-index: 999;
+}
+
+.custom-preview-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.mask-close-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.preview-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.custom-preview-content {
-  width: 90%;
-  height: 70%;
-  position: relative;
+swiper.preview-image {
+  width: 100%;
+  height: calc(100% - 400rpx);
+  margin-top: 200rpx;
 }
 
-.preview-image {
+swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-content image.preview-image {
   width: 100%;
   height: 100%;
-  background-color: transparent;
+  object-fit: contain;
 }
 
-.preview-controls {
+.preview-arrow {
   position: absolute;
   top: 50%;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
   transform: translateY(-50%);
-}
-
-.preview-arrow {
-  width: 80rpx;
-  height: 80rpx;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
+  width: 100rpx;
+  height: 100rpx;
   display: flex;
   justify-content: center;
   align-items: center;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  z-index: 1001;
 }
 
-.arrow-text {
-  color: white;
-  font-size: 36rpx;
+.preview-arrow.left {
+  left: 30rpx;
+}
+
+.preview-arrow.right {
+  right: 30rpx;
+}
+
+.arrow-icon {
+  color: #fff;
+  font-size: 50rpx;
+  font-weight: bold;
 }
 
 .preview-counter {
   position: absolute;
-  bottom: -60rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  color: white;
-  font-size: 28rpx;
-  background-color: rgba(0, 0, 0, 0.5);
-  padding: 10rpx 20rpx;
+  top: 200rpx;
+  left: 40rpx;
+  color: #fff;
+  font-size: 32rpx;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 12rpx 24rpx;
   border-radius: 30rpx;
+  z-index: 1001;
 }
 
 .close-button {
   position: absolute;
-  top: -50rpx;
-  right: 0;
-  width: 60rpx;
-  height: 60rpx;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 50%;
+  top: 200rpx;
+  right: 40rpx;
+  width: 70rpx;
+  height: 70rpx;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 40rpx;
+  color: #fff;
+  font-size: 50rpx;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  z-index: 1001;
 }