lanecarford_front/src/views/Workshop/customize.vue

<script setup lang="ts">
	import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
	import { ref, onMounted, computed } from 'vue'
	import {
		generateTryOnEffect,
		generateTryOnEffectDemo,
		setTryOnEffectFavorite,
		cancelTryOnEffectFavorite
	} from '@/api/workshop'
	const emit = defineEmits(['viewType'])
	import { useRouter, useRoute } from 'vue-router'
	import { useGenerateStore } from '@/stores'
	import { FlowType, 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 customizeInfo = isHistoryFlow.value
		? generateStore.customizeInfoDemo
		: generateStore.customizeInfo
	const loading = ref(false)
	const onSend = () => {
		if (customizeInfo.inputText === '') return
		generate()
		customizeInfo.inputText = ''
		// const text = inputText.value
		// inputText.value = ''
		// console.log('发送消息:', text)
	}
	const onReload = () => {
		customizeInfo.inputText = customizeInfo.oldInputText
		generate('reload')
		customizeInfo.inputText = ''
	}

	// 生成结果
	const generate = (type?: 'reload') => {
		customizeInfo.oldInputText = customizeInfo.inputText
		customizeInfo.oldTryOnId = customizeInfo.tryOnId
		loading.value = true
		if (isHistoryFlow.value) {
			// const data = {
			// 	prompt: customizeInfo.inputText,
			// 	tryonUrl: customizeInfo.tryOnUrl
			// }
			// if (generateStore.customerPhotoId && customizeInfo.count === 0) {
			// 	data['customerPhotoId'] = generateStore.customerPhotoId
			// }
			const data = new FormData()
			data.append('prompt', customizeInfo.inputText)
			data.append('tryonUrl', customizeInfo.tryOnUrl)
			if (generateStore.customerPhotoId && customizeInfo.count === 0) {
				data.append('customerPhotoId', generateStore.customerPhotoId)
			}
			generateTryOnEffectDemo(data)
				.then((res: any) => {
					if (!res) return Promise.reject('生成失败')
					customizeInfo.count++
					customizeInfo.tryOnId = '1'
					customizeInfo.tryOnUrl = res
					// customizeInfo.styleUrl = res.styleUrl
					// customizeInfo.isRegenerated = res.isRegenerated
					// customizeInfo.isFavorite = !!res.isFavorite
					loading.value = false
				})
				.catch((err) => {
					console.error(err)
					loading.value = false
				})
		} else {
			const data = {
				customerId: generateStore.customerId,
				visitRecordId: generateStore.visitRecordId,
				styleId: generateStore.styleId,
				// modelPhotoId: generateStore.modelPhotoId,
				originalTryOnId: type === 'reload' ? customizeInfo.oldTryOnId : generateStore.originalTryOnId,
				isRegenerated: 1,
				prompt: customizeInfo.inputText
			}
			if (generateStore.customerPhotoId && customizeInfo.count === 0)
				data['customerPhotoId'] = generateStore.customerPhotoId
			generateTryOnEffect(data)
				.then((res: any) => {
					customizeInfo.count++
					customizeInfo.tryOnId = res.tryOnId
					customizeInfo.tryOnUrl = res.tryOnUrl
					customizeInfo.styleUrl = res.styleUrl
					customizeInfo.isRegenerated = res.isRegenerated
					customizeInfo.isFavorite = !!res.isFavorite
					loading.value = false
				})
				.catch((err) => {
					console.error(err)
					if (data['customerPhotoId']) router.back()
					loading.value = false
				})
		}
	}
	if (customizeInfo.tryOnId === '') generate()

	// 喜欢
	const isLoveLoading = ref(false)
	const onLove = () => {
		if (isLoveLoading.value) return
		const http = customizeInfo.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
		customizeInfo.isFavorite = !customizeInfo.isFavorite
		isLoveLoading.value = true
		http(customizeInfo.tryOnId)
			.then(() => {
				isLoveLoading.value = false
			})
			.catch((err) => {
				console.error(err)
				customizeInfo.isFavorite = !customizeInfo.isFavorite
				isLoveLoading.value = false
			})
	}
	const onDownload = () => {
		console.log('download')
	}
	const onRetry = () => {
		router.back()
	}
	const onFinish = () => {
		// router.push({ name: 'creation', query: query.value })
		router.push({ name: 'creation', query: { flowType: FlowType.H_AI } })
		// if (isHistoryFlow.value) {
		// 	router.push({ name: 'end' })
		// } else {
		// 	router.push({ name: 'creation' })
		// }
	}
	// 选择另一个穿搭
	const onChooseOutfit = () => {
		router.push({ name: 'SelectStyle' })
	}
</script>

<template>
	<div class="loading" v-if="loading"><generate-loading /></div>
	<div class="customize" v-else>
		<div class="title">Customize your Look!</div>
		<p class="tip">Refine your Look</p>
		<div class="input-box">
			<div class="help">?</div>
			<input
				type="text"
				v-model="customizeInfo.inputText"
				@keyup.enter="onSend"
				placeholder="Try: “Change background to Tokyo City”"
			/>
			<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
		</div>
		<div class="card">
			<img :src="customizeInfo.tryOnUrl" />
			<div class="select-box">
				<div class="icon"><SvgIcon name="history" size="35" /></div>
				<div class="label">History</div>
				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
			</div>
			<div class="icons">
				<div @click="onLove">
					<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
				</div>
				<div @click="onReload" v-show="customizeInfo.oldInputText">
					<SvgIcon name="reload" size="35" />
				</div>
				<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
			</div>
		</div>
		<div class="btns">
			<button class="choose-outfit" v-if="!isHistoryFlow" @click="onChooseOutfit">
				Choose Outfit
			</button>
			<button class="finish" @click="onFinish">Finish</button>
		</div>
	</div>
</template>

<style scoped lang="less">
	.loading {
		width: 100%;
		margin-top: 36.6rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.customize {
		width: 100%;
		position: relative;
		color: #000;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .title {
			font-family: satoshiBold;
			font-size: 8.4rem;
			text-align: center;
			line-height: 124%;
			margin-top: 3.2rem;
		}
		> .tip {
			margin-top: 0.56rem;
			font-family: satoshiRegular;
			font-size: 3.74rem;
			line-height: 124%;
			color: rgba(0, 0, 0, 0.6);
		}
		> .input-box {
			margin-top: 4.5rem;
			width: 87.5rem;
			height: 8.3rem;
			border-radius: 0.5rem;
			border: 0.3rem solid #000000;
			box-sizing: content-box;
			display: flex;
			align-items: center;
			> .help {
				margin: 0 2.5rem;
				width: 4.2rem;
				height: 4.2rem;
				border-radius: 50%;
				border: 0.3rem solid #000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 3rem;
			}
			> input {
				width: 0;
				flex: 1;
				height: 100%;
				font-family: satoshiRegular;
				font-size: 3.4rem;
				color: #000;
				border: none;
				&::placeholder {
					color: #777;
				}
			}
			> .send {
				margin: 0 2.5rem;
				--svg-icon-color: #000;
			}
		}
		> .card {
			margin-top: 5rem;
			width: 73rem;
			height: 109.5rem;
			border-radius: 2rem;
			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
			border: 0.2rem solid #d9d9d9;
			overflow: hidden;
			> * {
				position: absolute;
			}
			> img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			> .select-box {
				top: 1.8rem;
				left: 1.8rem;
				width: 30.2rem;
				height: 6.52rem;
				border-radius: 0.91rem;
				border: 0.24rem solid #000;
				display: flex;
				align-items: center;
				background-color: #fff;
				> .icon {
					margin: 0 1.8rem;
				}
				> .label {
					flex: 1;
					font-family: satoshiRegular;
					font-size: 2.97rem;
					color: #000;
				}
			}
			> .icons {
				bottom: 0.27rem;
				right: 0;
				height: 10rem;
				display: flex;
				align-items: center;
				justify-content: center;
				> div {
					margin-right: 1.5rem;
					width: 6.2rem;
					height: 6.2rem;
					border-radius: 1rem;
					border: 0.2rem solid #000;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
				}
			}
		}
		> .btns {
			margin-top: 4rem;
			width: 68%;
			display: flex;
			// justify-content: center;
			justify-content: space-between;
			> button {
				padding: 0;
				font-family: satoshiRegular;
				border: none;
				width: 34rem;
				height: 9.2rem;
				border-radius: 1.3rem;
				font-weight: 400;
				font-size: 3.8rem;
				&:active {
					opacity: 0.7;
				}
			}
			> :first-child.finish,
			> .choose-outfit {
				background-color: transparent;
				color: #000;
				border: 0.2rem solid #000;
			}
			> :first-child.finish {
				width: 87.5rem;
			}
			> .finish {
				background-color: #000;
				color: #fff;
			}
		}
	}
</style>