新闻新模板实现菜单配置

src/router/index.ts

@@ -7,6 +7,8 @@ const services_Read = () => import('@/views/services/read.vue')
 const news = () => import('@/views/news/index.vue')
 const news_Read = () => import('@/views/news/read.vue')
 const about = () => import('@/views/about/index.vue')
+const news2 = () => import('@/views/news2/index.vue')
+const news2_Read = () => import('@/views/news2/read.vue')
 import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
 const routes = [
     {
@@ -83,7 +85,25 @@ const routes = [
             title: "关于永天",
             keepAlive: false
         }
-    }
+    },
+    {
+        path: "/news2",
+        name: "新闻动态2",
+        component: news2,
+        meta: {
+            title: "新闻动态2",
+            keepAlive: false
+        }
+    },
+    {
+        path: "/news2_Read",
+        name: "新闻详情2",
+        component: news2_Read,
+        meta: {
+            title: "新闻详情",
+            keepAlive: false
+        }
+    },
 
 ]
 

src/store/index.ts

@@ -124,14 +124,22 @@ export const store = createStore({
                                 }
                             }
                         }
+                        if(data[i].categoryStyle == 6){
+                            data[i].path = "/news2"
+                            if(data[i].children.length>0){
+                                for(let ii=0;ii<data[i].children.length;ii++){
+                                    data[i].children[ii].path = "/news2?categoryid=" + data[i].children[ii].id
+                                }
+                            }
+                        }
                     }
                     const menuList = res.data
                         for(let i=0;i<menuList.length;i++){
                             if((menuList[i].path == params.path) && !params.query.categoryid){//一级菜单
                                 if(!params.query.dup && !menuList[i].sname){
-                                    commit("setMeta",{title:menuList[i].categoryName,keywords:menuList[i].metakeywords,description:menuList[i].metadescription})
+                                    commit("setMeta",{title:menuList[i].title?menuList[i].title:menuList[i].categoryName,keywords:menuList[i].metakeywords,description:menuList[i].metadescription})
                                 }else if(params.query.dup && menuList[i].sname){
-                                    commit("setMeta",{title:menuList[i].categoryName,keywords:menuList[i].metakeywords,description:menuList[i].metadescription})
+                                    commit("setMeta",{title:menuList[i].title?menuList[i].title:menuList[i].categoryName,keywords:menuList[i].metakeywords,description:menuList[i].metadescription})
                                 }
                             }else if(menuList[i].children.length>0){//二级菜单
                                 for(let ii=0;ii<menuList[i].children.length;ii++){
@@ -170,9 +178,10 @@ export const store = createStore({
                 //cases页类型活动id
                 if(
                     data.params?.categoryid && (data.index == "/cases"  || 
-                    data.index == "/services") || data.index == "/news" || 
+                    data.index == "/services") || data.index == "/news" || data.index == "/news2" || 
                     data.index == "/news_Read" && data.params.acitve ||
-                    data.index == "/services_Read" && data.params.acitve
+                    data.index == "/services_Read" && data.params.acitve||
+                    data.index == "/news2_Read" && data.params.acitve
                     ){
                     commit('setAcitveId',data.params.categoryid)
                 }

src/views/news/index.vue

@@ -22,22 +22,8 @@ export default defineComponent({
         })
         const pageStatus = ref(false)
         let oldCategoryId= ref(store.state.columnTypes[0].id)
-
-
-        const columnActive=ref({})
-        var columnOne= store.state.columnTypes.filter((item:any) => {
-            return item.id == store.state.acitveId;
-        });
-        columnActive.value=columnOne[0]
-        console.log(store.state.columnTypes)
-        console.log(store.state.acitveId)
-        console.log(columnOne)
-
-
         //类型切换
         function facilityClick(item:any){
-            console.log(item)
-            columnActive.value=item
             //防抖
             if(item.id != oldCategoryId.value){
                 requestParams = item
@@ -77,7 +63,7 @@ export default defineComponent({
         setTimeout(()=>{
             pageStatus.value = true
         },300)
-        return { store, facilityClick, handleCurrentChange, details, pageStatus,columnActive }
+        return { store, facilityClick, handleCurrentChange, details, pageStatus }
     },
     components:{
         banner,
@@ -94,7 +80,9 @@ export default defineComponent({
                 str.value = params.path.split("_")[0]
             }
             for(let i=0;i<data.length;i++){
+                console.log(2222222222222)    
                 if(!data[i].sname && params.path == data[i].path || data[i].path == str.value){
+                
                     paramsData = {
                         params:{
                             categoryid: data[i].id,
@@ -124,41 +112,6 @@ export default defineComponent({
         <section class="common-bradcrumb-section">
             <banner />
         </section>
-
-        <section class="news-content-section pt-70" >
-            <div class="container">
-                <div style="display:flex" class="news2-box">
-                    <div class=" news-left-list">
-                        <div class="title">新闻动态</div>
-                        <ul>
-                            <li  v-for="(item,index) in store.state.columnTypes" :key="index" style="display:flex">
-                                <img src="@/assets/img/news/arrow.svg" alt="" :style="{'opacity':item.id == store.state.acitveId?'1':'0'}" style="width:12px;margin-right:5px">
-                                <div  :class="item.id == store.state.acitveId  ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
-                            </li>
-                        </ul>
-                        
-                    </div>
-                    <div class="news-right-list" >
-                        <div class="title">{{columnActive.categoryName}}</div>
-                        <ul>
-                            <li class="" v-for="(item,index) in store.state.pageContent" :key="index" >
-                                <div  @click="details(item)">
-                                    <a class="newsTitleLeft"><span style="width: 8px;height: 8px;background: #B7B7B7;border-radius: 50%;margin-right:10px"></span>{{item.title}}</a>
-                                    <span  class="timeRight" >{{ item.createdate }}</span>
-                                </div>
-                            </li>
-
-
-                        </ul>
-                    </div>
-                </div>
-                
-                
-            </div>
-
-        </section>
-        <br>
-        <br>
         <section style=" background:#F7F7F7">
             <div class="container">
                 <div class="row newTypeBox">

src/views/news-online/index.vue → src/views/news2/index.vue

@@ -22,8 +22,18 @@ export default defineComponent({
         })
         const pageStatus = ref(false)
         let oldCategoryId= ref(store.state.columnTypes[0].id)
+
+
+        const columnActive=ref({})
+        var columnOne= store.state.columnTypes.filter((item:any) => {
+            return item.id == store.state.acitveId;
+        });
+        columnActive.value=columnOne[0]
+
+
         //类型切换
         function facilityClick(item:any){
+            columnActive.value=item
             //防抖
             if(item.id != oldCategoryId.value){
                 requestParams = item
@@ -45,7 +55,7 @@ export default defineComponent({
         //详情页
         function details(item:any){
             let params = {
-                path: `/news_Read`,
+                path: `/news2_Read`,
                 query: {
                     categoryid: item.categoryid,
                     id: item.id,
@@ -63,7 +73,7 @@ export default defineComponent({
         setTimeout(()=>{
             pageStatus.value = true
         },300)
-        return { store, facilityClick, handleCurrentChange, details, pageStatus }
+        return { store, facilityClick, handleCurrentChange, details, pageStatus,columnActive }
     },
     components:{
         banner,
@@ -110,7 +120,42 @@ export default defineComponent({
         <section class="common-bradcrumb-section">
             <banner />
         </section>
-        <section style=" background:#F7F7F7">
+
+        <section class="news-content-section pt-70"  >
+            <div class="container">
+                <div style="display:flex" class="news2-box">
+                    <div class=" news-left-list">
+                        <div class="title">新闻动态</div>
+                        <ul>
+                            <li  v-for="(item,index) in store.state.columnTypes" :key="index" style="display:flex">
+                                <img src="@/assets/img/news/arrow.svg" alt="" :style="{'opacity':item.id == store.state.acitveId?'1':'0'}" style="width:12px;margin-right:5px">
+                                <div  :class="item.id == store.state.acitveId  ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
+                            </li>
+                        </ul>
+                        
+                    </div>
+                    <div class="news-right-list"  >
+                        <div class="title" v-if="columnActive.categoryName">{{columnActive.categoryName}}</div>
+                        <ul>
+                            <li class="" v-for="(item,index) in store.state.pageContent" :key="index"  v-show="pageStatus">
+                                <div  @click="details(item)">
+                                    <a class="newsTitleLeft"><span style="width: 8px;height: 8px;background: #B7B7B7;border-radius: 50%;margin-right:10px"></span>{{item.title}}</a>
+                                    <span  class="timeRight" >{{ item.createdate }}</span>
+                                </div>
+                            </li>
+
+
+                        </ul>
+                    </div>
+                </div>
+                
+                
+            </div>
+
+        </section>
+        <br>
+        <br>
+        <!-- <section style=" background:#F7F7F7">
             <div class="container">
                 <div class="row newTypeBox">
                     <div class="col-lg-6 col-md-6"  v-for="(item,index) in store.state.columnTypes" :key="index">
@@ -118,13 +163,12 @@ export default defineComponent({
                     </div>
                 </div>
             </div>
-        </section>
-        <section class="news-content-section pt-70" v-show="pageStatus">
+        </section> -->
+        <!-- <section class="news-content-section pt-70" v-show="pageStatus">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-12 col-md-12 content">
                             <ul>
-                                <!-- 新闻列表主题start -->
                                 <div class="row">
                                     <div class="col-md-4 newItemOne lazyContainer" v-for="(item,index) in store.state.pageContent" :key="index" >
                                         <div class="oneInnerBox" @click="details(item)">
@@ -141,7 +185,7 @@ export default defineComponent({
                         </div>
                     </div>
                 </div>
-            </section>
+            </section> -->
     </div>
             
 </template>