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

update

Browse Source
This commit is contained in:
yixu
2025-09-23 13:10:15 +08:00
parent 465ac8b15f
commit 1e4244b92d
2 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/no-btn.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

101
src/components/MyPhoto.vue
View File

@@ -37,38 +37,39 @@ const fetchImages = async () => {
if (response.status == 200 || response.status == 201) { if (response.status == 200 || response.status == 201) {
// 只保留result_url存在的记录 // 只保留result_url存在的记录
images.value = data.data.filter(item => item.result_url); images.value = data.data.filter(item => item.result_url);
images.value = [ // 测试数据
{ // images.value = [
"id": 186, // {
"status": "success", // "id": 186,
"error_message": null, // "status": "success",
"is_public": false, // "error_message": null,
"result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250919\/face-merge-717b50c3-9c38-4713-929a-49d072b90ab6.jpg", // "is_public": false,
"likes_count": 0, // "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250919\/face-merge-717b50c3-9c38-4713-929a-49d072b90ab6.jpg",
"created_at": "2025-09-19T04:30:26.000000Z", // "likes_count": 0,
"user_name": "\u4f9d\u65ed" // "created_at": "2025-09-19T04:30:26.000000Z",
}, // "user_name": "\u4f9d\u65ed"
{ // },
"id": 155, // {
"status": "success", // "id": 155,
"error_message": null, // "status": "success",
"is_public": false, // "error_message": null,
"result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-1d2ddf63-b029-48f8-b0b7-de7643dbd184.jpg", // "is_public": false,
"likes_count": 0, // "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-1d2ddf63-b029-48f8-b0b7-de7643dbd184.jpg",
"created_at": "2025-09-17T13:37:08.000000Z", // "likes_count": 0,
"user_name": "\u4f9d\u65ed" // "created_at": "2025-09-17T13:37:08.000000Z",
}, // "user_name": "\u4f9d\u65ed"
{ // },
"id": 156, // {
"status": "success", // "id": 156,
"error_message": null, // "status": "success",
"is_public": false, // "error_message": null,
"result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-eda32a25-4244-4041-8db8-25aeb41f5a2f.jpg", // "is_public": false,
"likes_count": 2, // "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-eda32a25-4244-4041-8db8-25aeb41f5a2f.jpg",
"created_at": "2025-09-17T13:40:49.000000Z", // "likes_count": 2,
"user_name": "\u4f9d\u65ed" // "created_at": "2025-09-17T13:40:49.000000Z",
} // "user_name": "\u4f9d\u65ed"
] // }
// ]
const foundItem = images.value.find(item => item.is_public === true); const foundItem = images.value.find(item => item.is_public === true);
if (foundItem) { if (foundItem) {
globalStore.result_url = foundItem.result_url; globalStore.result_url = foundItem.result_url;
@@ -108,18 +109,16 @@ const images = ref([]);
import defaultBorderImage from '../assets/images/my-photo-border.webp'; import defaultBorderImage from '../assets/images/my-photo-border.webp';
import activeBorderImage from '../assets/images/my-photo-selected-border.webp'; import activeBorderImage from '../assets/images/my-photo-selected-border.webp';
import inActiveBorderImage from '../assets/images/no-btn.webp';
const activeBorders = ref(images.value.map(() => false)); const activeBorders = ref(images.value.map(() => false));
// 切换边框状态 // 切换边框状态
const toggleBorder = (item, index) => { const toggleBorder = (item, index) => {
openHaibao(item);
if (!globalStore.chartsBattle && item.result_url !== failedImg) {
activeBorders.value = activeBorders.value.map(() => false); activeBorders.value = activeBorders.value.map(() => false);
// 如果没有打榜，点击切换图片时，把当前背景图赋值给globalStore.result_url做为最新的背景图 // 如果没有打榜，点击切换图片时，把当前背景图赋值给globalStore.result_url做为最新的背景图
globalStore.result_url = item.result_url; globalStore.result_url = item.result_url;
activeBorders.value[index] = true; activeBorders.value[index] = true;
globalStore.mergeId = item.id; globalStore.mergeId = item.id;
}
}; };
const handleDabangClick = () => { const handleDabangClick = () => {
@@ -316,6 +315,18 @@ markers.value = [
{ x: 0, y: 32, width: 50, height: 14 } { x: 0, y: 32, width: 50, height: 14 }
]; ];
const getBorder = (item, index) => {
if (globalStore.chartsBattle && index !== 0) {
return inActiveBorderImage;
} else {
if ((activeBorders.value[index] || (globalStore.chartsBattle && item.is_public))) {
return activeBorderImage;
} else {
return defaultBorderImage;
}
}
}
</script> </script>
@@ -364,11 +375,11 @@ markers.value = [
</div> </div>
<img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)"
src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新"> src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
<img :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public)) <img :src="getBorder(item, index)" class="border-image" alt="border"
? activeBorderImage : defaultBorderImage" class="border-image" alt="border" @click.stop="downloadGenerateImg(item)"
@click="toggleBorder(item, index)" /> />
<!-- <img v-if="item.result_url !== failedImg" <div class="mask-overlay"
src="../assets/images/download.webp" class="download-btn" alt="下载图片"> --> @click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)"></div>
</div> </div>
</div> </div>
<div class="scene-item item-2"> <div class="scene-item item-2">
@@ -388,6 +399,16 @@ markers.value = [
</template> </template>
<style scoped> <style scoped>
/* 蒙版样式 */
.mask-overlay {
position: absolute;
bottom: 0;
left: 14vw;
width: 10vw;
height: 8vw;
z-index: 2;
cursor: pointer;
}
.scroller { .scroller {
height: 124vw; height: 124vw;
overflow-y: auto; overflow-y: auto;