nongmingongwang/components/home/pageNavigation.vue

<template>
    <div class="navigate">

        <div class="partOne">

            <div class="inner">

                <ul class="navigationOne">

                    <li>
                        <NuxtLink href="/">
                            首页
                        </NuxtLink>
                    </li>
                    <li v-for="(item, index) in navigation1" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                             {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>

        <div class="partTwo">

            <div class="inner">
                <ul class="partTwoNav">
                    <li class="navList" v-for="(item, index) in navigation2" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>

        <div class="partThree">

            <div class="inner">
                <div class="title">
                    搜索职位 :
                </div>
                <div class="searchRole">
                    <!--下拉框只在客户端渲染-->
                    <client-only>
                        <el-select v-model="searchInputValue1" placeholder="请选择..." size="large" style="width: 75px"
                            :key="'select1'">
                            <el-option v-for="item in selectOptions" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </client-only>
                    <i></i>
                    <input type="text" v-model="typeValue" placeholder="请输入职位/岗位名称" class="ipt">
                    <em class="search" @click="goToSearch"></em>
                </div>
                <div class="box111"></div>
                <div class="title">搜索资讯 :</div>
                <div class="searchRole" v-if="provinceList.length > 0">
                    <el-select v-model="province" placeholder="请选择省" size="large" style="width: 80px">
                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                            @click="change(item.id)" :value="item.id" />
                    </el-select>
                    <i></i>
                    <el-select v-model="city" placeholder="请选择市" no-data-text="请先选择省份" size="large" style="width: 80px">
                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                            @click="change1(item.id)" :value="item.id" />
                    </el-select>
                    <i></i>
                    <el-select v-model="region" placeholder="请选择区/县" no-data-text="请先选择市" size="large"
                        style="width: 100px">
                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <em class="searchbtn" @click="goToPrimary"></em>
                </div>
            </div>
        </div>


        <div class="phone_nav pc_none">

            <div class="phone_nav_in">
                 <NuxtLink 
                    to="/" 
                    class="phone_nav_index"
                    :class="{ 'phone_nav_index_only': $route.path === '/' }"
                    >
                            首页
                 </NuxtLink>

               <div class="phone_nav_a_box">
                            <NuxtLink 
                                v-for="(item, index) in navigation1" :key="index"
                                :to="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                {{ item.alias }} 
                            </NuxtLink>
 
                            <NuxtLink 
                                v-for="(item, index) in navigation2" :key="index"
                                :to="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                 {{ item.alias }} 
                            </NuxtLink>
  

                </div>

            </div>

        </div>
        
    </div>
</template>

<script setup>
//1.获取导航菜单 start ---------------------------------------->
//第一行导航菜单 10个
const navigation1 = ref([]);
//两行的导航菜单 20个 
const navigation2 = ref([]);
//获取导航菜单1 
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();
//获取导航菜单2
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 11
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();
//1.获取导航菜单 end ---------------------------------------->

//2.搜索 start ---------------------------------------->
import { ElSelect, ElOption, ElMessage } from 'element-plus'

let selectOptions = [
    { name: '招聘', id: 4 },
    { name: '求职', id: 5 },
]

//2.1跳转到搜索页面
const searchInputValue1 = ref("")
const typeValue = ref("")

let goToSearch = async () => {
    if (searchInputValue1.value == "") {
        ElMessage.error('搜索项类型不能为空！')
    } else {
        const route = `/search/search?type=${searchInputValue1.value}&keyword=${typeValue.value}`;
        window.location.href = route;
    }
}

//2.搜索 end ---------------------------------------->

//4.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//4.1 省
let province = ref("")
let provinceid = ref("")
let provinceList = ref("")
//4.2 市
let city = ref("")
let cityid = ref("")
let cityList = ref("")
//4.3 县
let region = ref("")
//let regionid = ref("")
let regionList = ref("")

//选择省
let areaArrList = async () => {
    const mkdata = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {},
    });
    if (mkdata.code == 200) {
        provinceList.value = mkdata.data;
    } else {
        // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        // console.log("错误位置：获取行政区划")
        // console.log("后端错误反馈：", mkdata.message)
        // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
//一开始只需要获取一下省
areaArrList();

//选择市
let change = async (id) => {
    provinceid.value = id;
    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    cityList.value = shengData.data;
}

//选择县
let change1 = async (id) => {
    cityid.value = id;
    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    regionList.value = xianData.data;
}
//4.展示行政区划 end ---------------------------------------->

//5.执行搜索 start ---------------------------------------->
const getcityid = ref("")

//获得cityid和
let goToPrimary = async () => {
    if (province.value != "") { getcityid.value = province.value }
    if (city.value != "") { getcityid.value = city.value }
    if (region.value != "") { getcityid.value = region.value }

    if (province.value == "" && city.value == "" && region.value == "") {
        ElMessage.error('请选择地区！')
    } else {
        const route = `/search/search?catids=${getcityid.value}&type=1`;
        window.location.href = route;
    }
}

//5.执行搜索 end ---------------------------------------->


//获取当前url路径
const route = useRoute();
//获得当前的完整路径
const fullPath = route.path;
const segments = fullPath.split('/'); 
const targetSegment = segments[1]; 



const delayTimer_2 = ref(null);
onMounted(() => {
    delayTimer_2.value = setTimeout(() => {
        const parentElement_a = document.querySelectorAll('.phone_nav_a_box>a');
        let nav1_length = navigation1.value.length;

        navigation2.value.forEach((item, index) => {
             
            if (item.aLIas_pinyin == targetSegment) {
                // 帮我写1下js添加class名active
                parentElement_a[index+nav1_length].classList.add('router-link-exact-active');
                
            }
        })
    },333)

})


const delayTimer = ref(null);
onMounted(() => {
    delayTimer.value = setTimeout(() => {
        
        const parentElement = document.querySelector('.phone_nav_a_box');
        const targetElement = document.querySelector('.phone_nav_a_box .router-link-exact-active');
     
        if (targetElement) {

            const targetRect = targetElement.getBoundingClientRect();
            const parentRect = parentElement.getBoundingClientRect();
    
           const distanceToParentLeft = targetRect.left - parentRect.left;
    
            parentElement.scrollLeft = distanceToParentLeft;
  
        }   
 
    }, 999);

})

</script>

<style lang="less" scoped>
@import url('@/assets/css/public/nav.less');
</style>



<style lang="less" scoped>


 
    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

            .phone_nav{ 
                 
                width:100%;margin:10px auto 0;
                height:44px;background:#489d97;
            }
            .phone_nav_in{height:44px;width:92%;margin:0px auto;}
            .phone_nav_index{height:44px;line-height:44px;font-size:16px;float:left;
                                color:rgba(255, 255, 255,.6);;margin-right:20px;}

            .phone_nav_a_box{height:44px; 
                overflow-x:auto;overflow-y:hidden;word-break: keep-all; white-space: nowrap;
            }
            .phone_nav_a_box::-webkit-scrollbar{height:0px;}
            .phone_nav_a_box a{display:inline-block;height:44px;line-height:44px;font-size:16px;margin:0 10px;
                                color:rgba(255, 255, 255,.6);}

            .phone_nav_index_only{    color:#fff; font-weight:bold;}
            .phone_nav_a_box a.router-link-exact-active{color:#fff;font-weight:bold;}    

            
            
            .partOne{display:none;}
            .partTwo{display:none;}
            .partThree{display:none;}

            .phone_none{display:none;}
    }


</style>