更改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 = () => { const onReload = () => {
customizeInfo.inputText = customizeInfo.oldInputText customizeInfo.inputText = customizeInfo.oldInputText
generate("reload") generate('reload')
customizeInfo.inputText = '' customizeInfo.inputText = ''
} }
// 生成结果 // 生成结果
const generate = (type?: "reload") => { const generate = (type?: 'reload') => {
customizeInfo.oldInputText = customizeInfo.inputText customizeInfo.oldInputText = customizeInfo.inputText
customizeInfo.oldTryOnId = customizeInfo.tryOnId customizeInfo.oldTryOnId = customizeInfo.tryOnId
const data = { const data = {
@@ -39,14 +39,15 @@
visitRecordId: generateStore.visitRecordId, visitRecordId: generateStore.visitRecordId,
styleId: generateStore.styleId, styleId: generateStore.styleId,
// modelPhotoId: generateStore.modelPhotoId, // modelPhotoId: generateStore.modelPhotoId,
originalTryOnId: type === "reload" ? customizeInfo.oldTryOnId : generateStore.originalTryOnId, originalTryOnId: type === 'reload' ? customizeInfo.oldTryOnId : generateStore.originalTryOnId,
isRegenerated: 1, isRegenerated: 1,
prompt: customizeInfo.inputText 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 loading.value = true
generateTryOnEffect(data) generateTryOnEffect(data)
.then((res:any) => { .then((res: any) => {
customizeInfo.count++ customizeInfo.count++
customizeInfo.tryOnId = res.tryOnId customizeInfo.tryOnId = res.tryOnId
customizeInfo.tryOnUrl = res.tryOnUrl customizeInfo.tryOnUrl = res.tryOnUrl
@@ -92,41 +93,41 @@
<template> <template>
<header-title style-type="2" /> <header-title style-type="2" />
<div class="loading" v-if="loading"><generate-loading /></div> <div class="loading" v-if="loading"><generate-loading /></div>
<template v-else> <div class="customize" v-else>
<div class="customize"> <div class="title">Customize your Look!</div>
<div class="title">Customize your Look!</div> <p class="tip">Refine your Look</p>
<p class="tip">Refine your Look</p> <div class="input-box">
<div class="input-box"> <div class="help">?</div>
<div class="help">?</div> <input
<input type="text"
type="text" v-model="customizeInfo.inputText"
v-model="customizeInfo.inputText" @keyup.enter="onSend"
@keyup.enter="onSend" placeholder="Try: “Change background to Tokyo City”"
placeholder="Try: “Change background to Tokyo City”" />
/> <div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
<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>
<div class="card"> <div class="icons">
<img :src="customizeInfo.tryOnUrl" /> <div @click="onLove">
<div class="select-box"> <SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
<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>
<div class="icons"> <div @click="onReload" v-show="customizeInfo.oldInputText">
<div @click="onLove"> <SvgIcon name="reload" size="35" />
<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> <!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
<div class="btns">
<button @click="onFinish">Finish</button>
</div> </div>
</div> </div>
<footer-navigation /> <div class="btns">
</template> <button @click="onFinish">Finish</button>
</div>
</div>
<footer-navigation />
</template> </template>
<style scoped lang="less"> <style scoped lang="less">

View File

@@ -121,10 +121,10 @@ const { isLoading } = toRefs(data);
</div> </div>
</div> </div>
</div> </div>
<footer-navigation is-placeholder v-if="!isLoading"/>
<div class="loading-container" v-if="isLoading"> <div class="loading-container" v-if="isLoading">
<GenerateLoading title="Generating Results..." /> <GenerateLoading title="Generating Results..." />
</div> </div>
<footer-navigation is-placeholder/>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.product{ .product{
@@ -225,8 +225,9 @@ const { isLoading } = toRefs(data);
.loading-container{ .loading-container{
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; // align-items: center;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
padding-top: 36.6rem;
} }
</style> </style>