feat(PageOne): enhance image saving functionality with improved user prompts and error handling

pages/orderDetailRefactored/components/PageOne.vue

@@ -313,27 +313,153 @@ export default {
       })
     },
 
-    /**
-     * 保存全部图片
-     */
-    async handleSaveAllImages() {
-      const allUrls = this.truePicList.map(item => item.fileUrl)
-      if (allUrls.length === 0) {
+    //一键复制
+    handleSaveAllImages() {
+      // 合并所有图片
+      const allImages = [...this.truePicList]
+      //取出所有图的url
+      const allUrls = allImages.map(item => item.fileUrl)
+      if (allUrls.length > 0) {
+        // 显示保存图片确认弹窗
+        uni.showModal({
+          title: '保存图片',
+          content: `是否将 ${allUrls.length} 张图片保存到本地相册？`,
+          confirmText: '保存',
+          // cancelText: '仅复制链接',
+          success: (res) => {
+            if (res.confirm) {
+              // 用户选择保存图片
+              this.saveImagesToLocal(allUrls)
+            } else if (res.cancel) {
+              // 用户选择仅复制链接
+              this.copyImageUrls(allUrls)
+            }
+          }
+        })
+      } else {
         uni.showToast({
           title: '没有图片可保存',
           icon: 'none'
         })
-        return
       }
+    },
 
-      uni.showModal({
-        title: '保存图片',
-        content: `是否将 ${allUrls.length} 张图片保存到本地相册？`,
-        confirmText: '保存',
-        success: (res) => {
-          if (res.confirm) {
-            imageUpload.saveImagesToLocal(allUrls)
+    // 保存图片到本地相册
+    async saveImagesToLocal(imageUrls) {
+      try {
+        uni.showLoading({
+          title: '正在保存图片...',
+          mask: true
+        })
+
+        const savedImages = []
+        const failedImages = []
+
+        // 逐个保存图片
+        for (let i = 0; i < imageUrls.length; i++) {
+          const url = imageUrls[i]
+          try {
+            await this.saveSingleImage(url)
+            savedImages.push(url)
+          } catch (error) {
+            console.error(`保存图片失败: ${url}`, error)
+            failedImages.push(url)
           }
+
+          // 更新进度
+          uni.showLoading({
+            title: `正在保存图片... (${i + 1}/${imageUrls.length})`,
+            mask: true
+          })
+        }
+
+        uni.hideLoading()
+
+        // 显示结果
+        let message = `成功保存 ${savedImages.length} 张图片`
+        if (failedImages.length > 0) {
+          message += `，${failedImages.length} 张保存失败`
+        }
+
+        uni.showToast({
+          title: message,
+          icon: 'none',
+          duration: 3000
+        })
+
+        // 如果有失败的图片，也复制链接作为备选
+        if (failedImages.length > 0) {
+          const allUrls = [...savedImages, ...failedImages]
+          this.copyImageUrls(allUrls)
+        }
+      } catch (error) {
+        uni.hideLoading()
+        console.error('保存图片过程中发生错误:', error)
+        uni.showToast({
+          title: '保存图片失败',
+          icon: 'error'
+        })
+      }
+    },
+
+    // 保存单张图片
+    saveSingleImage(url) {
+      return new Promise((resolve, reject) => {
+        // 先下载图片
+        uni.downloadFile({
+          url: url,
+          success: (res) => {
+            if (res.statusCode === 200) {
+              // 保存到相册
+              uni.saveImageToPhotosAlbum({
+                filePath: res.tempFilePath,
+                success: () => {
+                  console.log('图片保存成功:', url)
+                  resolve()
+                },
+                fail: (err) => {
+                  console.error('保存到相册失败:', err)
+                  // 如果是权限问题，尝试请求权限
+                  if (err.errMsg.includes('auth denied')) {
+                    uni.showModal({
+                      title: '权限不足',
+                      content: '需要访问相册权限来保存图片，是否去设置？',
+                      success: (modalRes) => {
+                        if (modalRes.confirm) {
+                          // 打开设置页面
+                          uni.openSetting({
+                            success: (settingRes) => {
+                              console.log('设置页面结果:', settingRes)
+                            }
+                          })
+                        }
+                      }
+                    })
+                  }
+                  reject(err)
+                }
+              })
+            } else {
+              reject(new Error('下载失败'))
+            }
+          },
+          fail: (err) => {
+            console.error('下载图片失败:', err)
+            reject(err)
+          }
+        })
+      })
+    },
+
+    // 复制图片链接
+    copyImageUrls(urls) {
+      uni.setClipboardData({
+        data: JSON.stringify(urls),
+        success: () => {
+          uni.showToast({
+            title: '图片链接已复制',
+            icon: 'none'
+          })
         }
       })
     },

pages/orderDetailRefactored/utils/imageUpload.js

@@ -163,40 +163,97 @@ export default {
    */
   saveImageToLocal(url) {
     return new Promise((resolve, reject) => {
-      uni.downloadFile({
-        url,
-        success: (res) => {
-          if (res.statusCode === 200) {
-            uni.saveImageToPhotosAlbum({
-              filePath: res.tempFilePath,
-              success: () => {
-                resolve()
-              },
-              fail: (err) => {
-                console.error('保存到相册失败:', err)
-                if (err.errMsg.includes('auth denied')) {
-                  uni.showModal({
-                    title: '权限不足',
-                    content: '需要访问相册权限来保存图片，是否去设置？',
-                    success: (modalRes) => {
-                      if (modalRes.confirm) {
-                        uni.openSetting()
-                      }
+      this._doSaveImage(url, resolve, reject)
+    })
+  },
+
+  /**
+   * 执行保存图片操作
+   * @private
+   */
+  _doSaveImage(url, resolve, reject) {
+    uni.downloadFile({
+      url,
+      success: (res) => {
+        if (res.statusCode === 200 && res.tempFilePath) {
+          uni.saveImageToPhotosAlbum({
+            filePath: res.tempFilePath,
+            success: () => {
+              resolve()
+            },
+            fail: (err) => {
+              console.error('保存到相册失败:', err)
+              // 错误代码 12 通常表示权限问题
+              const isPermissionError = err.code === 12 || 
+                                       err.errCode === 12 || 
+                                       err.errMsg.includes('auth denied') || 
+                                       err.errMsg.includes('permission') ||
+                                       err.errMsg.includes('UNKOWN ERROR')
+              
+              if (isPermissionError) {
+                uni.showModal({
+                  title: '权限不足',
+                  content: '需要访问相册权限来保存图片，是否前往设置开启权限？',
+                  confirmText: '去设置',
+                  cancelText: '取消',
+                  success: (modalRes) => {
+                    if (modalRes.confirm) {
+                      uni.openSetting({
+                        success: (settingRes) => {
+                          // 检查是否开启了相册权限
+                          const hasPermission = settingRes.authSetting && 
+                                              settingRes.authSetting['scope.writePhotosAlbum']
+                          if (hasPermission) {
+                            uni.showToast({
+                              title: '权限已开启，请重试保存',
+                              icon: 'none',
+                              duration: 2000
+                            })
+                          } else {
+                            uni.showToast({
+                              title: '请在设置中开启相册权限',
+                              icon: 'none',
+                              duration: 2000
+                            })
+                          }
+                        },
+                        fail: () => {
+                          uni.showToast({
+                            title: '无法打开设置',
+                            icon: 'none'
+                          })
+                        }
+                      })
                     }
-                  })
-                }
-                reject(err)
+                  }
+                })
+              } else {
+                uni.showToast({
+                  title: '保存失败，请稍后重试',
+                  icon: 'none'
+                })
               }
-            })
-          } else {
-            reject(new Error('下载失败'))
-          }
-        },
-        fail: (err) => {
-          console.error('下载图片失败:', err)
-          reject(err)
+              reject(err)
+            }
+          })
+        } else {
+          const errorMsg = `下载失败，状态码: ${res.statusCode}`
+          console.error(errorMsg)
+          uni.showToast({
+            title: '下载图片失败',
+            icon: 'none'
+          })
+          reject(new Error(errorMsg))
         }
-      })
+      },
+      fail: (err) => {
+        console.error('下载图片失败:', err)
+        uni.showToast({
+          title: '下载图片失败，请检查网络',
+          icon: 'none'
+        })
+        reject(err)
+      }
     })
   },