lanecarford_front/src/views/Workshop/uploadFace1.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 emit = defineEmits(['view-type'])
	onMounted(() => {
		emit('view-type', 1)
	})
	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 {
				width: 35rem;
				height: 8.3rem;
				box-sizing: border-box;
				border-radius: 0.7rem;
				margin: 0 1.8rem;
				&.sandblasted-blurred {
					// border-width: 0.2rem;
				}
			}
		}
	}
</style>