lanecarford_front/src/views/Workshop/homeNav.vue

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, computed, onActivated } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
import { showConfirmDialog } from 'vant'
import MyEvent from '@/utils/myEvent'

//const props = defineProps({
//})
const emit = defineEmits([
	'view-type'
])

const navList = ref([])
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 = (path:string)=>{
	const query = computed(() => router.currentRoute.value.query)
	router.push({ name: path, query: {...query.value} })

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

onMounted(()=>{
	emit('view-type', 1)
	let nav = [
		{
			path: 'selectStyle',
			imgPath: new URL('@/assets/images/nav1.png',import.meta.url).href,
			flowTypeList: ['history-tryon','history-ai'],
		},
		{
			path: 'recommended',
			imgPath: new URL('@/assets/images/nav2.png',import.meta.url).href,
			flowTypeList: ['history-outfit'],
		},
		{
			path: 'uploadFace',
			imgPath: new URL('@/assets/images/nav3.png',import.meta.url).href,
			flowTypeList: ['history-tryon','history-ai'],
		},
		{
			path: 'customize',
			imgPath: new URL('@/assets/images/nav4.png',import.meta.url).href,
			flowTypeList: ['history-tryon','history-ai'],
		},
	]
	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="title">
			Welcome Back,
			What can I help you today?
		</div>
		<div class="navBox">
			<div class="navTitle">
				Explore
			</div>
			<div class="navList">
				<div class="item active" v-for="item in navList" :key="item.path" @click="openFlow(item.path)">
					<img :src="item.imgPath" alt="">
				</div>
				<div class="item" v-for="item in navDisabledList" :key="item.path" @click="openFlow(item.path)">
					<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{
		> .title{
			padding: 0 8.4rem;
			font-family: satoshiBold;
			font-weight: 700;
			margin-top: 6.8rem;
			font-size: 9.6rem;
			line-height: 124%;
			background: #B3B3B3;
			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;
		}
		> .navBox{
			> .navTitle{
				padding: 0 8.4rem;
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 5.2rem;
				margin: 6.3rem 0;
			}
			> .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>