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">农民工资讯</li>
                    <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"></em>
                </div>
                <div class="searchRole">
                    <client-only> 
                        <el-select v-model="searchInputValue2" placeholder="选择职业" size="large" style="width: 80px" :key="'select2'">
                            <el-option 
                                v-for="item in selectOptions2" 
                                :label="item.name"
                                :value="item.id" 
                                :key="item.id"
                            />
                        </el-select>
                    </client-only>
                    <i></i>
                    <client-only> 
                    <el-select v-model="searchInputValue3" placeholder="选择地区" size="large" style="width: 80px" :key="'select3'">
                        <el-option 
                            v-for="item in selectOptions3" 
                            :key="item.id" 
                            :label="item.name"
                            :value="item.id" 
                        />
                        </el-select>
                    </client-only>
                    <i></i>
                    <!-- <em class="search1" @click="goToPrimary"></em> -->
                </div>
                <div class="title1">
                    更多搜索条件>>
                </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'

const searchInputValue1 = ref("")
const searchInputValue2 = ref("")
const searchInputValue3 = ref("")

let selectOptions = [
    {name:'资讯',id:1},
    {name:'商城',id:2},
    {name:'招工招聘',id:3},
]
let selectOptions2 = [
    {name:'职业1',id:1},
    {name:'职业2',id:2},
    {name:'职业3',id:3},
]
let selectOptions3 = [ 
    {name:'地区1',id:1},
    {name:'地区2',id:2},
    {name:'地区3',id:3},
]
const selectValue = ref("") //搜索左侧下拉选择的值
const inputValue = ref("") //搜索右侧框输入的值


//2.1跳转到搜索页面
let goToPrimary = async () => {
    if (inputValue.value==""||selectValue.value=="") {
        ElMessage.error('搜索项不能为空！')
    }else{
        if(selectValue.value == 2||selectValue.value == 3){
            ElMessage.error('所选分类暂不支持检索！')
        }else{
            const route = `/search/search?type=${selectValue.value}&keyword=${inputValue.value}`;
            window.location.href = route;
        }
    }
}

onMounted(async ()  => {
    //2.2 获得搜索选项
    //暂时为固定
    //商城、招工招聘 都不能跳转
    // try {
    //     const { $webUrl, $CwebUrl } = useNuxtApp();
    //     const response = await fetch($webUrl + '/web/selectWebsiteDepartment', {
    //         headers: {
    //             'Content-Type': 'application/json',
    //             'Userurl': $CwebUrl,
    //             'Origin': $CwebUrl
    //         }
    //     });
    //     const result = await response.json();
    //     department.value = result.data;
    // } catch (error) {
    //     console.error('获取部门数据失败:', error);
    // }
})
//2.搜索 end ---------------------------------------->

</script>

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