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-14 18:29:52 +08:00
parent 5bcd9057fd
commit e26aae5805
8 changed files with 163 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/GenerateImg.vue
View File

@@ -19,7 +19,7 @@ onMounted(() => {
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { tr } from "element-plus/es/locales.mjs"
const router = useRouter();
// 上传前的校验
const beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
@@ -83,7 +83,12 @@ const handleError = (error) => {
const uploadItems = ref([])
const initializeUploadItems = () => {
const initializeUploadItems = (item) => {
if (!item) {
router.push({
name: 'home'
});
}
const count = globalStore.people_count;
const items = Array(count).fill(null).map(() => ({
@@ -97,8 +102,8 @@ const initializeUploadItems = () => {
const route = useRoute()
const imageUrl = ref(globalStore.select_template);
watch(imageUrl, () => {
initializeUploadItems()
watch(imageUrl, (item) => {
initializeUploadItems(item)
}, { immediate: true })
const uploadRefs = ref([]);
@@ -210,7 +215,6 @@ const generateImage = async (options) => {
}
}
const router = useRouter();
const goBack = () => {
router.back();
};
@@ -370,7 +374,6 @@ const showPhotoSquare = () => {
isPhotoSquareVisible.value = true;
};
</script>
<template>
@@ -421,7 +424,7 @@ const showPhotoSquare = () => {
>
<el-button class="upload-img-wrapper upload-btn" :style="buttonPosition(index + 1)">
<div class="scene-item item scene-item-img" :class="{ uploaded: item.imageUrl, 'no-pointer-events': disableClick }"
:style="{ width: buttonPosition(index + 1)['--item-width'] }">
:style="{ width: buttonPosition(index + 1)['--item-width'], 'z-index': 11 }">
<img
v-if="!item.imageUrl"
src="../assets/images/upload-img.png"
@@ -454,12 +457,10 @@ const showPhotoSquare = () => {
</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"
/>

64
src/components/HomePage.vue
View File

@@ -1,12 +1,13 @@
<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRouter } from 'vue-router'
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";
import Login from '../components/Login.vue'
import { isWeixin, isLogin, getParam, Storage, Request } from "../libs/utils"
defineProps({
show: true
@@ -86,6 +87,66 @@ const showPhotoSquare=()=>{
isMyPhotoVisible.value = false;
isPhotoSquareVisible.value = true;
}
const loginShow = ref(false)
// 登录状态
const userStatus = async (callback) => {
const pageCode = getParam("code")
const userinfos = Storage.get("userinfos")
if (isWeixin()) {
if (!pageCode) {
weui.alert("未获取到code")
return
}
const weixinResult = await Request("wechat/login", {
code: pageCode
})
Storage.set("userinfos", weixinResult.json)
if (weixinResult.json && weixinResult.json.phone) {
loginShow.value = false
callback && callback()
} else {
loginShow.value = true
}
} else {
loginShow.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) {
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
globalStore.game_chances_view_recipes = result.json.game_chances_view_recipes
globalStore.MAX_VIEW_RECIPES_DAILY = result.json.constants.MAX_VIEW_RECIPES_DAILY
globalStore.CONSUME_POINT_1_PER_DRAW = result.json.constants.CONSUME_POINT_1_PER_DRAW
globalStore.MAX_CAP_SCAN = result.json.constants.MAX_CAP_SCAN
globalStore.MAX_INVITE_DAILY = result.json.constants.MAX_INVITE_DAILY
globalToastEvent.emit(ToastType.MOUNTED)
}
}
const handleLoginSuccess = async () => {
console.log("已登录")
loginShow.value = false
await initUserGameInfos(true, true)
}
if (isLogin()) {
handleLoginSuccess()
} else {
userStatus(handleLoginSuccess)
}
</script>
<template>
@@ -132,6 +193,7 @@ const showPhotoSquare=()=>{
<MyPhoto @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
<PhotoSquare @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
<Login :show="loginShow" @login-success="handleLoginSuccess" />
</template>
<style scoped>

30
src/components/MyPhoto.vue
View File

@@ -16,9 +16,7 @@ watch(() => props.show, async (newVal) => {
if (!newVal) {
return
}
if (newVal) {
fetchImages();
}
fetchImages();
})
const emit = defineEmits(['go-photo-square', 'update:show']);
@@ -47,6 +45,7 @@ const fetchImages = async () => {
images.value = data.data;
const foundItem = data.data.find(item => item.is_public === true);
if (foundItem) {
globalStore.result_url = foundItem.result_url;
displayZhuli.value = true;
} else {
displayZhuli.value = false;
@@ -148,7 +147,15 @@ import Haibao from "@/libs/haibao";
import mask from "../assets/images/haibao-mask.png";
import haibaoCoverBorder from "../assets/images/haibao-cover.png";
import bg from "../assets/images/haibao-bg.png"
// import userPicture from "../assets/images/home-bg.png"; //TODO: globalStore.result_url 这里得图片后面要换成用户参榜的图片
const loadImage = (src)=> {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "Anonymous";
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`无法加载图片: ${src}`));
img.src = src;
});
}
const haibaoShow = ref(false);
const haibaoUrl = ref('');
@@ -170,6 +177,7 @@ const handleHaibao = async () => {
const loading = weui.loading()
const infos = Storage.get("userinfos")
const haibaoCover = new Haibao(951, 1607)
const userPicture = await loadImage(globalStore.result_url)
haibaoCover.add(userPicture, 0, 0)
haibaoCover.add(mask, 10, 100)
haibaoCover.add(haibaoCoverBorder, 0, 0)
@@ -204,7 +212,7 @@ const handleHaibao = async () => {
const markers = ref([]);
markers.value = [
{ x: 50, y: 50, width: 100, height: 80 }
{ x: 0, y: 32, width: 50, height: 14 }
];
</script>
@@ -220,10 +228,10 @@ markers.value = [
:key="index"
class="marker"
:style="{
left: marker.x + 'px',
top: marker.y + 'px',
width: marker.width + 'px',
height: marker.height + 'px'
left: marker.x + 'vw',
top: marker.y + 'vw',
width: marker.width + 'vw',
height: marker.height + 'vw'
}"
@click.stop="$emit('go-photo-square')">
</div>
@@ -298,10 +306,6 @@ markers.value = [
line-height: 50px;
}
.marker {
left: 0 !important;
top: 32vw !important;
width: 50vw !important;
height: 14vw !important;
position: absolute;
}
.fullsection {

20
src/components/PhotoSquare.vue
View File

@@ -15,9 +15,7 @@ watch(() => props.show, async (newVal) => {
if (!newVal) {
return
}
if (newVal) {
fetchImages();
}
fetchImages();
})
const emit = defineEmits(['go-my-photo', 'update:show']);
@@ -73,7 +71,7 @@ watch(() => mergeId, async (newVal) => {
return
}
if (newVal.value) {
fetchImages();
getInviteInfo();
}
})
@@ -127,7 +125,7 @@ const inviteHelp = ()=> {
// })
const markers = ref([]);
markers.value = [
{ x: 50, y: 50, width: 100, height: 80 }
{ x: 50, y: 32, width: 50, height: 14 }
];
</script>
@@ -143,10 +141,10 @@ markers.value = [
:key="index"
class="marker"
:style="{
left: marker.x + 'px',
top: marker.y + 'px',
width: marker.width + 'px',
height: marker.height + 'px'
left: marker.x + 'vw',
top: marker.y + 'vw',
width: marker.width + 'vw',
height: marker.height + 'vw'
}"
@click.stop="$emit('go-my-photo')">
</div>
@@ -244,10 +242,6 @@ markers.value = [
line-height: 50px;
}
.marker {
left: 50vw !important;
top: 32vw !important;
width: 50vw !important;
height: 14vw !important;
position: absolute;
}
.flex-container-detail-invite {

3
src/components/SelectTemplateV2.vue
View File

@@ -27,8 +27,7 @@ const goToGenerateImgPage = (item) => {
if (!hasVisitedBefore) {
localStorage.setItem('hasVisitedGenerateImg', 'true');
router.push({
name: 'generateImgConfirm',
query: { imageUrl: item.imageUrl }
name: 'generateImgConfirm'
});
} else {
router.push({

62
src/components/SynthesizedResults.vue
View File

@@ -47,6 +47,16 @@ const openHaibao = (e) => {
handleHaibao()
}
onMounted(openHaibao)
const loadImage = (src)=> {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "Anonymous";
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`无法加载图片: ${src}`));
img.src = src;
});
}
const handleHaibao = async () => {
if (haibaoUrl.value) {
return
@@ -55,6 +65,12 @@ const handleHaibao = async () => {
const loading = weui.loading()
const infos = Storage.get("userinfos")
const haibaoCover = new Haibao(951, 1607)
if (!globalStore.result_url) {
router.push({
name: 'home'
});
}
const userPicture = await loadImage(globalStore.result_url)
haibaoCover.add(userPicture, 0, 0)
haibaoCover.add(mask, 10, 100)
haibaoCover.add(haibaoCoverBorder, 0, 0)
@@ -84,8 +100,15 @@ const handleHaibao = async () => {
})
})
})
}
let userPictureVal = userPicture;
const getBackgroundImage = () => {
if (globalStore.result_url) {
return userPictureVal = globalStore.result_url;
} else {
return userPictureVal;
}
};
</script>
<template>
@@ -95,13 +118,13 @@ const handleHaibao = async () => {
<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 class="mask-background image-container" :style="{ backgroundImage: `url(${getBackgroundImage()})` }">
</div>
<img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版"> -->
<div class="fullsection" v-show="haibaoShow">
<div class="haibao" :style="userhaibaoCover">
<img :src="haibaoUrl" alt="">
<div class="close" @click="haibaoShow = false"></div>
<!-- <div class="close" @click="haibaoShow = false"></div> -->
</div>
</div>
@@ -119,6 +142,35 @@ const handleHaibao = async () => {
</template>
<style scoped>
.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;
}
.mengban-border {
width: 81vw;
position: absolute;
top: 28vw;
}
.image-container {
width: 80vw;
top: 5.2vw;
margin-bottom: 3vw;
background-image: url('../assets/images/home-bg.png');
background-size: cover;
background-repeat: no-repeat;
min-height: -webkit-fill-available;
position: absolute;
cursor: pointer;
}
.fullsection {
position: fixed;
top: 0;
@@ -128,12 +180,12 @@ const handleHaibao = async () => {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .7);
/* background-color: rgba(0, 0, 0, .7); */
}
.haibao {
position: relative;
width: 65.37037vw;
width: 70vw;
height: 119.444444vw;
background-image: url("../assets/images/haibao-cover.webp");
background-repeat: no-repeat;

12
src/components/TodoList.vue
View File

@@ -53,13 +53,17 @@ const handleHaibao = async () => {
if (haibaoUrl.value) {
return
}
const loading = weui.loading()
const userPicture = await loadImage('https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250910/face-merge-406c6990-249c-4248-b719-ecedf6e20848.jpg')
// let userPicture = 'https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg'
let userPicture = '';
if (!globalStore.result_url) {
weui.alert("请先参与活动合成图片并打榜！")
} else {
userPicture = await loadImage(globalStore.result_url)
}
const infos = Storage.get("userinfos")
const haibaoCover = new Haibao(951, 1607)
haibaoCover.add(userPicture, 0, 0)
haibaoCover.add(userPicture, 50, 50)
haibaoCover.add(mask, 10, 100)
haibaoCover.add(haibaoCoverBorder, 0, 0)
haibaoCover.draw('destination-in').then(() => {