From 791725a2a6bd29caed0e97431835636898735d41 Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Thu, 27 Nov 2025 16:21:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E5=88=86=E4=BA=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/share.ts | 32 ++++++++-- src/views/Workshop/creation/creation-list.vue | 59 ++++++++----------- 2 files changed, 51 insertions(+), 40 deletions(-) diff --git a/src/utils/share.ts b/src/utils/share.ts index c7b963b..8b87b6c 100644 --- a/src/utils/share.ts +++ b/src/utils/share.ts @@ -52,12 +52,34 @@ async function shareWithWebAPI(data: ShareData): Promise { */ export function shareToWhatsApp(text: string, url?: string): void { const shareText = url ? `${text} ${url}` : text - // WhatsApp Web API: https://wa.me/?text= const encodedText = encodeURIComponent(shareText) - const whatsappUrl = `https://wa.me/?text=${encodedText}` - - // 打开 WhatsApp 分享链接 - window.open(whatsappUrl, '_blank') + const whatsappScheme = `whatsapp://send?text=${encodedText}` + const whatsappWebUrl = `https://wa.me/?text=${encodedText}` + const isMobile = typeof navigator !== 'undefined' && /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent) + + if (typeof window === 'undefined') return + + if (isMobile) { + // 优先尝试调用已安装的 WhatsApp 应用,失败后回退到 Web 版本 + let didFallback = false + const fallbackTimer = window.setTimeout(() => { + didFallback = true + window.location.href = whatsappWebUrl + }, 1500) + + try { + window.location.href = whatsappScheme + } catch (error) { + window.clearTimeout(fallbackTimer) + window.location.href = whatsappWebUrl + } + + // 某些浏览器会在成功唤起 App 时终止脚本,无需额外处理 + return + } + + // 桌面端或不支持 scheme 的环境直接打开 WhatsApp Web + window.open(whatsappWebUrl, '_blank') } /** diff --git a/src/views/Workshop/creation/creation-list.vue b/src/views/Workshop/creation/creation-list.vue index 9512303..2e46675 100644 --- a/src/views/Workshop/creation/creation-list.vue +++ b/src/views/Workshop/creation/creation-list.vue @@ -8,7 +8,6 @@ import { setTryOnEffectFavorite, cancelTryOnEffectFavorite } from '@/api/workshop' -import { shareImageFile, createImageFileFromUrl, shareToWhatsApp } from '@/utils/share' import { useRouter } from 'vue-router' const router = useRouter() @@ -82,46 +81,36 @@ const onLoveItem = (v) => { }) } -const shareFileCache = new Map() -const preloadShareFile = (imageUrl: string) => { - if (shareFileCache.has(imageUrl)) return - createImageFileFromUrl(imageUrl) - .then((file) => { - shareFileCache.set(imageUrl, file) - }) - .catch((error) => { - console.error('预加载分享图片失败', error) - }) -} -const isShare = ref(false) -const handleOpenShare = () => { - isShare.value = !isShare.value - if (isShare.value) { - list.forEach((item) => preloadShareFile(item.tryOnUrl)) - } - alert(`现在${isShare.value ? '可以' : '不可以'}分享`) +const shareImageToWhatsapp = async (url) => { + // 把图片 URL 转为 Blob + const blob = await fetch(url).then((res) => res.blob()) + + // 创建文件对象 + const file = new File([blob], 'image.jpg', { type: 'image/jpeg' }) + + // 判断浏览器是否支持文件分享 + if (navigator.canShare && navigator.canShare({ files: [file] })) { + await navigator.share({ + files: [file], + title: '分享图片', + text: '给你一张图片' + }) + } else { + alert('当前浏览器不支持分享图片,请使用安卓 Chrome 浏览器') + } } -const shareTryOnImage = async (imageUrl: string) => { - const cachedFile = shareFileCache.get(imageUrl) - if (!cachedFile) { - preloadShareFile(imageUrl) - alert('图片准备中,请稍后再试') - return - } - try { - await shareImageFile(cachedFile, 'Lane Crawford Creation') - } catch (error) { - console.error('分享图片失败', error) - const text = `Lane Crawford Creation\n\n查看图片: ${imageUrl}` - shareToWhatsApp(text) - } +const isShare = ref(false) +const handleOpenShare = () => { + isShare.value = !isShare.value + + alert(`现在${isShare.value ? '可以' : '不可以'}分享`) } const onDownloadItem = async (v) => { if (isShare.value) { - await shareTryOnImage(v.tryOnUrl) - return + await shareImageToWhatsapp(v.tryOnUrl) + return } if (v.loading) return v.loading = true