0911 第一版
This commit is contained in:
yixu
338
src/components/MyPhoto.vue
Normal file
338
src/components/MyPhoto.vue
Normal 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>
|
||||
Reference in New Issue
Block a user