处理二级导航的重复模板代码逻辑

assets/js/commonVue.js

@@ -16,88 +16,87 @@ const App = {
 
   },
   data() {
-      return {
-          title: 'Hello Vue',
-          count: 0,
-          articalArray: [], //详情数组
-          //公共
-          id: null,
-          columnList: [],
-          requestParams: { //内容接口请求参数
-            categoryid: 0, //栏目id
-            pageNum: 1,
-            pageSize: 9,
-            order: 'sortindex',
-            articleid: 0,  //访问量统计
-            id: 0, //内容详情id
-          },
-          currentPath: '',
-          articalArray: [], //详情数组
-          articalArrayRelated: [], //相关推荐
-          columnTypes: [], //栏目类型
-          colL: 0,
-          modelType: 1,
-          columnImage: '', //栏目图片
-          footerBoolean:false, //底部延时加载（解决页面闪烁）
-          contentBoolean:false,//中间延时加载（优化banner图片加载慢的问题）
-
-          // 公共弹框
-          centerDialogVisible: false,
-          dialogDataArray: [],
-          ruleForm: {
-            platName: '智慧安防',
-            consultName: '',
-            consultPhone: '',
-            mail: '',
-            company: '',
-            consultContent: "",
-          },
-          rules: {
-            platName: [{
-              required: true,
-              message: '请选择类型',
-              trigger: 'change'
-            }, ],
-            consultName: [{
-              required: true,
-              message: '请输入姓名',
-              trigger: 'blur'
-            }, ],
-            consultPhone: [{
-              required: true,
-              message: '请输入正确的电话号码',
-              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-              trigger: 'change'
-            }],
-            mail: [{
-              required: false,
-              type: "email",
-              message: "请输入正确的邮箱地址",
-              trigger: 'blur'
-            }],
-          },
-
-
-          //首页
-          homeList: [],
-          status: false,
-
-          // 新闻
-          goPage: 1,
-          totalPageNum: 1,
-          totalPageSzie: 1,
-          loading: true,
-          categoryid: 0,
-      }
+    return {
+      title: 'Hello Vue',
+      count: 0,
+      articalArray: [], //详情数组
+      //公共
+      id: null,
+      columnList: [],
+      requestParams: { //内容接口请求参数
+        categoryid: 0, //栏目id
+        pageNum: 1,
+        pageSize: 9,
+        order: 'sortindex',
+        articleid: 0, //访问量统计
+        id: 0, //内容详情id
+      },
+      dup:'',
+      currentPath: '',
+      articalArray: [], //详情数组
+      articalArrayRelated: [], //相关推荐
+      columnTypes: [], //栏目类型
+      colL: 0,
+      modelType: 1,
+      columnImage: '', //栏目图片
+      footerBoolean: false, //底部延时加载（解决页面闪烁）
+      contentBoolean: false, //中间延时加载（优化banner图片加载慢的问题）
+
+      // 公共弹框
+      centerDialogVisible: false,
+      dialogDataArray: [],
+      ruleForm: {
+        platName: '智慧安防',
+        consultName: '',
+        consultPhone: '',
+        mail: '',
+        company: '',
+        consultContent: "",
+      },
+      rules: {
+        platName: [{
+          required: true,
+          message: '请选择类型',
+          trigger: 'change'
+        }, ],
+        consultName: [{
+          required: true,
+          message: '请输入姓名',
+          trigger: 'blur'
+        }, ],
+        consultPhone: [{
+          required: true,
+          message: '请输入正确的电话号码',
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          trigger: 'change'
+        }],
+        mail: [{
+          required: false,
+          type: "email",
+          message: "请输入正确的邮箱地址",
+          trigger: 'blur'
+        }],
+      },
+
+
+      //首页
+      homeList: [],
+      status: false,
+
+      // 新闻
+      goPage: 1,
+      totalPageNum: 1,
+      totalPageSzie: 1,
+      loading: true,
+      categoryid: 0,
+    }
   },
- 
+
   computed: {
 
   },
-  created: function () {
-    // alert(window.location.href)
-    // alert(window.location.pathname)
-  //  alert(this.getQuery('dup'))  
+  created: function () { 
+    this.dup=this.getQuery('dup')
     this.requestParams.categoryid = this.getQuery('categoryid') ? this.getQuery('categoryid') : ''
     this.requestParams.id = this.getQuery('id') ? this.getQuery('id') : ''
     this.requestParams.articleid = this.getQuery('id') ? this.getQuery('id') : ''
@@ -111,7 +110,7 @@ const App = {
     //获取栏目数据
     getColumnData() {
       var _this = this;
-      if (!localStorage.getItem('storeColumnList') || window.location.pathname == '/'||window.location.pathname == '/index.html') {
+      if (!localStorage.getItem('storeColumnList') || window.location.pathname == '/' || window.location.pathname == '/index.html') {
         $.ajax({
           type: 'get',
           dataType: 'json',
@@ -125,27 +124,27 @@ const App = {
             expires
           }));
           _this.loading = false
-      
-         
+
+
           _this.handleColumnData()
         })
       } else {
         this.loading = false;
         this.handleColumnData()
       }
-      setTimeout(function(){
-        _this.contentBoolean=true
-      },1500)
-      setTimeout(function(){
-        _this.footerBoolean=true
-      },2000)
+      setTimeout(function () {
+        _this.contentBoolean = true
+      }, 1500)
+      setTimeout(function () {
+        _this.footerBoolean = true
+      }, 2000)
     },
 
 
     handleColumnData() {
-      if(window.location.href.indexOf("dup")>0){
+      if (window.location.href.indexOf("dup") > 0) {
         this.currentPath = `${window.location.pathname}?dup=` + this.getQuery('dup')
-      }else{
+      } else {
         this.currentPath = window.location.pathname;
       }
 
@@ -154,8 +153,7 @@ const App = {
       // 读取并检查是否过期
       if (JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
         localStorage.removeItem('storeColumnList');
-      } else {
-      }
+      } else {}
 
 
       var _this = this;
@@ -165,7 +163,7 @@ const App = {
         //栏目处理  
 
         //进入首页
-        if (_this.columnList[i].categoryStyle == '1' && (window.location.pathname == '/'||window.location.pathname == ''||window.location.pathname == '/index.html')) {
+        if (_this.columnList[i].categoryStyle == '1' && (window.location.pathname == '/' || window.location.pathname == '' || window.location.pathname == '/index.html')) {
           getSeoCommon()
 
           this.requestParams.categoryid = this.columnList[0].id
@@ -180,60 +178,58 @@ const App = {
           _this.getArticalData(_this.requestParams)
         }
 
-        
 
-          //进入其他栏目页
-          if (('/template'+_this.columnList[i].categoryStyle+'/' == window.location.pathname)||(_this.columnList[i].categoryStyle == window.location.pathname.replace('index.html', ''))) {
-            getSeoCommon()
-            _this.columnTypes = _this.columnList[i].children
-            _this.colL = _this.columnTypes.childten;
 
+        //进入其他栏目页
+        if (('/template' + _this.columnList[i].categoryStyle + '/' == window.location.pathname) || (_this.columnList[i].categoryStyle == window.location.pathname.replace('index.html', ''))) {
+          getSeoCommon()
 
+          if (window.location.href.indexOf("dup") && ('/template' + _this.columnList[i].categoryStyle + '/?dup=' + _this.columnList[i].sname == `${window.location.pathname}?dup=` + this.getQuery('dup'))) {
             if (_this.columnList[i].children.length > 0) {
+              _this.columnTypes = _this.columnList[i].children
               _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('categoryid') : _this.columnTypes[0].id;
+              _this.getArticalData(_this.requestParams)
               _this.columnImage = _this.columnList[i].imagePath;
+            } else {  
+              var objData = _this.columnList.filter(obj => '/template' + obj.categoryStyle + '/?dup=' + obj.sname == `${window.location.pathname}?dup=` + _this.getQuery('dup'));
+              _this.requestParams.categoryid = objData[0].id
               _this.getArticalData(_this.requestParams)
+              _this.columnImage = _this.columnList[i].imagePath;
+            }
 
+          }
+          if (window.location.href.indexOf("dup") == -1 && !_this.columnList[i].sname && ('/template' + _this.columnList[i].categoryStyle + '/' == window.location.pathname)) {
+            if (_this.columnList[i].children.length > 0) {
+              _this.columnTypes = _this.columnList[i].children
+              _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('categoryid') : _this.columnTypes[0].id;
+              _this.getArticalData(_this.requestParams)
+              _this.columnImage = _this.columnList[i].imagePath;
             } else {
+              var objData = _this.columnList.filter(obj => '/template' + obj.categoryStyle + '/' == window.location.pathname.replace('index.html', ''));
+              _this.requestParams.categoryid = objData[0].id
+              _this.getArticalData(_this.requestParams)
+              _this.columnImage = _this.columnList[i].imagePath;
+            }
+          }
 
-              
-              if (window.location.href.indexOf("dup")&&('/template'+_this.columnList[i].categoryStyle+'/?dup='+_this.columnList[i].sname == `${window.location.pathname}?dup=` + this.getQuery('dup'))) {
-                console.log('是重复模板')
-                var objData = _this.columnList.filter(obj => '/template'+obj.categoryStyle+'/?dup='+obj.sname == `${window.location.pathname}?dup=` + _this.getQuery('dup'));
-                _this.requestParams.categoryid = objData[0].id
-                _this.getArticalData(_this.requestParams)
-                _this.columnImage = _this.columnList[i].imagePath;
-              }
-              if (window.location.href.indexOf("dup")==-1&&!_this.columnList[i].sname&&('/template'+_this.columnList[i].categoryStyle+'/' == window.location.pathname)){
-                console.log('不是重复模板')
-                var objData = _this.columnList.filter(obj => '/template'+obj.categoryStyle+'/' == window.location.pathname.replace('index.html', ''));
-                _this.requestParams.categoryid = objData[0].id
-                _this.getArticalData(_this.requestParams)
-                _this.columnImage = _this.columnList[i].imagePath;
-              }
-             
-
+          _this.modelType = _this.columnList[i].modelType;
+          setTimeout(() => {
+            if (_this.modelType == 2) {
+              document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
+              document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/poster.jpg');
             }
-            
-            _this.modelType = _this.columnList[i].modelType;
-            
-            setTimeout(() => {
-              if (_this.modelType == 2) {
-                document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
-                document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/poster.jpg');
-              }
-            }, 100)
+          }, 100)
 
 
 
         } else {
 
           // 进入详情页
-          if('/template'+_this.columnList[i].categoryStyle+'/read.html'==window.location.pathname){
+          if ('/template' + _this.columnList[i].categoryStyle + '/read.html' == window.location.pathname) {
             getDetailCommon()
             getSeoCommon()
           }
-          
+
           function getDetailCommon() {
             //获取内容详情
             _this.getArticalData(_this.requestParams)
@@ -243,14 +239,16 @@ const App = {
               _this.requestParams.articleid = ''
               _this.getArticalData(_this.requestParams, 1)
             }, 100)
-            
-            //产品详情时栏目高亮
-            if(window.location.href.indexOf("dup")>0){
-              // _this.currentPath = `${window.location.pathname}?dup=` + _this.getQuery('dup')
-            }else{
-            _this.currentPath =`/template${ _this.columnList[i].categoryStyle}/` 
-          }
 
+            //产品详情时栏目高亮
+            if(window.location.href.indexOf("dup") && ('/template' + _this.columnList[i].categoryStyle+ '/read.html' + '?dup=' + _this.columnList[i].sname == `${window.location.pathname}?dup=` + _this.getQuery('dup'))){
+              _this.currentPath = `/template${ _this.columnList[i].categoryStyle}/?dup=` + _this.getQuery('dup')
+            }
+           
+            if (window.location.href.indexOf("dup") == -1 && !_this.columnList[i].sname && ('/template' + _this.columnList[i].categoryStyle +  '/read.html' == window.location.pathname)) {
+              
+              _this.currentPath = `/template${ _this.columnList[i].categoryStyle}/`
+            }
 
             _this.modelType = _this.columnList[i].modelType; //栏目图片获取
             _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
@@ -321,8 +319,15 @@ const App = {
 
     //  分页
     oneInnerBox: function (param) {
-      
-      window.location = "./read.html?categoryid=" + param.categoryid + "&id=" + param.id + "&isUrlId=1";
+     
+      var aa=this.getQuery('dup')
+      if(this.getQuery('dup')){
+        window.location = "./read.html?dup="+aa+"&categoryid=" + param.categoryid + "&id=" + param.id + "&isUrlId=1";
+
+      }else{
+        window.location = "./read.html?categoryid=" + param.categoryid + "&id=" + param.id + "&isUrlId=1";
+
+      }
     },
     enterPage: function (res) {
       if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
@@ -344,36 +349,35 @@ const App = {
 
     },
 
-    lazyFunc:function(){
-      setTimeout(function(){
+    lazyFunc: function () {
+      setTimeout(function () {
         // 1 获取全部图片的DOM节点
         // 注意：querySelectorAll 值为伪数组利用扩展运算符转为真数组
         const images = $('.lazyContainer img')
-        console.log(images)
         // 2 监听页面滚动事件
         window.addEventListener('scroll', lazyLoad)
         // 3 定义页面滚动的处理函数
-        function lazyLoad(){
-            for (let i = 0; i < images.length; i++) {
+        function lazyLoad() {
+          for (let i = 0; i < images.length; i++) {
             // isVisible是否该图片位于可视区域 返回true 或false
-              if (isVisible(images[i])) {
-                // 将元素的自定义属性 data-src 赋值给元素的 src 属性 
-                // dataset.src 此为元素的自定义属性 data-src
-                images[i].src = images[i].dataset.src // 等价于：img.setAttribute('src', img.getAttribute('data-src'))
-                // 防止重复被遍历 加载完之后 删除元素不再加载
-                images.splice(i, 1)
-                i--
-              }
+            if (isVisible(images[i])) {
+              // 将元素的自定义属性 data-src 赋值给元素的 src 属性 
+              // dataset.src 此为元素的自定义属性 data-src
+              images[i].src = images[i].dataset.src // 等价于：img.setAttribute('src', img.getAttribute('data-src'))
+              // 防止重复被遍历 加载完之后 删除元素不再加载
+              images.splice(i, 1)
+              i--
             }
+          }
         }
         lazyLoad()
         // 4 可视区域判断函数
-          function isVisible(img) {
-            // 判断是否在可视区域
-            const imgRect = img.getBoundingClientRect() // getBoundingClientRect 获取图片的动态信息
-            return imgRect.bottom > 0 && imgRect.top < window.innerHeight && imgRect.right > 0 && imgRect.left < window.innerWidth
-          }
-      },100)
+        function isVisible(img) {
+          // 判断是否在可视区域
+          const imgRect = img.getBoundingClientRect() // getBoundingClientRect 获取图片的动态信息
+          return imgRect.bottom > 0 && imgRect.top < window.innerHeight && imgRect.right > 0 && imgRect.left < window.innerWidth
+        }
+      }, 100)
     },
 
     //弹框显示隐藏（子组件向父组件传值）
@@ -419,8 +423,4 @@ const App = {
     }
   }
 }
-Vue.createApp(App).use(ElementPlus).mount("#app");
-
-
-
-
+Vue.createApp(App).use(ElementPlus).mount("#app");

assets/js/component/headerCom.js

@@ -16,16 +16,16 @@ export default {
                             <div class="menu-items">
                                 <ul v-if="todo">
                                     <li v-for="item in todo" :key="item.id" 
-                                    :class="!item.sname ? currentone=='/template'+item.categoryStyle+'/' ? 'active' : '' : currentone == '/template'+item.categoryStyle+'/?dup=' + item.sname ? 'active' : ''" 
+                                    :class="!item.sname ? currentone=='/template'+item.categoryStyle+'/' ? 'active' : '' :currentone == '/template'+item.categoryStyle+'/?dup=' + item.sname ? 'active' : ''" 
                                     
                                     >
                                         <a  v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
                                         <a  v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{item.categoryName}}</a>
                                         <ul class="submenu">
                                             <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="'/template'+item.categoryStyle+'/?categoryid='+aa.id+'&isUrlId=1'"> <span
+                                                    :href="item.sname?'/template'+item.categoryStyle+'/?dup='+item.sname+'&categoryid='+aa.id+'&isUrlId=1'  : '/template'+item.categoryStyle+'/?categoryid='+aa.id+'&isUrlId=1'"> <span
                                                         style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
+                                                    {{aa.categoryName}}</a></li>
                                         </ul>
                                     </li>
 

template2/read.html

@@ -91,7 +91,7 @@
                             <div v-if="!loading" class="read_content mb-60">
                                 <div class="section-title text-center both-border mb-60 d-flex justify-content-between">
                                     <span class="title-tag2" >{{articalArray[0].title}}</span>
-                                    <a href="./"><img src="../assets/img/product/close.png" alt=""></a>
+                                    <a :href="dup?'./?dup='+dup:'./'"><img src="../assets/img/product/close.png" alt=""></a>
                                 </div>
                                 <div class="row">
                                      <div class=" col-lg-12 col-md-12  " >

template3/index.html

@@ -76,7 +76,7 @@
             <!--====== HEADER END ======-->
     
             <!--====== COMMON BREADCRUMB START ======-->
-            <section class="common-bradcrumb-section" style="background-color:#aaa" v-if="columnTypes.length>1"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <section class="common-bradcrumb-section" style="background-color:#aaa"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">
                 <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
                     <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
                         <source  type="video/mp4">

template3/read.html

@@ -92,7 +92,7 @@
                             <div v-if="!loading" class="read_content mb-60">
                                 <div class="section-title text-left both-border mb-60 d-flex justify-content-between">
                                     <span class="title-tag2" >{{articalArray[0].title}}</span>
-                                    <a href="./"><img src="../assets/img/product/close.png" alt=""></a>
+                                    <a :href="dup?'./?dup='+dup:'./'"><img src="../assets/img/product/close.png" alt=""></a>
                                 </div>
                                 <div class="row">
                                      <div class="col-lg-5 col-md-6 ">

template4/read.html

@@ -98,14 +98,14 @@
                                                 <span >点击量：{{articalArray[0].hits}}</span>
                                         </div>
                                     </div>
-                                    <a href="./"><img src="../assets/img/product/close.png" alt=""></a>
+                                    <a :href="dup?'./?dup='+dup:'./'"><img src="../assets/img/product/close.png" alt=""></a>
                                 </div>                            
                                 <div v-html="articalArray[0].content" class="new-read-body">
                                 </div>
                             </div>
        
                             <!-- 相关新闻 start -->
-                            <div v-if="!loading">
+                            <div v-if="!loading&&articalArrayRelated.length>0">
                                 <div class="title-tag2">相关新闻</div>
                                 <div class="relNewBox container ">
                                     <a class="ustify-content-between d-flex relNewsList" :href="'./read.html?categoryid='+item.categoryid+'&id='+item.id+'&isUrlId=1'" v-for="item in articalArrayRelated" :key="item.id">