98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useGenerateStore } from '@/stores'
|
|
import { IsHistoryFlow } from '@/types/enum'
|
|
const generateStore = useGenerateStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const query = computed(() => route.query)
|
|
const isHistoryFlow = computed(() => IsHistoryFlow(query.value.flowType))
|
|
// 上传照片
|
|
const handleUploadFace = () => {
|
|
// generateStore.updatePhotoInfo({})
|
|
router.push({ name: 'uploadFace2', query: query.value })
|
|
}
|
|
// 跳过上传
|
|
const handleFinish = () => {
|
|
generateStore.updatePhotoInfo({})
|
|
generateStore.clearCustomizeInfo()
|
|
generateStore.uploadCustomizeInfo({
|
|
tryOnId: generateStore.originalTryOn.id,
|
|
tryOnUrl: generateStore.originalTryOn.tryOnUrl,
|
|
isFavorite: generateStore.originalTryOn.isLike
|
|
})
|
|
router.push({ name: 'customize', query: query.value })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 上传照片 -->
|
|
<div class="upload-face-1">
|
|
<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
|
|
<div class="texts">
|
|
<p class="title">Keep Styling with AI?</p>
|
|
<p class="desc">
|
|
Would you like to keep playing with<br />
|
|
our personalized AI tools?
|
|
</p>
|
|
</div>
|
|
<div class="btns">
|
|
<button class="sandblasted-blurred flex flex-center" @click="handleUploadFace">
|
|
<span>Upload Face</span>
|
|
</button>
|
|
<button
|
|
class="sandblasted-blurred flex flex-center"
|
|
@click="handleFinish"
|
|
v-if="!isHistoryFlow"
|
|
>
|
|
<span>Finish</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.upload-face-1 {
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
color: #fff;
|
|
> * {
|
|
position: absolute;
|
|
}
|
|
> .bg {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
> .texts {
|
|
top: 0;
|
|
left: 0;
|
|
padding: 9.9rem 0 0 7.2rem;
|
|
> .title {
|
|
font-family: 'satoshiBold';
|
|
font-size: 8.63rem;
|
|
}
|
|
> .desc {
|
|
font-family: 'satoshiMedium';
|
|
font-size: 4rem;
|
|
margin-top: 2rem;
|
|
line-height: 132%;
|
|
}
|
|
}
|
|
> .btns {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
bottom: 19.7rem;
|
|
> button {
|
|
margin: 0 7.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|