aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整loding动画细节

Browse Source
This commit is contained in:
X1627315083
2025-12-23 15:05:15 +08:00
parent e8a72ec0aa
commit 6b255728af
5 changed files with 57 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/stores/modules/generate.ts
View File

@@ -2,6 +2,7 @@
import { defineStore } from 'pinia'
import MyEvent from '@/utils/myEvent'
MyEvent.add('clear-generate-state', () => useGenerateStore().clearGenerateData())
MyEvent.add('clear-client-state', () => useGenerateStore().clearCustomerInfo())
export const useGenerateStore = defineStore({
id: 'generate', // 必须指明唯一的pinia仓库的id
@@ -176,7 +177,7 @@ export const useGenerateStore = defineStore({
this.updatePhotoInfo({})
this.clearCustomizeInfo()
this.clearCustomizeInfoDemo()
this.clearCustomerInfo()
// this.clearCustomerInfo()
this.setSessionId('')
},
setCustomerInfo(data: any) {

1
src/stores/modules/userInfo.ts
View File

@@ -49,6 +49,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
removeLocal('token')
resetGenerateParams()
MyEvent.emit('clear-generate-state')
MyEvent.emit('clear-client-state')
MyEvent.emit('clearAllCache')
resolve('')
})

2
src/views/Workshop/creation/creation-list.vue
View File

@@ -10,6 +10,7 @@
cancelTryOnEffectFavorite
} from '@/api/workshop'
import { useRouter } from 'vue-router'
import MyEvent from '@/utils/myEvent'
const router = useRouter()
const emit = defineEmits(['view-type'])
const query = computed(() => router.currentRoute.value.query)
@@ -236,6 +237,7 @@
hGenerateStore.style.url = selectedItem.url
// selectedItem.isFavorite
}
MyEvent.emit('clear-generate-state')
router.push({ name: 'HomeNav', query: { flowType: nav.flowType } })
} else {
router.push({ name: 'end' })

77
src/views/Workshop/product.vue
View File

@@ -5,6 +5,7 @@ import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
import { useGenerateStore, useHGenerateStore } from '@/stores'
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite, addTryOnEffectComment } from '@/api/workshop'
import { FlowType, IsHistoryFlow } from '@/types/enum'
import gradientButton from '@/components/gradientButton.vue'
const router = useRouter()
//const props = defineProps({
@@ -64,7 +65,6 @@ const startGenerate = ()=>{
generateStore.originalTryOn.id = res.id
generateStore.originalTryOn.tryOnUrl = res.tryOnUrl
// generateStore.useStyleGenerate()//生成后需要对选择衣服页面设置不可选中样式
generateStore.setIsGenerate(false)
generateStore.clearCustomizeInfo()
}).catch((error)=>{
@@ -121,7 +121,7 @@ const handleSubmit = ()=>{
onMounted(() => {
emit('view-type', 1)
if (generateStore.isGenerate) {
if (!generateStore.originalTryOn.id) {
startGenerate()
}
})
@@ -134,7 +134,7 @@ const { isLoading } = toRefs(data);
<div class="product" v-if="!isLoading">
<div class="text">
<div class="title">
Go with this Look?
Generate Result
</div>
</div>
<div class="selectContent">
@@ -150,14 +150,25 @@ const { isLoading } = toRefs(data);
<div class="operation">
<div @click="setLike"><SvgIcon :name="`love_${generateStore.originalTryOn.isLike ? '1' : '0'}`" size="35" /></div>
<div @click="feedback"><SvgIcon name="pen" size="40" /></div>
<div @click="startGenerate"><SvgIcon name="reload" size="35" /></div>
<!-- <div><SvgIcon name="download" size="35" /></div> -->
</div>
</div>
</div>
<div class="again">
<!-- <div @click="changeModel">Change Model</div> -->
<button class="flex flex-center" @click="onContinue" style="margin-left: auto;">Continue</button>
<div class="btn">
<div class="btnItem style1" @click.stop="startGenerate()">
<gradientButton>
<template #content>
<div class="text">
<span class="icon">
<SvgIcon name="reTry" size="40" />
</span>
Re-try
</div>
</template>
</gradientButton>
</div>
<div class="btnItem style2" @click.stop="onContinue">Continue</div>
</div>
</div>
</div>
@@ -190,18 +201,18 @@ const { isLoading } = toRefs(data);
<style lang="less" scoped>
.product{
width: 100%;
// height: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
> .text{
text-align: center;
width: 100%;
margin-top: 4.3rem;
margin-top: 4rem;
> .title{
font-family: satoshiBold;
font-weight: 700;
font-size: 9.6rem;
font-size: 8.6rem;
line-height: 124%;
color: #000;
}
@@ -210,7 +221,7 @@ const { isLoading } = toRefs(data);
flex: 1;
overflow-y: auto;
padding: 0 14.1rem;
margin-top: 4.8rem;
margin-top: 4.3rem;
> .history{
width: 30.2rem;
height: 6.52rem;
@@ -229,7 +240,7 @@ const { isLoading } = toRefs(data);
}
}
> .modelBox{
margin-top: 2.5rem;
margin-top: 4.4rem;
> .model{
border: .2rem solid #D9D9D9;
// height: 110rem;
@@ -262,24 +273,36 @@ const { isLoading } = toRefs(data);
}
}
}
> .again{
margin-top: 4.4rem;
> .btn{
display: flex;
gap: 6.6rem;
justify-content: center;
> button{
border-radius: .7rem;
border: 3px solid #000;
background-color: #000;
text-align: center;
color: #fff;
margin-top: 5.2rem;
> div {
border-radius: .96rem;
width: 33.7rem;
font-size: 4.8rem;
font-family: satoshiMedium;
font-size: 3.6rem;
width: 24.6rem;
line-height: 6.7rem;
height: 6.7rem;
box-sizing: border-box;
&:last-child{
margin-right: 0;
line-height: 9.2rem;
display: flex;
justify-content: center;
&.style1{
--borderRadius: .96rem;
--borderWidth: 2px;
.text{
width: 100%;
text-align: center;
> .icon{
left: 4rem;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
}
}
&.style2{
color: #fff;
background-color: #000;
}
}
}

4
src/views/asistant/components/GenerateLoading.vue
View File

@@ -68,7 +68,7 @@ const setTl1 = ()=>{
nextTick(()=>{
let el = dotBox.value
let width = el.offsetWidth + el.parentElement.offsetWidth
let time = el.parentElement.offsetWidth / 35
let time = el.parentElement.offsetWidth / el.offsetWidth / 2
console.log(time,width)
tl1 = gsap.timeline();
tl1.to(el,time,
@@ -136,7 +136,7 @@ onMounted(() => {
.loading-dot{
height: 100%;
aspect-ratio: 1/1;
aspect-ratio: 1.2/1;
background: radial-gradient(ellipse 150% 150% at center, #ffffff,rgba(255,255,255,.4), transparent);
border-radius: 50%;
position: absolute;