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

0911 第一版

Browse Source
This commit is contained in:
yixu
2025-09-11 20:52:01 +08:00
parent 246edb68ab
commit e3783c5f0a
17 changed files with 2490 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -89,6 +89,8 @@ const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
const result = await Request('game/info', { refresh_official: refresh_official, refresh_cap_scan: refresh_cap_scan }, "GET")
if (result.res.status === 200) {
globalStore.draw_chances = result.json.draw_chances
globalStore.game_chances = result.json.game_chances
globalStore.invitees = result.json.invitees
globalStore.followed_official = result.json.followed_official
globalStore.cap_scan = result.json.cap_scan

399
src/components/GenerateImg.vue
View File

@@ -3,7 +3,11 @@ import { ref, computed, watch, onMounted } from "vue"
import { useRouter, useRoute } from 'vue-router'
import positionMaps from '../static/positionMaps.js'
import imagePositionMaps from '../static/imagePositionMaps.js'
import { RequestImg, Storage } from "../libs/utils"
import { Storage } from "../libs/utils"
import { globalStore } from "../globalstore.js";
import faceTemplate from "../static/ali_face_template.js";
import MyPhoto from './MyPhoto.vue'
import PhotoSquare from './PhotoSquare.vue'
defineProps({
show: true
@@ -14,41 +18,63 @@ onMounted(() => {
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { tr } from "element-plus/es/locales.mjs"
const imageUrl1 = ref('');
// 上传前的校验
// const beforeUpload = (file) => {
// const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
// if (!isJpgOrPng) {
// ElMessage.error('只能上传JPG或PNG格式的图片!');
// return false; // 返回false阻止上传
// }
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isLt2M) {
// ElMessage.error('图片大小不能超过2MB!');
// return false;
// }
// return true; // 返回true继续上传
// };
const beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
ElMessage.error('只能上传JPG或PNG格式的图片!');
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
ElMessage.error('图片大小不能超过2MB!');
return false;
}
return true;
};
const getTemplateIdsFromUrl = (response, url, index)=> {
const filename = url.split('/').pop();
const matchedTemplate = faceTemplate.find(template => template.name === filename);
if (!matchedTemplate) {
console.error(`No template found for filename: ${filename}`);
return null;
}
const dataItem = matchedTemplate.data[index];
if (!dataItem) {
console.error(`No data found at index ${index} for template: ${filename}`);
return null;
}
return {
"mergeId": response.id,
"template_id": matchedTemplate.template_id,
"templateFaceID": dataItem.templateFaceID
}
;
}
// 上传成功回调
// const handleSuccess = (response, index) => {
// console.log(index)
// imageUrl1.value = response.url;
// ElMessage.success('上传成功！');
// };
const handleSuccess = (response, index) => {
// 上传成功后，将文件信息添加到数组
if (response) {
const ids = getTemplateIdsFromUrl(response, window.location.href, index);
uploadedFiles.push({
templateIds: ids
});
}
uploadItems.value[index].imageUrl = response.url;
ElMessage.success('上传成功！');
};
// 上传失败回调
// const handleError = (error) => {
// // console.error('上传失败:', error);
// // ElMessage.error('上传失败，请重试！');
// uploadItems.value[0].imageUrl = "src/assets/images/demo.png";
// uploadItems.value[1].imageUrl = "src/assets/images/demo.png";
// uploadItems.value[2].imageUrl = "src/assets/images/demo.png";
// uploadItems.value[3].imageUrl = "src/assets/images/demo.png";
// uploadItems.value[4].imageUrl = "src/assets/images/demo.png";
// ElMessage.success('上传成功！');
// };
const handleError = (error) => {
console.error('上传失败:', error);
ElMessage.error('上传失败，请重试！');
};
// 根据imageUrl的结尾编号确定需要多少个上传项
const getUploadItemsCount = () => {
@@ -102,11 +128,157 @@ const clearUploadFile = (index) => {
if (uploadRefs.value[index]) {
uploadRefs.value[index].clearFiles();
uploadItems.value[index].imageUrl = '';
uploadedFiles.value.splice(index, 1);
}
};
const generateImage = () => {
// 存储上传成功的文件数据
const uploadedFiles = [];
const currentImageUrl = ref(null)
// const generateImage = (options) => {
// globalStore.generateStatus = true;
// const urlParams = new URLSearchParams(window.location.search);
// currentImageUrl.value = urlParams.get('imageUrl');
// globalStore.generateImgTemplates.push(currentImageUrl.value);
// disableClick.value = true;
// displayScanModel.value = true;
// const formData = {
// "template_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee",
// "faces": [
// {
// "image_id": 65,
// "template_face_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee_0"
// },
// {
// "image_id": 66,
// "template_face_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee_1"
// }
// ],
// "is_public": false
// }
// const timeoutPromise = new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve({ timedOut: true });
// }, 4000);
// });
// const apiPromise = fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// Accept: "application/json",
// 'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
// },
// body: JSON.stringify(formData)
// })
// .then(response => response.json())
// .then(data => {
// globalStore.mergeId = data.merge_id;
// fetch(`https://api.example.com/face/merge/${data.merge_id}/status`, {
// method: 'GET',
// headers: {
// 'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
// }
// })
// const res = response.json()
// console.log('get status Success:', res)
// console.log('merge Success:', data);
// return { success: true, data };
// })
// .catch((error) => {
// console.error('Error:', error);
// return { success: false, error };
// });
// Promise.race([apiPromise, timeoutPromise])
// .then(result => {
// if (result.success) {
// navigateToSynthesizedResults();
// }
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// }
const faces = [];
const generateImage = async (options) => {
console.log(uploadedFiles);
globalStore.generateStatus = true;
const urlParams = new URLSearchParams(window.location.search);
currentImageUrl.value = urlParams.get('imageUrl');
disableClick.value = true;
displayScanModel.value = true;
uploadedFiles.forEach(file => {
globalStore.generateImgTemplates.push({
merge_id: file.templateIds.mergeId,
backgroundImg: currentImageUrl.value
});
faces.push({
image_id: file.templateIds.mergeId,
template_face_id: file.templateIds.templateFaceID
});
});
const formData = {
"template_id": uploadedFiles[0].templateIds.template_id,
"faces": faces,
"is_public": false
}
try {
const mergeResponse = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json",
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
},
body: JSON.stringify(formData)
});
const mergeData = await mergeResponse.json();
globalStore.mergeId = mergeData.merge_id;
let statusSuccess = false;
const startTime = Date.now();
const timeoutDuration = 2000;
while (Date.now() - startTime < timeoutDuration) {
fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeData.merge_id}/status`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
}
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
if (data.status = 'success') {
globalStore.result_url = data.result_url;
statusSuccess = true;
}
})
.catch((error) => {
console.error('Error:', error);
});
}
if (statusSuccess) {
navigateToSynthesizedResults();
} else {
navigateToSynthesizedResults(); //TODO 上线删除
console.log('Status check timed out or failed');
}
} catch (error) {
console.error('Merge API error:', error);
}
}
const router = useRouter();
@@ -223,65 +395,91 @@ const imagePosition = (index) => {
};
};
// 自定义上传方法
const customUpload = async (options) => {
const { file, data, onProgress, onSuccess, onError } = options
try {
// FormData对象用于构建表单数据
const formData = new FormData()
formData.append('type', 'ali-face')
formData.append('image', file)
const config = {
fetch('https://huodong2.lzlj.com/api/faceFamily/upload/image', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
},
onUploadProgress: (progressEvent) => {
if (progressEvent.lengthComputable) {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
onProgress({ percent }) // 更新上传进度
}
}
}
// 使用你封装的Request方法调用API
const result = await RequestImg('upload/image', formData)
// API调用成功处理
if (result.code === 'success') { // code字段需要根据你的API实际返回调整
onSuccess(result.data) // result.data包含服务器返回的数据
} else {
onError(new Error(result.message || '上传失败'))
}
return result
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
onSuccess(data);
})
.catch((error) => {
console.error('Error:', error);
});
} catch (error) {
onError(error)
throw error
}
}
const displayScanModel = ref(false);
const disableClick = ref(false);
const isMyPhotoVisible = ref(false);
const isPhotoSquareVisible = ref(false);
const showMyPhoto = () => {
isMyPhotoVisible.value = true;
isPhotoSquareVisible.value = false;
};
const showPhotoSquare = () => {
isMyPhotoVisible.value = false;
isPhotoSquareVisible.value = true;
};
const navigateToSynthesizedResults = () => {
router.push({
name: 'synthesizedResults'
})
}
</script>
<template>
<div :show="show">
<div class="home-wrapper" style="z-index: 9;">
<div class="home-wrapper" :style="{
backgroundImage: displayScanModel
? 'url(src/assets/images/generate-img-loading-bg.png)'
: 'url(src/assets/images/generate-img-bg.png)'
}">
<div class="scene-item item-1">
<img src="../assets/images/back-btn.png" @click="goBack" alt="后退">
</div>
<div class="scene-item img-from-template scene-item-img" style="transition: none !important;">
<div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img">
<img :src="imageUrl" alt="模板图片">
</div>
<div class="scene-item item-2" @click="generateImage">
<div v-if="!displayScanModel" class="scene-item item-2">
<img src="../assets/images/generate-title.png" alt="描述">
</div>
<div v-if="!displayScanModel" class="scene-item item-3" @click="generateImage">
<img src="../assets/images/generate-btn.png" alt="开始合成">
</div>
<div class="upload-container">
<div class="scene-item item-4" v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible">
<img src="../assets/images/scan.png" class="blocked-image" alt="扫描框">
</div>
<img v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" src="../assets/images/scan-line.png" class="moving-image" alt="扫描line">
<div v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item item-5" @click="showMyPhoto" >
<img src="../assets/images/my-photo-btn.png" class="blocked-image" alt="查看我的照片">
</div>
<div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="upload-container">
<div v-for="(item, index) in uploadItems" :key="index" class="upload-item-wrapper">
<el-upload
:ref="(el) => (uploadRefs[index] = el)"
@@ -294,7 +492,7 @@ const customUpload = async (options) => {
accept="image/*"
>
<el-button class="upload-img-wrapper upload-btn" :style="buttonPosition(index + 1)">
<div class="scene-item item scene-item-img" :class="{ uploaded: item.imageUrl }"
<div class="scene-item item scene-item-img" :class="{ uploaded: item.imageUrl, 'no-pointer-events': disableClick }"
:style="{ width: buttonPosition(index + 1)['--item-width'] }">
<img
v-if="!item.imageUrl"
@@ -327,9 +525,39 @@ const customUpload = async (options) => {
</div>
</div>
</div>
<MyPhoto
v-if="isMyPhotoVisible"
@go-photo-square="showPhotoSquare"
v-model:show="isMyPhotoVisible"
/>
<PhotoSquare
v-else
@go-my-photo="showMyPhoto"
v-model:show="isPhotoSquareVisible"
/>
</template>
<style scoped>
.moving-image {
width: 100%;
position: absolute;
animation: moveUpDown 3s linear infinite;
z-index: 2;
}
@keyframes moveUpDown {
0%, 100% {
top: 44vw;
transform: translateY(0);
}
50% {
top: calc(100% + -40vw);
transform: translateY(-100%);
}
}
.no-pointer-events {
pointer-events: none;
}
.scene-item-img {
transition: none !important;
}
@@ -342,7 +570,6 @@ const customUpload = async (options) => {
z-index: 999;
}
.uploaded {
margin-top: -18px;
}
.upload-btn {
position: absolute;
@@ -410,7 +637,6 @@ const customUpload = async (options) => {
.home-wrapper {
width: 100%;
height: 92vh;
background-image: url('src/assets/images/generate-img-bg.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
@@ -421,11 +647,11 @@ const customUpload = async (options) => {
min-height: -webkit-fill-available;
}
.img-from-template {
width: 322px;
height: 436px;
margin-top: -28px;
width: 75vw;
height: 103vw;
margin-top: -6vw;
border-radius: 16px !important;
margin-left: 2px;
margin-left: 1vw;
}
.scene-item {
position: absolute;
@@ -439,7 +665,6 @@ const customUpload = async (options) => {
}
.scene-item:hover {
transform: scale(1.05);
z-index: 10;
}
@@ -451,39 +676,35 @@ const customUpload = async (options) => {
}
.item-1 {
width: 20px;
width: 5vw;
top: 6.7%;
left: 5%;
animation-delay: 0s;
}
.item-2 {
width: 240px;
bottom: 28px;
width: 70vw;
bottom: 15%;
animation-delay: 0s;
}
.item-3 {
width: 54vw;
bottom: 6vw;
animation-delay: 0s;
}
.item {
width: 48px;
width: 17vw;
}
.item-4 {
width: 48px;
top: 30.6%;
left: 44.5%;
width: 72vw;
top: 23.5%;
pointer-events: none;
}
.item-5 {
width: 48px;
top: 34%;
left: 72%;
}
.item-6 {
width: 48px;
top: 49.4%;
left: 36.6%;
}
.item-7 {
width: 48px;
top: 40%;
left: 57.5%;
width: 48vw;
bottom: 3vw;
animation-delay: 0s;
}
</style>

19
src/components/GenerateImgConfirm.vue
View File

@@ -16,11 +16,17 @@ const goToGenerateImgPage = () => {
})
}
const closeTodoList = () => {
router.push({
name: 'selectTemplateV2'
})
}
</script>
<template>
<div :show="show">
<div class="home-wrapper" style="z-index: 9;">
<div class="home-wrapper">
<div class="scene-item item-1" @click="closeTodoList">
<img src="../assets/images/close-btn.png" alt="关闭按钮">
</div>
@@ -36,7 +42,7 @@ const goToGenerateImgPage = () => {
.home-wrapper {
width: 100%;
height: 92vh;
background-image: url('src/assets/images/generate-img-confirm.png');
background-image: url('../assets/images/generate-img-confirm.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
@@ -49,9 +55,7 @@ const goToGenerateImgPage = () => {
.scene-item {
position: absolute;
z-index: 2;
cursor: pointer;
border-radius: 8px;
transition: all 0.4s ease;
overflow: hidden;
border: 3px solid transparent;
@@ -60,7 +64,6 @@ const goToGenerateImgPage = () => {
.scene-item:hover {
transform: scale(1.05);
z-index: 10;
}
.scene-item img {
@@ -71,15 +74,15 @@ const goToGenerateImgPage = () => {
}
.item-1 {
width: 40px;
width: 10vw;
top: 15%;
right: 4%;
animation-delay: 0s;
}
.item-2 {
width: 246px;
bottom: 28px;
width: 47vw;
bottom: 5vw;
animation-delay: 0s;
}
</style>

125
src/components/HomePage.vue
View File

@@ -1,16 +1,22 @@
<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRouter } from 'vue-router'
import globalToastEvent, { ToastType } from '../globalToastEvent';
import { Request, Storage } from "../libs/utils"
import faceFamily from "../assets/audio/faceFamily.mp3"
import MyPhoto from './MyPhoto.vue'
import PhotoSquare from './PhotoSquare.vue'
import globalToastEvent, { ToastType } from '../globalToastEvent';
import { globalStore } from "../globalstore.js";
defineProps({
show: true
})
const isMusicOn = ref(false);
const audioElement = ref(null);
const drawChances = ref(0);
const gameChances = ref(0);
onMounted(() => {
initUserGameInfos(true, true);
// 创建音频
audioElement.value = new Audio(faceFamily);
// 尝试自动播放
@@ -29,12 +35,12 @@ const tryAutoPlay = () => {
isMusicOn.value = true;
console.log("自动播放成功");
})
.catch(error => {
// 自动播放被阻止
console.log("自动播放被阻止，需要用户交互:", error);
isMusicOn.value = false;
audioElement.value.pause();
});
.catch(error => {
// 自动播放被阻止
console.log("自动播放被阻止，需要用户交互:", error);
isMusicOn.value = false;
audioElement.value.pause();
});
}
};
@@ -42,7 +48,7 @@ const tryAutoPlay = () => {
const toggleMusicState = () => {
isMusicOn.value = !isMusicOn.value;
if (!isMusicOn.value) {
audioElement.value.pause();
audioElement.value.pause();
} else {
audioElement.value.play().catch(error => {
console.log("播放失败:", error);
@@ -50,13 +56,6 @@ const toggleMusicState = () => {
}
};
const router = useRouter();
const navigateSelectTemplatePage = () => {
router.push({
name: 'selectTemplateV2'
})
}
const navigateTodoList = () => {
globalToastEvent.emit(ToastType.SHOW_TODO)
}
@@ -68,23 +67,58 @@ const handleRule = () => {
}
const handleLottery = () => {
globalToastEvent.emit(ToastType.SHOW_LOTTERY)
if (drawChances.value <= 0) return;
drawChances.value -= 1;
globalStore.draw_chances = drawChances.value
}
const router = useRouter();
const navigateSelectTemplatePage = () => {
if (gameChances.value <= 0) return;
gameChances.value -= 1;
globalStore.game_chances = gameChances.value
router.push({
name: 'selectTemplateV2'
})
}
const isMyPhotoVisible = ref(false);
const isPhotoSquareVisible = ref(false);
const activeTab = ref('my-photo')
const showMyPhoto = () => { activeTab.value = 'my-photo', isMyPhotoVisible.value = true; }
const showPhotoSquare=()=>{
activeTab.value='photo-square',
isPhotoSquareVisible.value = true;
}
const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
const result = await Request('game/info', { refresh_official: refresh_official, refresh_cap_scan: refresh_cap_scan }, "GET")
if (result.res.status === 200) {
drawChances.value = result.json.draw_chances
gameChances.value = result.json.game_chances
globalStore.draw_chances = drawChances.value
globalStore.game_chances = gameChances.value
}
}
</script>
<template>
<div :show="show">
<div class="home-wrapper">
<div class="scene-item item-1" @click="handleLottery">
<div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': drawChances <= 0 }">
<img src="../assets/images/lottery.png" alt="抽奖">
<div class="lottery-main">
<p class="lottery-value">3</p>
<p class="lottery-value">{{ drawChances }}</p>
</div>
</div>
<div class="scene-item item-2" @click="navigateSelectTemplatePage">
<div class="scene-item item-2" @click="navigateSelectTemplatePage" :class="{ 'disabled': gameChances <= 0 }">
<img src="../assets/images/join.png" alt="立即参与">
<div class="join-main">
<p class="join-value">2</p>
<p class="join-value">{{ gameChances }}</p>
</div>
</div>
<div class="scene-item item-3" @click="navigateTodoList">
@@ -105,14 +139,17 @@ const handleLottery = () => {
<div class="scene-item item-7" @click="handlePrizeList">
<img src="../assets/images/award.png" alt="奖励">
</div>
<div class="scene-item item-8">
<div class="scene-item item-8" @click="showMyPhoto">
<img src="../assets/images/my-photo.png" alt="我的照片">
</div>
<div class="scene-item item-9">
<div class="scene-item item-9" @click="showPhotoSquare">
<img src="../assets/images/photos.png" alt="照片广场">
</div>
</div>
</div>
<MyPhoto v-if="activeTab === 'my-photo'" @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
<PhotoSquare v-else @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
</template>
<style scoped>
@@ -132,10 +169,8 @@ const handleLottery = () => {
.scene-item {
position: absolute;
z-index: 2;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
animation: float 4s ease-in-out infinite;
@@ -143,7 +178,6 @@ const handleLottery = () => {
.scene-item:hover {
transform: scale(1.05);
z-index: 10;
}
.scene-item img {
@@ -154,7 +188,7 @@ const handleLottery = () => {
}
.item-1 {
width: 90px;
width: 21vw;
bottom: 0;
left: 0;
animation-delay: 0s;
@@ -164,11 +198,11 @@ const handleLottery = () => {
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 16px;
width: 4vw;
height: 3.5vw;
position: absolute;
top: 7px;
right: 28px;
top: 1.5vw;
right: 6.6vw;
color: #fff;
}
@@ -177,18 +211,17 @@ const handleLottery = () => {
}
.item-2 {
width: 200px;
width: 48vw;
bottom: 0;
animation-delay: 0s;
}
.join-main {
position: absolute;
top: 16px;
right: 8px;
width: 30px;
height: 30px;
line-height: 30px;
top: 3.4vw;
right: 2.4vw;
width: 7vw;
line-height: 7vw;
text-align: left;
}
@@ -202,49 +235,43 @@ const handleLottery = () => {
}
.item-3 {
width: 90px;
width: 21vw;
bottom: 0;
right: 0;
animation-delay: 0s;
}
.item-4 {
width: 46px;
width: 11vw;
top: 1.5%;
right: 1.5%;
animation-delay: 0s;
}
.item-5 {
width: 46px;
width: 11vw;
top: 1.5%;
right: 1.5%;
animation-delay: 0s;
}
.item-6 {
width: 62px;
width: 14.5vw;
top: 8%;
right: 0;
animation-delay: 0s;
}
.item-7 {
width: 62px;
width: 14.5vw;
top: 13.5%;
right: 0;
animation-delay: 0s;
}
.item-8 {
width: 50px;
width: 11vw;
bottom: 32%;
right: 1%;
animation-delay: 0s;
}
.item-9 {
width: 50px;
width: 11vw;
bottom: 23%;
right: 1%;
animation-delay: 0s;

338
src/components/MyPhoto.vue Normal file
View File

@@ -0,0 +1,338 @@
<script setup>
import { ref, onMounted, computed, watch } from "vue"
import { Request, Storage } from "../libs/utils"
import ModalTransition from "./ModalTransition.vue"
import Agreement from "./Agreement.vue"
import { useRouter } from 'vue-router'
import { globalStore } from "../globalstore.js";
import { ElMessage } from 'element-plus';
defineProps({
show: false
})
const emit = defineEmits(['go-photo-square']);
const router = useRouter();
const goBack = () => {
emit('update:show', false);
};
const imageList = ref([])
const fetchImages = async () => {
try {
const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
url.searchParams.append('my_only', '1');
url.searchParams.append('page', '1');
url.searchParams.append('per_page', '100');
const response = await fetch(url.toString(), {
method: 'GET',
headers: {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
}
})
const data = await response.json()
console.log('Success:', data)
images.value = data.data;
imageList.value = data;
// Check for any image with is_public = true after fetching
const hasPublicImage = images.value.some(item => item.is_public);
if (hasPublicImage) {
globalStore.chartsBattle = true;
// Find the index of the public image and set its border to active
const publicIndex = images.value.findIndex(item => item.is_public);
if (publicIndex !== -1) {
activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
}
}
} catch (error) {
console.error('Error:', error)
}
}
onMounted(fetchImages)
// 图片数据
const images = ref([]);
const defaultBorderImage = 'src/assets/images/my-photo-border.png';
const activeBorderImage = 'src/assets/images/my-photo-selected-border.png';
const activeBorders = ref(images.value.map(() => false));
let mergeId = '';
// 切换边框状态
const toggleBorder = (item, index) => {
// 先重置所有状态为 false
activeBorders.value = activeBorders.value.map(() => false);
// 然后设置当前点击的为 true
activeBorders.value[index] = true;
mergeId = item.id;
};
const handleDabangClick = () => {
fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${mergeId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json",
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
},
body: {}
})
.then(response => response.json())
.then(data => {
ElMessage.success('打榜成功！');
console.log('Success:', data);
globalStore.chartsBattle = true;
return { success: true, data };
})
.catch((error) => {
ElMessage.success('打榜失败！');
console.error('Error:', error);
return { success: false, error };
});
};
const handleZhuliClick = () => {
console.log('助力被点击');
};
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(response => response.json())
.then(data => {
console.log('Success:', data);
if (data.status = 'failed') {
item.result_url = 'src/assets/images/failed.png'
} else if (data.status = 'success') {
item.result_url = data.result_url;
}
})
.catch((error) => {
console.error('Error:', error);
});
}
const getBackgroundImage = (item) => {
// If result_url exists, use it
if (item.result_url) {
return item.result_url;
}
// Otherwise, search in generateImgTemplates for matching merge_id
const matchingTemplate = globalStore.generateImgTemplates.find(
template => template.merge_id === item.id
);
// Return the backgroundImg if found, or empty string as fallback
return matchingTemplate?.backgroundImg || '';
};
</script>
<template>
<ModalTransition class="myPhoto" :show="show">
<div class="myPhoto-bg">
<div class="scene-item item-1" @click="goBack">
<img src="../assets/images/close-btn.png" alt="关闭按钮">
</div>
<div class="scene-item item-3" @click="$emit('go-photo-square')">
<img src="../assets/images/zpgc.png" alt="照片广场">
</div>
<div class="image-gallery ">
<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.result_url" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">
<img
:src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
? activeBorderImage : defaultBorderImage"
class="border-image"
alt="border"
@click="!globalStore.chartsBattle && toggleBorder(item, index)"
/>
</div>
</div>
<div class="scene-item item-2">
<img
:src="!globalStore.chartsBattle
? 'src/assets/images/dabang.png'
: 'src/assets/images/zhuli.png'"
alt="角色图片"
@click="!globalStore.chartsBattle ? handleDabangClick() : handleZhuliClick()"
>
</div>
</div>
</ModalTransition>
<Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
</template>
<style scoped>
.refresh-btn {
width: 12vw;
position: absolute;
top: 12%;
right: 8%;
cursor: pointer;
z-index: 9;
}
.image-wrapper {
position: relative;
margin-bottom: 0;
float: left;
margin-right: 2vw;
margin-left: 2vw;
}
.border-image {
position: absolute;
width: 40vw;
top: 1.6333vh;
left: -0.4vw;
}
.image-gallery {
overflow-y: auto;
display: block;
width: 84vw;
height: 57vh;
position: absolute;
top: 28%;
}
.image-container {
width: 38vw;
height: 56vw;
top: 2.2vw;
margin-bottom: 3vw;
background-image: url('../assets/images/test.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: -webkit-fill-available;
position: relative;
cursor: pointer;
}
.mask-background {
-webkit-mask-image: url("../assets/images/my-photo-mengban.png");
mask-image: url("../assets/images/my-photo-mengban.png");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.content-image {
position: relative;
}
.myPhoto-bg {
width: 100%;
height: 92vh;
background-image: url('../assets/images/my-photo-bg.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: -webkit-fill-available;
}
.scene-item {
position: absolute;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
animation: float 4s ease-in-out infinite;
}
.scene-item:hover {
transform: scale(1.05);
}
.btn-login {
text-align: center;
border-radius: 1vw;
background-color: #70b2e2;
margin-top: 4vw;
padding: 3vw;
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%;
object-fit: cover;
display: block;
}
.btn-login.disable {
opacity: .6;
}
.btn-login.subloading {
opacity: .6;
}
.btn-login.subloading::before {
content: "";
position: absolute;
border: .5vw solid #fff;
border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
border-radius: 50%;
width: 3vw;
height: 3vw;
top: 30%;
left: calc(50% - 14vw);
animation: loginloading 1s linear infinite;
}
@keyframes loginloading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

382
src/components/PhotoSquare.vue Normal file
View File

@@ -0,0 +1,382 @@
<script setup>
import { ref, onMounted, computed, watch } from "vue"
import { Request, Storage } from "../libs/utils"
import ModalTransition from "./ModalTransition.vue"
import Agreement from "./Agreement.vue"
import { useRouter } from 'vue-router'
import { globalStore } from "../globalstore.js";
import { ElMessage } from 'element-plus';
defineProps({
show: false
})
const emit = defineEmits(['go-my-photo']);
const router = useRouter();
const goBack = () => {
emit('update:show', false);
};
const username = ref();
const likesCount = ref();
const userImg = ref();
const ranking = ref();
const fetchImages = async () => {
try {
const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
url.searchParams.append('my_only', '0');
const response = await fetch(url.toString(), {
method: 'GET',
headers: {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
}
})
const data = await response.json()
console.log('Success:', data)
images.value = data.data
username.value = data.my_published_photo.user_name;
likesCount.value = data.my_published_photo.likes_count;
userImg.value = data.my_published_photo.result_url;
ranking.value = data.my_published_photo.ranking;
} catch (error) {
console.error('Error:', error)
}
}
onMounted(fetchImages)
// 图片数据
const images = ref([]);
const disableInviteHelp = ref(true);
const userinfos = Storage.get("userinfos")
// TODO 差接口
const inviteHelp = ()=> {
const formData = {
invite_code: userinfos.invite_code,
merge_id: ''
}
fetch('https://huodong2.lzlj.com/api/faceFamily/face/like', {
method: 'POST',
headers: {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
disableInviteHelp.value = true;
ElMessage.success('点赞成功！');
})
.catch((error) => {
ElMessage.success('点赞失败！');
console.error('Error:', error);
});
}
</script>
<template>
<ModalTransition class="photoSquare" :show="show">
<div class="photoSquare-bg">
<div class="scene-item item-1" @click="goBack">
<img src="../assets/images/close-btn.png" alt="关闭按钮">
</div>
<div class="scene-item item-3" @click="$emit('go-my-photo')">
<img src="../assets/images/my-photo-tab.png" alt="我的照片">
</div>
<div v-if="!disableInviteHelp" class="image-gallery ">
<div
v-for="(item, index) in images"
:key="index"
class="image-wrapper"
>
<div class="image-container mask-background">
</div>
<img
src="../assets/images/zpgc-border.png"
class="border-image"
alt="border"
/>
<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>
</div>
</div>
<div v-if="!disableInviteHelp" class="fixed-background-container">
<div class="flex-container">
<div class="left-group">
<p class="photo-number">{{ ranking }}</p>
<img :src="userImg" class="user-img" alt="我的照片">
<p class="photo-name bold">{{ username }}</p>
</div>
<p class="right-item photo-name bold" style="padding-left: 3vw;">{{ likesCount }}赞</p>
</div>
</div>
<div v-if="disableInviteHelp">
<div class="image-gallery-share">
<div class="image-wrapper-share">
<div class="image-container-share mask-background">
</div>
<img src="../assets/images/zpgc-border.png" class="border-image-share" alt="border" />
<div class="flex-container-detail">
<div class="left-group">
<p class="photo-number">000</p>
<p class="photo-name">name</p>
</div>
<p class="right-item photo-name" style="padding-left: 3vw;">888赞</p>
</div>
</div>
</div>
<div class="ranking-title" @click="inviteHelp">
<img src="/src/assets/images/dianzan.png" alt="点赞">
</div>
</div>
</div>
</ModalTransition>
<Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
</template>
<style scoped>
.ranking-title {
width: 48vw;
position: absolute;
bottom: 20vw;
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;
}
.image-container-share {
width: 77vw;
height: 43vh;
background-image: url(/src/assets/images/test.png);
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: -webkit-fill-available;
position: relative;
cursor: pointer;
}
.border-image-share {
position: absolute;
width: 72vw;
top: -0.5vw;
left: 2.6vw;
}
.bold {
font-weight: bold;
}
.photo-number {
color: red;
}
.photo-name {
color: #93551f;
}
.flex-container-detail {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 3vh;
top: -11vw;
}
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 8vh;
padding: 0 6vw;
}
.left-group {
display: flex;
align-items: center;
gap: 1vw;
}
.user-img {
width: 8vw;
height: 8vw;
border-radius: 50%;
}
.left-group p, .right-item {
margin: 0;
}
.fixed-background-container {
background-image: url('../assets/images/paiming-border.png');
position: fixed;
bottom: 1vh;
left: 5vw;
width: 90vw;
height: 8vh;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
.image-wrapper {
position: relative;
margin-bottom: -10vw;
float: left;
margin-right: 2vw;
margin-left: 2vw;
}
.border-image {
position: absolute;
width: 40vw;
top: 1.6333vh;
left: -0.4vw;
}
.image-gallery {
overflow-y: auto;
display: block;
width: 84vw;
height: 57vh;
position: absolute;
top: 28%;
}
.image-container {
width: 38vw;
height: 28vh;
background-image: url('../assets/images/test.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: -webkit-fill-available;
position: relative;
cursor: pointer;
}
.mask-background {
-webkit-mask-image: url("../assets/images/my-photo-mengban.png");
mask-image: url("../assets/images/my-photo-mengban.png");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.content-image {
position: relative;
}
.photoSquare-bg {
width: 100%;
height: 92vh;
background-image: url('../assets/images/zpgc-bg.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: -webkit-fill-available;
}
.scene-item {
position: absolute;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
animation: float 4s ease-in-out infinite;
}
.scene-item:hover {
transform: scale(1.05);
}
.btn-login {
text-align: center;
border-radius: 1vw;
background-color: #70b2e2;
margin-top: 4vw;
padding: 3vw;
color: #fff;
position: relative;
}
.item-1 {
top: 9%;
width: 10vw;
right: 4%;
}
.item-3 {
top: 16.3vh;
width: 32vw;
position: absolute;
right: 11vw;
}
.scene-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.btn-login.disable {
opacity: .6;
}
.btn-login.subloading {
opacity: .6;
}
.btn-login.subloading::before {
content: "";
position: absolute;
border: .5vw solid #fff;
border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
border-radius: 50%;
width: 3vw;
height: 3vw;
top: 30%;
left: calc(50% - 14vw);
animation: loginloading 1s linear infinite;
}
@keyframes loginloading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

149
src/components/Popup.vue Normal file
View File

@@ -0,0 +1,149 @@
<script setup>
import { ref, computed, watch } from "vue"
import { Request, Storage } from "../libs/utils"
import ModalTransition from "./ModalTransition.vue"
import Agreement from "./Agreement.vue"
import { globalStore } from "../globalstore.js";
import { ElMessage } from 'element-plus';
defineProps({
show: false
})
const emit = defineEmits(['update:show']);
const cancelBtn = () => {
emit('update:show', false);
}
const confirmBtn = () => {
fetch(`https://huodong2.lzlj.com/api/faceFamily/face/publish/${globalStore.mergeId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json",
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
},
body: {}
})
.then(response => response.json())
.then(data => {
ElMessage.success('打榜成功！');
console.log('Success:', data);
return { success: true, data };
})
.catch((error) => {
ElMessage.success('打榜失败！');
return { success: false, error };
});
emit('update:show', false);
}
</script>
<template>
<ModalTransition class="popup" :show="show">
<div class="popup-bg">
<div class="scene-item item-1">
<img src="../assets/images/confirm.png" @click="confirmBtn" alt="确认">
</div>
<p class="message">温馨提示：每位用户只能选择一张合影参与打榜，一经确认，在打榜期间将无法更换。</p>
<div class="scene-item item-2">
<img src="../assets/images/cancel.png" @click="cancelBtn" alt="取消">
</div>
</div>
</ModalTransition>
<Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
</template>
<style scoped>
.message {
width: 60vw;
position: absolute;
top: 42%;
color: #774107;
}
.popup-bg {
width: 100%;
height: 92vh;
background-image: url('../assets/images/popup.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: -webkit-fill-available;
}
.scene-item {
position: absolute;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
animation: float 4s ease-in-out infinite;
}
.scene-item:hover {
transform: scale(1.05);
}
.btn-login {
text-align: center;
border-radius: 1vw;
background-color: #70b2e2;
margin-top: 4vw;
padding: 3vw;
color: #fff;
position: relative;
}
.item-1 {
top: 55%;
width: 40vw;
right: 10%;
}
.item-2 {
top: 55%;
width: 40vw;
left: 10%;
}
.scene-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.btn-login.disable {
opacity: .6;
}
.btn-login.subloading {
opacity: .6;
}
.btn-login.subloading::before {
content: "";
position: absolute;
border: .5vw solid #fff;
border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
border-radius: 50%;
width: 3vw;
height: 3vw;
top: 30%;
left: calc(50% - 14vw);
animation: loginloading 1s linear infinite;
}
@keyframes loginloading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

41
src/components/SelectTemplateV2.vue
View File

@@ -1,13 +1,13 @@
<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router'
import GenerateImgConfirm from './GenerateImgConfirm.vue'
defineProps({
show: true
})
const menuData = ref([
{
title: '神仙',
imgSrc: 'src/assets/images/generate/shenxian.png',
activeImgSrc: 'src/assets/images/generate/shenxian-selected.png',
children: [
@@ -20,7 +20,6 @@ const menuData = ref([
]
},
{
title: '仙侠',
imgSrc: 'src/assets/images/generate/xianxia.png',
activeImgSrc: 'src/assets/images/generate/xianxia-selected.png',
children: [
@@ -33,7 +32,6 @@ const menuData = ref([
]
},
{
title: '复古',
imgSrc: 'src/assets/images/generate/fugu.png',
activeImgSrc: 'src/assets/images/generate/fugu-selected.png',
children: [
@@ -46,7 +44,6 @@ const menuData = ref([
]
},
{
title: '新中式',
imgSrc: 'src/assets/images/generate/xinzhongshi.png',
activeImgSrc: 'src/assets/images/generate/xinzhongshi-selected.png',
children: [
@@ -59,7 +56,6 @@ const menuData = ref([
]
},
{
title: '露营',
imgSrc: 'src/assets/images/generate/luying.png',
activeImgSrc: 'src/assets/images/generate/luying-selected.png',
children: [
@@ -72,7 +68,6 @@ const menuData = ref([
]
},
{
title: '派对',
imgSrc: 'src/assets/images/generate/paidui.png',
activeImgSrc: 'src/assets/images/generate/paidui-selected.png',
children: [
@@ -133,8 +128,8 @@ const getImageStyle = (index, actived)=> {
console.log(actived)
return {
position: 'absolute',
width: actived? index === 3? '68px' : '54px' : index === 3 ? '66px' : '44px',
top: actived? '14.2%' : '15%',
width: actived? index === 3? '16vw' : '13vw' : index === 3 ? '15vw' : '10.8vw',
top: actived? '14%' : '15%',
left: calculateMenuLevel1Left(index, actived) + '%'
}
}
@@ -174,7 +169,7 @@ const goToGenerateImgPage = (item) => {
<template>
<div :show="show">
<div class="home-wrapper" style="z-index: 9;">
<div class="home-wrapper">
<div class="scene-item item-1">
<img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
</div>
@@ -214,13 +209,6 @@ const goToGenerateImgPage = (item) => {
class="content-panel"
:class="{ active: activeContent === index }"
>
<div class="content-header">
<div class="breadcrumb">
<span>{{ getMenuLevelTitle(1) }}</span>
<span>{{ getMenuLevelTitle(2) }}</span>
</div>
<h2>{{ item.title }}</h2>
</div>
</div>
</div>
@@ -235,8 +223,8 @@ const goToGenerateImgPage = (item) => {
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 14px;
margin-top: 192px;
gap: 3vw;
margin-top: 43vw;
overflow: hidden;
overflow-y: auto;
}
@@ -255,15 +243,15 @@ const goToGenerateImgPage = (item) => {
background-size: cover;
background-repeat: no-repeat;
position: relative;
width: 168px;
height: 224px;
width: 39vw;
height: 52vw;
}
.border-img {
width: 170px;
height: 231px;
width: 39.5vw;
height: 54vw;
position: absolute;
top: -2px;
left: 0px;
top: -0.5vw;
left: 0;
}
.home-wrapper {
width: 100%;
@@ -281,10 +269,8 @@ const goToGenerateImgPage = (item) => {
.scene-item {
position: absolute;
z-index: 2;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
animation: float 4s ease-in-out infinite;
@@ -292,7 +278,6 @@ const goToGenerateImgPage = (item) => {
.scene-item:hover {
transform: scale(1.05);
z-index: 10;
}
.scene-item img {
@@ -303,7 +288,7 @@ const goToGenerateImgPage = (item) => {
}
.item-1 {
width: 20px;
width: 5vw;
top: 6.7%;
left: 5%;
animation-delay: 0s;

134
src/components/SynthesizedResults.vue Normal file
View File

@@ -0,0 +1,134 @@
<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router'
import Popup from './Popup.vue'
import { globalStore } from "../globalstore.js";
import globalToastEvent, { ToastType } from '../globalToastEvent';
defineProps({
show: true
})
const isPopupVisible = ref(false);
const chartsBattle = ()=> {
globalStore.chartsBattle = true;
isPopupVisible.value = true;
}
const router = useRouter();
const navigateToHome = () => {
router.push({
name: 'home'
})
}
const handleLottery = () => {
globalToastEvent.emit(ToastType.SHOW_LOTTERY)
}
</script>
<template>
<div>
<div class="home-wrapper">
<div class="scene-item item-1">
<img src="../assets/images/go-home-btn.png" @click="navigateToHome" alt="回到首页">
</div>
<div class="mask-background mask-image" :style="{ backgroundImage: `url(${globalStore.result_url})` }">
</div>
<img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版">
<div class="scene-item item-2">
<img src="../assets/images/charts-battle.png" @click="chartsBattle" alt="参与打榜">
</div>
<div class="scene-item item-3" @click="handleLottery">
<img src="../assets/images/instant-win.png" alt="立即抽奖">
</div>
</div>
</div>
<Popup v-model:show="isPopupVisible" />
</template>
<style scoped>
.mengban-border {
width: 85vw;
position: absolute;
top: 13%;
}
.mask-background {
-webkit-mask-image: url("../assets/images/mengban.png");
mask-image: url("../assets/images/mengban.png");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask-image {
/* background-image: url("../assets/images/haibao-bg.webp"); */
background-size: cover;
background-repeat: no-repeat;
position: relative;
width: 100vw;
height: 60vh;
}
.home-wrapper {
width: 100%;
height: 92vh;
background-image: url('../assets/images/img-result-bg.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: -webkit-fill-available;
}
.scene-item {
position: absolute;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
animation: float 4s ease-in-out infinite;
}
.scene-item:hover {
transform: scale(1.05);
}
.scene-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.item-1 {
width: 16vw;
top: 6.7%;
left: 5%;
animation-delay: 0s;
}
.item-2 {
width: 45vw;
bottom: 3%;
left: 5%;
}
.item-3 {
width: 45vw;
bottom: 3%;
right: 5%;
}
</style>

6
src/components/TodoList.vue
View File

@@ -152,7 +152,6 @@ const handleScan = (e) => {
.scene-item {
position: absolute;
z-index: 2;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
@@ -163,7 +162,6 @@ const handleScan = (e) => {
.scene-item:hover {
transform: scale(1.05);
z-index: 10;
}
.scene-item img {
@@ -174,14 +172,14 @@ const handleScan = (e) => {
}
.item-1 {
width: 40px;
width: 10vw;
bottom: 54%;
right: 3%;
animation-delay: 0s;
}
.item-1 {
width: 40px;
width: 10vw;
bottom: 54%;
right: 3%;
animation-delay: 0s;

15
src/globalstore.js
View File

@@ -1,10 +1,17 @@
import { reactive } from "vue"
export const globalStore = reactive({
draw_chances: 0,
game_chances: 0,
lotteryCount: 0,
result_url: '',
mergeId: 61,
generateStatus: false,
generateImgTemplates: [],
chartsBattle: false,
invitees: 0,
followed_official: false,
cap_scan: 0,
lotteryCount: 0,
game_chances_view_recipes: 0,
POINT_1_ICESIP: 100,
POINT_1_ICON: 100,
@@ -12,13 +19,13 @@ export const globalStore = reactive({
CONSUME_POINT_1_PER_DRAW: 1000,
MAX_INVITE_DAILY: 5,
MAX_VIEW_RECIPES_DAILY: 3,
updateViewRecipesCount () {
this.game_chances_view_recipes = this.game_chances_view_recipes >= this.MAX_VIEW_RECIPES_DAILY ? this.MAX_VIEW_RECIPES_DAILY : this.game_chances_view_recipes + 1
},
lotteryCut () {
this.lotteryCount--
},
lotteryAdd () {
this.lotteryCount++
},
updateViewRecipesCount () {
this.game_chances_view_recipes = this.game_chances_view_recipes >= this.MAX_VIEW_RECIPES_DAILY ? this.MAX_VIEW_RECIPES_DAILY : this.game_chances_view_recipes + 1
}
})

12
src/router/routes.js
View File

@@ -3,6 +3,8 @@ import TodoList from '../../src/components/HomePage.vue'
import GenerateImg from '../../src/components/GenerateImg.vue'
import SelectTemplateV2 from '../../src/components/SelectTemplateV2.vue'
import GenerateImgConfirm from '../../src/components/GenerateImgConfirm.vue'
import MyPhoto from '../../src/components/MyPhoto.vue'
import SynthesizedResults from '../../src/components/SynthesizedResults.vue'
export default [
{
@@ -30,6 +32,16 @@ export default [
name: 'generateImgConfirm',
component: GenerateImgConfirm
},
{
path: '/myPhoto',
name: 'myPhoto',
component: MyPhoto
},
{
path: '/synthesizedResults',
name: 'synthesizedResults',
component: SynthesizedResults
},
// {
// path: '/todoList',
// name: 'todo',

1049
src/static/ali_face_template.js Normal file
View File

File diff suppressed because it is too large Load Diff