nongfuchanpingongxiao/components/home/pageNavigation.vue

<template>
    <div class="navigate">
        <!-- 第一部分导航 start -->
        <div class="partOne">
            <div class="inner">
                <div class="navigationOneTitle">
                    资讯信息
                </div>
                <ul class="navigationOne">
                    <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>
                <em class="line"></em>
                <em class="line1"></em>
                <div class="navigationOneTitle">
                    农副商城
                </div>
                <ul class="navigationOne">
                    <li 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>
                <em class="line"></em>
                <em class="line1"></em>
                <div class="navigationOneTitle">
                    网上互动
                </div>
                <ul class="navigationOne">
                    <li v-for="(item, index) in navigation3" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias" :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 第一部分导航 end -->
         
        <!-- 第二部分导航 start -->
        <div class="partTwo">
            <div class="inner">
                <ul class="nav2">
                    <li>
                        <NuxtLink to="/">首页</NuxtLink>
                    </li>
                    <li>
                        <NuxtLink to="/">农副商业中心</NuxtLink>
                    </li>
                    <li class="navList" v-for="(item, index) in navigation4" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias" :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 第二部分导航 end -->

        <!-- 第三部分导航  start-->
        <div class="deepServer">
            <div class="inner">
                <div class="deepServer_right">
                    <div class="serverTitle_right">
                        站内搜索:
                    </div>
                    <div class="searchRole">
                        <input type="text" v-model="inputValue" placeholder="输入关键词" class="ipt">
                        <em @click="goToPrimary"></em>
                    </div>
                </div>
                <div class="deepServer_left">
                    <div class="serverTitle">
                        <!-- 供应信息 -->
                    </div>
                    <ul class="contentList">
                        <!-- <li>地区搜索:</li> -->
                        <li v-for="item in provinceList">
                            <NuxtLink :to="{ path: `/search/${item.id}`}">{{item.abbreviation}}</NuxtLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 第三部分导航  end-->
    </div>
</template>

<script setup>
//1.获取导航菜单 start ---------------------------------------->
//三行导航菜单第一个 12个
const navigation1 = ref([]);
//三行导航菜单第二个 12个
const navigation2 = ref([]);
//三行导航菜单第三个 12个
const navigation3 = ref([]);
//第二行的导航菜单 9个 
const navigation4 = ref([]);
//获取导航菜单1 
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 12,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();
//获取导航菜单2
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 12,
            'placeid': 13
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();
//获取导航菜单3
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 12,
            'placeid': 25
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();
//获取导航菜单4
async function getNavigation4() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 9,
            'placeid': 37
        },
    });
    navigation4.value = mkdata.data;
}
getNavigation4();

//1.获取导航菜单 end ---------------------------------------->

//2.搜索 start ---------------------------------------->
const inputValue = ref("") //关键词搜索

//2.1跳转到搜索页面
let goToPrimary = async () => {
    if (inputValue.value=="") {
        ElMessage.error('搜索项不能为空！')
    }else{
        const route = `/search/search?keyword=${inputValue.value}`;
        window.location.href = route;
    }
}

const provinceList = ref([]);//省列表

onMounted(async ()  => {
    //获得所有的省
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result2 = await response2.json();
        provinceList.value = result2.data;
    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }
})
//2.搜索 end ---------------------------------------->

</script>

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