diff --git a/src/components/MyPhoto.vue b/src/components/MyPhoto.vue index 2a378ca..dc4e2af 100644 --- a/src/components/MyPhoto.vue +++ b/src/components/MyPhoto.vue @@ -117,6 +117,12 @@ const handleZhuliClick = () => { console.log('助力被点击'); }; +const downloadGenerateImg = (item) => { + openHaibao(item); + console.log('下载被点击'); +} + +import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp"; import failedImg from '../assets/images/failed.webp'; const getGenerateImgStatus = async (item)=> { fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, { @@ -170,23 +176,23 @@ const userhaibaoCover = computed(() => { return { backgroundImage: `url(${userHaibaoUrl.value})` } }) -const openHaibao = (e) => { +const openHaibao = (item) => { haibaoShow.value = true - handleHaibao() + handleHaibao(item) } -const handleHaibao = async () => { - if (haibaoUrl.value) { - return - } - +const handleHaibao = async (item) => { const loading = weui.loading() const infos = Storage.get("userinfos") const haibaoCover = new Haibao(951, 1607) const userPicture = await loadImage(globalStore.result_url) haibaoCover.add(userPicture, 0, 50, 951, 1698) haibaoCover.add(mask, 10, 100) - haibaoCover.add(haibaoCoverBorder, 0, 0) + if (item && item.result_url) { + haibaoCover.add(haibaoCoverBorderSuccess, 0, 0) + } else { + haibaoCover.add(haibaoCoverBorder, 0, 0) + } haibaoCover.draw('destination-in').then(() => { haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => { userHaibaoUrl.value = url @@ -199,7 +205,11 @@ const handleHaibao = async () => { haibaoSave.draw().then(() => { haibaoSave.text(infos.nickname + '的全家福', haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' }) haibaoSave.generate({ mimeType: 'image/png' }).then(url => { - haibaoUrl.value = url + if (item && item.result_url) { + haibaoUrl.value = item.result_url + } else { + haibaoUrl.value = url + } loading.hide() }).catch(err => { console.log(err) @@ -221,25 +231,6 @@ markers.value = [ { x: 0, y: 32, width: 50, height: 14 } ]; -// 从URL中提取文件名 -const getFileNameFromUrl = (url) => { - if (!url) return null; - return url.substring(url.lastIndexOf('/') + 1); -}; - -const downloadGenerateImg = (item)=> { - try { - const link = document.createElement('a'); - link.href = item.result_url; - link.download = getFileNameFromUrl(item.result_url) || 'downloaded-image.jpg'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - ElMessage.success('下载成功!'); - } catch (error) { - ElMessage.success('下载失败!'); - } -} @@ -297,14 +288,14 @@ const downloadGenerateImg = (item)=> { > 刷新 - 下载图片 border + /> + 下载图片
@@ -388,7 +379,6 @@ const downloadGenerateImg = (item)=> { bottom: 7vw; right: 3vw; cursor: pointer; - z-index: 9; } .refresh-btn { width: 12vw; @@ -396,7 +386,6 @@ const downloadGenerateImg = (item)=> { top: 7vw; right: 3vw; cursor: pointer; - z-index: 9; } .image-wrapper { position: relative;