320 lines
8.0 KiB
Vue
320 lines
8.0 KiB
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, 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'
|
|
const generateStore = useGenerateStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const isDemo = computed(() => route.query.demo === '1')
|
|
const customizeInfo = isDemo.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 (isDemo.value) {
|
|
const data = {
|
|
prompt: customizeInfo.inputText,
|
|
tryonUrl: customizeInfo.tryOnUrl
|
|
}
|
|
if (generateStore.customerPhotoId && customizeInfo.count === 0) {
|
|
data['customerPhotoId'] = generateStore.customerPhotoId
|
|
}
|
|
generateTryOnEffectDemo(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)
|
|
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)
|
|
loading.value = false
|
|
})
|
|
}
|
|
}
|
|
if (customizeInfo.tryOnId === '') generate()
|
|
|
|
// 喜欢
|
|
const isLoveLoading = ref(false)
|
|
const onLove = () => {
|
|
if (isDemo.value) return
|
|
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)
|
|
isLoveLoading.value = false
|
|
})
|
|
}
|
|
const onDownload = () => {
|
|
console.log('download')
|
|
}
|
|
const onRetry = () => {
|
|
router.back()
|
|
}
|
|
const onFinish = () => {
|
|
if (isDemo.value) {
|
|
router.push({ name: 'end' })
|
|
} else {
|
|
router.push({ name: 'creation' })
|
|
}
|
|
}
|
|
// 选择另一个穿搭
|
|
const onChooseAnotherOutfit = () => {
|
|
router.push({ name: 'SelectStyle' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header-title style-type="2" />
|
|
<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" v-if="!isDemo">
|
|
<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 v-show="!isDemo" @click="onChooseAnotherOutfit">Choose another outfit</button>
|
|
<span></span>
|
|
<button @click="onFinish">Finish</button>
|
|
</div>
|
|
</div>
|
|
<footer-navigation />
|
|
</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: 5rem;
|
|
width: 85%;
|
|
display: flex;
|
|
// justify-content: center;
|
|
justify-content: space-between;
|
|
> button {
|
|
box-sizing: content-box;
|
|
font-family: satoshiRegular;
|
|
// margin: 0 1.8rem;
|
|
border: none;
|
|
// margin: 0 5.2rem 0 auto;
|
|
min-width: 18rem;
|
|
padding: 0 3.5rem;
|
|
height: 6.9rem;
|
|
border-radius: 1.3rem;
|
|
background: #000;
|
|
font-weight: 400;
|
|
font-size: 3.89rem;
|
|
color: #fff;
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|