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">
+<svg width="42" height="42" viewBox="0 0 42 42" 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 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.96387 1.81152V10.1449H10.2972M16.9639 8.47819V16.8115L23.6305 20.1448" stroke="black" stroke-width="2.28788" 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,
+			background: linear-gradient(156deg,
-			#f1f1f1 0%,
+			#d3d3d3 0%,
-			#000 40%,
+			#8a8682 40%,
-			#000 65%,
+			#8a8682 65%,
-			#fff 100%);
+			#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 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>
 					<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>
@@ -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{
+			// > .btn{
-				display: flex;
+			// 	display: flex;
-				align-items: center;
+			// 	align-items: center;
-				justify-content: flex-end;
+			// 	justify-content: flex-end;
-				> div{
+			// 	> div{
-					color: #000;
+			// 		color: #000;
-					margin-right: 1.2rem;
+			// 		margin-right: 1.2rem;
-					border-radius: 50%;
+			// 		border-radius: 50%;
-					width: 5.2rem;
+			// 		width: 5.2rem;
-					height: 5.2rem;
+			// 		height: 5.2rem;
-					padding: 1rem;
+			// 		padding: 1rem;
-					background-color: #fff;
+			// 		background-color: #fff;
-					&:last-child{
+			// 		&:last-child{
-						margin-right: 0rem;
+			// 			margin-right: 0rem;
-					}
+			// 		}
-					&:hover{
+			// 		&:hover{
-						color: #000;
+			// 			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/profile.vue

@@ -1,55 +1,55 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, inject } from 'vue'
+	import { ref, reactive, onMounted, inject } from 'vue'
-import router from '@/router'
+	import router from '@/router'
-import { showConfirmDialog, showToast } from 'vant'
+	import { showConfirmDialog, showToast } from 'vant'
-import { useUserInfoStore, useOverallStore } from '@/stores'
+	import { useUserInfoStore, useOverallStore } from '@/stores'
-import { LogOut } from '@/api/login'
+	import { LogOut } from '@/api/login'
-import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
+	import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
-import MyEvent from '@/utils/myEvent'
+	import MyEvent from '@/utils/myEvent'
-import { encryptPassword } from '@/utils/tools'
+	import { encryptPassword } from '@/utils/tools'
-import { updateUserInfo } from '@/api/login'
+	import { updateUserInfo } from '@/api/login'
 
-const props = defineProps<{
+	const props = defineProps<{
 		isCustomer?: boolean
-}>()
+	}>()
 
-const userInfoStore = useUserInfoStore()
+	const userInfoStore = useUserInfoStore()
-const overallStore = useOverallStore()
+	const overallStore = useOverallStore()
-const emit = defineEmits(['view-type', 'selected-customer'])
+	const emit = defineEmits(['selected-customer'])
-const show = ref(false)
+	const show = ref(false)
-const isEdit = ref(false)
+	const isEdit = ref(false)
-const form = reactive({
+	const form = reactive({
 		name: { msg: '', value: '' },
 		email: { msg: '', value: '' },
 		password: { show: true, msg: '', value: '' }
-})
+	})
-const open = () => {
+	const open = () => {
 		form.name.value = userInfoStore.state.userInfo.username
 		form.email.value = userInfoStore.state.userInfo.email
 		form.password.value = ''
 		isEdit.value = false
 		show.value = true
-}
+	}
-const close = () => {
+	const close = () => {
 		show.value = false
-}
+	}
-const onEditItem = (item) => {
+	const onEditItem = (item) => {
 		if (!form[item]) return
 		form[item].edit = true
-}
+	}
-const onSaveItem = (item) => {
+	const onSaveItem = (item) => {
 		if (!form[item]) return
 		form[item].edit = false
-}
+	}
-const switchCustomer = () => {
+	const switchCustomer = () => {
 		// console.log('switchCustomer')
 		handleShowPopup(true)
-}
+	}
-const edit = () => {
+	const edit = () => {
 		form.password.value = ''
 		isEdit.value = true
-}
+	}
-const confirm = () => {
+	const confirm = () => {
 		if (!isEdit.value) return
 		const password = form.password.value
 		const params = {
@@ -78,8 +78,8 @@ const confirm = () => {
 			form.password.value = ''
 			isEdit.value = false
 		})
-}
+	}
-const logout = () => {
+	const logout = () => {
 		showConfirmDialog({
 			title: 'Log out',
 			message: 'Are you sure you want to log out?',
@@ -93,23 +93,23 @@ const logout = () => {
 				})
 			})
 			.catch(() => {})
-}
+	}
 
-const showSwitchCustomerPopup = ref(false)
+	const showSwitchCustomerPopup = ref(false)
-const custmerParams = ref<CustomerListParams>({
+	const custmerParams = ref<CustomerListParams>({
 		current: 1,
 		size: 5,
 		desc: true
-})
+	})
-const customerList = ref<any[]>([])
+	const customerList = ref<any[]>([])
-const pager = reactive({
+	const pager = reactive({
 		loading: false,
 		noMore: false,
 		total: null as number | null
-})
+	})
-const customerListEl = ref<HTMLElement | null>(null)
+	const customerListEl = ref<HTMLElement | null>(null)
 
-const loadCustomers = async (reset = false) => {
+	const loadCustomers = async (reset = false) => {
 		if (pager.loading) return
 		if (reset) {
 			custmerParams.value.current = 1
@@ -153,31 +153,31 @@ const loadCustomers = async (reset = false) => {
 		} finally {
 			pager.loading = false
 		}
-}
+	}
 
-const onScroll = (e: Event) => {
+	const onScroll = (e: Event) => {
 		const el = e.target as HTMLElement
 		if (!el) return
 		if (pager.loading || pager.noMore) return
 		if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
 			loadCustomers(false)
 		}
-}
+	}
-// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
+	// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
-const handleShowPopup = (flag: boolean) => {
+	const handleShowPopup = (flag: boolean) => {
 		showSwitchCustomerPopup.value = flag
 		if (props.isCustomer) return
 		show.value = !flag
 		if (flag) {
 			loadCustomers(true)
 		}
-}
+	}
-const handleChangeChecked = (item) => {
+	const handleChangeChecked = (item) => {
 		customerList.value.forEach((customer) => {
 			customer.checked = customer.vipId === item.vipId
 		})
-}
+	}
-const handleSelectCustomer = () => {
+	const handleSelectCustomer = () => {
 		const selectedCustomer = customerList.value.find((customer) => customer.checked)
 		if (selectedCustomer) {
 			emit('selected-customer', selectedCustomer)
@@ -191,22 +191,22 @@ const handleSelectCustomer = () => {
 			})
 		}
 		showSwitchCustomerPopup.value = false
-}
+	}
 
-const handleFetchCustomerList = () => {
+	const handleFetchCustomerList = () => {
 		loadCustomers(true)
-}
+	}
-MyEvent.add('update-customer-list', handleFetchCustomerList)
+	MyEvent.add('update-customer-list', handleFetchCustomerList)
 
-// const openSwitchCustomerPopup = (flag = true) => {
+	// const openSwitchCustomerPopup = (flag = true) => {
-//   showSwitchCustomerPopup.value = flag
+	//   showSwitchCustomerPopup.value = flag
-// }
+	// }
 
-onMounted(() => {
+	onMounted(() => {
 		handleFetchCustomerList()
-})
+	})
 
-defineExpose({ open, close, handleShowPopup })
+	defineExpose({ open, close, handleShowPopup })
 </script>
 
 <template>
@@ -331,11 +331,11 @@ defineExpose({ open, close, handleShowPopup })
 </template>
 
 <style scoped lang="less">
-.van-popup {
+	.van-popup {
 		max-height: 90%;
 		--van-popup-round-radius: 7.8rem;
-}
+	}
-.profile {
+	.profile {
 		margin: 6.5rem 0;
 		display: flex;
 		flex-direction: column;
@@ -444,9 +444,9 @@ defineExpose({ open, close, handleShowPopup })
 				margin-top: 17.8rem;
 			}
 		}
-}
+	}
 
-.van-popup.user-popup {
+	.van-popup.user-popup {
 		height: 116.1rem;
 		color: #181725;
 		border-top-left-radius: 7.8rem;
@@ -516,5 +516,5 @@ defineExpose({ open, close, handleShowPopup })
 			box-sizing: border-box;
 			text-align: center;
 		}
-}
+	}
 </style>

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
+			let index = data.styleList.findIndex((styleListItem)=>styleListItem?.taskId == item.requestId)
-			data.select.path = item.path
+			data.styleList[index] = {
-			data.select.status = item.status
+				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})
+		requestOutfit({num:4})
-	}else if(data.select.status != 'SUCCEEDED'){
+	}else if(data.select.status != 'SUCCEEDED' || taskIdList.length > 0){
-		isLoading.value = true
+		if(data.select.status != 'SUCCEEDED')isLoading.value = true
-		// let generateList = [data.styleList[0].taskId]
+		getRequestOutfitList(taskIdList)
-		getRequestOutfitList([data.select.taskId])
 	}
 })
 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 {
+  0% {
-    transform: rotate(0deg);
+    transform: translateY(0px);
   }
-  to {
+  50% {
-    transform: rotate(360deg);
+    transform: translateY(-100px);
+  }
+  100% {
+    transform: translateY(0px);
   }
 }
 </style>