sannongzixunwang_web/components/home/pageNavigation.vue

<template>
    <div class="navigate">

        <div class="partOne">
            <div class="inner">
                <div class="navLeft">
                    <div class="navIndex phone_none">

                        <NuxtLink :to="'/'"> 首页</NuxtLink>
                    </div> 

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

                    </div> 

                    <div class="navClass">
                        <div>主题资讯</div>
                        <div>互动资讯</div>
                    </div>
                </div>
                <ul class="navigationOne">
                      
                    <div class="nav_in clearfix phone_none">

                        <li v-for="(item, index) in navigation1" :key="index">
                            <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
                                <span v-else>{{ item.alias }}</span>
                            </NuxtLink>
                        </li>

                    </div>

                    <div class="nav_in clearfix pc_none">

                        <li v-for="(item, index) in navigation1" :key="index">
                            <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
                                <span v-else>{{ item.alias }}</span>
                            </NuxtLink>
                        </li>

                    </div>


                        
                </ul>
            </div>
        </div>
        <!-- 展示地区 -->
        <div class="cityBox">
            <div class="cityMain">
                <div class="cityTitle">地方频道</div>
                <ul class="cityList" v-if="provinceList.length > 0">
                    <li v-for="item in provinceList">
                        <NuxtLink :to="{ path: `/search/${item.id}` }">
                            {{ item.abbreviation }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 行政查询 -->
        <div class="select" >

            <div class="inner">
                <div class="role left">
                    <div class="title">行政职能查询  </div>
                    <div class="searchRole">
                        <el-select v-model="depValue" placeholder="职能部门" filterable size="large" style="width: 330px">
                            <el-option v-for="(item, index) in department" :key="index" :label="item.name"
                                :value="item.id" />
                        </el-select>
                        <em @click="goToPrimary"></em>
                    </div>
                </div>
                
                <div class="region left">


                    <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 @click="goToPrimary"></em>
                    </div>
                </div>

            </div>
        </div>

    </div>

    	
    <section class="navigate_phone" v-if="false">

        <div class="nav_select_btn_box">

            
            <div class="nav_select_btn nav_department_btn_box" >
                行政职能查询
                 
                <div class="nav_department_drop_box">
                    <a class="nav_department_drop_a" title="" v-for="(per_obj,per_index) in department" :key="per_obj" @click="nav_department_drop_a_fun(per_obj.id)">
                        {{per_obj.name}}
                    </a>

                </div>

            </div>
            <div class="nav_select_btn" @click="showZonePanel = true">行政区划查询</div>

        </div>
        
        <!-- 行政职能查询 -->
        <!-- <div class="nav_department_panel" v-show="true"> -->
        <div class="nav_department_panel" v-show="showZonePanel">

            <!-- {{ department }} -->
 
            <div class="panel_head_box">
                <span class="panel_head_btn nav_department_btn" @click="close_panel_fun"></span>
                <h4 class="panel_head_h4">行政区划查询</h4>
            </div>

            <div class="nav_department_panel_in">
 

                <div class="nav_department_panel_ul">
                    <a class="nav_department_panel_ul_a" title="" v-for="(per_obj,per_index) in provinceList"
                     :key="per_obj" @click="change(per_obj.id)"  
                     :class="{'nav_department_panel_ul_a_only':provinceid == per_obj.id}" >
                     {{ per_obj.name}} 
                    </a>
                </div>   
 
                <div class="nav_department_panel_ul nav_department_panel_ul_2">
                    <a class="nav_department_panel_ul_a" title="" v-for="(per_obj,per_index) in cityList" :key="per_obj"
                        @click="change1(per_obj.id)"
                        :class="{'nav_department_panel_ul_a_only':cityid == per_obj.id}" >

                        {{ per_obj.name}} 
                    </a>
                </div>   
 
                <div class="nav_department_panel_ul nav_department_panel_ul_3">
                    <a class="nav_department_panel_ul_a" title="" 
                        v-for="(per_obj,per_index) in regionList" :key="per_obj"
                        @click="change2(per_obj.id)"

                        :class="{'nav_department_panel_ul_a_only':regionid == per_obj.id}"
                    >
                        {{ per_obj.name}} 
                    </a>
                </div>   
                
                <div class="nav_department_panel_foot clearfix">

                    <div class="nav_department_panel_foot_btn nav_department_panel_foot_btn_clear" @click="foot_btn_clear_fun">清空</div>
                    <div class="nav_department_panel_foot_btn nav_department_panel_foot_btn_sure" @click="goToPrimary">确定</div>

                </div>
                
            </div>

        </div>


    </section>



</template>

<script setup>
//1.加载依赖 start ---------------------------------------->
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue';
import { ElSelect, ElOption } from 'element-plus'
import { useRoute } from 'vue-router'; 

const showZonePanel = ref(false)
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

const route = useRoute();
const routeId = route.params.id; //获得该页面的id
 

//1.加载依赖 end ---------------------------------------->

//2.加载模块数据 start ---------------------------------------->
// const navigation1 = ref("");
const navigation1 = useState('globalNavData', () => ([]))

async function getPageData2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': 0,
            'num': 35
        },
    });
    navigation1.value = mkdata.data;
}
getPageData2();

//格式化跳转路径
// const getLinkPath = (item) => {
//     if(item.is_url==1){
//         return `${item.web_url}`;
//     }else if(item.children_count == 0){
//         //return `/${item.aLIas_pinyin}/`;
//         return `/newsList/${item.category_id}?page=1`;
//     }else{
//         //return `/${item.aLIas_pinyin}/`;
//         return `/primaryNavigation/${item.category_id}`;
//     }
// }
const getLinkPath = (item) => {
    // console.log('item', item);
    if (item.is_url == 1) {
        return `${item.web_url}`;
    } else if (item.children_count == 0) {
        //return `/newsList/${item.category_id}?page=1`;
        return `/${item.aLIas_pinyin}/list-1.html`;
    }  else {
        //return `/primaryNavigation/${item.aLIas_pinyin}/`;
        return `/${item.aLIas_pinyin}/index.html`;
    }
}
//2.加载模块数据 end ---------------------------------------->

//3.职能部门 start ---------------------------------------->
let department = ref("")
const depValue = ref("")
const typeValue = ref("")
// let departmentList = async () => {
//     const mkdata = await requestDataPromise('/web/selectWebsiteDepartment', {
//         method: 'GET',
//         query: {
//             'keyword': department.value,
//         },
//     });
//     if(mkdata.code == 200){
//         department.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 ---------->")
//     }
// }
// //获得所有部门
// departmentList();
//3.职能部门 end ---------------------------------------->

//4.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//4.1 省
let province = ref("")
let provinceid = ref("")
let provinceList = ref("")
// const provinceList = useState('globalProvinceData', () => [])

//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;
    
    regionList.value = [];// 清空县 
}

//选择县
let change1 = async (id) => {
    cityid.value = id;
    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    regionList.value = xianData.data;

    
}
 
let change2 = async (id) => {
    regionid.value = id;
     
}


//4.展示行政区划 end ---------------------------------------->

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

//跳转到搜索页面
// let goToSearch = (id) => {
//     console.log(id)
//     const route = `/search/search?catids=${id}`;
//     window.location.href = route;
// }

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

     
    if (province.value == "" && city.value == "" && region.value == "" && depValue.value == "") {
        ElMessage.error('请选择行政区划或者职能部门！')
    } else {
                const route = `/search/search?catids=${getcityid.value}&department_id=${depValue.value}`;
                window.location.href = route;

        // const responseStatus =  await requestDataPromise('/web/selectWebsiteCategory', {
        // method: 'GET',
        //     query: {
        //         'cityid': getcityid.value,
        //         'department_id': depValue.value
        //     },
        // });

        // if (responseStatus.data.catid && responseStatus.data.catid.length > 0) {
        //     const catids = responseStatus.data.catid.join(',');
        //     const route = `/search/search?catids=${catids}`;
        //     window.location.href = route;
        // } else {
        //     // 可以在这里处理数组为空的情况
        //     console.log('没有可用的分类ID');
        //     const route = `/search/search`;
        //     window.location.href = route;
        // }


    }

    // 行政职能查询
    


}

const close_panel_fun = () => {
    foot_btn_clear_fun();
    showZonePanel.value = false;
}

const foot_btn_clear_fun = () => {
    regionList.value = [];// 清空县 
    region.value = "";// 清空县 名称
    city.value = "";// 清空市 名称
    cityList.value = [];// 清空市
    province.value = "";// 清空省 名称
    provinceid.value = "";// 清空省 id
}

let shake_bool = true // 声明在组件作用域顶部==防抖
const nav_department_drop_a_fun = (departmentId) => {
 
         
       if(shake_bool===true){//第1次点击
            shake_bool = false;
            depValue.value = departmentId;
            goToPrimary();
            // 行政职能查询
             ElMessage({
                message: '页面跳转中请稍等',
                type: 'success'
            });
            nav_department_drop_a_fun.timer = setTimeout(() => {
                shake_bool = true;
            }, 3333);
       }else{
            ElMessage({
                message: '请勿重复点击',
                type: 'warning'
            });
       }
    }

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

onMounted(async () => {
    //从客户端获取行政职能部门 加快打开速度
    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);
    }

    //从客户端获取行政区划
    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);
    }

 
        const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
 
            const parentElement = document.querySelector('.nav_in');
            if (targetElement && parentElement) {
                const targetRect = targetElement.getBoundingClientRect();
                const parentRect = parentElement.getBoundingClientRect();
                
                const distanceToParentLeft = targetRect.left - parentRect.left;
                
                const navigationElement = document.querySelector('.partOne .navigationOne');
                if (navigationElement) {
                    navigationElement.scrollLeft = distanceToParentLeft - 66;
                }
            }             
 


})

  
</script>

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

<style lang="less" scoped>

        @media screen and (min-width:801px){

            .nav_in{ display:flex;
                    width:100%;
                    flex-wrap: wrap;
            
            }
            .pc_none{display:none;}
        }


        @media screen and (max-width:800px){/*ipad_phone*/


            .partOne{height:auto;background:#49a769;margin-top:11px;padding:6px 0px;}
            .partOne .inner{ overflow: hidden;position:relative;}
            .partOne .inner .navLeft{display:flex;overflow:hidden;word-break: keep-all; white-space: nowrap;height:33px;text-align:left;
                            width:auto;float:left;font-weight:bold;margin-right:20px;
                }
 
            .partOne .inner .navIndex{ line-height:31px;height:33px;overflow:hidden;width:auto; } 
            .partOne .inner .navClass{  line-height:33px;height:33px;padding:0px;word-break: keep-all; white-space: nowrap;overflow:hidden;
                                         display:none;}
            .partOne .inner .navClass div{margin-left:8px; float:left;}
            .partOne .inner .navClass div:nth-child(2){padding:0px;}
            .partOne .navigationOne{ height:33px; display:block;  width:auto;
                             
                          flex:1;
                          padding:0;margin:0;
                              box-sizing:border-box;

                             overflow-y: hidden; // 改为 overlay 模式
                             overflow-x: auto; // 改为 overlay 模式
                             
                                /* 新增滚动条样式 */
                                &::-webkit-scrollbar {
                                    // width: 10;
                                    height: 4px;
                                }

                        // 隐藏滚动条轨道
                                &::-webkit-scrollbar-track {
                                    background: transparent;
                                    // width: 10;
                                    height: 4;
                                }
                                
                                // 隐藏滚动条滑块
                                &::-webkit-scrollbar-thumb {
                                    background: transparent;
                                }

                }
 
            
            
            .nav_in{height:100%;word-break: keep-all; white-space: nowrap; box-sizing:border-box;}
            .partOne .navigationOne li{width:auto;display:inline-block;height:100%;line-height:33px; overflow:hidden;
                     font-size:16px; 
            }                           
             
            .partOne .navigationOne li:nth-of-type(1){
                margin-left:0px;
              
            }                           
             
            .cityBox{display: block;overflow:hidden;height:auto;display:none;}
            .cityBox .cityMain{display: block;overflow:hidden;height:auto;width:100%;}
            .cityBox .cityMain .cityTitle{line-height: 22px;padding:0;margin:10px 0px 0px 10px;width:auto;}

            .cityList{overflow:hidden;}
            .cityBox .cityMain .cityList li{line-height:22px;margin:11px;}

            .select{overflow:hidden;height:auto;line-height:normal;}
            .select .inner{width:96%;margin:0px auto;overflow:hidden;height:auto; }
            .select .role{padding:0;height:auto;overflow:hidden;float:none;} 
            .select .role .searchRole{box-sizing:border-box;width:333px; float:left;margin-left:0px;}
            .select .el-select{width:230px!important;}
            .select .role .searchRole em{margin:4px 10px;float:right;}
            
            .select .role > .title, .select .region > .title{float:none;font-size:18px;}
            .select .region{overflow:hidden;height:auto;float:none;}
            .select .region .searchRole{float:none;padding:10px 0;width:90%;margin:5px;height:auto;}
            .select .region .el-select{margin-left:17px;}
            .select .region em{margin-left:22px;}

            .navigate_phone{
            }
             .nav_select_btn_box{

                 padding:5px 0px;
                border-bottom:1px solid #ededed;

                width:92%;margin:0px auto;
            }
             .nav_select_btn_box::after{content: '';display: block;height: 0;visibility: hidden;clear: both;}


             .nav_select_btn{
             
                height: 33px;
                line-height: 33px;
                color: #333;font-size:14px;
                 padding:0px 30px 0px 6px;
                float:left;margin:0px 20px 5px 0px;

                background:url(../../public/image/Iconly.png) no-repeat right center;
                 
                background-size:auto 20px;   
            } 


            .nav_department_btn_box{
                    position:relative;

                .nav_department_select{

                    width:100%;height:100%;position:absolute;
                    left:0px;top:0px;border:0; 
                }
       
            }
            
            
            
            .nav_department_drop_box{
                position:absolute;left:0px;top:33px;z-index:111;
                width:100%;height:333px;border:1px solid #ededed;
                background:#fff;overflow:auto;border-radius:6px;
                box-sizing:border-box;display:none;
            }
            .nav_department_btn_box:hover .nav_department_drop_box{
                display:block;
            }


            .nav_department_drop_a{
                width:100%;height:44px;line-height:44px;
                display:block;
                font-size:14px;color:#333;
                padding:0px 10px 0px;
                box-sizing:border-box;
                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
            }

            .partOne .inner .navIndex a{font-size:16px;font-weight:normal;opacity:.6; }
            .partOne .inner .navIndex .phone_nav_index_only{font-weight:bold;opacity:1; }
            

            // .select{display:none;}
            // .navigate_phone{display:none;}



               .nav_department_panel{

                    width:100%;background:#fff;left:0px;top:0px;
                    position:fixed;z-index:999;
                    height:100%;

                }
                .panel_head_box{
                    width:97%;margin:0px auto 4px;
                    height:50px;border-bottom:1px solid #b8b8b8;
                    
                    text-align:center;position:relative;
                }

                .panel_head_h4{height:50px;line-height:50px;display:inline-block;
                                font-size:22px;color:#333;text-align:center;}
                .panel_head_btn{float:right;width:22px;height:22px; top:12px;
                                position:absolute;right:0px;
                                background:url('../../public/image/guanbi1.png') no-repeat center center;
                                background-size:100% 100%;
                    }

                  .nav_department_panel_in{
                        width:100%;height:100%; box-sizing:border-box;
                        overflow:auto;position:relative;
                        padding-bottom:122px;
                    }  

                    .nav_department_panel_ul{
                        width:30%; float:left;
                         height:100%;box-sizing:border-box; 
                        overflow:auto;
                    }

                    .nav_department_panel_ul_2{
                         width:35%; background:#F2F3F7;
                    }

                    .nav_department_panel_ul_3{
                         width:35%; background:#F2F3F7;
                    }
                    .nav_department_panel_ul_a{
                        width:100%;height:40px;line-height:40px;
                        display:block;
                        font-size:16px;color:#333;
                        padding:0px 10px 0px;
                        box-sizing:border-box;
                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
                    }
                    .nav_department_panel_ul_a_only{
                        font-weight:bold; color:#46D333;
                    }
                    .nav_department_panel_foot{ 
                        width:100%;margin:0px auto;
                        height:36px; 
                        position:absolute;left:0px;bottom:70px;
                        background:#fff;text-align:center;

                        .nav_department_panel_foot_btn{
                            width:33%;height:36px;line-height:36px; display:inline-block;
                            text-align:center; 
                            border-radius:16px;font-size:16px;
                            padding:0px 10px;margin:0px 11px;
    
                        }

                        .nav_department_panel_foot_btn_clear{
                            background:#abe874;color:#fff;
                        }

                        .nav_department_panel_foot_btn_sure{
                            background:#46D333;color:#fff;
                        }
                    }


            //  .nav_in span{border:solid 1px #000;}       
            .partOne .navigationOne li a span{display:block;line-height:33px;height:33px;
                opacity:0.6;
                
            }       
            .nav_in .router-link-exact-active span{font-size:16px;font-weight:bold;opacity:1!important;}       

            .select{display:none;} 
            .phone_none{display:none;} 

        }
</style>