lanecarford_front/src/views/Workshop/uploadFace2.vue

<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { uploadCustomerPhoto } from '@/api/workshop'
	import { useGenerateStore, useHGenerateStore } from '@/stores'
	import { IsHistoryFlow } from '@/types/enum'
	const generateStore = useGenerateStore()
	const hGenerateStore = useHGenerateStore()

	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 fileData = generateStore.photoInfo
	if (!fileData.file?.size) generateStore.updatePhotoInfo({})
	// 上传照片
	const handleUploadFace = () => {
		const input = document.createElement('input')
		input.type = 'file'
		input.accept = 'image/*'
		// input.capture = 'camera'
		input.click()
		input.onchange = (e: any) => {
			const file = e.target.files[0]
			if (!file) return
			const url = URL.createObjectURL(file)
			fileData.id = ''
			fileData.url = url
			fileData.file = file
			// const reader = new FileReader()
			// reader.readAsDataURL(file)
			// reader.onload = () => {
			// 	faceUrl.value = reader.result as string
			// }
		}
	}
	// 生成照片
	const handleGenerate = () => {
		if (fileData.id) return router.push({ name: 'customize', query: query.value })
		if (!fileData.file) return
		const formData = new FormData()
		formData.append('customerId', generateStore.customerId + '')
		formData.append('visitRecordId', generateStore.visitRecordId + '')
		formData.append('file', fileData.file)
		uploadCustomerPhoto(formData).then((res) => {
			generateStore.updatePhotoInfo({ ...res, file: fileData.file })
			isHistoryFlow.value ? hGenerateStore.clearCustomizeInfo() : generateStore.clearCustomizeInfo()
			router.push({ name: 'customize', query: query.value })
		})
	}
	// 处理照片加载错误
	const pictureLoadError = (e: any) => {
		generateStore.updatePhotoInfo({})
	}
</script>

<template>
	<!-- 展示照片 -->
	<div class="upload-face-2">
		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
		<div class="content">
			<div class="title">
				Upload your Face<br />
				to Try-on
			</div>
			<!-- 照片 -->
			<div class="picture" v-if="fileData.url">
				<img :src="fileData.url" @error="pictureLoadError" />
			</div>
			<div class="btns">
				<template v-if="fileData.url">
					<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
					<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
				</template>
				<button v-else class="sandblasted-blurred" @click="handleUploadFace">
					<span>Upload</span>
				</button>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	.upload-face-2 {
		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;
		}
		> .content {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			> .title {
				font-family: satoshiBold;
				font-size: 11rem;
				text-align: center;
				line-height: 124%;
				margin-bottom: 7.8rem;
			}
			> .picture {
				width: 65.3rem;
				height: 86.5rem;
				border-radius: 1rem;
				backdrop-filter: blur(5.27rem);
				-webkit-backdrop-filter: blur(5.27rem);
				-moz-backdrop-filter: blur(5.27rem);
				-ms-backdrop-filter: blur(5.27rem);
				-o-backdrop-filter: blur(5.27rem);
				box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
				border: 0.439rem solid #fff;
				// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
				display: flex;
				align-items: center;
				justify-content: center;
				> img {
					width: 58.9rem;
					height: 79.2rem;
					border-radius: 1rem;
					border: 0.2rem solid #d9d9d9;
					object-fit: cover;
				}
			}
			> .btns {
				margin-top: 7.8rem;
				width: 100%;
				display: flex;
				justify-content: center;
				> button {
					width: 35rem;
					height: 8.3rem;
					margin: 0 5rem;
					// border-radius: 4.3rem;
					border-width: 0.25rem;
				}
			}
		}
	}
</style>