diff --git a/src/assets/images/haibao-cover-no-title.webp b/src/assets/images/haibao-cover-no-title.webp new file mode 100644 index 0000000..ac7c347 Binary files /dev/null and b/src/assets/images/haibao-cover-no-title.webp differ diff --git a/src/components/GenerateImg.vue b/src/components/GenerateImg.vue index 1b5b03f..b436d0b 100644 --- a/src/components/GenerateImg.vue +++ b/src/components/GenerateImg.vue @@ -204,7 +204,7 @@ const generateImage = async (options) => { try { const loading = weui.loading(); - const mergeResponse = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', { + const response = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -213,49 +213,53 @@ const generateImage = async (options) => { }, body: JSON.stringify(formData) }); - - const mergeData = await mergeResponse.json(); - globalStore.mergeId = mergeData.merge_id; - const navigateToSynthesizedResults = () => { - router.push({ - name: 'synthesizedResults' - }) - } - - let index = 0 - const max = 4; - const Timer = setInterval(()=>{ - if (index >= max) { - loading.hide(); - clearInterval(Timer) - } else { - index++ - mergeFetch(index) + + const data = await response.json() + if (response.status == 200 || response.status == 201) { + globalStore.mergeId = data.merge_id; + const navigateToSynthesizedResults = () => { + router.push({ + name: 'synthesizedResults' + }) } - }, 1000) - - const mergeFetch = async (index)=> { - const statusRes = await Request(`face/merge/${mergeData.merge_id}/status`, {}, 'GET', true) - - if (statusRes.res.status === 200) { - if (statusRes.json.status === 'success') { - displayMyPhotoBtn.value = false; + + let index = 0 + const max = 4; + const Timer = setInterval(()=>{ + if (index >= max) { loading.hide(); clearInterval(Timer) - navigateToSynthesizedResults(); - globalStore.result_url = statusRes.json.result_url; + } else { + index++ + mergeFetch(index) + } + }, 1000) + + const mergeFetch = async (index)=> { + const statusRes = await Request(`face/merge/${data.merge_id}/status`, {}, 'GET', true) + + if (statusRes.res.status === 200) { + if (statusRes.json.status === 'success') { + displayMyPhotoBtn.value = false; + loading.hide(); + clearInterval(Timer) + navigateToSynthesizedResults(); + globalStore.result_url = statusRes.json.result_url; + } else { + if (index === 4) { + disableScanAnimation.value = true; + displayMyPhotoBtn.value = true; + } + } } else { if (index === 4) { disableScanAnimation.value = true; displayMyPhotoBtn.value = true; } } - } else { - if (index === 4) { - disableScanAnimation.value = true; - displayMyPhotoBtn.value = true; - } } + } else { + ElMessage.error(data.message); } } catch (error) { @@ -394,11 +398,14 @@ const customUpload = async (options) => { }, body: formData }) - .then(response => response.json()) - .then(data => { - loading.hide(); - console.log('Success:', data); - onSuccess(data); + .then(async response => { + const data = await response.json() + if (response.status == 200 || response.status == 201) { + loading.hide(); + onSuccess(data); + } else { + ElMessage.error(data.message); + } }) .catch((error) => { loading.hide(); @@ -699,7 +706,7 @@ import generateImg from '../assets/images/generate-img-bg.webp' } .item-4 { width: 72vw; - top: 23.5%; + top: 48vw; pointer-events: none; } .item-5 { diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue index a275203..c1ac61f 100644 --- a/src/components/HomePage.vue +++ b/src/components/HomePage.vue @@ -224,7 +224,6 @@ const handleLottery = () => { if (globalStore.draw_chances <= 0) { return weui.alert("还没有抽奖机会，快去参加活动吧") }; - globalStore.reducerDrawChances(); globalToastEvent.emit(ToastType.SHOW_LOTTERY) } @@ -510,7 +509,7 @@ watch(() => mergeId, async (newVal) => { .join-main { position: absolute; - top: 2.8vw; + top: 3.4vw; right: -3.5vw; width: 13vw; } @@ -518,9 +517,8 @@ watch(() => mergeId, async (newVal) => { .join-main .join-value { margin: 0; color: white; - text-stroke: 4px #ff0000; - -webkit-text-stroke: 1px #ff0000; - font-size: 6vw; + text-shadow: -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000, 0 0 2px #ff0000; + font-size: 5.4vw; font-weight: 900; } diff --git a/src/components/MyPhoto.vue b/src/components/MyPhoto.vue index 2c0ce70..9da9b49 100644 --- a/src/components/MyPhoto.vue +++ b/src/components/MyPhoto.vue @@ -34,24 +34,27 @@ const fetchImages = async () => { } }) const data = await response.json() - console.log('Success:', data) - images.value = data.data; - const foundItem = data.data.find(item => item.is_public === true); - if (foundItem) { - globalStore.result_url = foundItem.result_url; - displayZhuli.value = true; - } else { - displayZhuli.value = false; - } - imageList.value = data; - - const hasPublicImage = images.value.some(item => item.is_public); - if (hasPublicImage) { - globalStore.chartsBattle = true; - const publicIndex = images.value.findIndex(item => item.is_public); - if (publicIndex !== -1) { - activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex); + if (response.status == 200 || response.status == 201) { + images.value = data.data; + const foundItem = data.data.find(item => item.is_public === true); + if (foundItem) { + globalStore.result_url = foundItem.result_url; + displayZhuli.value = true; + } else { + displayZhuli.value = false; } + imageList.value = data; + + const hasPublicImage = images.value.some(item => item.is_public); + if (hasPublicImage) { + globalStore.chartsBattle = true; + const publicIndex = images.value.findIndex(item => item.is_public); + if (publicIndex !== -1) { + activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex); + } + } + } else { + ElMessage.error(data.message); } } catch (error) { console.error('Error:', error) @@ -97,17 +100,19 @@ const handleDabangClick = () => { }, body: {} }) - .then(response => response.json()) - .then(data => { - ElMessage.success('打榜成功！'); - displayZhuli.value = true; - console.log('Success:', data); - globalStore.chartsBattle = true; - return { success: true, data }; + .then(async response => { + const data = await response.json() + if (response.status == 200 || response.status == 201) { + ElMessage.success('打榜成功！'); + displayZhuli.value = true; + globalStore.chartsBattle = true; + return { success: true, data }; + } else { + ElMessage.error(data.message); + } }) .catch((error) => { - ElMessage.success('打榜失败！'); - console.error('Error:', error); + ElMessage.error('打榜失败！'); return { success: false, error }; }); }; @@ -122,6 +127,7 @@ const downloadGenerateImg = (item) => { console.log('下载被点击'); } +import haibaoCoverBorderNoTitle from "../assets/images/haibao-cover-no-title.webp" import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp"; import failedImg from '../assets/images/failed.webp'; const getGenerateImgStatus = async (item)=> { @@ -131,17 +137,20 @@ const getGenerateImgStatus = async (item)=> { 'Authorization': `Bearer ${Storage.get("userinfos").api_token}` } }) - .then(response => response.json()) - .then(data => { - console.log('Success:', data); + .then(async response => { + const data = await response.json() + if (response.status == 200 || response.status == 201) { if (data.status = 'failed') { item.result_url = failedImg; } else if (data.status = 'success') { item.result_url = data.result_url; } + } else { + ElMessage.error(data.message); + } }) .catch((error) => { - console.error('Error:', error); + ElMessage.error('获取状态失败！'); }); } @@ -185,45 +194,81 @@ 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) + let userPicture = ''; if (item && item.result_url) { + userPicture = await loadImage(item.result_url) + haibaoCover.add(userPicture, 0, 50, 951, 1698) + haibaoCover.add(mask, 10, 100) 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 + haibaoCover.draw('destination-in').then(() => { + haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => { + userHaibaoUrl.value = url - const haibaoSave = new Haibao(1080, 2160) - const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200) - haibaoSave.add(bg, 0, 0) - haibaoSave.add(url, 64, 250) - haibaoSave.add(qrcode, 115, 1875) - 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 => { - if (item && item.result_url) { - haibaoUrl.value = item.result_url - } else { - haibaoUrl.value = url - } - loading.hide() + const haibaoSave = new Haibao(1080, 2160) + const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200) + haibaoSave.add(bg, 0, 0) + haibaoSave.add(url, 64, 250) + haibaoSave.add(qrcode, 115, 1875) + 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 => { + if (item && item.result_url) { + haibaoUrl.value = item.result_url + } + loading.hide() + }).catch(err => { + console.log(err) + weui.alert("海报生成失败，请重新生成") + loading.hide() + }) }).catch(err => { console.log(err) weui.alert("海报生成失败，请重新生成") loading.hide() }) - }).catch(err => { - console.log(err) - weui.alert("海报生成失败，请重新生成") - loading.hide() }) }) - }) + } else { + userPicture = await loadImage(globalStore.result_url) + const haibaoCoverNoTitleBorder = new Haibao(951, 1607) + haibaoCoverNoTitleBorder.add(userPicture, 0, 50, 951, 1698) + haibaoCoverNoTitleBorder.add(mask, 10, 100) + haibaoCoverNoTitleBorder.add(haibaoCoverBorder, 0, 0) + haibaoCoverNoTitleBorder.draw('destination-in').then(() => { + haibaoCoverNoTitleBorder.generate({ mimeType: 'image/png' }).then(async (url) => { + userHaibaoUrl.value = url + }) + }) + const haibaoCoverNoTitle = new Haibao(951, 1607) + haibaoCoverNoTitle.add(userPicture, 0, 50, 951, 1698) + haibaoCoverNoTitle.add(mask, 10, 100) + haibaoCoverNoTitle.add(haibaoCoverBorderNoTitle, 0, 0) + haibaoCoverNoTitle.draw('destination-in').then(() => { + haibaoCoverNoTitle.generate({ mimeType: 'image/png' }).then(async (url) => { + const haibaoSaveNoTitle = new Haibao(1080, 2160) + const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200) + haibaoSaveNoTitle.add(bg, 0, 0) + haibaoSaveNoTitle.add(url, 64, 250) + haibaoSaveNoTitle.add(qrcode, 115, 1875) + haibaoSaveNoTitle.draw().then(() => { + haibaoSaveNoTitle.text(infos.nickname + '的全家福', haibaoSaveNoTitle.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' }) + haibaoSaveNoTitle.generate({ mimeType: 'image/png' }).then(url => { + haibaoUrl.value = url + loading.hide() + }).catch(err => { + console.log(err) + weui.alert("海报生成失败，请重新生成") + loading.hide() + }) + }).catch(err => { + console.log(err) + weui.alert("海报生成失败，请重新生成") + loading.hide() + }) + }) + }) + } } const markers = ref([]); @@ -397,13 +442,12 @@ markers.value = [ .border-image { position: absolute; width: 40vw; - top: 1.6333vh; - left: -0.4vw; + top: 2.8vw; + left: -0.8vw; } .image-gallery { overflow-y: auto; overflow-x: hidden; - display: block; width: 84vw; height: 57vh; position: relative; @@ -411,6 +455,7 @@ markers.value = [ flex-flow: row; flex-wrap: wrap; top: 26vw; + padding-bottom: 22vw; } .image-container { @@ -419,7 +464,7 @@ markers.value = [ top: 0; margin-bottom: 3vw; background-image: url('../assets/images/test.webp'); - background-size: cover; + background-size: 100%; background-repeat: no-repeat; display: flex; flex-direction: column; diff --git a/src/components/PhotoSquare.vue b/src/components/PhotoSquare.vue index 648565f..e5379c1 100644 --- a/src/components/PhotoSquare.vue +++ b/src/components/PhotoSquare.vue @@ -2,7 +2,7 @@ import { ref, onMounted, computed, watch } from "vue" import { Request, Storage } from "../libs/utils" import ModalTransition from "./ModalTransition.vue" -import { useRouter } from 'vue-router' +import { useRouter, useRoute } from 'vue-router' import { ElMessage } from 'element-plus'; import { RecycleScroller } from "vue-virtual-scroller"; import "vue-virtual-scroller/dist/vue-virtual-scroller.css"; @@ -11,17 +11,16 @@ const props = defineProps({ show: false }) -watch(() => props.show, async (newVal) => { - if (!newVal) { - return - } - fetchImages(); -}) - +const disableInviteHelp = ref(false); const emit = defineEmits(['go-my-photo', 'update:show']); const router = useRouter(); +const route = useRoute(); const goBack = () => { emit('update:show', false); + // 清除URL中的查询参数 + if (Object.keys(route.query).length > 0) { + router.replace({ path: route.path, query: {} }); + } }; const username = ref(); @@ -31,7 +30,7 @@ const ranking = ref(); const displayMyPublishPhoto = ref(false); const fetchImages = async () => { - + disableInviteHelp.value = false; try { const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square'); url.searchParams.append('my_only', '0'); @@ -43,28 +42,38 @@ const fetchImages = async () => { } }) const data = await response.json() - console.log('Success:', data) - images.value = data.data - if (data.my_published_photo) { - displayMyPublishPhoto.value = true; + if (response.status == 200 || response.status == 201) { + console.log('Success:', data) + images.value = data.data + if (data.my_published_photo) { + displayMyPublishPhoto.value = true; + } else { + displayMyPublishPhoto.value = false; + } + username.value = data.my_published_photo.user_name; + likesCount.value = data.my_published_photo.likes_count; + userImg.value = data.my_published_photo.avatar; + ranking.value = data.my_published_photo.ranking; } else { - displayMyPublishPhoto.value = false; + ElMessage.error(data.message); + emit('update:show', false); } - username.value = data.my_published_photo.user_name; - likesCount.value = data.my_published_photo.likes_count; - userImg.value = data.my_published_photo.avatar; - ranking.value = data.my_published_photo.ranking; } catch (error) { console.error('Error:', error) } } +watch(() => props.show, async (newVal) => { + if (!newVal) { + return + } + fetchImages(); +}, {immediate: true}) + // 图片数据 const images = ref([]); -const disableInviteHelp = ref(false); const userinfos = Storage.get("userinfos") -// TODO 需要测试邀请进来的情况 let mergeId = ''; let inviteCode = ''; const rankingInvite = ref(0); @@ -76,7 +85,7 @@ mergeId = urlParams.get('merge_id'); inviteCode = urlParams.get('fromid'); -const getInviteInfo = ()=> { +const getInviteInfo = ()=> { disableInviteHelp.value = true; fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeId}`, { method: 'GET', @@ -84,16 +93,20 @@ const getInviteInfo = ()=> { 'Authorization': `Bearer ${Storage.get("userinfos").api_token}` } }) - .then(response => response.json()) - .then(data => { - rankingInvite.value = data.ranking; - nameInvite.value = data.user_name; - linkCountInvite.value = data.likes_count; - + .then(async response => { + const data = await response.json() + if (response.status == 200 || response.status == 201) { + rankingInvite.value = data.ranking; + nameInvite.value = data.user_name; + linkCountInvite.value = data.likes_count; + } else { + ElMessage.error(data.message); + emit('update:show', false); + } }) .catch((error) => { - ElMessage.success('点赞失败！'); - console.error('Error:', error); + ElMessage.error('分享进入页面失败！'); + emit('update:show', false); }); } @@ -124,13 +137,17 @@ const inviteHelp = ()=> { }, body: JSON.stringify(formData) }) - .then(response => response.json()) - .then(data => { - displayInviteHelpBtn.value = false; - ElMessage.success('点赞成功！'); + .then(async response => { + const data = await response.json() + if (response.status == 200 || response.status == 201) { + displayInviteHelpBtn.value = false; + ElMessage.success('点赞成功！'); + } else { + ElMessage.error(data.message); + } }) .catch((error) => { - ElMessage.success('点赞失败！'); + ElMessage.error('点赞失败！'); console.error('Error:', error); }); } @@ -189,11 +206,9 @@ const getBackgroundImage = (item) => { />
-
-

{{ (index + 1).toString().padStart(3, '0') }}

-

{{ item.user_name }}

-
-

{{ item.likes_count }}赞

+
{{ (index + 1).toString().padStart(3, '0') }}
+
{{ item.user_name }}
+
{{ item.likes_count }}赞
@@ -230,18 +245,16 @@ const getBackgroundImage = (item) => { -
+
border
-
-

{{ rankingInvite }}

-

{{ nameInvite }}

-
-

{{ linkCountInvite }}赞

+
{{ rankingInvite }}
+
{{ nameInvite }}
+
{{ linkCountInvite }}赞
@@ -255,6 +268,11 @@ const getBackgroundImage = (item) => {