nongminwang/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 ">
                            

                            <NuxtLink to="/" title="首页" class="panel_a_btn">
                                首页
                            </NuxtLink>

                            <NuxtLink class="panel_a_btn" 
                                v-for="(item, index) in navigation1" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                                 {{ item.alias }} 
                            </NuxtLink>                            


                            <!-- <NuxtLink class="panel_a_btn" 
                                v-for="(item, index) in navigation2" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                              {{ item.alias }} 
                            </NuxtLink> -->


                        </div>   

                    </div>

                    <!-- 互动版块 -->
                     
                    <div class="panel_box panel_box_line phone_none" >


                        <div class="panel_name_box">
                            <div class="panel_name">互动推荐</div> 
                        </div>   
 
                        <div class="panel_a_box ">

                            
                            <NuxtLink class="panel_a_btn" 
                                v-for="(item, index) in navigation2" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                              {{ item.alias }} 
                            </NuxtLink>

 
                        </div>   
                    </div>

            </div>
      </section>

    </main>
</template>

<script setup>
 
 


//3.获取导航菜单 start ---------------------------------------->
const navigation1 = ref([]); 
const navigation2 = ref([]);// 互动推荐
const navigation3 = ref([]);// 深度服务
const province_arr = ref([]);// 省列表
// 引入全局状态
 
const panelVisible = useState('panelVisible')

//获得详情id

const route = useRoute();
const router = useRouter();

 
  
 


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

//获取导航菜单1
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 20,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();


//深度服务
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 6,
            'placeid': 33
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();


//获取导航菜单4--互动推荐
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 999,
            'placeid': 11
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();

const getLinkPath = (item) => {
       
    close_panel_btn_fun()
     
    let linkPath = ''

    if (item.is_url == 1) {
         linkPath = `/${item.web_url}`;
    } else if (item.children_count == 0) {
        //return `/newsList/${item.category_id}?page=1`;
          linkPath = `/${item.aLIas_pinyin}/list-1.html`;
    }  else {
        //return `/primaryNavigation/${item.aLIas_pinyin}/`;
         linkPath = `/${item.aLIas_pinyin}/index.html`;
    }
        // router.push(linkPath)
        return navigateTo({
            path: linkPath,
        })

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

        .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/guanbi 1.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-bottom: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;
                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
            }


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

            
        }
</style>





<style>

    @media screen and (min-width:801px){/*pc*/
          
            
              
        }
        @media screen and (max-width:800px){/*ipad_phone*/
    
     
            .body_hid{
                overflow:hidden;
            }
             
        }
    
    </style>