lanecarford_front/src/views/Workshop/homeNav.vue

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, computed, onActivated } from "vue";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { showConfirmDialog } from 'vant'
import MyEvent from '@/utils/myEvent'
import { FlowType, IsHistoryFlow } from '@/types/enum'
import { useHGenerateStore } from '@/stores'
const hGenerateStore = useHGenerateStore()


//const props = defineProps({
//})

const navList = ref([])
const navDisabledList = ref([])

// const data = reactive({
// })

const openFlow = (item: any)=>{
	item.click && item.click()
	const query = route.query
	router.push({ name: item.path, query: {...query} })

	// if(flowType == 'clientId')return clickSwitchVIPID()
	// if(flowType == 'main'){
	// 	router.push({ name: path })
	// }else{
	// 	router.push({ name: path, query: { demo: 1 } })
	// }
}

onMounted(()=>{
	let nav = [
		{
			path: 'selectStyle',
			imgPath: new URL('@/assets/images/nav1.png',import.meta.url).href,
			flowTypeList: [FlowType.H_TRYON,FlowType.H_AI],
		},
		{
			path: 'product',
			imgPath: new URL('@/assets/images/nav2.png',import.meta.url).href,
			flowTypeList: [FlowType.H_OUTFIT],
		},
		{
			path: 'uploadFace',
			imgPath: new URL('@/assets/images/nav3.png',import.meta.url).href,
			flowTypeList: [FlowType.H_TRYON,FlowType.H_AI],
			click(){ 
				hGenerateStore.clearCustomizeInfo()
			},
		},
		{
			path: 'customize',
			imgPath: new URL('@/assets/images/nav4.png',import.meta.url).href,
			flowTypeList: [FlowType.H_TRYON,FlowType.H_AI],
			click(){ 
				hGenerateStore.clearCustomizeInfo()
				hGenerateStore.uploadCustomizeInfo({
					tryOnId: hGenerateStore.originalTryOn.id,
					tryOnUrl: hGenerateStore.originalTryOn.tryOnUrl,
					isFavorite: hGenerateStore.originalTryOn.isLike,
					styleUrl: hGenerateStore.style.url,
				})
			},
		},
	]
	nav.forEach((item)=>{
		const query = computed(() => router.currentRoute.value.query)
		if(item.flowTypeList.includes(query.value?.flowType as string)){
			navList.value.push(item)
		}else{
			navDisabledList.value.push(item)
		}
	})
})
onUnmounted(()=>{
})
defineExpose({})
// const {  } = toRefs(data);
</script>
<template>
	<div class="homeNavPage">
		<div class="shadow top"></div>
		<div class="shadow bottom"></div>
		<div class="titleBox">
			<div class="title">
				Choose one<br/>
				function to explore.
			</div>
			<div class="info">
				Welcome back! What can I help you today?
			</div>
		</div>
		<div class="navBox">
			<div class="navList">
				<div class="item active" v-for="item in navList" :key="item.path" @click="openFlow(item)">
					<img :src="item.imgPath" alt="">
				</div>
				<div class="item" v-for="item in navDisabledList" :key="item.path" @click="openFlow(item)">
					<img :src="item.imgPath" alt="">
				</div>
				<!-- <div class="item" @click="openFlow('index')">
					<img src="@/assets/images/nav1.png" alt="">
				</div>
				<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('recommended','reinventing')">
					<img src="@/assets/images/nav2.png" alt="">
				</div>
				<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('index','stylist')">
					<img src="@/assets/images/nav3.png" alt="">
				</div>
				<div class="item" :class="{'active': ['history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('','clientId')">
					<img src="@/assets/images/nav4.png" alt="">
				</div> -->
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.header-title {
		--header-title-background: #fff;
		--header-title-height: 12rem !important;
	}
	.homeNavPage{
		> .shadow{
			position: absolute;
			width: 91rem;
			height: 92rem;
			background: linear-gradient(88.42deg, #FFFFFF 32.58%, #D9D9D9 94.9%);
			transform: rotate(312deg);
			&.top{
				top: -20%;
				right: -20%;
			}
			&.bottom{
				bottom: -30%;
				left: -20%;
				transform: rotate(134deg);
			}
		}
		> .titleBox{
			padding-left: 7.9rem;
			margin-top: 13.4rem;
			margin-bottom: 11.2rem;
			> div{
				background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%), linear-gradient(
				344deg, #B3B3B2 16%, #000000 66%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
			> .title{
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 10rem;
				line-height: 124%;
			}
			> .info{
				margin-top: 4.7rem;	
				font-size: 4rem;
				font-family: satoshiRegular;
			}
		}
		> .navBox{
			> .navList{
				display: flex;
				flex-wrap: wrap;
				padding: 0 7.4rem;
				gap: 4.8rem;
				> .item{
					// width: 44.2rem;
					// height: 41.6rem;
					height: auto;
					width: calc(50% - 4.8rem / 2);
					pointer-events: none;
					opacity: .5;
					&.active{
						pointer-events: auto;
						opacity: 1;
					}
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}
	}
</style>