完成列表页菜单通栏

完成列表页菜单通栏

.env

@@ -1,2 +1,2 @@
-PORT=3010
+PORT=3002
 

components/template/component/menu/1200x100/1.vue

@@ -8,12 +8,12 @@
         </div>
         <div class="channelMenuList" v-if="skinId==1">
             <div v-for="item in navigateData">
-                <NuxtLink :to="{path:`${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment==item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
+                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
             </div>
         </div>
         <div class="channelMenuList_skin2" v-if="skinId==2">
             <div v-for="item in navigateData">
-                <NuxtLink :to="{path:`${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment==item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
+                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
             </div>
         </div>
     </div>
@@ -45,6 +45,17 @@ const route = useRoute();
 const fullPath = route.path;
 const segments = fullPath.split('/');
 const targetSegment = segments[1];
+const targetSegment2 = segments[2];
+//判断当前为第几层的列表页
+// const routeLevel = ref(0);
+// if(route.name == "dir-list-id"){
+//     routeLevel.value = 1;
+//     console.log("当前的路由层级为：" + routeLevel.value);
+// }
+// if(route.name == "dir-dir-list-id"){
+//     routeLevel.value = 2;
+//     console.log("当前的路由层级为：" + routeLevel.value);
+// }
 </script>
 
 <style lang="less" scoped>

components/template/component/menu/1200x100/2.vue

@@ -8,12 +8,12 @@
         </div>
         <div class="channelMenuList" v-if="skinId==1">
             <div v-for="item in navigateData">
-                <NuxtLink :to="{path:`${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment==item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
+                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
             </div>
         </div>
         <div class="channelMenuList_skin2" v-if="skinId==2">
             <div v-for="item in navigateData">
-                <NuxtLink :to="{path:`${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment==item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
+                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
             </div>
         </div>
     </div>
@@ -45,6 +45,18 @@ const route = useRoute();
 const fullPath = route.path;
 const segments = fullPath.split('/');
 const targetSegment = segments[1];
+const targetSegment2 = segments[2];
+
+//判断当前为第几层的列表页
+// const routeLevel = ref(0);
+// if(route.name == "dir-list-id"){
+//     routeLevel.value = 1;
+//     console.log("当前的路由层级为：" + routeLevel.value);
+// }
+// if(route.name == "dir-dir-list-id"){
+//     routeLevel.value = 2;
+//     console.log("当前的路由层级为：" + routeLevel.value);
+// }
 </script>
 
 <style lang="less" scoped>

components/template/component/public/breadcrumb.vue

@@ -3,19 +3,19 @@
         <span class="location">当前位置:</span>
         <el-breadcrumb :separator-icon="ArrowRight">
             <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                <NuxtLink to="/">首页{{ routeLevel }}</NuxtLink>
             </el-breadcrumb-item>
             <!--只要出现第二级一定是跳转到频道页-->
-            <el-breadcrumb-item v-if="parent_name != ''">
+            <el-breadcrumb-item v-if="routeLevel==2">
                 <NuxtLink :to="`/${parent_pinyin}/index.html`">{{parent_name}}</NuxtLink>
             </el-breadcrumb-item>
             <el-breadcrumb-item>
-                <span class="routeName" v-if="parent_name==''||routeType=='list'||routeType=='list'">
+                <span class="routeName" v-if="routeLevel==1">
                     {{ name }}
                 </span>
-                <!-- <NuxtLink :to="`/${parent_pinyin}/${pinyin}/list-1.html`" class="routeName" v-else>
+                <NuxtLink :to="`/${parent_pinyin}/${pinyin}/list-1.html`" class="routeName" v-else>
                     {{ name }}
-                </NuxtLink> -->
+                </NuxtLink>
             </el-breadcrumb-item>
             <!--详情页增加文章标题作为结束-->
         </el-breadcrumb>
@@ -32,15 +32,15 @@ const props = defineProps({
 });
 //1.获得当前路由的层级
 const route = useRoute();
-const routeType = ref('');
+const routeLevel = ref(0);
 //判断当前处于哪个层级
 //第二层的列表
 if(route.name=='dir-dir-list-id'){
-    routeType.value = 'list'
+    routeLevel.value = 2
 }
 //第一层的列表
 if(route.name=='dir-list-id'){
-    routeType.value = 'list'
+    routeLevel.value = 1
 }
 //2.获得当前栏目的名称 面包屑的最后一级
 const name = ref('')
@@ -66,7 +66,8 @@ if (pageName.code == 200) {
     parent_id.value = pageName.data.parent_id;
     parent_pinyin.value = pageName.data.parent_pinyin;
     parent_children_count.value = pageName.data.children_count;
-    console.log(pageName)
+    // console.log(111222)
+    // console.log(pageName)
 }
 </script>
 

middleware/setup.global.js

@@ -5,10 +5,10 @@ export default async function (to, from) {
         //如果目标路由是/,或者/404 无需验证
     }else{
         // to是目标路由对象，from是来源路由对象
-        console.log('进入路由中间件，目标路由：', to.path,"当前路由:",from.path);
+        //console.log('进入路由中间件，目标路由：', to.path,"当前路由:",from.path);
         //拆分目标路由
         let parts = parseRoute(to.path)
-        console.log(parts)
+        //console.log(parts)
 
         const responseRoute = await $fetch($webUrl + '/web/checkWebsiteRoute', {
             headers: {
@@ -18,7 +18,7 @@ export default async function (to, from) {
             },
             query: parts
         })
-        console.log(responseRoute)
+        //console.log(responseRoute)
         if(responseRoute.code == 200){
             //如果路由存在，不做任何操作
         }else{
@@ -93,7 +93,7 @@ function getRouteWhiteList(path){
     }else{
         //如果用户进入的不是首页，则需要判断第一层路由是否在白名单
         const parts = path.split('/').filter(Boolean); // 分割并过滤空字符串
-        console.log(parts[0])
+        //console.log(parts[0])
         let whiteList = [
             // "404",
             // "search",//搜索页

pages/[dir]/[dir]/list-[id].vue

@@ -7,6 +7,8 @@
     <div>
         <!--广告组件-->
         <templateAd :adTag="'nmw_list_0001'" :skinId="skinId" :adData="adData"></templateAd>
+        <!--频道菜单-->
+        <templateChannelMenu :skinId="skinId" :navigateData="navigateData.data" :templateData="testTemplateData2" :routeId="parentRouteId"></templateChannelMenu>
         <!--列表组件-->
         <templateList :skinId="skinId" :templateData="testTemplateData" :routeId="routeId"></templateList>
     </div>
@@ -23,6 +25,8 @@ import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
 //0.2局部通栏
 //0.2.1广告组件
 import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
+//0.2.2频道菜单
+import templateChannelMenu from '@/components/template/sector/body/class/menu/1200x100/1.vue'
 //0.2.3列表组件
 import templateList from '@/components/template/sector/body/list/list/1200x1220/1.vue'
 //0.加载全局模板组件 end---------------------------------------->
@@ -31,8 +35,19 @@ import templateList from '@/components/template/sector/body/list/list/1200x1220/
 //1.1获得页面依赖
 import { ref, onMounted } from 'vue';
 //1.2使用url查询导航池id
-const targetSegment = getRoutePath(2);//当前页面的url路径 当前是第二层的页面，所以需要传入2
-const routeId = ref("");//当前url路径代表的cid
+const parentSegment = getRoutePath(1);//父级页面的url路径转换出来的id
+const parentRouteId = ref("");
+const getparentRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': parentSegment,
+    },
+});
+if (getparentRouteId.code == 200) {
+    parentRouteId.value = getparentRouteId.data.category_id
+}
+const targetSegment = getRoutePath(2);//当前页面的url路径转换出来的id
+const routeId = ref("");
 const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
     method: 'GET',
     query: {
@@ -47,7 +62,7 @@ const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
     method: 'GET',
     query: {
         'placeid': 1,
-        'pid': routeId.value,
+        'pid': parentRouteId.value,
         'num': 8
     },
 });

pages/[dir]/index.html.vue

@@ -10,11 +10,11 @@
         <!--滚动图文组合-->
         <templateScrollList :skinId="skinId" :templateData="testTemplateData"></templateScrollList>
         <!--广告组件-->
-        <templateAd :adTag="'bbzxw_class_2'" :skinId="skinId" :adData="adData"></templateAd>
+        <!-- <templateAd :adTag="'bbzxw_class_2'" :skinId="skinId" :adData="adData"></templateAd> -->
         <!--图文组合3-->
         <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
         <!--广告组件-->
-        <!-- <templateAd :adTag="'nmw_category_0001'" :skinId="skinId" :adData="adData"></templateAd> -->
+        <templateAd :adTag="'nmw_category_0001'" :skinId="skinId" :adData="adData"></templateAd>
         <!--图文组合1-->
         <templateNewSector1 :skinId="skinId" :templateData="testTemplateData"></templateNewSector1>
         <!--图文组合2-->

pages/[dir]/list-[id].vue

@@ -6,7 +6,7 @@
     <!-- 内容 -->
     <div>
         <!--广告组件-->
-        <templateAd :adTag="'nmw_list_0001'" :skinId="skinId" :adData="adData"></templateAd>
+        <templateAd :adTag="'bbzxw_list_2'" :skinId="skinId" :adData="adData"></templateAd>
         <!--列表组件-->
         <templateList :skinId="skinId" :templateData="testTemplateData" :routeId="routeId"></templateList>
     </div>

pages/index.vue

@@ -10,9 +10,9 @@
         <!--轮播图-->
         <templateBanner :skinId="skinId" :templateData="testTemplateData"></templateBanner>
         <!--广告组件 丙丙网-->
-        <templateAd :adTag="'bbzxw_index_1'" :skinId="skinId" :adData="adData"></templateAd>
-        <!--广告组件 农民工-->
-        <!-- <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd> -->
+        <!-- <templateAd :adTag="'bbzxw_index_1'" :skinId="skinId" :adData="adData"></templateAd> -->
+        <!--广告组件 农民网-->
+        <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
         <!--静态外链通栏-->
         <templateStaticLink :skinId="skinId" :templateData="testTemplateData2"></templateStaticLink>
         <!--图文组合1-->
@@ -23,9 +23,9 @@
         <!--图文组合3-->
         <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
         <!--图文与广告组合 丙丙网-->
-        <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'bbzxw_index_9'"></templateNewAndAd>
-        <!--图文与广告组合 农民工-->
-        <!-- <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'nmw_index_0003'"></templateNewAndAd> -->
+        <!-- <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'bbzxw_index_9'"></templateNewAndAd> -->
+        <!--图文与广告组合 农民网-->
+        <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'nmw_index_0003'"></templateNewAndAd>
     </div>
     <!-- 底部 -->
     <templateFoot></templateFoot>
@@ -110,16 +110,16 @@ if (adResponseStatus.code == 200) {
 
 //2.页面数据 start---------------------------------------->
 //2.1获得页面数据
-const responsePageData = await requestDataPromise('/client/indexData', {
-    method: 'POST',
-    body: {
-        'website_id':websiteId.value,
-        'getpage':'index'//获得首页数据
-    },
-});
-const testTemplateData3 = responsePageData.data.template.index[5];
-//console.log(testTemplateData3)
-console.log(responsePageData)
+// const responsePageData = await requestDataPromise('/client/indexData', {
+//     method: 'POST',
+//     body: {
+//         'website_id':websiteId.value,
+//         'getpage':'index'//获得首页数据
+//     },
+// });
+// const testTemplateData3 = responsePageData.data.template.index[5];
+// //console.log(testTemplateData3)
+// console.log(responsePageData)
 
 //2.0 测试数据 后期移除
 const testTemplateData = {