aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reapply "feat: 测试分享到whatsapp"

Browse Source 
This reverts commit 15321da34d.
This commit is contained in:
zhangyahui
2025-11-27 15:11:33 +08:00
parent 370cea5982
commit 84a1b7fea9
3 changed files with 525 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -7,7 +7,15 @@
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> --> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link rel="stylesheet" href="/css/woff/fontFamily.css"> <link rel="stylesheet" href="/css/woff/fontFamily.css">
<title>Activities</title> <title>Lane Crawford</title>
<!-- Open Graph / WhatsApp share metadata -->
<meta property="og:title" content="Lane Crawford" />
<meta property="og:description" content="create and share looks from the Lane Crawford creation gallery." />
<meta property="og:image" content="https://abs.twimg.com/rweb/ssr/default/v2/og/image.png" />
<meta property="og:url" content="https://www.lc.aida.com.hk/workshop/creation" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Lane Crawford AI Stylist" />
<meta name="twitter:card" content="summary_large_image" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

184
src/utils/share.ts Normal file
View File

@@ -0,0 +1,184 @@
/**
* 分享工具函数
* 支持移动浏览器原生分享 API 和 WhatsApp 分享
*/
interface ShareData {
title?: string
text?: string
url?: string
files?: File[]
}
/**
* 检查是否支持 Web Share API
*/
export function isWebShareSupported(): boolean {
return typeof navigator !== 'undefined' && 'share' in navigator
}
/**
* 使用 Web Share API 进行分享（移动浏览器原生分享）
* @param data 分享数据
*/
async function shareWithWebAPI(data: ShareData): Promise<void> {
if (!isWebShareSupported()) {
throw new Error('Web Share API is not supported')
}
try {
// Web Share API 只支持 title, text, url 和 files
const shareData: ShareData = {}
if (data.title) shareData.title = data.title
if (data.text) shareData.text = data.text
if (data.url) shareData.url = data.url
if (data.files && data.files.length > 0) shareData.files = data.files
await navigator.share(shareData)
} catch (error: any) {
// 用户取消分享时，会抛出 AbortError，这是正常情况
if (error.name !== 'AbortError') {
console.error('分享失败:', error)
throw error
}
}
}
/**
* 分享到 WhatsApp（回退方案）
* @param text 分享的文本内容
* @param url 分享的链接（可选）
*/
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')
}
/**
* 通用分享函数（优先使用 Web Share API，不支持则回退到 WhatsApp）
* @param options 分享选项
*/
export async function share(options: {
title?: string
text?: string
url?: string
files?: File[]
fallbackToWhatsApp?: boolean
}): Promise<void> {
const { title, text, url, files, fallbackToWhatsApp = true } = options
// 如果支持 Web Share API，优先使用
if (isWebShareSupported() && !files) {
try {
await shareWithWebAPI({ title, text, url })
return
} catch (error) {
// 如果分享失败且允许回退，则使用 WhatsApp
if (fallbackToWhatsApp) {
const shareText = [title, text, url].filter(Boolean).join('\n\n')
shareToWhatsApp(shareText)
return
}
throw error
}
}
// 如果不支持 Web Share API 或需要分享文件，使用 WhatsApp
if (fallbackToWhatsApp) {
const shareText = [title, text, url].filter(Boolean).join('\n\n')
shareToWhatsApp(shareText)
} else {
throw new Error('Web Share API is not supported and fallback is disabled')
}
}
/**
* 分享当前页面（优先使用原生分享，不支持则回退到 WhatsApp）
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareCurrentPage(title: string, description?: string): Promise<void> {
const currentUrl = window.location.href
await share({
title,
text: description,
url: currentUrl,
fallbackToWhatsApp: true
})
}
/**
* 分享图片（优先使用原生分享，不支持则回退到 WhatsApp）
* @param imageUrl 图片链接
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareImage(imageUrl: string, title: string, description?: string): Promise<void> {
console.log('1',imageUrl,'2',title)
const currentUrl = window.location.href
const text = description
? `${description}\n\n查看图片: ${imageUrl}`
: `查看图片: ${imageUrl}`
await share({
title,
text,
url: currentUrl,
fallbackToWhatsApp: true
})
}
/**
* 分享图片文件（使用 Web Share API，支持直接分享图片文件）
* @param imageFile 图片文件
* @param title 分享的标题（可选）
* @param text 分享的文本（可选）
*/
export async function shareImageFile(imageFile: File, title?: string, text?: string): Promise<void> {
if (!isWebShareSupported()) {
// 如果不支持文件分享，可以尝试将文件转换为 URL 后分享
const imageUrl = URL.createObjectURL(imageFile)
await shareImage(imageUrl, title || '分享图片', text)
URL.revokeObjectURL(imageUrl)
return
}
try {
await shareWithWebAPI({
title,
text,
files: [imageFile]
})
} catch (error) {
// 如果分享失败，回退到 URL 方式
const imageUrl = URL.createObjectURL(imageFile)
await shareImage(imageUrl, title || '分享图片', text)
URL.revokeObjectURL(imageUrl)
}
}
/**
* 分享当前页面到 WhatsApp（兼容旧版本，推荐使用 shareCurrentPage）
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareCurrentPageToWhatsApp(title: string, description?: string): Promise<void> {
await shareCurrentPage(title, description)
}
/**
* 分享图片到 WhatsApp（兼容旧版本，推荐使用 shareImage）
* @param imageUrl 图片链接
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareImageToWhatsApp(imageUrl: string, title: string, description?: string): Promise<void> {
await shareImage(imageUrl, title, description)
}

652
src/views/Workshop/creation/creation-list.vue
View File

@@ -1,334 +1,346 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue' import { ref, reactive, onMounted, computed } from 'vue'
import MyList from '@/components/MyList.vue' import MyList from '@/components/MyList.vue'
import { DownloadImages } from '@/utils/tools' import { DownloadImages } from '@/utils/tools'
import { import {
getTryOnEffectFavoriteList, getTryOnEffectFavoriteList,
getTryOnEffectStyleList, getTryOnEffectStyleList,
setTryOnEffectFavorite, setTryOnEffectFavorite,
cancelTryOnEffectFavorite cancelTryOnEffectFavorite
} from '@/api/workshop' } from '@/api/workshop'
import { shareImage } from '@/utils/share'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type'])
const query = computed(() => router.currentRoute.value.query) const query = computed(() => router.currentRoute.value.query)
const visitRecordId = computed(() => query.value.visitRecordId)// 访问记录ID const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
import { useGenerateStore } from '@/stores' import { useGenerateStore } from '@/stores'
const generateStore = useGenerateStore() const generateStore = useGenerateStore()
onMounted(() => { onMounted(() => {
emit('view-type', 1) emit('view-type', 1)
}) })
const list = reactive([]) const list = reactive([])
const loading = ref(false) const loading = ref(false)
const finish = ref(false) const finish = ref(false)
const selectCount = computed(() => list.filter((v) => v.selected).length) const selectCount = computed(() => list.filter((v) => v.selected).length)
const maxSelectCount = 10 const maxSelectCount = 10
const isChooseSave = ref(false) //是否选择保存模式 const isChooseSave = ref(false) //是否选择保存模式
const onLoad = () => { const onLoad = () => {
loading.value = true loading.value = true
const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
const id = visitRecordId.value || generateStore.styleId const id = visitRecordId.value || generateStore.styleId
http(id) http(id)
.then((data) => { .then((data) => {
data?.forEach((v) => { data?.forEach((v) => {
const obj = { const obj = {
tryOnId: v.tryOnId, tryOnId: v.tryOnId,
tryOnUrl: v.tryOnUrl, tryOnUrl: v.tryOnUrl,
styleUrl: v.styleUrl, styleUrl: v.styleUrl,
isFavorite: !!v.isFavorite, isFavorite: !!v.isFavorite,
isRegenerated: !!v.isRegenerated, isRegenerated: !!v.isRegenerated,
selected: list.length < maxSelectCount, selected: list.length < maxSelectCount,
loading: false, loading: false,
downloaded: false downloaded: false
} }
list.push(obj) list.push(obj)
}) })
loading.value = false loading.value = false
finish.value = true finish.value = true
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err)
loading.value = false loading.value = false
finish.value = true finish.value = true
}) })
} }
const onItem = (v) => { const onItem = (v) => {
isChooseSave.value ? onSelectItem(v) : onDetailsItem(v) isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
} }
// 详情页 // 详情页
const onDetailsItem = (v) => { const onDetailsItem = (v) => {
if (v.isRegenerated) return if (v.isRegenerated) return
router.push({ query: { ...query.value, styleUrl: v.styleUrl } }) router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
} }
// 喜欢 // 喜欢
const isLoveLoading = ref(false) const isLoveLoading = ref(false)
const onLoveItem = (v) => { const onLoveItem = (v) => {
if (isLoveLoading.value) return if (isLoveLoading.value) return
const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
isLoveLoading.value = true isLoveLoading.value = true
v.isFavorite = !v.isFavorite v.isFavorite = !v.isFavorite
http(v.tryOnId) http(v.tryOnId)
.then(() => { .then(() => {
isLoveLoading.value = false isLoveLoading.value = false
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err)
isLoveLoading.value = false isLoveLoading.value = false
}) })
} }
const onDownloadItem = (v) => {
// console.log('保存', v) const isShare = ref(false)
if (v.loading) return const handleOpenShare = () => {
v.loading = true isShare.value = !isShare.value
v.selected = false alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
DownloadImages([{ url: v.tryOnUrl }], null, null, () => { }
v.loading = false
v.downloaded = true const onDownloadItem = (v) => {
}) // console.log('1111111111111111', v)
} if (isShare.value) {
const onSelectItem = (v) => { shareImage(v.tryOnUrl,'Creation')
if (selectCount.value >= maxSelectCount && !v.selected) return } else {
v.selected = !v.selected if (v.loading) return
} v.loading = true
const onChooseSave = () => { v.selected = false
isChooseSave.value = true DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
} v.loading = false
const onBackChooseSave = () => { v.downloaded = true
isChooseSave.value = false })
} }
// 下载选中项 }
const onConfirm = () => { const onSelectItem = (v) => {
const downloadList = [] if (selectCount.value >= maxSelectCount && !v.selected) return
if (selectCount.value > 0) { v.selected = !v.selected
list.forEach((v, i) => { }
if (v.selected) { const onChooseSave = () => {
v.selected = false isChooseSave.value = true
v.loading = true }
downloadList.push({ const onBackChooseSave = () => {
index: i, isChooseSave.value = false
url: v.tryOnUrl }
}) // 下载选中项
} const onConfirm = () => {
}) const downloadList = []
} if (selectCount.value > 0) {
if (selectCount.value < maxSelectCount) { list.forEach((v, i) => {
list.forEach((v) => { if (v.selected) {
if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount) v.selected = false
v.selected = true v.loading = true
}) downloadList.push({
} index: i,
if (downloadList.length > 0) { url: v.tryOnUrl
DownloadImages( })
downloadList, }
(count, total, item) => { })
list[item.index].loading = false }
list[item.index].downloaded = true if (selectCount.value < maxSelectCount) {
console.log('下载成功', count, total, item) list.forEach((v) => {
}, if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
(count, total, item) => { v.selected = true
list[item.index].loading = false })
console.log('下载失败', count, total, item) }
}, if (downloadList.length > 0) {
(successCount, errCount) => { DownloadImages(
console.log('下载完成', successCount, errCount) downloadList,
} (count, total, item) => {
) list[item.index].loading = false
} list[item.index].downloaded = true
} console.log('下载成功', count, total, item)
const onContinue = () => { },
router.push({ name: 'end' }) (count, total, item) => {
} list[item.index].loading = false
console.log('下载失败', count, total, item)
},
(successCount, errCount) => {
console.log('下载完成', successCount, errCount)
}
)
}
}
const onContinue = () => {
router.push({ name: 'end' })
}
</script> </script>
<template> <template>
<div class="creation-list"> <div class="creation-list">
<div class="title">Your Creation</div> <div class="title" @click="handleOpenShare">Your Creation</div>
<div class="list"> <div class="list">
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad"> <my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)"> <div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
<img v-lazy="v.tryOnUrl" /> <img v-lazy="v.tryOnUrl" />
<div class="corner"> <div class="corner">
<div class="ai" v-if="v.isRegenerated">Gen-AI</div> <div class="ai" v-if="v.isRegenerated">Gen-AI</div>
<div class="tryon" v-else>Try-on</div> <div class="tryon" v-else>Try-on</div>
</div> </div>
<div class="icons"> <div class="icons">
<div @click.stop="onLoveItem(v)"> <div @click.stop="onLoveItem(v)">
<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" /> <SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
</div> </div>
<div @click.stop="onDownloadItem(v)"> <div @click.stop="onDownloadItem(v)">
<SvgIcon name="download" size="27" v-show="!v.loading" /> <SvgIcon name="download" size="27" v-show="!v.loading" />
<van-loading color="#000" size="3rem" v-show="v.loading" /> <van-loading color="#000" size="3rem" v-show="v.loading" />
</div> </div>
</div> </div>
<div class="icon-selected" v-show="isChooseSave && v.selected"> <div class="icon-selected" v-show="isChooseSave && v.selected">
<SvgIcon name="modelSelected" size="50" /> <SvgIcon name="modelSelected" size="50" />
</div> </div>
<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div> <div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div> <div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
</div> </div>
</my-list> </my-list>
</div> </div>
<div class="btns" v-show="!visitRecordId"> <div class="btns" v-show="!visitRecordId">
<template v-if="!isChooseSave"> <template v-if="!isChooseSave">
<button @click="onChooseSave">Choose to Save</button> <button @click="onChooseSave">Choose to Save</button>
<button @click="onContinue">Continue</button> <button @click="onContinue">Continue</button>
</template> </template>
<template v-else> <template v-else>
<button @click="onBackChooseSave">Back</button> <button @click="onBackChooseSave">Back</button>
<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button> <button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.creation-list { .creation-list {
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background-color: #e3e3e3; background-color: #e3e3e3;
border-radius: 1rem; border-radius: 1rem;
position: relative; position: relative;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .title { > .title {
font-family: satoshiRegular; font-family: satoshiRegular;
font-size: 9rem; font-size: 9rem;
text-align: center; text-align: center;
line-height: 124%; line-height: 124%;
font-weight: 500; font-weight: 500;
margin: 7.2rem 0; margin: 7.2rem 0;
} }
> .list { > .list {
flex: 1; flex: 1;
margin: 0 3.8rem; margin: 0 3.8rem;
overflow: hidden; overflow: hidden;
--border-radius: 2rem; --border-radius: 2rem;
> .my-list { > .my-list {
padding: 0 6rem; padding: 0 6rem;
--my-list-footer-margin: 0 0 2rem; --my-list-footer-margin: 0 0 2rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-content: flex-start; align-content: flex-start;
.item { .item {
width: 47%; width: 47%;
height: 62.2rem; height: 62.2rem;
// overflow: hidden; // overflow: hidden;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: #fff; background-color: #fff;
margin-bottom: 4rem; margin-bottom: 4rem;
border: 0.1rem solid #000; border: 0.1rem solid #000;
position: relative; position: relative;
> img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
> .corner { > .corner {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 12.6rem; width: 12.6rem;
height: 3.6rem; height: 3.6rem;
font-family: satoshiBold; font-family: satoshiBold;
font-size: 1.6rem; font-size: 1.6rem;
border-bottom-left-radius: 1.6rem; border-bottom-left-radius: 1.6rem;
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
> .ai { > .ai {
color: #646464; color: #646464;
background: linear-gradient( background: linear-gradient(
137.95deg, 137.95deg,
#7a96ac 2.28%, #7a96ac 2.28%,
#eaeff3 19.8%, #eaeff3 19.8%,
#c2d4e1 32.94%, #c2d4e1 32.94%,
#ffffff 50.16%, #ffffff 50.16%,
#d4dee5 62.15%, #d4dee5 62.15%,
#abbdc8 78.69%, #abbdc8 78.69%,
#bccad7 95.24% #bccad7 95.24%
), ),
linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)); linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
} }
} }
> .icons { > .icons {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 1.7rem; right: 1.7rem;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
> div { > div {
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 1rem; border-radius: 1rem;
border: 0.2rem solid #000; border: 0.2rem solid #000;
--svg-icon-color: #000; --svg-icon-color: #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
} }
} }
> .icon-selected { > .icon-selected {
position: absolute; position: absolute;
bottom: -2rem; bottom: -2rem;
right: -2rem; right: -2rem;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
> .download-state { > .download-state {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: #fff; color: #fff;
font-size: 4rem; font-size: 4rem;
} }
} }
} }
} }
> .btns { > .btns {
margin: 9rem 0; margin: 9rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
> button { > button {
box-sizing: content-box; box-sizing: content-box;
font-family: satoshiRegular; font-family: satoshiRegular;
width: 35rem; width: 35rem;
height: 8rem; height: 8rem;
border-radius: 1.3rem; border-radius: 1.3rem;
border: none; border: none;
background: #000; background: #000;
font-weight: 400; font-weight: 400;
font-size: 4.2rem; font-size: 4.2rem;
margin: 0 3.25rem; margin: 0 3.25rem;
color: #fff; color: #fff;
&:active { &:active {
opacity: 0.7; opacity: 0.7;
} }
} }
} }
} }
</style> </style>