更改loading

This commit is contained in:
李志鹏
2025-11-17 11:35:56 +08:00
parent 7cbeaab5b0
commit 14ee08f692
2 changed files with 39 additions and 37 deletions

View File

@@ -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">

View File

@@ -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>