更改loading
This commit is contained in:
@@ -26,12 +26,12 @@
|
||||
}
|
||||
const onReload = () => {
|
||||
customizeInfo.inputText = customizeInfo.oldInputText
|
||||
generate("reload")
|
||||
generate('reload')
|
||||
customizeInfo.inputText = ''
|
||||
}
|
||||
|
||||
// 生成结果
|
||||
const generate = (type?: "reload") => {
|
||||
const generate = (type?: 'reload') => {
|
||||
customizeInfo.oldInputText = customizeInfo.inputText
|
||||
customizeInfo.oldTryOnId = customizeInfo.tryOnId
|
||||
const data = {
|
||||
@@ -39,14 +39,15 @@
|
||||
visitRecordId: generateStore.visitRecordId,
|
||||
styleId: generateStore.styleId,
|
||||
// modelPhotoId: generateStore.modelPhotoId,
|
||||
originalTryOnId: type === "reload" ? customizeInfo.oldTryOnId : generateStore.originalTryOnId,
|
||||
originalTryOnId: type === 'reload' ? customizeInfo.oldTryOnId : generateStore.originalTryOnId,
|
||||
isRegenerated: 1,
|
||||
prompt: customizeInfo.inputText
|
||||
}
|
||||
if (generateStore.customerPhotoId && customizeInfo.count === 0) data["customerPhotoId"] = generateStore.customerPhotoId
|
||||
if (generateStore.customerPhotoId && customizeInfo.count === 0)
|
||||
data['customerPhotoId'] = generateStore.customerPhotoId
|
||||
loading.value = true
|
||||
generateTryOnEffect(data)
|
||||
.then((res:any) => {
|
||||
.then((res: any) => {
|
||||
customizeInfo.count++
|
||||
customizeInfo.tryOnId = res.tryOnId
|
||||
customizeInfo.tryOnUrl = res.tryOnUrl
|
||||
@@ -92,41 +93,41 @@
|
||||
<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="customizeInfo.inputText"
|
||||
@keyup.enter="onSend"
|
||||
placeholder="Try: “Change background to Tokyo City”"
|
||||
/>
|
||||
<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></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="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 class="icons">
|
||||
<div @click="onLove">
|
||||
<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
|
||||
</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 @click="onReload" v-show="customizeInfo.oldInputText">
|
||||
<SvgIcon name="reload" size="35" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button @click="onFinish">Finish</button>
|
||||
<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<footer-navigation />
|
||||
</template>
|
||||
<div class="btns">
|
||||
<button @click="onFinish">Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer-navigation />
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@@ -121,10 +121,10 @@ const { isLoading } = toRefs(data);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer-navigation is-placeholder v-if="!isLoading"/>
|
||||
<div class="loading-container" v-if="isLoading">
|
||||
<GenerateLoading title="Generating Results..." />
|
||||
</div>
|
||||
<footer-navigation is-placeholder/>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.product{
|
||||
@@ -225,8 +225,9 @@ const { isLoading } = toRefs(data);
|
||||
.loading-container{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
padding-top: 36.6rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user