LJH_Shop/web/layouts/default/components/nav/index.vue

<template>
    <div class="bg-[#fff]" :class="{'border-b-[2px] border-b-[var(--el-color-primary)] border-solid':navShow}">
        <div class="flex items-center  w-[1200px] mx-auto h-[46px] leading-[46px] bg-[#fff]" >
            <div class="category w-[200px] bg-[var(--el-color-primary)] text-[#fff] text-center cursor-pointer text-[16px] leading-[46px] relative " @mouseleave.stop="handleOut($event)" @mouseover.stop="subMenuClick($event)">
                <span>商品分类</span>
                <div class="category-popup absolute top-[46px] left-0 z-9 flex" :class="{'hidden':hidden}">
                    <div class="w-[200px] box-border h-[520px] overflow-y-auto  text-[14px]  bg-[rgba(51,51,51,.9)]" >
                        <template v-for="(item,index) in categoryList" :key="index">
                            <div class="h-[40px] flex items-center justify-between px-[20px] box-border cursor-pointer text-[#fff]" @click.stop="toGoodsList(item.category_id)" :class="`index${index}`">
                                <span class="w-[140px] text-left truncate">{{item.category_name}}</span>
                                <span class="iconfont icon-fanhui text-[#fff] !text-[10px]"></span>
                            </div>
                        </template>
                    </div>
                    <div class="box-border w-[1000px] bg-[#fff] pt-[20px] text-[#333]" :class="{'hidden': !rightShow}" >
                        <template v-for="(subItem,subIndex) in categoryList[tabActive]?.child_list" :key="subIndex">
                            <div>
                                <div class="px-[20px] text-[14px] text-[#333] !leading-[20px] cursor-pointer text-left mb-[30px]" :class="{'mb-[10px]': !subItem.child_list }" @click.stop="toGoodsList(subItem.category_id)">{{subItem.category_name}}</div>
                                <div class="flex-1 flex flex-wrap">
                                    <template v-for="(grandItem,grandIndex) in subItem.child_list" :key="grandIndex">
                                        <div class="flex items-center cursor-pointer px-[20px] mb-[30px]" @click.stop="toGoodsList(grandItem.category_id)">
                                            <div class="h-[60px] flex-shink-0 mr-[10px]">
                                                <el-image class="w-[60px] h-[60px] " :src="img(grandItem.image)" fit="contain">
                                                    <template #error>
                                                        <div class="image-slot">
                                                            <img class="w-[60px] h-[60px]" src="@/assets/images/nav/default_category.png" />
                                                        </div>
                                                    </template>
                                                </el-image>
                                            </div>
                                            <div class="text-[14px] text-[#999] text-left w-[140px] h-[60px] leading-[60px] truncate">{{grandItem.category_name}}</div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>   
            </div>
            <div class="px-20px flex item-center flex-1 overflow-x-auto">
                <template v-for="(item,index) in navList" :key="index" >
                    <div class="px-[20px] text-[#333] text-[16px] leading-[46px] cursor-pointer" :class="{'!text-[var(--el-color-primary)]':activeName == item.nav_url}" @click="handleClick(item)">{{ item.nav_title }}</div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive, watch} from "vue";
import { isUrl } from '@/utils/common'
import { getCategoryTree,getNavList } from '@/app/api/index'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeName = ref('')
const navList = ref([])
// 获取导航链接
const getNavListFn = () =>{
    getNavList().then(res=>{
        navList.value = res.data
        navList.value.forEach(item =>{
            if(item.nav_url && item.nav_url.url){
                if(route.path == item.nav_url.url){
                    activeName.value = item.nav_url
                }
            }
        })
    })
}
getNavListFn()
const handleClick = (item) => {
    activeName.value = item.nav_url
    if (item.nav_url && item.nav_url.url) {
        if(isUrl(item.nav_url.url)){
            window.open(item.nav_url.url)
        }else{
            if (item.is_blank == 1) {
                const url = router.resolve({
                    path: item.nav_url.url
                })
                window.open(url.href)
            } else {
                router.push({ path: item.nav_url.url })
            }
        }
        
    }
}
// 一级菜单样式控制
const tabActive = ref(0)
const categoryList = ref([])
const getCategoryTreeFn = () => {
    getCategoryTree().then(res => {
        categoryList.value = res.data
    })
}
getCategoryTreeFn()
// 是否展示商品全部分类
let hidden = ref(true)
// 控制右侧展示
const rightShow = ref(false)
const subMenuClick = (event) =>{
    hidden.value = false
    if(event.target.className.indexOf('index') !== -1){
        let data = event.target.className.split('index') 
        tabActive.value = Number(data[1])
        if(!rightShow.value) rightShow.value = true
    }
}
const handleOut = (event)=>{
    rightShow.value = false
    hidden.value = true
}
// 去详情
const toGoodsList = (id) =>{
    hidden.value = true
    rightShow.value = false
    router.push({path:'/goods/list',query:{goods_mall_category:id}})
}

let navShow = ref(false)
watch(()=> router.currentRoute.value.path ,(newValue)=>{
    if(router.currentRoute.value.path == '/' ){
        navShow.value = false
        activeName.value = ''
    }else{
        navShow.value = true
    } 
},{immediate:true,deep: true})
</script>

<style lang="scss" scoped>
.bg-color{
    background-color: rgba(0,0,0,.4);
}
:deep(.popover-box){
    top:200px !important;
}

</style>