fix
This commit is contained in:
BIN
src/assets/images/haibao-cover-no-title.webp
Normal file
BIN
src/assets/images/haibao-cover-no-title.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@@ -204,7 +204,7 @@ const generateImage = async (options) => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const loading = weui.loading();
|
const loading = weui.loading();
|
||||||
const mergeResponse = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
|
const response = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
@@ -214,8 +214,9 @@ const generateImage = async (options) => {
|
|||||||
body: JSON.stringify(formData)
|
body: JSON.stringify(formData)
|
||||||
});
|
});
|
||||||
|
|
||||||
const mergeData = await mergeResponse.json();
|
const data = await response.json()
|
||||||
globalStore.mergeId = mergeData.merge_id;
|
if (response.status == 200 || response.status == 201) {
|
||||||
|
globalStore.mergeId = data.merge_id;
|
||||||
const navigateToSynthesizedResults = () => {
|
const navigateToSynthesizedResults = () => {
|
||||||
router.push({
|
router.push({
|
||||||
name: 'synthesizedResults'
|
name: 'synthesizedResults'
|
||||||
@@ -235,7 +236,7 @@ const generateImage = async (options) => {
|
|||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
const mergeFetch = async (index)=> {
|
const mergeFetch = async (index)=> {
|
||||||
const statusRes = await Request(`face/merge/${mergeData.merge_id}/status`, {}, 'GET', true)
|
const statusRes = await Request(`face/merge/${data.merge_id}/status`, {}, 'GET', true)
|
||||||
|
|
||||||
if (statusRes.res.status === 200) {
|
if (statusRes.res.status === 200) {
|
||||||
if (statusRes.json.status === 'success') {
|
if (statusRes.json.status === 'success') {
|
||||||
@@ -257,6 +258,9 @@ const generateImage = async (options) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Merge API error:', error);
|
console.error('Merge API error:', error);
|
||||||
@@ -394,11 +398,14 @@ const customUpload = async (options) => {
|
|||||||
},
|
},
|
||||||
body: formData
|
body: formData
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(async response => {
|
||||||
.then(data => {
|
const data = await response.json()
|
||||||
|
if (response.status == 200 || response.status == 201) {
|
||||||
loading.hide();
|
loading.hide();
|
||||||
console.log('Success:', data);
|
|
||||||
onSuccess(data);
|
onSuccess(data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
loading.hide();
|
loading.hide();
|
||||||
@@ -699,7 +706,7 @@ import generateImg from '../assets/images/generate-img-bg.webp'
|
|||||||
}
|
}
|
||||||
.item-4 {
|
.item-4 {
|
||||||
width: 72vw;
|
width: 72vw;
|
||||||
top: 23.5%;
|
top: 48vw;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.item-5 {
|
.item-5 {
|
||||||
|
|||||||
@@ -224,7 +224,6 @@ const handleLottery = () => {
|
|||||||
if (globalStore.draw_chances <= 0) {
|
if (globalStore.draw_chances <= 0) {
|
||||||
return weui.alert("还没有抽奖机会,快去参加活动吧")
|
return weui.alert("还没有抽奖机会,快去参加活动吧")
|
||||||
};
|
};
|
||||||
globalStore.reducerDrawChances();
|
|
||||||
globalToastEvent.emit(ToastType.SHOW_LOTTERY)
|
globalToastEvent.emit(ToastType.SHOW_LOTTERY)
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -510,7 +509,7 @@ watch(() => mergeId, async (newVal) => {
|
|||||||
|
|
||||||
.join-main {
|
.join-main {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2.8vw;
|
top: 3.4vw;
|
||||||
right: -3.5vw;
|
right: -3.5vw;
|
||||||
width: 13vw;
|
width: 13vw;
|
||||||
}
|
}
|
||||||
@@ -518,9 +517,8 @@ watch(() => mergeId, async (newVal) => {
|
|||||||
.join-main .join-value {
|
.join-main .join-value {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
color: white;
|
||||||
text-stroke: 4px #ff0000;
|
text-shadow: -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000, 0 0 2px #ff0000;
|
||||||
-webkit-text-stroke: 1px #ff0000;
|
font-size: 5.4vw;
|
||||||
font-size: 6vw;
|
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ const fetchImages = async () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
const data = await response.json()
|
const data = await response.json()
|
||||||
console.log('Success:', data)
|
if (response.status == 200 || response.status == 201) {
|
||||||
images.value = data.data;
|
images.value = data.data;
|
||||||
const foundItem = data.data.find(item => item.is_public === true);
|
const foundItem = data.data.find(item => item.is_public === true);
|
||||||
if (foundItem) {
|
if (foundItem) {
|
||||||
@@ -53,6 +53,9 @@ const fetchImages = async () => {
|
|||||||
activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
|
activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error:', error)
|
console.error('Error:', error)
|
||||||
}
|
}
|
||||||
@@ -97,17 +100,19 @@ const handleDabangClick = () => {
|
|||||||
},
|
},
|
||||||
body: {}
|
body: {}
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(async response => {
|
||||||
.then(data => {
|
const data = await response.json()
|
||||||
|
if (response.status == 200 || response.status == 201) {
|
||||||
ElMessage.success('打榜成功!');
|
ElMessage.success('打榜成功!');
|
||||||
displayZhuli.value = true;
|
displayZhuli.value = true;
|
||||||
console.log('Success:', data);
|
|
||||||
globalStore.chartsBattle = true;
|
globalStore.chartsBattle = true;
|
||||||
return { success: true, data };
|
return { success: true, data };
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
ElMessage.success('打榜失败!');
|
ElMessage.error('打榜失败!');
|
||||||
console.error('Error:', error);
|
|
||||||
return { success: false, error };
|
return { success: false, error };
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -122,6 +127,7 @@ const downloadGenerateImg = (item) => {
|
|||||||
console.log('下载被点击');
|
console.log('下载被点击');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
import haibaoCoverBorderNoTitle from "../assets/images/haibao-cover-no-title.webp"
|
||||||
import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp";
|
import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp";
|
||||||
import failedImg from '../assets/images/failed.webp';
|
import failedImg from '../assets/images/failed.webp';
|
||||||
const getGenerateImgStatus = async (item)=> {
|
const getGenerateImgStatus = async (item)=> {
|
||||||
@@ -131,17 +137,20 @@ const getGenerateImgStatus = async (item)=> {
|
|||||||
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
|
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(async response => {
|
||||||
.then(data => {
|
const data = await response.json()
|
||||||
console.log('Success:', data);
|
if (response.status == 200 || response.status == 201) {
|
||||||
if (data.status = 'failed') {
|
if (data.status = 'failed') {
|
||||||
item.result_url = failedImg;
|
item.result_url = failedImg;
|
||||||
} else if (data.status = 'success') {
|
} else if (data.status = 'success') {
|
||||||
item.result_url = data.result_url;
|
item.result_url = data.result_url;
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error('Error:', error);
|
ElMessage.error('获取状态失败!');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -185,14 +194,12 @@ const handleHaibao = async (item) => {
|
|||||||
const loading = weui.loading()
|
const loading = weui.loading()
|
||||||
const infos = Storage.get("userinfos")
|
const infos = Storage.get("userinfos")
|
||||||
const haibaoCover = new Haibao(951, 1607)
|
const haibaoCover = new Haibao(951, 1607)
|
||||||
const userPicture = await loadImage(globalStore.result_url)
|
let userPicture = '';
|
||||||
|
if (item && item.result_url) {
|
||||||
|
userPicture = await loadImage(item.result_url)
|
||||||
haibaoCover.add(userPicture, 0, 50, 951, 1698)
|
haibaoCover.add(userPicture, 0, 50, 951, 1698)
|
||||||
haibaoCover.add(mask, 10, 100)
|
haibaoCover.add(mask, 10, 100)
|
||||||
if (item && item.result_url) {
|
|
||||||
haibaoCover.add(haibaoCoverBorderSuccess, 0, 0)
|
haibaoCover.add(haibaoCoverBorderSuccess, 0, 0)
|
||||||
} else {
|
|
||||||
haibaoCover.add(haibaoCoverBorder, 0, 0)
|
|
||||||
}
|
|
||||||
haibaoCover.draw('destination-in').then(() => {
|
haibaoCover.draw('destination-in').then(() => {
|
||||||
haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
|
haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
|
||||||
userHaibaoUrl.value = url
|
userHaibaoUrl.value = url
|
||||||
@@ -207,8 +214,6 @@ const handleHaibao = async (item) => {
|
|||||||
haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
|
haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
|
||||||
if (item && item.result_url) {
|
if (item && item.result_url) {
|
||||||
haibaoUrl.value = item.result_url
|
haibaoUrl.value = item.result_url
|
||||||
} else {
|
|
||||||
haibaoUrl.value = url
|
|
||||||
}
|
}
|
||||||
loading.hide()
|
loading.hide()
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
@@ -223,7 +228,47 @@ const handleHaibao = async (item) => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
userPicture = await loadImage(globalStore.result_url)
|
||||||
|
const haibaoCoverNoTitleBorder = new Haibao(951, 1607)
|
||||||
|
haibaoCoverNoTitleBorder.add(userPicture, 0, 50, 951, 1698)
|
||||||
|
haibaoCoverNoTitleBorder.add(mask, 10, 100)
|
||||||
|
haibaoCoverNoTitleBorder.add(haibaoCoverBorder, 0, 0)
|
||||||
|
haibaoCoverNoTitleBorder.draw('destination-in').then(() => {
|
||||||
|
haibaoCoverNoTitleBorder.generate({ mimeType: 'image/png' }).then(async (url) => {
|
||||||
|
userHaibaoUrl.value = url
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const haibaoCoverNoTitle = new Haibao(951, 1607)
|
||||||
|
haibaoCoverNoTitle.add(userPicture, 0, 50, 951, 1698)
|
||||||
|
haibaoCoverNoTitle.add(mask, 10, 100)
|
||||||
|
haibaoCoverNoTitle.add(haibaoCoverBorderNoTitle, 0, 0)
|
||||||
|
haibaoCoverNoTitle.draw('destination-in').then(() => {
|
||||||
|
haibaoCoverNoTitle.generate({ mimeType: 'image/png' }).then(async (url) => {
|
||||||
|
const haibaoSaveNoTitle = new Haibao(1080, 2160)
|
||||||
|
const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
|
||||||
|
haibaoSaveNoTitle.add(bg, 0, 0)
|
||||||
|
haibaoSaveNoTitle.add(url, 64, 250)
|
||||||
|
haibaoSaveNoTitle.add(qrcode, 115, 1875)
|
||||||
|
haibaoSaveNoTitle.draw().then(() => {
|
||||||
|
haibaoSaveNoTitle.text(infos.nickname + '的全家福', haibaoSaveNoTitle.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
|
||||||
|
haibaoSaveNoTitle.generate({ mimeType: 'image/png' }).then(url => {
|
||||||
|
haibaoUrl.value = url
|
||||||
|
loading.hide()
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
weui.alert("海报生成失败,请重新生成")
|
||||||
|
loading.hide()
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
weui.alert("海报生成失败,请重新生成")
|
||||||
|
loading.hide()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const markers = ref([]);
|
const markers = ref([]);
|
||||||
@@ -397,13 +442,12 @@ markers.value = [
|
|||||||
.border-image {
|
.border-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 40vw;
|
width: 40vw;
|
||||||
top: 1.6333vh;
|
top: 2.8vw;
|
||||||
left: -0.4vw;
|
left: -0.8vw;
|
||||||
}
|
}
|
||||||
.image-gallery {
|
.image-gallery {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
display: block;
|
|
||||||
width: 84vw;
|
width: 84vw;
|
||||||
height: 57vh;
|
height: 57vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -411,6 +455,7 @@ markers.value = [
|
|||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
top: 26vw;
|
top: 26vw;
|
||||||
|
padding-bottom: 22vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-container {
|
.image-container {
|
||||||
@@ -419,7 +464,7 @@ markers.value = [
|
|||||||
top: 0;
|
top: 0;
|
||||||
margin-bottom: 3vw;
|
margin-bottom: 3vw;
|
||||||
background-image: url('../assets/images/test.webp');
|
background-image: url('../assets/images/test.webp');
|
||||||
background-size: cover;
|
background-size: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
import { ref, onMounted, computed, watch } from "vue"
|
import { ref, onMounted, computed, watch } from "vue"
|
||||||
import { Request, Storage } from "../libs/utils"
|
import { Request, Storage } from "../libs/utils"
|
||||||
import ModalTransition from "./ModalTransition.vue"
|
import ModalTransition from "./ModalTransition.vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import { RecycleScroller } from "vue-virtual-scroller";
|
import { RecycleScroller } from "vue-virtual-scroller";
|
||||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||||
@@ -11,17 +11,16 @@ const props = defineProps({
|
|||||||
show: false
|
show: false
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(() => props.show, async (newVal) => {
|
const disableInviteHelp = ref(false);
|
||||||
if (!newVal) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
fetchImages();
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['go-my-photo', 'update:show']);
|
const emit = defineEmits(['go-my-photo', 'update:show']);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
emit('update:show', false);
|
emit('update:show', false);
|
||||||
|
// 清除URL中的查询参数
|
||||||
|
if (Object.keys(route.query).length > 0) {
|
||||||
|
router.replace({ path: route.path, query: {} });
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const username = ref();
|
const username = ref();
|
||||||
@@ -31,7 +30,7 @@ const ranking = ref();
|
|||||||
const displayMyPublishPhoto = ref(false);
|
const displayMyPublishPhoto = ref(false);
|
||||||
|
|
||||||
const fetchImages = async () => {
|
const fetchImages = async () => {
|
||||||
|
disableInviteHelp.value = false;
|
||||||
try {
|
try {
|
||||||
const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
|
const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
|
||||||
url.searchParams.append('my_only', '0');
|
url.searchParams.append('my_only', '0');
|
||||||
@@ -43,6 +42,7 @@ const fetchImages = async () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
const data = await response.json()
|
const data = await response.json()
|
||||||
|
if (response.status == 200 || response.status == 201) {
|
||||||
console.log('Success:', data)
|
console.log('Success:', data)
|
||||||
images.value = data.data
|
images.value = data.data
|
||||||
if (data.my_published_photo) {
|
if (data.my_published_photo) {
|
||||||
@@ -54,17 +54,26 @@ const fetchImages = async () => {
|
|||||||
likesCount.value = data.my_published_photo.likes_count;
|
likesCount.value = data.my_published_photo.likes_count;
|
||||||
userImg.value = data.my_published_photo.avatar;
|
userImg.value = data.my_published_photo.avatar;
|
||||||
ranking.value = data.my_published_photo.ranking;
|
ranking.value = data.my_published_photo.ranking;
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
emit('update:show', false);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error:', error)
|
console.error('Error:', error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(() => props.show, async (newVal) => {
|
||||||
|
if (!newVal) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
fetchImages();
|
||||||
|
}, {immediate: true})
|
||||||
|
|
||||||
// 图片数据
|
// 图片数据
|
||||||
const images = ref([]);
|
const images = ref([]);
|
||||||
const disableInviteHelp = ref(false);
|
|
||||||
const userinfos = Storage.get("userinfos")
|
const userinfos = Storage.get("userinfos")
|
||||||
|
|
||||||
// TODO 需要测试邀请进来的情况
|
|
||||||
let mergeId = '';
|
let mergeId = '';
|
||||||
let inviteCode = '';
|
let inviteCode = '';
|
||||||
const rankingInvite = ref(0);
|
const rankingInvite = ref(0);
|
||||||
@@ -84,16 +93,20 @@ const getInviteInfo = ()=> {
|
|||||||
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
|
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(async response => {
|
||||||
.then(data => {
|
const data = await response.json()
|
||||||
|
if (response.status == 200 || response.status == 201) {
|
||||||
rankingInvite.value = data.ranking;
|
rankingInvite.value = data.ranking;
|
||||||
nameInvite.value = data.user_name;
|
nameInvite.value = data.user_name;
|
||||||
linkCountInvite.value = data.likes_count;
|
linkCountInvite.value = data.likes_count;
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
emit('update:show', false);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
ElMessage.success('点赞失败!');
|
ElMessage.error('分享进入页面失败!');
|
||||||
console.error('Error:', error);
|
emit('update:show', false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,13 +137,17 @@ const inviteHelp = ()=> {
|
|||||||
},
|
},
|
||||||
body: JSON.stringify(formData)
|
body: JSON.stringify(formData)
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(async response => {
|
||||||
.then(data => {
|
const data = await response.json()
|
||||||
|
if (response.status == 200 || response.status == 201) {
|
||||||
displayInviteHelpBtn.value = false;
|
displayInviteHelpBtn.value = false;
|
||||||
ElMessage.success('点赞成功!');
|
ElMessage.success('点赞成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
ElMessage.success('点赞失败!');
|
ElMessage.error('点赞失败!');
|
||||||
console.error('Error:', error);
|
console.error('Error:', error);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -189,11 +206,9 @@ const getBackgroundImage = (item) => {
|
|||||||
/>
|
/>
|
||||||
<div class="list-item">
|
<div class="list-item">
|
||||||
<div class="flex-container-detail">
|
<div class="flex-container-detail">
|
||||||
<div class="left-group">
|
<div class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</div>
|
||||||
<p class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</p>
|
<div class="photo-name">{{ item.user_name }}</div>
|
||||||
<p class="photo-name">{{ item.user_name }}</p>
|
<div class="right-item photo-name">{{ item.likes_count }}赞</div>
|
||||||
</div>
|
|
||||||
<p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -230,18 +245,16 @@ const getBackgroundImage = (item) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="disableInviteHelp">
|
<div v-if="disableInviteHelp" class="share-main">
|
||||||
<div class="image-gallery-share">
|
<div class="image-gallery-share">
|
||||||
<div class="image-wrapper-share">
|
<div class="image-wrapper-share">
|
||||||
<div class="image-container-share mask-background">
|
<div class="image-container-share mask-background">
|
||||||
</div>
|
</div>
|
||||||
<img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
|
<img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
|
||||||
<div class="flex-container-detail-invite">
|
<div class="flex-container-detail-invite">
|
||||||
<div class="left-group-left">
|
<div class="photo-number">{{ rankingInvite }}</div>
|
||||||
<p class="photo-number">{{ rankingInvite }}</p>
|
<div class="photo-name">{{ nameInvite }}</div>
|
||||||
<p class="photo-name">{{ nameInvite }}</p>
|
<div class="right-item photo-name">{{ linkCountInvite }}赞</div>
|
||||||
</div>
|
|
||||||
<p class="right-item photo-name" style="padding-left: 3vw;">{{ linkCountInvite }}赞</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -255,6 +268,11 @@ const getBackgroundImage = (item) => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.share-main {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
.my-photo-desc {
|
.my-photo-desc {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 87vw;
|
width: 87vw;
|
||||||
@@ -268,18 +286,24 @@ const getBackgroundImage = (item) => {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.list-item {
|
.list-item {
|
||||||
height: 8vw;
|
position: relative;
|
||||||
line-height: 50px;
|
|
||||||
}
|
}
|
||||||
.marker {
|
.marker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.flex-container-detail-invite {
|
.flex-container-detail-invite {
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -8vw;
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
height: 11vw;
|
||||||
|
bottom: 10.5vw;
|
||||||
|
font-size: 3vw;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0px 13vw;
|
||||||
|
}
|
||||||
|
.flex-container-detail-invite .photo-name {
|
||||||
|
max-width: 24vw;
|
||||||
}
|
}
|
||||||
.left-group-left {
|
.left-group-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -290,32 +314,23 @@ const getBackgroundImage = (item) => {
|
|||||||
.ranking-title {
|
.ranking-title {
|
||||||
width: 48vw;
|
width: 48vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20vw;
|
bottom: 2vw;
|
||||||
left: 27vw;
|
left: 27vw;
|
||||||
}
|
}
|
||||||
.ranking-title img {
|
.ranking-title img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.image-gallery-share {
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: block;
|
|
||||||
width: 84vw;
|
|
||||||
height: 57vh;
|
|
||||||
top: 16%;
|
|
||||||
}
|
|
||||||
.image-wrapper-share {
|
.image-wrapper-share {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: -10vw;
|
width: 69vw;
|
||||||
float: left;
|
height: 57vw;
|
||||||
margin-left: 4vw;
|
margin-top: 12vw;
|
||||||
}
|
}
|
||||||
.image-container-share {
|
.image-container-share {
|
||||||
width: 77vw;
|
width: 68vw;
|
||||||
height: 43vh;
|
height: 81vw;
|
||||||
background-image: url(/src/assets/images/test.webp);
|
background-image: url(/src/assets/images/test.webp);
|
||||||
background-size: cover;
|
background-size: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -327,27 +342,36 @@ const getBackgroundImage = (item) => {
|
|||||||
}
|
}
|
||||||
.border-image-share {
|
.border-image-share {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 72vw;
|
width: 63vw;
|
||||||
top: -0.5vw;
|
top: -0.8vw;
|
||||||
left: 2.6vw;
|
left: 3vw;
|
||||||
}
|
}
|
||||||
.bold {
|
.bold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.photo-number {
|
.photo-number {
|
||||||
color: red;
|
color: red;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 2vw;
|
||||||
}
|
}
|
||||||
.photo-name {
|
.photo-name {
|
||||||
|
min-width: 14vw;
|
||||||
|
max-width: 19vw;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
color: #93551f;
|
color: #93551f;
|
||||||
}
|
}
|
||||||
.flex-container-detail {
|
.flex-container-detail {
|
||||||
position: relative;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 3vh;
|
height: 3vh;
|
||||||
top: -11vw;
|
bottom: 5.5vw;
|
||||||
font-size: 11px;
|
font-size: 3vw;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 4vw;
|
||||||
}
|
}
|
||||||
.flex-container {
|
.flex-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -369,7 +393,9 @@ const getBackgroundImage = (item) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.left-group p, .right-item {
|
.left-group p, .right-item {
|
||||||
margin: 0;
|
padding-left: 2vw;
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.fixed-background-container {
|
.fixed-background-container {
|
||||||
background-image: url('../assets/images/paiming-border.webp');
|
background-image: url('../assets/images/paiming-border.webp');
|
||||||
@@ -392,13 +418,12 @@ const getBackgroundImage = (item) => {
|
|||||||
.border-image {
|
.border-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 40vw;
|
width: 40vw;
|
||||||
top: 1.6333vh;
|
top: 2.8vw;
|
||||||
left: -0.4vw;
|
left: -0.8vw;
|
||||||
}
|
}
|
||||||
.image-gallery {
|
.image-gallery {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
display: block;
|
|
||||||
width: 84vw;
|
width: 84vw;
|
||||||
height: 57vh;
|
height: 57vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -406,13 +431,14 @@ const getBackgroundImage = (item) => {
|
|||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
top: 26vw;
|
top: 26vw;
|
||||||
|
padding-bottom: 12vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-container {
|
.image-container {
|
||||||
width: 38vw;
|
width: 38vw;
|
||||||
height: 28vh;
|
height: 28vh;
|
||||||
background-image: url('../assets/images/test.webp');
|
background-image: url('../assets/images/test.webp');
|
||||||
background-size: cover;
|
background-size: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -24,8 +24,9 @@ const confirmBtn = () => {
|
|||||||
},
|
},
|
||||||
body: {}
|
body: {}
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(async response => {
|
||||||
.then(data => {
|
const data = await response.json()
|
||||||
|
if (response.status == 200 || response.status == 201) {
|
||||||
if (data.message === '您已经有一张发布的照片,不能再次发布') {
|
if (data.message === '您已经有一张发布的照片,不能再次发布') {
|
||||||
weui.alert('您已经有一张发布的照片,不能再次发布')
|
weui.alert('您已经有一张发布的照片,不能再次发布')
|
||||||
return
|
return
|
||||||
@@ -33,9 +34,12 @@ const confirmBtn = () => {
|
|||||||
ElMessage.success('打榜成功!');
|
ElMessage.success('打榜成功!');
|
||||||
console.log('Success:', data);
|
console.log('Success:', data);
|
||||||
return { success: true, data };
|
return { success: true, data };
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data.message);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
ElMessage.success('打榜失败!');
|
ElMessage.error('打榜失败!');
|
||||||
return { success: false, error };
|
return { success: false, error };
|
||||||
});
|
});
|
||||||
emit('update:show', false);
|
emit('update:show', false);
|
||||||
|
|||||||
@@ -166,18 +166,18 @@ const handleNavClick = (event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mask-image {
|
.mask-image {
|
||||||
background-size: cover;
|
background-size: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 39vw;
|
width: 39vw;
|
||||||
height: 52vw;
|
height: 52vw;
|
||||||
}
|
}
|
||||||
.border-img {
|
.border-img {
|
||||||
width: 39.5vw;
|
width: 39.7vw;
|
||||||
height: 54vw;
|
height: 54.4vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.5vw;
|
top: -0.7vw;
|
||||||
left: 0;
|
left: -0.1vw;
|
||||||
}
|
}
|
||||||
.main {
|
.main {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -34,6 +34,7 @@ import Haibao from "@/libs/haibao"
|
|||||||
import bg from "../assets/images/haibao-bg.webp"
|
import bg from "../assets/images/haibao-bg.webp"
|
||||||
import mask from "../assets/images/haibao-mask.webp"
|
import mask from "../assets/images/haibao-mask.webp"
|
||||||
import haibaoCoverBorder from "../assets/images/haibao-cover.webp"
|
import haibaoCoverBorder from "../assets/images/haibao-cover.webp"
|
||||||
|
import haibaoCoverBorderNoTitle from "../assets/images/haibao-cover-no-title.webp"
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
show: false,
|
show: false,
|
||||||
})
|
})
|
||||||
@@ -54,9 +55,7 @@ const handleHaibao = async () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const loading = weui.loading()
|
const loading = weui.loading()
|
||||||
// let userPicture = 'https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg'
|
|
||||||
let userPicture = await loadImage(globalStore.result_url)
|
let userPicture = await loadImage(globalStore.result_url)
|
||||||
// let userPicture = await loadImage('https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg')
|
|
||||||
|
|
||||||
const infos = Storage.get("userinfos")
|
const infos = Storage.get("userinfos")
|
||||||
const haibaoCover = new Haibao(951, 1607)
|
const haibaoCover = new Haibao(951, 1607)
|
||||||
@@ -66,15 +65,23 @@ const handleHaibao = async () => {
|
|||||||
haibaoCover.draw('destination-in').then(() => {
|
haibaoCover.draw('destination-in').then(() => {
|
||||||
haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
|
haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
|
||||||
userHaibaoUrl.value = url
|
userHaibaoUrl.value = url
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
const haibaoSave = new Haibao(1080, 2160)
|
const haibaoCoverNoTitle = new Haibao(951, 1607)
|
||||||
const qrcode = await generateQR(`fromid=${infos.invite_code}&org_id=${infos.org_id}&merge_id=${mergeId}}`, 200, 200)
|
haibaoCoverNoTitle.add(userPicture, 0, 50, 951, 1698)
|
||||||
haibaoSave.add(bg, 0, 0)
|
haibaoCoverNoTitle.add(mask, 10, 100)
|
||||||
haibaoSave.add(url, 64, 250)
|
haibaoCoverNoTitle.add(haibaoCoverBorderNoTitle, 0, 0)
|
||||||
haibaoSave.add(qrcode, 115, 1875)
|
haibaoCoverNoTitle.draw('destination-in').then(() => {
|
||||||
haibaoSave.draw().then(() => {
|
haibaoCoverNoTitle.generate({ mimeType: 'image/png' }).then(async (url) => {
|
||||||
haibaoSave.text(infos.nickname + '的全家福', haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
|
const haibaoSaveNoTitle = new Haibao(1080, 2160)
|
||||||
haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
|
const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${mergeId}`, 200, 200)
|
||||||
|
haibaoSaveNoTitle.add(bg, 0, 0)
|
||||||
|
haibaoSaveNoTitle.add(url, 64, 250)
|
||||||
|
haibaoSaveNoTitle.add(qrcode, 115, 1875)
|
||||||
|
haibaoSaveNoTitle.draw().then(() => {
|
||||||
|
haibaoSaveNoTitle.text(infos.nickname + '的全家福', haibaoSaveNoTitle.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
|
||||||
|
haibaoSaveNoTitle.generate({ mimeType: 'image/png' }).then(url => {
|
||||||
haibaoUrl.value = url
|
haibaoUrl.value = url
|
||||||
loading.hide()
|
loading.hide()
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
|
|||||||
Reference in New Issue
Block a user