分享

uniapp/WorkCameraf/pages/index/index.vue

@@ -194,6 +194,18 @@
               提交数据
             </button>
           </view>
+      
+          <view class="footer-row" v-if="canShare">
+            <button
+              type="primary"
+              class="btn-action btn-share"
+              @click="handleShareImages"
+              :disabled="isSubmitting || imageList.length === 0"
+            >
+              分享图片
+            </button>
+          </view>
+          
         </view>
       </view>
     </uni-popup>
@@ -271,6 +283,7 @@ var locationData = new Map();
 const locationInfo = ref("");
 const currentTime = ref("");
 const isSubmitting = ref(false); // 防抖状态
+const canShare = ref(false); // 是否支持 Web Share API
 let logo = ""; // 非响应式数据
 
 // ==================== 事件处理函数 ====================
@@ -459,6 +472,109 @@ const handlePreviewCurrentImage = () => {
   }
 };
 
+// #ifdef H5
+// 将图片 URL 转换为 File 对象
+const urlToFile = async (url, filename) => {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return new File([blob], filename, { type: blob.type || 'image/jpeg' });
+};
+
+// 分享图片（H5 环境使用 Web Share API）
+const handleShareImages = async () => {
+  if (imageList.value.length === 0) {
+    uni.showToast({
+      title: '没有可分享的图片',
+      icon: 'none'
+    });
+    return;
+  }
+
+  if (isSubmitting.value) {
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  try {
+    uni.showLoading({
+      title: '准备分享...',
+    });
+
+    // 先刷新所有图片的水印，确保包含最新的工作内容等信息
+    await refreshAllWatermarks();
+
+    // 将所有水印图片转换为 File 对象
+    const files = [];
+    for (let i = 0; i < imageList.value.length; i++) {
+      const img = imageList.value[i];
+      const filename = `工作照片_${i + 1}.jpg`;
+      const file = await urlToFile(img.watermark, filename);
+      files.push(file);
+    }
+
+    // 构建分享文本
+    let shareText = '';
+    if (workContent.value) {
+      shareText += `工作内容：${workContent.value}\n`;
+    }
+    if (locationInfo.value) {
+      shareText += `位置：${locationInfo.value}\n`;
+    }
+    if (departments.value[deptIndex.value] && deptIndex.value > 0) {
+      shareText += `部门：${departments.value[deptIndex.value]}\n`;
+    }
+    const validWorkers = workers.value.filter(w => w.trim() !== '');
+    if (validWorkers.length > 0) {
+      shareText += `施工人员：${validWorkers.join('、')}\n`;
+    }
+    shareText += `共 ${files.length} 张照片`;
+
+    // 检查是否支持分享文件
+    const shareData = {
+      title: '工作照片分享',
+      text: shareText,
+      files: files
+    };
+
+    if (!navigator.canShare(shareData)) {
+      // 如果不支持分享文件，尝试只分享文本
+      uni.hideLoading();
+      uni.showToast({
+        title: '当前浏览器不支持分享图片',
+        icon: 'none'
+      });
+      return;
+    }
+
+    uni.hideLoading();
+
+    // 调用系统分享
+    await navigator.share(shareData);
+
+    uni.showToast({
+      title: '分享成功',
+      icon: 'success'
+    });
+  } catch (error) {
+    console.error('分享失败:', error);
+    uni.hideLoading();
+
+    // 用户取消分享不提示错误
+    if (error.name !== 'AbortError') {
+      uni.showToast({
+        title: '分享失败',
+        icon: 'none'
+      });
+    }
+  } finally {
+    setTimeout(() => {
+      isSubmitting.value = false;
+    }, 500);
+  }
+};
+// #endif
+
 // 表单事件处理
 const handleComboxSelect = async (value) => {
   console.log("选择的工作内容:", value);
@@ -876,6 +992,13 @@ onLoad(async () => {
     title: "loading...",
   });
 
+  // #ifdef H5
+  // 检测 Web Share API 支持
+  if (navigator.share && navigator.canShare) {
+    canShare.value = true;
+  }
+  // #endif
+
   try {
     const config = await getConfig();
     console.log("配置", config);
@@ -1162,8 +1285,14 @@ onLoad(async () => {
   color: #fff;
 }
 
+.btn-share {
+  background: #ff9500;
+  color: #fff;
+}
+
 .btn-save:disabled,
 .btn-submit:disabled,
+.btn-share:disabled,
 .btn-action:disabled {
   background: #ccc !important;
   color: #999 !important;