feat: 处理加载H5页面的 方法逻辑

src/pages/index/components/module/GeneratorPhotoComponent/index.vue

@@ -56,6 +56,8 @@ onMounted(() => {
 
 const jumpClick = () => {
   const token = getAccessToken();
+  navigateTo('http://192.168.1.14:8081/#/home', { token: token });
+  return
   if (props.toolCall.componentNameParams.jumpUrl) {
     navigateTo(props.toolCall.componentNameParams.jumpUrl, { token: token }); 
   }

src/pages/webview/h5.js

@@ -0,0 +1,128 @@
+import { navigateTo } from "@/router";
+import { getAccessToken } from "@/constant/token";
+import { updateImageFile } from "@/request/api/UpdateFile";
+
+// 这个文件是为了在 H5 页面中使用 uni.navigateTo 方法，并且自动携带 token 参数
+export const navigateToNewPage = (url, options = {}) => {
+    const token = getAccessToken();
+    navigateTo(url, { token: token }, options); 
+};
+
+// 保存图片到相册的完整流程
+export const saveImageToAlbum = (imageUrl) => {
+  if (!imageUrl) {
+    uni.showToast({ title: '图片地址无效', icon: 'none' });
+    return;
+  }
+
+  // 先下载图片
+  uni.showLoading({ title: '保存中...', mask: true });
+  uni.downloadFile({
+    url: imageUrl,
+    success: (res) => {
+      if (res.statusCode === 200) {
+        const tempFilePath = res.tempFilePath;
+        // 请求相册授权并保存
+        uni.getSetting({
+          success: (settingRes) => {
+            if (settingRes.authSetting['scope.writePhotosAlbum']) {
+              // 已授权，直接保存
+              saveToAlbum(tempFilePath);
+            } else {
+              // 未授权，请求授权
+              uni.authorize({
+                scope: 'scope.writePhotosAlbum',
+                success: () => saveToAlbum(tempFilePath),
+                fail: () => {
+                  uni.hideLoading();
+                  uni.showModal({
+                    title: '提示',
+                    content: '需要相册权限才能保存图片，请去设置中开启',
+                    confirmText: '去设置',
+                    success: (modalRes) => {
+                      if (modalRes.confirm) {
+                        uni.openSetting();
+                      }
+                    }
+                  });
+                }
+              });
+            }
+          }
+        });
+      } else {
+        uni.hideLoading();
+        uni.showToast({ title: '图片下载失败', icon: 'none' });
+      }
+    },
+    fail: (err) => {
+      console.error('下载失败', err);
+      uni.hideLoading();
+      uni.showToast({ title: '网络错误，下载失败', icon: 'none' });
+    }
+  });
+}
+
+// 执行保存到相册
+function saveToAlbum(filePath) {
+  uni.saveImageToPhotosAlbum({
+    filePath: filePath,
+    success: () => {
+      uni.hideLoading();
+      uni.showToast({ title: '保存成功', icon: 'success' });
+    },
+    fail: (err) => {
+      console.error('保存失败', err);
+      uni.hideLoading();
+      uni.showToast({ title: '保存失败', icon: 'none' });
+    }
+  });
+}
+
+/**
+ * 选择并上传图片
+ * @param {Object} options 配置项
+ * @param {number} options.count 最多选择的图片数量，默认1
+ * @param {string} options.sourceType 图片来源 ['album', 'camera']，默认两者都允许
+ * @returns {Promise<string>} 返回上传后的图片地址（res.data）
+ */
+export function chooseAndUploadImage(options = {}) {
+  const { count = 1, sourceType = ['album', 'camera'] } = options
+
+  return new Promise((resolve, reject) => {
+    // 1. 选择图片
+    uni.chooseImage({
+      count,
+      sourceType,
+      success: (chooseRes) => {
+        const tempFilePaths = chooseRes.tempFilePaths
+        if (!tempFilePaths || tempFilePaths.length === 0) {
+          reject(new Error('未选择图片'))
+          return
+        }
+        const filePath = tempFilePaths[0] // 单张图片，取第一张
+
+        // 2. 上传图片（这里假设 updateImageFile 返回 Promise，resolve 的数据结构为 { data: '图片地址' }）
+        updateImageFile(filePath)
+          .then((uploadRes) => {
+            const imageUrl = uploadRes.data
+            if (!imageUrl) {
+              reject(new Error('上传成功但未返回图片地址'))
+              return
+            }
+            resolve(imageUrl)
+          })
+          .catch((err) => {
+            console.error('上传失败', err)
+            uni.showToast({ title: '上传失败', icon: 'none' })
+            reject(err)
+          })
+      },
+      fail: (err) => {
+        console.error('选择图片失败', err)
+        uni.showToast({ title: '选择图片失败', icon: 'none' })
+        reject(err)
+      }
+    })
+  })
+}

src/pages/webview/index.vue

@@ -1,11 +1,12 @@
 <template>
   <view>
-    <web-view :src="webviewUrl" @message="handleH5Message"></web-view>
+    <web-view :src="webviewUrl" @message="handleMessage"></web-view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
+import { navigateToNewPage, saveImageToAlbum, chooseAndUploadImage } from "./h5.js";
 
 const webviewUrl = ref("");
 
@@ -22,7 +23,7 @@ onMounted(() => {
   }
 });
 
-const handleH5Message = (event) => {
+const handleMessage = (event) => {
   const messageData = event.detail.data[0];
   console.log("Received message from H5:", messageData);
   // 根据需要处理H5传递过来的消息
@@ -33,12 +34,33 @@ const handleH5Message = (event) => {
       uni.navigateBack();
       break;
     case "navigateTo":
+      navigateToNewPage(messageData.url);
+      break;
+    case "showToast":
+      uni.showToast({ title: messageData.title, icon: messageData.icon || "none" }); 
+      break;
+    case "saveImage":
+      saveImageToAlbum(messageData.imageUrl);
+      break;
+    case "chooseAndUpload": {
+      // 调用公共上传方法
+      chooseAndUploadImage()
+        .then((imageUrl) => {
+          // 将图片地址通过 hash 传回 H5（不刷新页面）
+          const newUrl = `${originalWebviewUrl.value}#uploadResult=${encodeURIComponent(imageUrl)}`
+          webviewUrl.value = newUrl
+        })
+        .catch(() => {
+          // 上传失败，也可以通知 H5（比如传一个空值或错误标识）
+          const newUrl = `${originalWebviewUrl.value}#uploadResult=error`
+          webviewUrl.value = newUrl
+        })
+    }
+    break; 
 
-      break
     default:
       console.log("Unknown action:", action);
   }
-
 };
 
 </script>