sannongzixunwang_web/components/home/pageNavigation.vue

<template>
    <div class="navigate">
        <div class="partOne">
            <div class="inner">
                <div class="navLeft">
                    <div class="navIndex">
                        <NuxtLink :to="'/'">首页</NuxtLink>
                    </div>
                    <div class="navClass">
                        <div>主题资讯</div>
                        <div>互动资讯</div>
                    </div>
                </div>
                <ul class="navigationOne">
                    <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>
                </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>
</template>

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

const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

const route = useRoute();
const routeId = route.params.id; //获得该页面的id
//1.加载依赖 end ---------------------------------------->

//2.加载模块数据 start ---------------------------------------->
const navigation1 = ref("");
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 `/newsList/${item.category_id}`;
    }else{
        return `/${item.aLIas_pinyin}/`;
    }
}
//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("")
//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("")
//跳转到搜索页面
// let goToSearch = (id) => {
//     console.log(id)
//     const route = `/search/search?catids=${id}`;
//     window.location.href = route;
// }

//获得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 == ""&&depValue.value=="") {
        ElMessage.error('请选择行政区划或者职能部门！')
    }else{

        // 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 route = `/search/search?catids=${getcityid.value}&department_id=${depValue.value}`;
        window.location.href = route;

    }
}

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

</script>

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