nongzigongxiaowang/components/home/pageNavigation.vue

<template>
    <div class="navigate">
        <div class="partOne">
            <div class="inner">
                <div class="navLeft">
                    <div class="navClass">
                        <div>
                            资讯信息
                        </div>
                        <div>
                            网上互动
                        </div>
                    </div>
                </div>
                <ul class="navigationOne">
                    <li v-for="item in navigation1">
                        <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="part2_left">
                    <li>农资商城</li>
                    <li class="part2_navList" v-for="item in navigation2">
                        <NuxtLink 
                            :href="getLinkPath(item)" 
                            :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
                <ul class="part2_right">
                    <li class="part2_right_navList" v-for="(item, index) in navigation3">
                        <NuxtLink 
                            :href="getLinkPath(item)" 
                            :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                        <em v-if="index != 2"></em>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 深度服务 -->
        <div class="deepServer">
            <div class="inner">
                <div class="deepServer_left">
                    <div class="serverTitle">
                        <NuxtLink href="/" >
                            网站首页
                        </NuxtLink>
                    </div>
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="产品" value="1" disabled />
                        <el-checkbox label="企业" value="2" disabled/>
                        <el-checkbox label="人才" value="3" disabled/>
                        <el-checkbox label="展会" value="4" disabled/>
                        <el-checkbox label="资讯" value="5" checked disabled/>
                    </el-checkbox-group>
                    <div class="serverTitle1">
                        <a href="">
                            农资商务中心
                        </a>
                    </div>
                </div>
                <div class="deepServer_right">
                    <div class="searchRole">
                        <input type="text" v-model="inputValue" placeholder="输入关键词" class="ipt">
                        <em @click="goToPrimary"></em>
                    </div>
                    <!-- <div class="serverTitle_right">
                        【高级搜索】
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//1.获取导航菜单 start ---------------------------------------->
import { ElCheckbox, ElCheckboxGroup,ElMessage  } from 'element-plus'

//第一行导航菜单 10个
const navigation1 = ref([]);
//两行的导航菜单 20个 
const navigation2 = ref([]);
//三行的导航菜单 3个
const navigation3 = ref([]);
//获取导航菜单1 
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 28,
            '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': 28
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();
//获取导航菜单3
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 3,
            'placeid': 38
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();
//1.获取导航菜单 end ---------------------------------------->

//2.搜索 start ---------------------------------------->
const typeValue = ref("")
const checkList = ref([]);// 多选框

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;
    }
}


onMounted(async () => {
        
})
//2.搜索 end ---------------------------------------->

</script>

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