lanecarford_front/src/views/Workshop/customize.vue

<script setup lang="ts">
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
	import { ref, onMounted } from 'vue'
	import {
		generateTryOnEffect,
		setTryOnEffectFavorite,
		cancelTryOnEffectFavorite
	} from '@/api/workshop'
	const emit = defineEmits(['viewType'])
	import { useRouter } from 'vue-router'
	import { useGenerateStore } from '@/stores'
	const store = useGenerateStore()

	const router = useRouter()
	const inputText = ref('')
	const isFavorite = ref(false)
	const tryOnUrl = ref('')
	const loading = ref(false)
	const onSend = () => {
		if (inputText.value === '') return
		generate()
		const text = inputText.value
		inputText.value = ''
		// console.log('发送消息:', text)
	}
	const onReload = () => {
		inputText.value = ''
		generate(true)
	}

	// 生成结果
	const generate = (isRegenerated = false) => {
		const data = {
			customerId: store.customerId,
			visitRecordId: store.visitRecordId,
			styleId: store.styleId,
			modelPhotoId: store.modelPhotoId,
			customerPhotoId: store.customerPhotoId,
			originalTryOnId: store.originalTryOnId,
			isRegenerated: isRegenerated ? 1 : 0,
			prompt: inputText.value
		}
		loading.value = true
		generateTryOnEffect(data)
			.then((res) => {
				tryOnUrl.value = res.tryOnUrl
				isFavorite.value = !!res.isFavorite
				loading.value = false
			})
			.catch((err) => {
				console.error(err)
				loading.value = false
			})
	}
	generate()

	// 喜欢
	const isLoveLoading = ref(false)
	const onLove = () => {
		if (isLoveLoading.value) return
		const http = isFavorite.value ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
		isLoveLoading.value = true
		isFavorite.value = !isFavorite.value
		http('tryOnId')
			.then(() => {
				isLoveLoading.value = false
			})
			.catch((err) => {
				console.error(err)
				isLoveLoading.value = false
			})
	}
	const onDownload = () => {
		console.log('download')
	}
	const onRetry = () => {
		router.back()
	}
	const onFinish = () => {
		router.push({ name: 'creation' })
	}
</script>

<template>
	<header-title style-type="2" />
	<div class="loading" v-if="loading"><generate-loading /></div>
	<template v-else>
		<div class="customize">
			<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="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="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_${isFavorite ? 1 : 0}`" size="35" /></div>
					<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
					<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
				</div>
			</div>
			<div class="btns">
				<button @click="onFinish">Finish</button>
			</div>
		</div>
		<footer-navigation />
	</template>
</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.6rem;
		}
		> .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: 6rem;
			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: 6.4rem;
			width: 72.9rem;
			height: 102.3rem;
			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;
				> .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;
				}
			}
		}
		> .btns {
			margin-top: 5.6rem;
			width: 100%;
			display: flex;
			justify-content: center;
			> button {
				box-sizing: content-box;
				font-family: satoshiRegular;
				// margin: 0 1.8rem;
				border: none;
				margin: 0 5.2rem 0 auto;
				width: 23.8rem;
				height: 6.9rem;
				border-radius: 1.3rem;
				background: #000;
				font-weight: 400;
				font-size: 3.89rem;
				color: #fff;
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>