nongfuchanpingongxiao/components/home/Panel.vue

<template> 
    <main class="panel_main pc_none" ref="panelMainRef">

       <div class="panel_head_box">
            <span class="panel_head_btn"  @click="close_panel_btn_fun"></span>
            <h4 class="panel_head_h4">网站地图</h4>
       </div>     
       <section class="panel_long clearfix">

            <div class="panel_main_in">

                    <div class="panel_box">
 
                        <div class="panel_a_box ">
                            <!-- {{navigation1}} -->
                             <NuxtLink class="panel_a_btn dot1" :to="'/'">首页</NuxtLink>
                            <NuxtLink class="panel_a_btn dot1" 
                                v-for="(per_obj,per_index) in navigation1" 
                                 
                                @click="getLinkPath(per_obj)"                            
                                  
                                :key="per_obj">
                                
                                {{per_obj.alias}}
                            </NuxtLink>
 
                        </div>   

                    </div>

                    <div class="panel_box panel_box_line" v-if="false">

                        <div class="panel_name_box">
                            <div class="panel_name">地方频道</div> 
                         
                        </div>   

                        <div class="panel_a_box ">
                            <NuxtLink class="panel_a_btn_2 dot1" href="" title="" 
                                v-for="(per_obj,per_index) in provinceList" :key="per_obj"
                                :to="{ path: `/search/${per_obj.id}` }"
                            > 
                                 {{per_obj.abbreviation}}
                            </NuxtLink>
                        </div>   
                    </div>

                    <div class="panel_box panel_box_line" v-if="if_shop_s">


                        <div class="panel_name_box">
                            <div class="panel_name">地方频道</div> 
                        </div>   

                        <div class="panel_a_box ">
                             

                            <NuxtLink :to="`/${targetSegment}/${shopNavOnePinyin}/list-1.html?cityid=${item.id}`"
                                 v-for="item in provinceList1"
                                :class="['panel_a_btn_2', { 'shop_name_a_only': item.id == cityId }]">
                                {{ item.abbreviation }} 
                            </NuxtLink>

                            <NuxtLink :class="['panel_a_btn_2', { 'shop_name_a_only': item.id == cityId }]"
                                :to="`/${targetSegment}/${shopNavOnePinyin}/list-1.html?cityid=${item.id}`"
                                 v-for="item in provinceList2">
                                {{ item.abbreviation }}
                            </NuxtLink>
 
                     
                            <NuxtLink :class="['panel_a_btn_2', { 'shop_name_a_only': item.id == cityId }]"
                                :to="`/${targetSegment}/${shopNavOnePinyin}/list-1.html?cityid=${item.id}`"
                                 v-for="item in provinceList3">
                                {{ item.abbreviation }}
                            </NuxtLink>
                     

                        </div>   
                    </div>

                    <div class="panel_box panel_box_line" v-if="if_shop_1">

                        <div class="panel_name_box">
                            <div class="panel_name">地方频道</div> 
                        </div>   

                        <div class="panel_a_box ">
                             
                            <NuxtLink :to="`/${targetSegment}/${targetSegment1}/list-1.html?cityid=${item.id}`"
                                :title="item.name" v-for="item in provinceList1"
                                :class="['panel_a_btn_2', { 'shop_name_a_only': item.id == cityId }]">
                                {{ item.abbreviation }}
                            </NuxtLink>
 
                            <NuxtLink :class="['panel_a_btn_2', { 'shop_name_a_only': item.id == cityId }]"
                                    :to="`/${targetSegment}/${targetSegment1}/list-1.html?cityid=${item.id}`"
                                    :title="item.name" v-for="item in provinceList2">
                                    {{ item.abbreviation }}
                            </NuxtLink>
                     
                            <NuxtLink :class="['panel_a_btn_2', { 'shop_name_a_only': item.id == cityId }]"     
                                :to="`/${targetSegment}/${targetSegment1}/list-1.html?cityid=${item.id}`"
                                :title="item.name" v-for="item in provinceList3">
                                {{ item.abbreviation }}
                            </NuxtLink>

                        </div>   
                    </div>
 
                    <!-- 行政查询 -->
                    <div class="select panel_box_line" v-if="false">

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

    </main>
</template>

<script setup>
 
const if_shop_s = ref(false)
//   components\goods\subMenu.vue

const if_shop_1 = ref(false)
//   components\goods\subMenu1.vue


//判断是否是商城站type=2是商城
const targetSegment = getRoutePath(1);//地址栏名字
const targetSegment1 = getRoutePath(2);

const navId = ref(0)//当前导航标记哪个

    const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
        method: 'GET',
        query: {
            'pinyin': targetSegment,
        },
    });
 
if (getRouteId.code == 200) {
    navId.value = parseInt(getRouteId.data.category_id)
} else {
    console.log("错误位置：通过url路径查询导航池id")
}



const the_path = (useRoute()).path
const the_path_arr = the_path.split("/")


//判断是否是商城站type=2是商城
    if (getRouteId.data.type == 2 && the_path_arr.length == 3) {
        if_shop_s.value = true
  
        
    }
    if (getRouteId.data.type == 2 && the_path_arr.length == 4 && the_path_arr[the_path_arr.length-1].startsWith('list')) {
        if_shop_1.value = true
         
        
    }


 
 // 注入全局导航数据
// const navigation1 = useState('globalNavData')
 const navigation1 = ref("");


//1.2 获得商城导航
const shopNav = ref("")
const shopNavOnePinyin = ref("")//获得商城导航的第一个 作为默认的跳转链接
let getShowNav = async () => {
    const responseStatus = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            placeid: 0,
            pid: navId.value,
            num: 8,
            type: 1
        },
    });

    shopNav.value = responseStatus.data
    shopNavOnePinyin.value = responseStatus.data[0].aLIas_pinyin
     

}
getShowNav();


//1.3 标记当前选择的地区
const route = useRoute();
//获得详情id
const cityId = ref(route.query.cityid)


watch(route, () => {
    cityId.value = route.query.cityid
})




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

const panelVisible = useState('panelVisible')

// 关闭面板
const close_panel_btn_fun = () => {
  panelVisible.value = false
}

//3.职能部门 start ---------------------------------------->
let department = ref("")
const depValue = 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;
}

//选择县
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 ---------------------------------------->


//2.获得省列表 start ---------------------------------------->
const provinceList1 = ref([]);//省列表1
const provinceList2 = ref([]);//省列表2
const provinceList3 = ref([]);//省列表3
onMounted(async () => {

    //获得所有的省
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result = await response.json();
        for (let index in result.data) {
            if (index < 15) {
                provinceList1.value.push(result.data[index])
            } else if (index > 14 && index < 30) {
                provinceList2.value.push(result.data[index])
            } else if (index > 29) {
                provinceList3.value.push(result.data[index])
            }
        }
    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }



    //从客户端获取行政职能部门 加快打开速度
    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 getLinkPath = (item) => {
     panelVisible.value = false
      
     let the_path;
    if (item.is_url == 1) {
        the_path = `${item.web_url}`;

        // return `${item.web_url}`;
    } else if (item.children_count == 0) {
         the_path = `/${item.aLIas_pinyin}/list-1.html`;

        // return `/${item.aLIas_pinyin}/list-1.html`;
    }  else {
        the_path = `/${item.aLIas_pinyin}/index.html`; 

        // return `/${item.aLIas_pinyin}/index.html`;
    }

        const { $router } = useNuxtApp();
        $router.push(the_path);
}
 
 
import { watch } from 'vue'
onMounted(() => {
 
    const delayTimer_hid = ref(null);//延迟器
    delayTimer_hid.value = setTimeout(() => {
            
            watch(panelVisible, (newValue, oldValue) => {
            
            // 根据panelVisible的状态执行不同操作
                if (newValue) {
                    document.body.classList.add("body_hid")
                } else {
                    // 面板隐藏时的操作
                    document.body.classList.remove('body_hid')
                }
            })
    
    }, 333);
   
})

    // 向左滑动事件相关变量
    let touchStartX = 0;
    let touchEndX = 0;
    let panelMainRef = ref(null);

    // 监听向左滑动的最小距离（像素）
    const MIN_SWIPE_DISTANCE = 33;

    // 向左滑动处理函数
    const handleSwipeLeft = () => {
        // 这里可以执行向左滑动后需要的操作，例如关闭面板
        return
        close_panel_btn_fun();
    };

    // 触摸开始事件
    const handleTouchStart = (e) => {
        touchStartX = e.touches[0].clientX;
    };

    // 触摸结束事件
    const handleTouchEnd = (e) => {
        touchEndX = e.changedTouches[0].clientX;
        handleSwipe();
    };

    // 滑动检测逻辑
    const handleSwipe = () => {
        const swipeDistance = touchEndX - touchStartX;
        // 如果向左滑动的距离大于最小阈值（负值表示向左滑动）
        if (swipeDistance < -MIN_SWIPE_DISTANCE) {
            handleSwipeLeft();
        }
    };

    onMounted(async () => {
        // 获取.panel_main元素并添加触摸事件监听
        panelMainRef.value = document.querySelector('.panel_main');
        
        if (panelMainRef.value) {
            panelMainRef.value.addEventListener('touchstart', handleTouchStart);
            panelMainRef.value.addEventListener('touchend', handleTouchEnd);
        }
    });

    onUnmounted(() => {
        // 组件卸载时移除事件监听器，防止内存泄漏
        if (panelMainRef.value) {
            panelMainRef.value.removeEventListener('touchstart', handleTouchStart);
            panelMainRef.value.removeEventListener('touchend', handleTouchEnd);
        }
    });


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

<style lang="less" scoped>

    @media screen and (max-width:800px){/*ipad_phone*/
        .dot1{word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
    }

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


        .panel_main{
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#F6F6F6;
            z-index:1999;
            overflow:hidden;
        }

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

        .panel_long{
           height:100%;
          overflow:auto;
        }


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

          .panel_main_in{width:96%;margin:0px auto;padding-bottom:66px;}  
          .panel_box{}  
            .panel_name_box{
                width:100%;
                height:44px;
                 
            }
            .panel_name{
                float:left;font-weight:bold;
                height:44px;
                line-height:44px;
                font-size:16px;
                color:#333;
                // padding-left:20px;
            }
             
             
            .panel_a_box{
                width:100%;
                overflow:hidden;
                margin-bottom:10px;
                  
            }
             
            .panel_box_line{
                border-top:1px solid #ddd;
            }
            .panel_a_btn{
                float:left;
                width:23%;margin: 2% 1%;box-sizing:border-box;text-align:center;
                height:44px;
                line-height:44px;
                font-size:12px;
                color:#333; 
                padding:0 4px;background:#F6F6F6;border:solid 1px #ddd;
            }
            .panel_a_btn_2{
                float:left;
                width:14%;margin:4px 1.3%;box-sizing:border-box;text-align:center;
                height:33px;
                line-height:33px;
                font-size:14px;
                color:#333; 
                padding:0 8px;background:#F6F6F6;border:solid 1px #ddd;
            }
 

            .panel_a_btn_2.shop_name_a_only{
                background:#004564;color:#fff;
            }


    
    }
</style>

 
<style >

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

 
            .body_hid{
                
                overflow:hidden;
            }
    }
</style>