{{ item1.name }}
+ @click="setActiveCur(item1, item,index)" :key="item1.name">{{ item1.name }} @@ -42,6 +42,7 @@ export default { activeFloor: null, curIndex: 0, scrollLock: false, + componentsName:'' } }, @@ -57,6 +58,7 @@ export default { }, mounted() { this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc; + this.componentsName = this.menuList[this.curIndex]?.list?.[0]?.componentsName; this.$nextTick(() => { // 更可靠的获取滚动容器方式 this.scrollContainer = document.querySelector('.main-content') || @@ -180,11 +182,24 @@ export default { } }, - setActiveCur(dom, item) { - if (this.$route.path !== item.path) { + setActiveCur(item1, item,index) { + this.curIndex = index; + let componentsName = item1.componentsName; + // 如果采用的是 组件切换显示的办法 + if(componentsName){ + this.activeFloor = componentsName; + // 同步 当前切换的组件名称 + store.commit('SET_COMPONENTS_NAME', componentsName); + return + } + // 如果 是路由跳转 + // 如果 二级菜单同时存在路由 那么跳转以二级路由为优先 + // 如果 是同一页面 只是页面区域的滚动展示 那么跳转一级路由 + let path = item1.path || item.path; + if ( this.$route.path !== path) { // 携带当前所有参数跳转 this.$router.push({ - path: item.path, + path: path, query: { ...this.$route.query }, // 携带所有查询参数 params: { ...this.$route.params } // 携带所有路由参数 }); @@ -192,10 +207,12 @@ export default { } this.scrollLock = true; - this.activeFloor = dom; + this.activeFloor = item1.desc; + // 如果 二级路由存在跳转 那么不再进行页面的滚动 + if(item1.path)return this.$nextTick(() => { - this.setHighActive(dom); + this.setHighActive(item1.desc); setTimeout(() => { this.scrollLock = false; }, 1000); diff --git a/src/router/index.js b/src/router/index.js index 606731c..1716ea5 100755 --- a/src/router/index.js +++ b/src/router/index.js @@ -192,6 +192,14 @@ const routes = [{ name: '配置服务价格', component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/ConfigureServicePrices.vue') }, + { + path: '/demoPage', + name: '示例', + component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/demoPage.vue'), + meta: { + hideBreadcrumb: true // 一级页面不显示面包屑 + } + }, // 暂时废弃 // { // path: '/siteSetting', @@ -427,6 +435,9 @@ const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { + // 有关路由跳转时，部分状态重置 + store.commit('SET_COMPONENTS_NAME', ''); + if (blackSliderList.includes(to.path)) { store.commit('SET_SIDEBAR', false); // 黑名单内页面不显示侧边栏 diff --git a/src/store/index.js b/src/store/index.js index e3633e1..bc08a7c 100755 --- a/src/store/index.js +++ b/src/store/index.js @@ -15,6 +15,7 @@ export default new Vuex.Store({ addServiceList: [], //选中的服务 isLoading: false, //页面loading customize: false, //页面loading + componentsName:'', slidermenu:[], rankMenuData: [{ index: '1', @@ -315,6 +316,41 @@ export default new Vuex.Store({ ] } ], + demoPageData:[ + { + name: '支付授权', + path: '',//设置为空 + img:'site/pay.svg', + noToPath:true, + imgActive: require('@/assets/site/sitebase_active.svg'), + list: [ + { + name: '默认展示组件', + desc: 'Franchise1',//和组件名称、componentsName 一致 + componentsName:'Franchise1'//和页面内引入的组件名称 、及上面desc 一致 + } + ] + }, + { + name: '支付设置', + path: '', + img: 'site/setting.svg', + noToPath:true, + imgActive: require('@/assets/site/sitebase_active.svg'), + list: [ + { + name: '平台退款', + desc: 'Register', + componentsName:'Register' + }, + { + name: '管理证书', + desc: 'Franchise', + componentsName:'Franchise' + }, + ] + }, + ], paySettingData:[ { name: '支付授权', @@ -421,8 +457,16 @@ export default new Vuex.Store({ }) { commit('SET_SLIDER_MENU') }, + SET_COMPONENTS_NAME({ + commit + }) { + commit('SET_COMPONENTS_NAME') + }, }, mutations: { + SET_COMPONENTS_NAME(state,name){ + state.componentsName = name; + }, SET_SLIDER_MENU(state,type){ state.slidermenu = state[type] }, diff --git a/src/views/Register.vue b/src/views/Register.vue index 0d38249..3a2b519 100755 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -479,7 +479,7 @@ -