Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/lanecarford_front

src/assets/icons/history.svg

@@ -1,4 +1,4 @@
-<svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.96387 16.8115C1.96387 19.7782 2.8436 22.6783 4.49182 25.1451C6.14004 27.6118 8.48272 29.5344 11.2236 30.6697C13.9645 31.805 16.9805 32.1021 19.8902 31.5233C22.7999 30.9445 25.4727 29.5159 27.5705 27.4181C29.6682 25.3203 31.0969 22.6476 31.6756 19.7379C32.2544 16.8282 31.9574 13.8122 30.8221 11.0713C29.6867 8.33038 27.7641 5.9877 25.2974 4.33948C22.8307 2.69126 19.9306 1.81152 16.9639 1.81152C12.7705 1.8273 8.74548 3.46356 5.73053 6.37819L1.96387 10.1449" stroke="black" stroke-width="2.28788" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1.96387 1.81152V10.1449H10.2972M16.9639 8.47819V16.8115L23.6305 20.1448" stroke="black" stroke-width="2.28788" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 21C1 24.9556 2.17298 28.8224 4.37061 32.1114C6.56823 35.4004 9.69181 37.9638 13.3463 39.4776C17.0008 40.9913 21.0222 41.3874 24.9018 40.6157C28.7814 39.844 32.3451 37.9392 35.1421 35.1421C37.9392 32.3451 39.844 28.7814 40.6157 24.9018C41.3874 21.0222 40.9913 17.0008 39.4776 13.3463C37.9638 9.69181 35.4004 6.56823 32.1114 4.37061C28.8224 2.17298 24.9556 1 21 1C15.4088 1.02103 10.0422 3.20272 6.02222 7.08889L1 12.1111" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 1V12.1111H12.1111M21 9.88889V21L29.8889 25.4444" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/RouteCache.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="routeCache" :view-type="viewType">
-    <router-view v-slot="{ Component, route }" @view-type="changeViewType">
+    <router-view v-slot="{ Component, route }">
       <keep-alive :include="cachedViews">
         <component :is="Component" :key="route.name" />
       </keep-alive>
@@ -14,6 +14,13 @@ import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
 import MyEvent from '@/utils/myEvent'
 
+const props = defineProps({
+  viewType: {
+    type: String,
+    default: ''
+  }
+})
+
 const route = useRoute()
 
 // 缓存的组件名称列表
@@ -59,17 +66,6 @@ onMounted(() => {
   MyEvent.add('clearAllCache', clearCache)
 })
 
-//根据viewType设置布局风格样式
-const viewType = ref(0)
-const changeViewType = (v: number) => {
-  viewType.value = v
-}
-const router = useRouter()
-watch(
-  () => router.currentRoute.value,
-  () => (viewType.value = 0)
-)
-
 // 暴露方法供外部使用
 defineExpose({
   clearCache,

src/components/gradientButton.vue

@@ -48,11 +48,11 @@ const {} = toRefs(data);
 			left: 50%;
 			border-radius: var(--gradientButtonBorderRadius);
 			transform: translate(-50%, -50%);
-			background: linear-gradient(125deg,
-			#f1f1f1 0%,
-			#000 40%,
-			#000 65%,
-			#fff 100%);
+			background: linear-gradient(156deg,
+			#d3d3d3 0%,
+			#8a8682 40%,
+			#8a8682 65%,
+			#ebebeb 100%);
 		}
 	}
 </style>

src/components/selectStyle/selectItem.vue

@@ -82,22 +82,11 @@ const {} = toRefs(data);
 				</div>
 				<div class="mask" v-if="item.id == select?.oldId"></div>
 			</div>
-			<div class="btn">
-				<!-- <div>
-					<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
-					<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
-				</div> -->
+			<!-- <div class="btn">
 				<div>
 					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
 				</div>
-				<!-- <div>
-					<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
-					<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
-				</div> -->
-				<!-- <div>
-					<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
-				</div> -->
-			</div>
+			</div> -->
 		</div>
 		
 	</div>
@@ -109,7 +98,7 @@ const {} = toRefs(data);
 		flex-wrap: wrap;
 		justify-content: space-between;
 		> .item{
-			width: calc(50% - 3.1rem / 2);
+			width: calc(50% - 3.5rem / 2);
 			position: relative;
 			// margin-bottom: 3.3rem;
 			display: flex;
@@ -126,7 +115,7 @@ const {} = toRefs(data);
 				align-items: center;
 				flex-wrap: wrap;
 				height: 45rem;
-				margin: 2.4rem 0;
+				margin: 2.3rem 0;
 				background-color: #fff;
 				justify-content: center;
 				border: .6px solid #acacac;
@@ -170,26 +159,26 @@ const {} = toRefs(data);
 					// max-height: 50%;
 				}
 			}
-			> .btn{
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-				> div{
-					color: #000;
-					margin-right: 1.2rem;
-					border-radius: 50%;
-					width: 5.2rem;
-					height: 5.2rem;
-					padding: 1rem;
-					background-color: #fff;
-					&:last-child{
-						margin-right: 0rem;
-					}
-					&:hover{
-						color: #000;
-					}
-				}
-			}
+			// > .btn{
+			// 	display: flex;
+			// 	align-items: center;
+			// 	justify-content: flex-end;
+			// 	> div{
+			// 		color: #000;
+			// 		margin-right: 1.2rem;
+			// 		border-radius: 50%;
+			// 		width: 5.2rem;
+			// 		height: 5.2rem;
+			// 		padding: 1rem;
+			// 		background-color: #fff;
+			// 		&:last-child{
+			// 			margin-right: 0rem;
+			// 		}
+			// 		&:hover{
+			// 			color: #000;
+			// 		}
+			// 	}
+			// }
 		}
 	}
 </style>

src/router/index.ts

@@ -121,7 +121,7 @@ const router = createRouter({
         {
           path: '/workshop/selectStyle',
           name: 'selectStyle',
-          component: () => import('../views/Workshop/selectStyle.vue'),
+          component: () => import('../views/Workshop/selectStyle/index.vue'),
           meta: { verify: () => VerifyIDs(2) }
         },
         {

src/stores/modules/generate.ts

@@ -15,7 +15,12 @@ export const useGenerateStore = defineStore({
 		isLike: false, //是否喜欢
 		status: ''
       },
-      styleList: [{}, {}, {}, {}],
+      styleList: [
+		{id:'',taskId:'',status:'',path:''}, 
+		{id:'',taskId:'',status:'',path:''}, 
+		{id:'',taskId:'',status:'',path:''}, 
+		{id:'',taskId:'',status:'',path:''}, 
+	  ],
       model: {
         id: ''
       },
@@ -98,6 +103,12 @@ export const useGenerateStore = defineStore({
 			taskId:'',
 			status: ''
 		}
+		this.styleList = [
+			{id:'',taskId:'',status:'',path:''}, 
+			{id:'',taskId:'',status:'',path:''}, 
+			{id:'',taskId:'',status:'',path:''}, 
+			{id:'',taskId:'',status:'',path:''}, 
+		]
 	},
     //模特相关
     selectModel(data: any) {
@@ -107,7 +118,12 @@ export const useGenerateStore = defineStore({
       this.isGenerate = isGenerate
     },
     clearProductData() {
-      this.styleList = [{}, {}, {}, {}]
+      this.styleList = [
+		{id:'',taskId:'',status:'',path:''}, 
+		{id:'',taskId:'',status:'',path:''}, 
+		{id:'',taskId:'',status:'',path:''}, 
+		{id:'',taskId:'',status:'',path:''}, 
+	  ]
       this.style = {
         id: '',
 		path: '',

src/views/Workshop/creation/creation-list.vue

@@ -12,7 +12,6 @@
 	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)
 	const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
 	import { useGenerateStore, useHGenerateStore } from '@/stores'
@@ -22,9 +21,6 @@
 		// 是否单选模式
 		isChooseOne: { type: Boolean, default: false }
 	})
-	onMounted(() => {
-		emit('view-type', 1)
-	})
 	const list = reactive([])
 	const size = ref(10)
 	const page = computed(() => Math.ceil(list.length / size.value) + 1)

src/views/Workshop/creation/index.vue

@@ -7,16 +7,8 @@
 	const router = useRouter()
 	const route = useRoute()
 	const styleUrl = computed(() => router.currentRoute.value.query.styleUrl)
-	const emit = defineEmits(['view-type'])
-	watch(
-		() => router.currentRoute.value,
-		() => emit('view-type', 1)
-	)
 	const isChooseOne = computed(() => route.query.flowType === FlowType.HISTORY)
 
-	onMounted(() => {
-		emit('view-type', 1)
-	})
 </script>
 
 <template>

src/views/Workshop/customize.vue

@@ -7,7 +7,6 @@
 		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'
@@ -139,11 +138,12 @@
 		</div>
 		<div class="card">
 			<img :src="customizeInfo.tryOnUrl" />
-			<div class="select-box">
+			<div class="history-icon"><SvgIcon name="history" size="42" /></div>
+			<!-- <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="icons">
 				<div @click="onLove">
 					<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
@@ -245,6 +245,10 @@
 				height: 100%;
 				object-fit: contain;
 			}
+			> .history-icon {
+				top: 4.2rem;
+				left: 4.2rem;
+			}
 			> .select-box {
 				top: 1.8rem;
 				left: 1.8rem;
@@ -265,6 +269,7 @@
 					color: #000;
 				}
 			}
+
 			> .icons {
 				bottom: 0.27rem;
 				right: 0;

src/views/Workshop/end.vue

@@ -2,10 +2,7 @@
 	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
-	const emit = defineEmits(['view-type'])
-	onMounted(() => {
-		emit('view-type', 1)
-	})
+	
 	const onExit = () => {
 		console.log('exit')
 	}

src/views/Workshop/home.vue

@@ -7,9 +7,6 @@ import { FlowType } from '@/types/enum'
 
 //const props = defineProps({
 //})
-const emit = defineEmits([
-	'viewType'
-])
 
 // const data = reactive({
 // })
@@ -22,9 +19,6 @@ const historicalReview = ()=>{
 	router.push(`/workshop/creation?flowType=${FlowType.HISTORY}`)
 }
 
-onMounted(()=>{
-	emit('viewType', 1)
-})
 onUnmounted(()=>{
 })
 defineExpose({})

src/views/Workshop/homeNav.vue

@@ -12,9 +12,6 @@ const hGenerateStore = useHGenerateStore()
 
 //const props = defineProps({
 //})
-const emit = defineEmits([
-	'view-type'
-])
 
 const navList = ref([])
 const navDisabledList = ref([])
@@ -22,20 +19,6 @@ const navDisabledList = ref([])
 // const data = reactive({
 // })
 
-const clickSwitchVIPID = ()=>{
-	showConfirmDialog({
-		title: 'Switch VIP ID?',
-		message: 'You have unsaved changes. Your progress will be lost.',
-		confirmButtonText: 'Yes',
-		cancelButtonText: 'Cancel',
-	})
-		.then(() => {
-			MyEvent.emit('clear-generate-state')
-			MyEvent.emit('clearAllCache')
-			router.push({ name: 'customer', query: { demo: 1 } })
-		})
-		.catch(() => {})
-}
 const openFlow = (item: any)=>{
 	item.click && item.click()
 	const query = route.query
@@ -50,7 +33,6 @@ const openFlow = (item: any)=>{
 }
 
 onMounted(()=>{
-	emit('view-type', 1)
 	let nav = [
 		{
 			path: 'selectStyle',

src/views/Workshop/index.vue

@@ -19,7 +19,7 @@
 <template>
 	<div class="workshop">
 		<header-title @clickProfile="handleClickProfile" />
-		<RouteCache />
+		<RouteCache view-type="1" />
 		<footer-navigation v-if="notShowFooter" />
 	</div>
 	<profile ref="profileRef" />

src/views/Workshop/library.vue

@@ -4,14 +4,10 @@
 	import router from '@/router'
 	import { FormatDate } from '@/utils/tools'
 	import { getCustomerPhotos, deleteCustomerPhoto } from '@/api/workshop'
-	const emit = defineEmits(['view-type'])
 	import { showConfirmDialog } from 'vant'
 	import { useGenerateStore } from '@/stores'
 	const generateStore = useGenerateStore()
 
-	onMounted(() => {
-		emit('view-type', 1)
-	})
 	const loading = ref(false)
 	const finish = ref(false)
 	const list = reactive([])

src/views/Workshop/product.vue

@@ -10,7 +10,6 @@ import gradientButton from '@/components/gradientButton.vue'
 const router = useRouter()
 //const props = defineProps({
 //})
-const emit = defineEmits(['view-type'])
 let data = reactive({
 	modelList: 
 	[
@@ -120,7 +119,6 @@ const handleSubmit = ()=>{
 }
 
 onMounted(() => {
-	emit('view-type', 1)
 	if (!generateStore.originalTryOn.id) {
 		startGenerate()
 	}
@@ -134,7 +132,7 @@ const { isLoading } = toRefs(data);
 	<div class="product" v-if="!isLoading">
 		<div class="text">
 			<div class="title">
-				Generate Result
+				{{ isHistoryFlow?'Generate Result':'Go with this look?' }}
 			</div>
 		</div>
 		<div class="selectContent">

src/views/Workshop/recommended.vue

@@ -3,10 +3,7 @@
 	import { useRouter } from 'vue-router'
 	import { useGenerateStore } from '@/stores'
 	const generateStore = useGenerateStore()
-	const emit = defineEmits(['view-type'])
-	onMounted(() => {
-		emit('view-type', 1)
-	})
+	
 	const router = useRouter()
 	const clickNext = () => {
 		generateStore.updatePhotoInfo({})

src/views/Workshop/selectModel.vue

@@ -6,9 +6,7 @@ import { useGenerateStore } from '@/stores'
 const router = useRouter()
 //const props = defineProps({
 //})
-const emit = defineEmits([
-	'view-type'
-])
+
 const generateStore = useGenerateStore()
 let data = reactive({
 	modelList: 
@@ -45,9 +43,7 @@ let data = reactive({
 const setSelectedModelId = (item)=>{
 	generateStore.selectModel(item)
 }
-onMounted(()=>{
-	emit('view-type', 1)
-})
+
 const toProduct = ()=>{
 	router.push({ path: 'product' })
 }

src/views/Workshop/selectStyle/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, toRefs, computed, ref } from "vue";
-import SelectItem from "@/components/selectStyle/selectItem.vue";
 import { useRouter, useRoute } from 'vue-router'
 import { useGenerateStore, useUserInfoStore, useHGenerateStore } from '@/stores'
 import { showToast } from 'vant';
@@ -9,14 +8,11 @@ import { generateRequestOutfit, getRequestOutfit, setStyleFavorite, cancelStyleF
 import { FlowType, IsHistoryFlow } from '@/types/enum'
 import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
 import gradientButton from '@/components/gradientButton.vue'
-
+import StyleListDom from '@/views/Workshop/selectStyle/styleList.vue'
 const router = useRouter()
 const route = useRoute()
 //const props = defineProps({
 //})
-const emit = defineEmits([
-	'view-type'
-])
 const generateStore = useGenerateStore()
 const userInfoStore = useUserInfoStore()
 const hGenerateStore = useHGenerateStore()
@@ -35,7 +31,10 @@ const loadingTitle = computed(()=>{
 
 let data = reactive({
 	select:computed(()=>generateStore.style),
-	// styleList:computed(()=>generateStore.styleList),
+	styleList:computed(()=>generateStore.styleList),
+})
+let dataDom = reactive({
+	styleListVue:null,
 })
 
 let getGenerateTime = null as any
@@ -43,7 +42,7 @@ let getGenerateTime = null as any
 const updateStyle = ()=>{
 	// generateStore.updateStyle(item)
 	// data.styleList[index] = {}
-	requestOutfit({num:1})
+	requestOutfit({num:4})
 }
 const setLikeStyle = (likeStyle)=>{
 	if(!select.value.id)return
@@ -74,7 +73,7 @@ const toProduct = ()=>{
 }
 
 const requestOutfit = async ({num})=>{
-	let rv = await new Promise<void>((resolve, reject) => {
+	let rv:any = await new Promise<void>((resolve, reject) => {
 		if(isHistoryFlow.value){
 			retrieveAndRegenerate({tryOnEffectsId:hGenerateStore.originalTryOn.id}).then((rv:any)=>{
 				resolve(rv)
@@ -96,42 +95,59 @@ const requestOutfit = async ({num})=>{
 	isLoading.value = true
 	generateStore.clearStyle()
 	data.select.taskId = rv[0]
+	rv.forEach((item,index)=>data.styleList[index].taskId = item)
 	getRequestOutfitList(rv)
 }
 
 const getRequestOutfitList = (generateList)=>{
 	let value = {requestIDs:generateList.join(',')}
 	getRequestOutfit(value).then((rv:any)=>{
+		let selectIndex = rv.findIndex((item)=>item.requestId == data.select.taskId)
+		if(selectIndex != -1){
+			data.select.id = rv[selectIndex].id
+			data.select.path = rv[selectIndex].path
+			data.select.status = rv[selectIndex].status
+		}
 		rv.forEach((item)=>{
-			data.select.id = item.id
-			data.select.path = item.path
-			data.select.status = item.status
+			let index = data.styleList.findIndex((styleListItem)=>styleListItem?.taskId == item.requestId)
+			data.styleList[index] = {
+				id: item.id,
+				taskId: item.requestId,
+				status: item.status,
+				path: item.path,
+			}
 		})
 
-		if(['RUNNING','PENDING'].includes(data.select.status)){
+		if(['SUCCEEDED'].includes(data.select.status))isLoading.value = false
+		const taskIdList = data.styleList
+		.filter(item => item?.taskId && item?.status !== 'SUCCEEDED')
+		.map(item => item.taskId);
+		if(taskIdList.length > 0){
 			getGenerateTime = setTimeout(()=>{
-				getRequestOutfitList([data.select.taskId])
+				getRequestOutfitList(taskIdList)
 			},3000)
-		}else{
-			isLoading.value = false
 		}
 	})
 }
 
+const styleListInit = ()=>{
+	dataDom.styleListVue.init(data.select)
+}
+
 onMounted(()=>{
 	// generateStore.clearProductData()
-
-	emit('view-type', 1)
 	// if(!data.styleList[0]?.id)getRequestOutfitList(0)
 	if(getGenerateTime)clearTimeout(getGenerateTime)
-	if(data.select.status == 'SUCCEEDED'){
+	const taskIdList = data.styleList
+	.filter(item => item?.taskId && item?.status !== 'SUCCEEDED')
+	.map(item => item.taskId);
+	if(data.select.status == 'SUCCEEDED' && taskIdList.length == 0){
 		return
 	}else if(!data.select?.taskId){
-		requestOutfit({num:1})
-	}else if(data.select.status != 'SUCCEEDED'){
-		isLoading.value = true
-		// let generateList = [data.styleList[0].taskId]
-		getRequestOutfitList([data.select.taskId])
+		requestOutfit({num:4})
+	}else if(data.select.status != 'SUCCEEDED' || taskIdList.length > 0){
+		if(data.select.status != 'SUCCEEDED')isLoading.value = true
+		getRequestOutfitList(taskIdList)
 	}
 })
 onUnmounted(()=>{
@@ -139,6 +155,7 @@ onUnmounted(()=>{
 })
 defineExpose({})
 const { select } = toRefs(data);
+const { styleListVue } = toRefs(dataDom);
 </script>
 <template>
 	<div class="selectStyle">
@@ -155,14 +172,24 @@ const { select } = toRefs(data);
 			<div class="imgBox">
 				<img :src="select.path" alt="">
 			</div>
-			<div class="btn">
+			<div class="chooseMore" @click.stop="styleListInit">
+				<gradientButton>
+					<template #content>
+						<div class="text">
+							Choose More
+						</div>
+					</template>
+				</gradientButton>
+				<div></div>
+			</div>
+			<!-- <div class="btn">
 				<div class="like" @click.stop="setLikeStyle(select.isLike)">
 					<SvgIcon :name="`love_${select.isLike?1:0}`" size="35" />
 				</div>
 				<div class="down" @click.stop="setDownload()">
 					<SvgIcon name="download" size="35" />
 				</div>
-			</div>
+			</div> -->
 		</div>
 		<div class="btn">
 			<div class="btnItem style1" @click.stop="updateStyle()">
@@ -174,7 +201,6 @@ const { select } = toRefs(data);
 							</span>
 							Re-try
 						</div>
-						
 					</template>
 				</gradientButton>
 			</div>
@@ -185,6 +211,7 @@ const { select } = toRefs(data);
 	<div class="loading-container" v-if="isLoading">
       <GenerateLoading :title="loadingTitle"/>
     </div>
+	<StyleListDom ref="styleListVue"></StyleListDom>
 </template>
 <style lang="less" scoped>
 	.header-title {
@@ -235,18 +262,28 @@ const { select } = toRefs(data);
 		.selectContent{
 			// padding: 0 4rem;
 			margin: 0 auto;
-			overflow: auto;
 			width: 73.7rem;
-			margin-bottom: 19.4rem;
+			margin-bottom: 19rem;
 			> .imgBox{
 				height: 73.7rem;
 				width: 100%;
-				margin-bottom: 4.4rem;
+				margin-bottom: 5.6rem;
 				> img{
 					width: 100%;
 					height: 100%;
 				}
 			}
+			> .chooseMore{
+				--borderRadius: 5.4rem;
+				--borderWidth: 2px;
+				width: 24.8rem;
+				margin: 0 auto;
+				height: 7.6rem;
+				.text{
+					font-size: 3.1rem;
+					font-family: satoshiMedium;
+				}
+			}
 			> .btn{
 				display: flex;
 				align-items: center;

src/views/Workshop/selectStyle/styleList.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import SelectItem from "@/components/selectStyle/selectItem.vue";
+import { useGenerateStore, } from '@/stores'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const generateStore = useGenerateStore()
+
+
+let data = reactive({
+	showStyleList:false,
+	list:computed(()=>generateStore.styleList),
+	selectStyle:computed(()=>generateStore.style),
+	oldSelectStyle:{} as any,
+})
+
+const close = ()=>{
+	showStyleList.value = false;
+}
+
+const init = (item)=>{
+	data.showStyleList = true
+	data.oldSelectStyle = JSON.parse(JSON.stringify(item))
+}
+
+const confirm = ()=>{
+	if(data.selectStyle.id != data.oldSelectStyle.id){
+		data.selectStyle.id = data.oldSelectStyle.id
+		data.selectStyle.path = data.oldSelectStyle.path
+		data.selectStyle.status = data.oldSelectStyle.status
+		data.selectStyle.taskId = data.oldSelectStyle.taskId
+		data.selectStyle.isLike = false
+	}
+	close();
+}
+
+const setStyle = (item)=>{
+	data.oldSelectStyle = item
+}
+
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({init})
+const {showStyleList,list,oldSelectStyle} = toRefs(data);
+</script>
+<template>
+	<van-popup
+		class="user-popup"
+		v-model:show="showStyleList"
+		round
+		position="bottom"
+		teleport="body"
+	>
+    <div class="profile">
+		<div class="header">
+			<span class="title">Outfit Result</span>
+			<van-icon name="cross" class="close" @click="close" />
+		</div>
+		<div class="content">
+			<SelectItem :selectList="list" :select="oldSelectStyle" @selectItem="setStyle"></SelectItem>
+		</div>
+		<div class="bottom">
+			<div @click="confirm">Confirm</div>
+		</div>
+	</div>
+	</van-popup>
+</template>
+<style lang="less" scoped>
+	.van-popup {
+		max-height: 90%;
+		--van-popup-round-radius: 7.8rem;
+	}
+	.profile {
+		margin: 11.1rem 0 5.6rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			padding: 0 8rem 0 5.2rem;
+			margin-bottom: 8rem;
+			> .title {
+				font-family: satoshiBold;
+				font-size: 4.6rem;
+				color: #181725;
+			}
+			> .close {
+				margin-left: auto;
+				font-size: 5rem;
+				color: #a1a1a1;
+			}
+		}
+		> .content{
+			width: 96.2rem;
+		}
+		> .bottom{
+			margin: 3rem 0 4rem;
+			width: 100%;
+			> div{
+				width: 24.8rem;
+				line-height: 6.7rem;
+				font-family: satoshiMedium;
+				font-size: 3.6rem;
+				text-align: center;
+				border-radius: .7rem;
+				background-color: #000;
+				color: #fff;
+				margin-right: 4.2rem;
+				margin-left: auto;
+			}
+		}
+	}
+</style>

src/views/Workshop/uploadFace1.vue

@@ -4,10 +4,6 @@
 	import { useGenerateStore } from '@/stores'
 	import { IsHistoryFlow } from '@/types/enum'
 	const generateStore = useGenerateStore()
-	const emit = defineEmits(['view-type'])
-	onMounted(() => {
-		emit('view-type', 1)
-	})
 	const router = useRouter()
 	const route = useRoute()
 	const query = computed(() => route.query)

src/views/Workshop/uploadFace2.vue

@@ -7,10 +7,6 @@
 	const generateStore = useGenerateStore()
 	const hGenerateStore = useHGenerateStore()
 
-	const emit = defineEmits(['view-type'])
-	onMounted(() => {
-		emit('view-type', 1)
-	})
 	const router = useRouter()
 	const route = useRoute()
 	const query = computed(() => route.query)

src/views/asistant/components/GenerateLoading.vue

@@ -113,7 +113,7 @@ onMounted(() => {
 .loading-image {
   width: 36.4rem;
   height: 36.4rem;
-  animation: rotate 1s linear infinite;
+  animation: rotate 1.5s ease-in-out infinite;
 }
 
 .loading-shadow {
@@ -146,11 +146,14 @@ onMounted(() => {
 }
 
 @keyframes rotate {
-  from {
-    transform: rotate(0deg);
+  0% {
+    transform: translateY(0px);
   }
-  to {
-    transform: rotate(360deg);
+  50% {
+    transform: translateY(-100px);
+  }
+  100% {
+    transform: translateY(0px);
   }
 }
 </style>