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

分享增加合成次数

Browse Source
This commit is contained in:
xiaoaojiao
2025-09-19 22:20:26 +08:00
parent 865a2929b9
commit dbe781c402
1 changed files with 70 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/MyPhoto.vue
View File

@@ -21,7 +21,7 @@ const goBack = () => {
const imageList = ref([])
const displayZhuli = ref(false);
const fetchImages = async () => {
try {
const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
url.searchParams.append('my_only', '1');
@@ -58,7 +58,7 @@ const fetchImages = async () => {
ElMessage.error(data.message);
}
} catch (error) {
console.error('Error:', error)
console.error('Error:', error)
}
}
@@ -72,7 +72,7 @@ watch(() => props.show, async (newVal) => {
// 图片数据
const images = ref([]);
import defaultBorderImage from '../assets/images/my-photo-border.webp';
import activeBorderImage from '../assets/images/my-photo-selected-border.webp';
@@ -100,21 +100,21 @@ const handleDabangClick = () => {
},
body: {}
})
.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.error('打榜失败！');
return { success: false, error };
});
.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.error('打榜失败！');
return { success: false, error };
});
};
const handleZhuliClick = () => {
@@ -130,28 +130,28 @@ const downloadGenerateImg = (item) => {
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)=> {
const getGenerateImgStatus = async (item) => {
fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
}
})
.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;
.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);
}
} else {
ElMessage.error(data.message);
}
})
.catch((error) => {
ElMessage.error('获取状态失败！');
});
})
.catch((error) => {
ElMessage.error('获取状态失败！');
});
}
const getBackgroundImage = (item) => {
@@ -168,7 +168,7 @@ import Haibao from "@/libs/haibao";
import mask from "../assets/images/haibao-mask.webp";
import haibaoCoverBorder from "../assets/images/haibao-cover.webp";
import bg from "../assets/images/haibao-bg.webp"
const loadImage = (src)=> {
const loadImage = (src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "Anonymous";
@@ -240,6 +240,10 @@ const handleHaibao = async (item) => {
})
})
if (!globalStore.first_share_today) {
Request(`face/share/${globalStore.mergeId}`)
}
const haibaoCoverNoTitle = new Haibao(951, 1607)
haibaoCoverNoTitle.add(userPicture, 0, 50, 951, 1698)
haibaoCoverNoTitle.add(mask, 10, 100)
@@ -286,16 +290,12 @@ markers.value = [
<img src="../assets/images/close-btn.webp" alt="关闭按钮">
</div>
<div v-for="(marker, index) in markers"
:key="index"
class="marker"
:style="{
left: marker.x + 'vw',
top: marker.y + 'vw',
width: marker.width + 'vw',
height: marker.height + 'vw'
}"
@click.stop="$emit('go-photo-square')">
<div v-for="(marker, index) in markers" :key="index" class="marker" :style="{
left: marker.x + 'vw',
top: marker.y + 'vw',
width: marker.width + 'vw',
height: marker.height + 'vw'
}" @click.stop="$emit('go-photo-square')">
</div>
<p class="my-photo-desc">每位会员只能选一张照片参与打榜，点赞前30名即可获得中秋精美礼品，速速邀请好友为你点赞吧！</p>
<div class="image-gallery">
@@ -323,29 +323,21 @@ markers.value = [
</div>
</div>
</RecycleScroller> -->
<div
v-for="(item, index) in images"
:key="index"
class="image-wrapper"
>
<div class="image-container mask-background"
:style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
>
</div>
<img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
<img
:src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
? activeBorderImage : defaultBorderImage"
class="border-image"
alt="border"
@click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)"
/>
<img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)" src="../assets/images/download.webp" class="download-btn" alt="下载图片">
<div v-for="(item, index) in images" :key="index" class="image-wrapper">
<div class="image-container mask-background" :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
</div>
<img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)"
src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
<img :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
? activeBorderImage : defaultBorderImage" class="border-image" alt="border"
@click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)" />
<img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)"
src="../assets/images/download.webp" class="download-btn" alt="下载图片">
</div>
</div>
<div class="scene-item item-2">
<img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力" >
<img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜" >
<img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力">
<img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜">
</div>
<div class="fullsection" v-show="haibaoShow">
@@ -364,13 +356,16 @@ markers.value = [
height: 124vw;
overflow-y: auto;
}
.list-item {
height: 2vw;
line-height: 50px;
}
.marker {
position: absolute;
}
.fullsection {
position: fixed;
top: 0;
@@ -418,6 +413,7 @@ markers.value = [
color: #855211;
font-size: 3.6vw;
}
.download-btn {
width: 12.6vw;
position: absolute;
@@ -425,6 +421,7 @@ markers.value = [
right: 3vw;
cursor: pointer;
}
.refresh-btn {
width: 12vw;
position: absolute;
@@ -432,6 +429,7 @@ markers.value = [
right: 3vw;
cursor: pointer;
}
.image-wrapper {
position: relative;
margin-right: 2vw;
@@ -439,12 +437,14 @@ markers.value = [
width: 38vw;
height: 59vw;
}
.border-image {
position: absolute;
width: 40vw;
top: 2.8vw;
left: -0.8vw;
}
.image-gallery {
overflow-y: auto;
overflow-x: hidden;
@@ -503,6 +503,7 @@ markers.value = [
position: relative;
min-height: -webkit-fill-available;
}
.scene-item {
position: absolute;
cursor: pointer;
@@ -516,6 +517,7 @@ markers.value = [
.scene-item:hover {
transform: scale(1.05);
}
.btn-login {
text-align: center;
border-radius: 1vw;
@@ -525,22 +527,26 @@ markers.value = [
color: #fff;
position: relative;
}
.item-1 {
top: 9%;
width: 10vw;
right: 4%;
}
.item-3 {
top: 16.3vh;
width: 32vw;
position: absolute;
left: 11vw;
}
.item-2 {
position: fixed;
width: 100%;
bottom: 0;
}
.scene-item img {
width: 100%;
height: 100%;