9dd3bed850
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
335 lines
8.3 KiB
Vue
335 lines
8.3 KiB
Vue
<script setup lang="ts">
|
|
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
|
|
import gradientButton from '@/components/gradientButton.vue'
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import {
|
|
generateTryOnEffect,
|
|
setTryOnEffectFavorite,
|
|
cancelTryOnEffectFavorite
|
|
} from '@/api/workshop'
|
|
const emit = defineEmits(['viewType'])
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useGenerateStore, useHGenerateStore } from '@/stores'
|
|
import { FlowType, IsHistoryFlow } from '@/types/enum'
|
|
const generateStore = useGenerateStore()
|
|
const hGenerateStore = useHGenerateStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const query = computed(() => route.query)
|
|
const isHistoryFlow = computed(() => IsHistoryFlow(query.value.flowType))
|
|
const customizeInfo = isHistoryFlow.value
|
|
? hGenerateStore.customizeInfo
|
|
: 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
|
|
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
|
|
}
|
|
if (isHistoryFlow.value) {
|
|
data['originalTryOnId'] =
|
|
type === 'reload' ? customizeInfo.oldTryOnId : hGenerateStore.originalTryOnId
|
|
} else {
|
|
data['styleId'] = generateStore.styleId
|
|
data['originalTryOnId'] =
|
|
type === 'reload' ? customizeInfo.oldTryOnId : generateStore.originalTryOnId
|
|
}
|
|
generateTryOnEffect(data)
|
|
.then((res: any) => {
|
|
customizeInfo.count++
|
|
customizeInfo.tryOnId = res.id
|
|
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 })
|
|
const query_ = {
|
|
...query.value,
|
|
active: FlowType.H_AI
|
|
}
|
|
router.push({ name: 'creation', query: query_ })
|
|
// 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 title="Generating Results..." />
|
|
</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">
|
|
<span>Choose Outfit</span>
|
|
</button>
|
|
<button class="finish" @click="onFinish"><span>Finish</span></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;
|
|
min-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 {
|
|
color: #000;
|
|
background: linear-gradient(165deg, #b3b3b3 0%, #000 50%, #b3b3b3 100%);
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 0.25rem solid transparent;
|
|
border-radius: 1.3rem;
|
|
}
|
|
}
|
|
> :first-child.finish {
|
|
width: 87.5rem;
|
|
}
|
|
> .finish {
|
|
background-color: #000;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|