view

src/views/Workshop/customize.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
 	import { ref, onMounted, computed } from 'vue'
 	import {
@@ -12,12 +10,15 @@
 	const emit = defineEmits(['viewType'])
 	import { useRouter, useRoute } from 'vue-router'
 	import { useGenerateStore } from '@/stores'
+	import { FlowType, IsHistoryFlow } from '@/types/enum'
 	const generateStore = useGenerateStore()
 	const router = useRouter()
 	const route = useRoute()
-
-	const isDemo = computed(() => route.query.demo === '1')
-	const customizeInfo = isDemo.value ? generateStore.customizeInfoDemo : generateStore.customizeInfo
+	const query = computed(() => route.query)
+	const isHistoryFlow = computed(() => IsHistoryFlow(query.value.flowType))
+	const customizeInfo = isHistoryFlow.value
+		? generateStore.customizeInfoDemo
+		: generateStore.customizeInfo
 	const loading = ref(false)
 	const onSend = () => {
 		if (customizeInfo.inputText === '') return
@@ -38,7 +39,7 @@
 		customizeInfo.oldInputText = customizeInfo.inputText
 		customizeInfo.oldTryOnId = customizeInfo.tryOnId
 		loading.value = true
-		if (isDemo.value) {
+		if (isHistoryFlow.value) {
 			// const data = {
 			// 	prompt: customizeInfo.inputText,
 			// 	tryonUrl: customizeInfo.tryOnUrl
@@ -54,9 +55,9 @@
 			}
 			generateTryOnEffectDemo(data)
 				.then((res: any) => {
-					if(!res) return Promise.reject('生成失败');
+					if (!res) return Promise.reject('生成失败')
 					customizeInfo.count++
-					customizeInfo.tryOnId = "1"
+					customizeInfo.tryOnId = '1'
 					customizeInfo.tryOnUrl = res
 					// customizeInfo.styleUrl = res.styleUrl
 					// customizeInfo.isRegenerated = res.isRegenerated
@@ -91,7 +92,7 @@
 				})
 				.catch((err) => {
 					console.error(err)
-					if(data['customerPhotoId']) router.back()
+					if (data['customerPhotoId']) router.back()
 					loading.value = false
 				})
 		}
@@ -101,7 +102,6 @@
 	// 喜欢
 	const isLoveLoading = ref(false)
 	const onLove = () => {
-		if (isDemo.value) return
 		if (isLoveLoading.value) return
 		const http = customizeInfo.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
 		customizeInfo.isFavorite = !customizeInfo.isFavorite
@@ -112,6 +112,7 @@
 			})
 			.catch((err) => {
 				console.error(err)
+				customizeInfo.isFavorite = !customizeInfo.isFavorite
 				isLoveLoading.value = false
 			})
 	}
@@ -122,11 +123,13 @@
 		router.back()
 	}
 	const onFinish = () => {
-		if (isDemo.value) {
-			router.push({ name: 'end' })
-		} else {
-			router.push({ name: 'creation' })
-		}
+		// router.push({ name: 'creation', query: query.value })
+		router.push({ name: 'creation', query: { flowType: FlowType.H_AI } })
+		// if (isHistoryFlow.value) {
+		// 	router.push({ name: 'end' })
+		// } else {
+		// 	router.push({ name: 'creation' })
+		// }
 	}
 	// 选择另一个穿搭
 	const onChooseOutfit = () => {
@@ -135,7 +138,6 @@
 </script>
 
 <template>
-	<header-title style-type="2" />
 	<div class="loading" v-if="loading"><generate-loading /></div>
 	<div class="customize" v-else>
 		<div class="title">Customize your Look!</div>
@@ -158,7 +160,7 @@
 				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
 			</div>
 			<div class="icons">
-				<div @click="onLove" v-if="!isDemo">
+				<div @click="onLove">
 					<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
 				</div>
 				<div @click="onReload" v-show="customizeInfo.oldInputText">
@@ -168,12 +170,12 @@
 			</div>
 		</div>
 		<div class="btns">
-			<button v-show="!isDemo" @click="onChooseOutfit">Choose Outfit</button>
-			<span></span>
-			<button @click="onFinish">Finish</button>
+			<button class="choose-outfit" v-if="!isHistoryFlow" @click="onChooseOutfit">
+				Choose Outfit
+			</button>
+			<button class="finish" @click="onFinish">Finish</button>
 		</div>
 	</div>
-	<footer-navigation />
 </template>
 
 <style scoped lang="less">
@@ -299,27 +301,37 @@
 			}
 		}
 		> .btns {
-			margin-top: 5rem;
+			margin-top: 4rem;
 			width: 68%;
 			display: flex;
 			// justify-content: center;
 			justify-content: space-between;
 			> button {
 				padding: 0;
-				box-sizing: content-box;
 				font-family: satoshiRegular;
 				border: none;
 				width: 34rem;
-				height: 7.4rem;
+				height: 9.2rem;
 				border-radius: 1.3rem;
-				background: #000;
 				font-weight: 400;
 				font-size: 3.8rem;
-				color: #fff;
 				&:active {
 					opacity: 0.7;
 				}
 			}
+			> :first-child.finish,
+			> .choose-outfit {
+				background-color: transparent;
+				color: #000;
+				border: 0.2rem solid #000;
+			}
+			> :first-child.finish {
+				width: 87.5rem;
+			}
+			> .finish {
+				background-color: #000;
+				color: #fff;
+			}
 		}
 	}
 </style>