|
|
|
|
@@ -1,5 +1,5 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
|
|
|
|
|
import { onMounted, onUnmounted, reactive, ref, computed, onActivated } from "vue";
|
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
import { showConfirmDialog } from 'vant'
|
|
|
|
|
@@ -11,6 +11,9 @@ const emit = defineEmits([
|
|
|
|
|
'view-type'
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
const navList = ref([])
|
|
|
|
|
const navDisabledList = ref([])
|
|
|
|
|
|
|
|
|
|
// const data = reactive({
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
@@ -28,17 +31,50 @@ const clickSwitchVIPID = ()=>{
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {})
|
|
|
|
|
}
|
|
|
|
|
const openFlow = (path:string,flowType:string)=>{
|
|
|
|
|
if(flowType == 'clientId')return clickSwitchVIPID()
|
|
|
|
|
if(flowType == 'main'){
|
|
|
|
|
router.push({ name: path })
|
|
|
|
|
}else{
|
|
|
|
|
router.push({ name: path, query: { demo: 1 } })
|
|
|
|
|
}
|
|
|
|
|
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(()=>{
|
|
|
|
|
})
|
|
|
|
|
@@ -56,18 +92,24 @@ defineExpose({})
|
|
|
|
|
Explore
|
|
|
|
|
</div>
|
|
|
|
|
<div class="navList">
|
|
|
|
|
<div class="item" @click="openFlow('index','main')">
|
|
|
|
|
<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" @click="openFlow('recommended','reinventing')">
|
|
|
|
|
<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" @click="openFlow('index','stylist')">
|
|
|
|
|
<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" @click="openFlow('','clientId')">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -110,6 +152,12 @@ defineExpose({})
|
|
|
|
|
// 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%;
|
|
|
|
|
|