xiangcunwang_web/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" v-if="index_bool">
 
                        <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'"
                               
                            >
                                <span> {{ item.alias }}</span>
                            </NuxtLink>                            

                        </div>   

                    </div>
                     <!-- 深度服务 -->
                    <div class="panel_box" v-if="index_bool">

                        <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 navigation3" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                                 
                            >
                                <span>{{ item.alias }}</span>
                            </NuxtLink>

                        </div>   
                    </div>

                     <!-- 互动平台 -->
                    <div class="panel_box" v-if="index_bool">


                        <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 navigation4" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                              {{ item.alias }} 
                            </NuxtLink>

 
                        </div>   
                    </div>


                    <!-- 商城首页 --> 
                    <div class="panel_box" v-if="shop_bool">

                        <div class="panel_name_box">
                            <div class="panel_name">商城首页</div> 
                        </div>   
 
                        <div class="panel_a_box ">

 
                            <!-- :title="item.alias" -->
                            <!-- :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/index.html`" -->
                            <!--       /xiangcunshangcheng/nongfuchanpin/index.html?cityid=33 -->
                            <NuxtLink 
                                class="panel_a_btn"
                                :class="[{ 'shop_name_a_only': item.category_id == shop_category_id }]"
                                @click="phone_panel_btn_click(item)"
                                v-for="item in shopNav"
                            >
                                <!-- {{item.category_id }} -->
                                <!-- {{item.aLIas_pinyin }} -->
                                    {{item.alias}}
                            </NuxtLink>

                        </div>   
                    </div>           

                    <!-- 地区选择 -->
                    <div class="panel_box province_box" v-if="shop_bool">


                        <div class="panel_name_box">
                            <div class="panel_name">地区选择</div> 
                        </div>   
 
                        <div class="panel_a_box ">
                            <NuxtLink 
                                class="panel_a_btn" 
                                :class="[{ 'shop_name_a_only': item.id == cityId }]"
                                v-for="(item, index) in province_arr" :key="index"
                                @click="phone_panel_btn_province_click(item)"
                            >
                                  {{ item.abbreviation }} 

                            </NuxtLink>

 
                        </div>   
                    </div>

                    <!-- 确定 -->
                    <div class="panel_foot_btn_box" v-if="shop_bool">


                        <div class="panel_foot_btn " @click="panel_reset_fun">重置</div>

                        <div class="panel_foot_btn" @click="panel_sure_fun">确定</div>

                    </div>

            </div>
      </section>

    </main>
</template>

<script setup>
import { fa } from 'element-plus/es/locale/index.mjs';

 
 


//3.获取导航菜单 start ---------------------------------------->
const navigation1 = ref([]); 
const navigation3 = ref([]);// 深度服务
const navigation4 = ref([]);// 互动平台
const province_arr = ref([]);// 省列表
const shopNavOnePinyin = ref("")//获得商城导航的第一个 作为默认的跳转链接
const shopNav = ref("")//获得商城导航
// 引入全局状态
 
const panelVisible = useState('panelVisible')

//获得详情id

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

// const cityId = ref("")
const shop_category_id = ref("")// 商城首页
const shop_category_pinyin = ref( getRoutePath(2) || "")//=商城首页=默认pinyin
const shop_category_pinyin_defult = ref("")//默认=商城首页 


const cityId = ref(route.query.cityid || "")//默认=地区选择=当前页面的城市id=省
const cityId_defult = cityId.value//默认=地区选择=当前页面的城市id=省


const index_bool = ref(true)//首页  
const shop_bool = ref(false)//商城

 
if(getRoutePath(1) == "xiangcunshangcheng"){//如果是商城

    shop_bool.value = true// 商城  

    index_bool.value = false//首页  
 
}else{//如果不是商城
    shop_bool.value = false//商城
    index_bool.value = true//首页  
}



// console.log("getRoutePath(1)",getRoutePath(1))


//  地区选择province
const phone_panel_btn_province_click = (the_item) => {
    // 点击btn变色
    cityId.value = the_item.id
    // setUrlParam(the_item)

}

// 商城首页
const phone_panel_btn_click = (the_item) => {
    // 点击btn变色
    shop_category_id.value = the_item.category_id
    shop_category_pinyin.value = the_item.aLIas_pinyin


}
const targetSegment = getRoutePath(2);//返回第二层的路径id

//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});

shop_category_id.value = getRouteId.data.category_id
 
//1.4设置url中的参数
const setUrlParam = (item) => {
      
     
    //获得当前的url
    const currentUrl = window.location.href;
    //判断url中是否含有select参数，如果有就删掉
    cityId.value = item.id;
    // 复制当前的 query 对象
    const newQuery = { ...route.query };
    // 更新 cityid
    newQuery.cityid = item.id;
    // 检查是否有 select 参数，如果有则删除
    if ('select' in newQuery) {
        delete newQuery.select;
    }
    // 使用 router.replace 更新 URL
    router.replace({
        path: route.path,
        query: newQuery
    });
}


// import { useCityStore } from '@/store/status'

// // 重置
let panel_reset_fun = () => {
    
    cityId.value = ""
    shop_category_id.value = ""
    shop_category_pinyin.value = ""

}


// 确定
let panel_sure_fun = () => {
      
  
    //   router.push('/xiangcunshangcheng/nongfuchanpin/index.html')  

    if (!shop_category_pinyin.value && !cityId.value) {//重置

        panelVisible.value = false 
         router.push(`/xiangcunshangcheng/index.html`)
        

         return
    }
    if (shop_category_pinyin.value && cityId.value) {//2个都选
  
        panelVisible.value = false 
         router.push(`/xiangcunshangcheng/${shop_category_pinyin.value}/index.html?cityid=${cityId.value}`)
         return
    }


    if (shop_category_pinyin.value && !cityId.value) {//选择商城首页-但是没选择地区

        panelVisible.value = false 
        router.push(`/xiangcunshangcheng/${shop_category_pinyin.value}/index.html`)
        return
    }

    if (!shop_category_pinyin.value && cityId.value) {//请选择地区province-但是没选商城首页


        panelVisible.value = false 
        router.push(`/xiangcunshangcheng/${shop_category_pinyin_defult.value}/index.html?cityid=${cityId.value}`) 
        return
    }
    
 
}


//1.1 获得商城导航
 

let getShowNav = async () => {

    const responseStatus = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            placeid:0,
            pid:346,
            num:8
        },
    });
    shopNav.value = responseStatus.data
    shopNavOnePinyin.value = responseStatus.data[0].aLIas_pinyin

    shop_category_pinyin_defult.value = shopNav.value[0].aLIas_pinyin
    
  
}
getShowNav();



// 关闭面板
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 getNavigation4() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 23
        },
    });
    navigation4.value = mkdata.data;
}
getNavigation4();

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,
        })

}


onMounted(async ()  => {
    
    //获得所有的省
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        province_arr.value = (await response.json()).data;
         

         

    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }

   
})


import { watch } from 'vue'
onMounted(() => {
 
    // 监听panelVisible.value的变化
    watch(() => panelVisible.value, (newVal) => {
        //打开时-清空上1次的选择 
        if (newVal === true) {
             
            cityId.value = ""
            shop_category_id.value = ""
            shop_category_pinyin.value = ""

        }
    })
 
    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 (min-width:801px){/*pc*/
        .pc_none{display:none;}
		
    }
    @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{
                border-top:1px solid #ddd;
            }
            .panel_box:nth-of-type(1){
                border-top:0px;
            }


            .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;
            }
            .shop_name_a_only{
              background:#A01C0E;border:0;font-weight:bold;
              color:#fff;

            }

            .province_box{
                margin-bottom:66px;
            }


            .panel_foot_btn_box{ 
                width:100%; left:0px;background:#fff;
                height:44px; text-align:center;
                bottom:0px;position:fixed;
                
                .panel_foot_btn{
                    padding:0px 11px;
                    height:33px; 
                    line-height:33px;margin:5px 8px 0px;
                    font-size:16px;border:solid 1px #ddd;
                    color:#333;background: #fff;;
                    border-radius:6px;
                    display:inline-block;
                }
                .panel_foot_btn:nth-of-type(2){
                    color:#fff;background:#A01C0E;
                }


            }

            
        }
</style>





<style>



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

 
        .body_hid{
            overflow:hidden;height:100vw!important;
        }
    }

</style>