fix

src/types/enum.ts

@@ -3,11 +3,11 @@ export const FlowType = {
 	/** 主流程 */
 	MAIN: 'main',
 	/** 历史流程 */
-	HISTORICAL: 'historical',
+	HISTORY: 'history',
 	/** 历史流程-Outfit */
-	H_OUTFIT: 'historical-outfit',
+	H_OUTFIT: 'history-outfit',
 	/** 历史流程-Tryon */
-	H_TRYON: 'historical-tryon',
+	H_TRYON: 'history-tryon',
 	/** 历史流程-AI */
-	H_AI: 'historical-ai',
+	H_AI: 'history-ai',
 }

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

@@ -1,33 +1,46 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue'
-import MyList from '@/components/MyList.vue'
-import { DownloadImages } from '@/utils/tools'
-import {
+	import { ref, reactive, onMounted, computed } from 'vue'
+	import MyList from '@/components/MyList.vue'
+	import { DownloadImages } from '@/utils/tools'
+	import { FlowType } from '@/types/enum'
+	import {
 		getTryOnEffectFavoriteList,
 		getTryOnEffectStyleList,
 		setTryOnEffectFavorite,
 		cancelTryOnEffectFavorite
-} from '@/api/workshop'
-
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const emit = defineEmits(['view-type'])
-const query = computed(() => router.currentRoute.value.query)
-const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
-import { useGenerateStore } from '@/stores'
-const generateStore = useGenerateStore()
-
-onMounted(() => {
+	} from '@/api/workshop'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['view-type'])
+	const query = computed(() => router.currentRoute.value.query)
+	const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
+	import { useGenerateStore } from '@/stores'
+	const generateStore = useGenerateStore()
+	const props = defineProps({
+		// 是否单选模式
+		isChooseOne: { type: Boolean, default: false }
+	})
+	onMounted(() => {
 		emit('view-type', 1)
-})
-const list = reactive([])
-const loading = ref(false)
-const finish = ref(false)
-const selectCount = computed(() => list.filter((v) => v.selected).length)
-const maxSelectCount = 10
-const isChooseSave = ref(false) //是否选择保存模式
+	})
+	const list = reactive([])
+	const loading = ref(false)
+	const finish = ref(false)
+	const selectCount = computed(() => list.filter((v) => v.selected).length)
+	const maxSelectCount = 10
+	const isChooseSave = ref(false) //是否选择保存模式
 
-const onLoad = () => {
+	const navLst = [
+		{ label: 'Outfit', value: 'outfit', flowType: FlowType.H_OUTFIT },
+		{ label: 'Try-on', value: 'tryOn', flowType: FlowType.H_TRYON },
+		{ label: 'Gen-AI', value: 'genAi', flowType: FlowType.H_AI }
+	]
+	const navActive = ref('outfit')
+	const clickNav = (v) => {
+		navActive.value = v.value
+		console.log(v)
+	}
+	const onLoad = () => {
 		loading.value = true
 		const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
 		const id = visitRecordId.value || generateStore.styleId
@@ -41,7 +54,7 @@ const onLoad = () => {
 						isFavorite: !!v.isFavorite,
 						isRegenerated: !!v.isRegenerated,
 
-          selected: list.length < maxSelectCount,
+						selected: false,
 						loading: false,
 						downloaded: false
 					}
@@ -55,18 +68,22 @@ const onLoad = () => {
 				loading.value = false
 				finish.value = true
 			})
-}
-const onItem = (v) => {
+	}
+	const onItem = (v) => {
+		if (props.isChooseOne) {
+			onSelectItem(v)
+		} else {
 			isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
-}
-// 详情页
-const onDetailsItem = (v) => {
+		}
+	}
+	// 详情页
+	const onDetailsItem = (v) => {
 		if (v.isRegenerated) return
 		router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
-}
-// 喜欢
-const isLoveLoading = ref(false)
-const onLoveItem = (v) => {
+	}
+	// 喜欢
+	const isLoveLoading = ref(false)
+	const onLoveItem = (v) => {
 		if (isLoveLoading.value) return
 		const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
 		isLoveLoading.value = true
@@ -79,9 +96,9 @@ const onLoveItem = (v) => {
 				console.error(err)
 				isLoveLoading.value = false
 			})
-}
+	}
 
-const shareImageToWhatsapp = async (url) => {
+	const shareImageToWhatsapp = async (url) => {
 		// 把图片 URL 转为 Blob
 		const blob = await fetch(url).then((res) => res.blob())
 
@@ -101,16 +118,16 @@ const shareImageToWhatsapp = async (url) => {
 			const whatsappLink = `https://api.whatsapp.com/send/?text=${encodeURIComponent(message)}`
 			window.open(whatsappLink, '_blank')
 		}
-}
+	}
 
-const isShare = ref(false)
-const handleOpenShare = () => {
+	const isShare = ref(false)
+	const handleOpenShare = () => {
 		isShare.value = !isShare.value
 
 		alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
-}
+	}
 
-const onDownloadItem = async (v) => {
+	const onDownloadItem = async (v) => {
 		if (isShare.value) {
 			await shareImageToWhatsapp(v.tryOnUrl)
 			return
@@ -122,19 +139,30 @@ const onDownloadItem = async (v) => {
 			v.loading = false
 			v.downloaded = true
 		})
-}
-const onSelectItem = (v) => {
+	}
+	const onSelectItem = (v) => {
+		if (props.isChooseOne) {
+			list.forEach((v) => (v.selected = false))
+			v.selected = true
+		} else {
 			if (selectCount.value >= maxSelectCount && !v.selected) return
 			v.selected = !v.selected
-}
-const onChooseSave = () => {
+		}
+	}
+	const onChooseSave = () => {
 		isChooseSave.value = true
-}
-const onBackChooseSave = () => {
+		if (selectCount.value < maxSelectCount) {
+			list.forEach((v) => {
+				if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
+					v.selected = true
+			})
+		}
+	}
+	const onBackChooseSave = () => {
 		isChooseSave.value = false
-}
-// 下载选中项
-const onConfirm = () => {
+	}
+	// 下载选中项
+	const onConfirm = () => {
 		const downloadList = []
 		if (selectCount.value > 0) {
 			list.forEach((v, i) => {
@@ -148,12 +176,7 @@ const onConfirm = () => {
 				}
 			})
 		}
-  if (selectCount.value < maxSelectCount) {
-    list.forEach((v) => {
-      if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
-        v.selected = true
-    })
-  }
+		onChooseSave()
 		if (downloadList.length > 0) {
 			DownloadImages(
 				downloadList,
@@ -171,24 +194,43 @@ const onConfirm = () => {
 				}
 			)
 		}
-}
-const onContinue = () => {
+	}
+	const onContinue = () => {
+		if (props.isChooseOne) {
+			const selectedItem = list.find((v) => v.selected)
+			const nav = navLst.find((v) => v.value === navActive.value)
+			if (!selectedItem || !nav) return
+			router.push({ name: 'HomeNav', query: { flowType: nav.flowType } })
+		} else {
 			router.push({ name: 'end' })
-}
+		}
+	}
 </script>
 
 <template>
 	<div class="creation-list">
-    <div class="title">Your Creation</div>
+		<div class="title" v-if="isChooseOne">Choose One to Start.</div>
+		<div class="title" v-else>Your Creation</div>
+		<div class="nav">
+			<div
+				class="item"
+				v-for="(v, i) in navLst"
+				:key="i"
+				@click="clickNav(v)"
+				:class="{ active: v.value === navActive }"
+			>
+				{{ v.label }}
+			</div>
+		</div>
 		<div class="list">
 			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
 				<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
 					<img v-lazy="v.tryOnUrl" />
-          <div class="corner">
+					<!-- <div class="corner">
 						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
 						<div class="tryon" v-else>Try-on</div>
-          </div>
-          <div class="icons">
+					</div> -->
+					<div class="icons" v-if="!isChooseOne">
 						<div @click.stop="onLoveItem(v)">
 							<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
 						</div>
@@ -197,11 +239,12 @@ const onContinue = () => {
 							<van-loading color="#000" size="3rem" v-show="v.loading" />
 						</div>
 					</div>
-          <div class="icon-selected" v-show="isChooseSave && v.selected">
+					<div class="icon-selected" v-show="(isChooseSave || isChooseOne) && v.selected">
 						<SvgIcon name="modelSelected" size="50" />
 					</div>
 					<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
 					<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
+					<div class="download-state" v-show="selectCount && isChooseOne && !v.selected"></div>
 				</div>
 			</my-list>
 		</div>
@@ -215,27 +258,54 @@ const onContinue = () => {
 				<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
 			</template>
 		</div>
+		<div class="creation-footer" v-if="isChooseOne">
+			<button @click="onContinue">Continue</button>
+		</div>
 	</div>
 </template>
 
 <style scoped lang="less">
-.creation-list {
+	.creation-list {
 		width: 100%;
 		flex: 1;
 		overflow: hidden;
-  background-color: #e3e3e3;
+		background-color: #f6f6f6;
 		border-radius: 1rem;
 		position: relative;
 		color: #000;
 		display: flex;
 		flex-direction: column;
 		> .title {
-    font-family: 'satoshiRegular';
-    font-size: 9rem;
+			font-family: 'satoshiBold';
+			font-size: 8.6rem;
 			text-align: center;
 			line-height: 124%;
-    font-weight: 500;
-    margin: 7.2rem 0;
+			margin: 3.8rem 0;
+		}
+		> .nav {
+			margin: 2rem 14.3rem 5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			> .item {
+				font-family: satoshiMedium;
+				font-size: 4rem;
+				color: #a1a1a1;
+				padding-bottom: 1.2rem;
+				&.active {
+					color: #000;
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						height: 0.8rem;
+						background-color: #000;
+						border-radius: 0.25rem;
+					}
+				}
+			}
 		}
 		> .list {
 			flex: 1;
@@ -363,5 +433,27 @@ const onContinue = () => {
 				}
 			}
 		}
-}
+		.creation-footer {
+			height: 16.5rem;
+			background-color: #fff;
+			box-shadow: -2.6rem -1.4rem 3.47rem 0rem rgba(0, 0, 0, 0.05);
+			display: flex;
+			align-items: center;
+			> button {
+				font-family: satoshiRegular;
+				font-size: 3.6rem;
+				color: #fff;
+				width: 24.6rem;
+				height: 6.7rem;
+				border-radius: 0.7rem;
+				border: none;
+				background: #000;
+				font-weight: 400;
+				margin: 0 5.6rem 0 auto;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
 </style>

src/views/Workshop/creation/index.vue

@@ -2,15 +2,17 @@
 	import { ref, reactive, onMounted, watch, computed } from 'vue'
 	import CreationList from '@/views/Workshop/creation/creation-list.vue'
 	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
-
-	import { useRouter } from 'vue-router'
+	import { FlowType } from '@/types/enum'
+	import { useRouter, useRoute } from 'vue-router'
 	const router = useRouter()
-	const styleUrl = computed(() => router.currentRoute.value.query.styleUrl);
+	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)
@@ -18,7 +20,7 @@
 </script>
 
 <template>
-	<creation-list v-show="!styleUrl" />
+	<creation-list v-show="!styleUrl" :is-choose-one="isChooseOne" />
 	<creation-details v-if="styleUrl" />
 </template>
 

src/views/Workshop/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-	import { useRouter } from 'vue-router'
+	import { useRouter, useRoute } from 'vue-router'
+	import { FlowType } from '@/types/enum'
 	const router = useRouter()
-	import { ref } from 'vue'
+	const route = useRoute()
+	import { ref, computed } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import RouteCache from '@/components/RouteCache.vue'
@@ -12,12 +14,13 @@
 	const handleClickProfile = () => {
 		profileRef.value.open()
 	}
+	const notShowFooter = computed(() => route.query.flowType !== FlowType.HISTORY)
 </script>
 <template>
 	<div class="workshop">
 		<header-title @clickProfile="handleClickProfile" />
 		<RouteCache />
-		<footer-navigation />
+		<footer-navigation v-if="notShowFooter" />
 	</div>
 	<profile ref="profileRef" />
 </template>