liuxiang/faceFamilySource
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
yixu
2025-09-18 20:58:24 +08:00
parent 438bf9eecf
commit a9dc9cda79
8 changed files with 297 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/haibao-cover-no-title.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

23
src/components/GenerateImg.vue
View File

@@ -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',
@@ -214,8 +214,9 @@ const generateImage = async (options) => {
body: JSON.stringify(formData)
});
const mergeData = await mergeResponse.json();
globalStore.mergeId = mergeData.merge_id;
const data = await response.json()
if (response.status == 200 || response.status == 201) {
globalStore.mergeId = data.merge_id;
const navigateToSynthesizedResults = () => {
router.push({
name: 'synthesizedResults'
@@ -235,7 +236,7 @@ const generateImage = async (options) => {
}, 1000)
const mergeFetch = async (index)=> {
const statusRes = await Request(`face/merge/${mergeData.merge_id}/status`, {}, 'GET', true)
const statusRes = await Request(`face/merge/${data.merge_id}/status`, {}, 'GET', true)
if (statusRes.res.status === 200) {
if (statusRes.json.status === 'success') {
@@ -257,6 +258,9 @@ const generateImage = async (options) => {
}
}
}
} else {
ElMessage.error(data.message);
}
} catch (error) {
console.error('Merge API error:', error);
@@ -394,11 +398,14 @@ const customUpload = async (options) => {
},
body: formData
})
.then(response => response.json())
.then(data => {
.then(async response => {
const data = await response.json()
if (response.status == 200 || response.status == 201) {
loading.hide();
console.log('Success:', data);
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 {

8
src/components/HomePage.vue
View File

@@ -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;
}

87
src/components/MyPhoto.vue
View File

@@ -34,7 +34,7 @@ const fetchImages = async () => {
}
})
const data = await response.json()
console.log('Success:', data)
if (response.status == 200 || response.status == 201) {
images.value = data.data;
const foundItem = data.data.find(item => item.is_public === true);
if (foundItem) {
@@ -53,6 +53,9 @@ const fetchImages = async () => {
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 => {
.then(async response => {
const data = await response.json()
if (response.status == 200 || response.status == 201) {
ElMessage.success('打榜成功！');
displayZhuli.value = true;
console.log('Success:', data);
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,14 +194,12 @@ 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)
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)
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
@@ -207,8 +214,6 @@ const handleHaibao = async (item) => {
haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
if (item && item.result_url) {
haibaoUrl.value = item.result_url
} else {
haibaoUrl.value = url
}
loading.hide()
}).catch(err => {
@@ -223,7 +228,47 @@ const handleHaibao = async (item) => {
})
})
})
} 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;

154
src/components/PhotoSquare.vue
View File

@@ -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,6 +42,7 @@ const fetchImages = async () => {
}
})
const data = await response.json()
if (response.status == 200 || response.status == 201) {
console.log('Success:', data)
images.value = data.data
if (data.my_published_photo) {
@@ -54,17 +54,26 @@ const fetchImages = async () => {
likesCount.value = data.my_published_photo.likes_count;
userImg.value = data.my_published_photo.avatar;
ranking.value = data.my_published_photo.ranking;
} else {
ElMessage.error(data.message);
emit('update:show', false);
}
} 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);
@@ -84,16 +93,20 @@ const getInviteInfo = ()=> {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
}
})
.then(response => response.json())
.then(data => {
.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 => {
.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) => {
/>
<div class="list-item">
<div class="flex-container-detail">
<div class="left-group">
<p class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</p>
<p class="photo-name">{{ item.user_name }}</p>
</div>
<p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
<div class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</div>
<div class="photo-name">{{ item.user_name }}</div>
<div class="right-item photo-name">{{ item.likes_count }}赞</div>
</div>
</div>
</div>
@@ -230,18 +245,16 @@ const getBackgroundImage = (item) => {
</div>
</div>
<div v-if="disableInviteHelp">
<div v-if="disableInviteHelp" class="share-main">
<div class="image-gallery-share">
<div class="image-wrapper-share">
<div class="image-container-share mask-background">
</div>
<img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
<div class="flex-container-detail-invite">
<div class="left-group-left">
<p class="photo-number">{{ rankingInvite }}</p>
<p class="photo-name">{{ nameInvite }}</p>
</div>
<p class="right-item photo-name" style="padding-left: 3vw;">{{ linkCountInvite }}赞</p>
<div class="photo-number">{{ rankingInvite }}</div>
<div class="photo-name">{{ nameInvite }}</div>
<div class="right-item photo-name">{{ linkCountInvite }}赞</div>
</div>
</div>
</div>
@@ -255,6 +268,11 @@ const getBackgroundImage = (item) => {
</template>
<style scoped>
.share-main {
display: flex;
flex-flow: column;
align-items: center;
}
.my-photo-desc {
position: absolute;
width: 87vw;
@@ -268,18 +286,24 @@ const getBackgroundImage = (item) => {
overflow-y: auto;
}
.list-item {
height: 8vw;
line-height: 50px;
position: relative;
}
.marker {
position: absolute;
}
.flex-container-detail-invite {
display: flex;
flex-flow: row;
justify-content: center;
position: relative;
top: -8vw;
display: flex;
justify-content: space-around;
align-items: center;
height: 11vw;
bottom: 10.5vw;
font-size: 3vw;
width: 100%;
padding: 0px 13vw;
}
.flex-container-detail-invite .photo-name {
max-width: 24vw;
}
.left-group-left {
display: flex;
@@ -290,32 +314,23 @@ const getBackgroundImage = (item) => {
.ranking-title {
width: 48vw;
position: absolute;
bottom: 20vw;
bottom: 2vw;
left: 27vw;
}
.ranking-title img {
width: 100%;
}
.image-gallery-share {
margin: 0 auto;
position: relative;
overflow-y: auto;
display: block;
width: 84vw;
height: 57vh;
top: 16%;
}
.image-wrapper-share {
position: relative;
margin-bottom: -10vw;
float: left;
margin-left: 4vw;
width: 69vw;
height: 57vw;
margin-top: 12vw;
}
.image-container-share {
width: 77vw;
height: 43vh;
width: 68vw;
height: 81vw;
background-image: url(/src/assets/images/test.webp);
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
@@ -327,27 +342,36 @@ const getBackgroundImage = (item) => {
}
.border-image-share {
position: absolute;
width: 72vw;
top: -0.5vw;
left: 2.6vw;
width: 63vw;
top: -0.8vw;
left: 3vw;
}
.bold {
font-weight: bold;
}
.photo-number {
color: red;
flex-shrink: 0;
padding-right: 2vw;
}
.photo-name {
min-width: 14vw;
max-width: 19vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #93551f;
}
.flex-container-detail {
position: relative;
position: absolute;
display: flex;
justify-content: center;
justify-content: space-around;
align-items: center;
height: 3vh;
top: -11vw;
font-size: 11px;
bottom: 5.5vw;
font-size: 3vw;
width: 100%;
padding: 0 4vw;
}
.flex-container {
display: flex;
@@ -369,7 +393,9 @@ const getBackgroundImage = (item) => {
}
.left-group p, .right-item {
margin: 0;
padding-left: 2vw;
margin-left: auto;
flex-shrink: 0;
}
.fixed-background-container {
background-image: url('../assets/images/paiming-border.webp');
@@ -392,13 +418,12 @@ const getBackgroundImage = (item) => {
.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;
@@ -406,13 +431,14 @@ const getBackgroundImage = (item) => {
flex-flow: row;
flex-wrap: wrap;
top: 26vw;
padding-bottom: 12vw;
}
.image-container {
width: 38vw;
height: 28vh;
background-image: url('../assets/images/test.webp');
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;

10
src/components/Popup.vue
View File

@@ -24,8 +24,9 @@ const confirmBtn = () => {
},
body: {}
})
.then(response => response.json())
.then(data => {
.then(async response => {
const data = await response.json()
if (response.status == 200 || response.status == 201) {
if (data.message === '您已经有一张发布的照片，不能再次发布') {
weui.alert('您已经有一张发布的照片，不能再次发布')
return
@@ -33,9 +34,12 @@ const confirmBtn = () => {
ElMessage.success('打榜成功！');
console.log('Success:', data);
return { success: true, data };
} else {
ElMessage.error(data.message);
}
})
.catch((error) => {
ElMessage.success('打榜失败！');
ElMessage.error('打榜失败！');
return { success: false, error };
});
emit('update:show', false);

10
src/components/SelectTemplateV2.vue
View File

@@ -166,18 +166,18 @@ const handleNavClick = (event) => {
}
.mask-image {
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
width: 39vw;
height: 52vw;
}
.border-img {
width: 39.5vw;
height: 54vw;
width: 39.7vw;
height: 54.4vw;
position: absolute;
top: -0.5vw;
left: 0;
top: -0.7vw;
left: -0.1vw;
}
.main {
height: 100%;

27
src/components/TodoList.vue
View File

@@ -34,6 +34,7 @@ import Haibao from "@/libs/haibao"
import bg from "../assets/images/haibao-bg.webp"
import mask from "../assets/images/haibao-mask.webp"
import haibaoCoverBorder from "../assets/images/haibao-cover.webp"
import haibaoCoverBorderNoTitle from "../assets/images/haibao-cover-no-title.webp"
const props = defineProps({
show: false,
})
@@ -54,9 +55,7 @@ const handleHaibao = async () => {
return
}
const loading = weui.loading()
// let userPicture = 'https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg'
let userPicture = await loadImage(globalStore.result_url)
// let userPicture = await loadImage('https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg')
const infos = Storage.get("userinfos")
const haibaoCover = new Haibao(951, 1607)
@@ -66,15 +65,23 @@ const handleHaibao = async () => {
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}&org_id=${infos.org_id}&merge_id=${mergeId}}`, 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 => {
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=${mergeId}`, 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 => {