侧边栏切面页面组件展示

src/components/SetLeftMenu.vue

@@ -9,7 +9,7 @@
           <span class="title_text">{{ item.name }}</span>
         </div>
         <p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" v-for="(item1) in item.list"
-          @click="setActiveCur(item1.desc, item)" :key="item1.name">{{ item1.name }}</p>
+          @click="setActiveCur(item1, item,index)" :key="item1.name">{{ item1.name }}</p>
       </li>
     </ul>
   </aside>
@@ -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);

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); // 黑名单内页面不显示侧边栏

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

src/views/Register.vue

@@ -479,7 +479,7 @@
       </div>
     </div>
     <!-- 设置域名弹出框 -->
-    <GuipDialog :dialogVisible="true" :title="dialogTitle" :show-close-button="false"
+    <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
       :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
       @dialogVisibleChange="dialogVisibleChange">
       <PaymentMethod :paymentList="paymentList" />

src/views/demoPage.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="main-content12">
+        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
+         <!-- 默认页面展示 的初始组件 Franchise-->
+        <component :is="componentsName ? componentsName : 'Franchise'" ref="dynamicComponent"
+         :someProp="payinfo"  @customEvent="handleComponentEvent"/>
+        <GuipButton @click="submitSave" size="superBig">->点这里测试、获取参数、调用方法</GuipButton>
+    </div>
+
+</template>
+<script>
+import store from '@/store';
+import { mapState } from 'vuex';
+import GuipSwitch from '@/components/GuipSwitch.vue';
+import GuipButton from '@/components/GuipButton.vue';
+import HoverButton from '@/components/HoverButton.vue'
+import Franchise from '@/views/Franchise.vue'
+import Franchise1 from '@/views/Franchise.vue'
+import Register from '@/views/Register.vue'
+export default {
+    // 收款方式设置
+    name: '',
+    props: [''],
+    components: {
+        GuipSwitch,
+        GuipButton,
+        HoverButton,
+        Franchise,
+        Franchise1,
+        Register,
+
+    },
+    data() {
+        return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+            payinfo: [
+                {
+                    type: 'a',
+                    name: '传递的参数'
+                }
+            ],
+            payType: -1,
+            payStatus: -1,
+            paySvg: '',
+            confirmText: '保存',
+        }
+    },
+    computed: {
+        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    created() {
+        store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_SLIDER_MENU', 'demoPageData');
+    },
+    mounted() {
+        store.commit('SET_PAGETITLE', '支付授权');
+    },
+    methods: {
+        handleComponentEvent(payload) {
+            console.log('收到子组件事件:', payload);
+        },
+        submitSave() {
+            // 逻辑示例
+            // 获取动态组件实例
+            const componentInstance = this.$refs.dynamicComponent;
+            console.log('当前组件实例:', componentInstance);
+
+            // 调用组件方法（如果存在）
+            if (componentInstance) {
+                console.log('获取到啦');
+                // 调用方法或者获取参数
+                componentInstance.showDomainModal && componentInstance.showDomainModal()
+            }
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+a {
+    text-decoration: none;
+    color: #006AFF;
+}
+
+.gray {
+    color: #626573 !important;
+}
+
+.mt-18 {
+    margin-top: 18px;
+}
+
+.ml-23 {
+    margin-left: 23px;
+}
+
+.justify-content-space-between {
+    justify-content: space-between;
+}
+
+.beforeNotice {
+
+    h4 {
+        margin: 0;
+        gap: 8px;
+        justify-content: space-between;
+    }
+
+    margin-bottom: 18px;
+    text-align: left;
+    box-sizing: border-box;
+    padding: 20px 14px;
+    border-radius: 4px;
+    /* middle/middle_grey_0 */
+    background: #FAFAFA;
+
+    div {
+        margin-top: 2px;
+        padding-left: 23px;
+
+        p {
+            color: #8A9099;
+        }
+
+    }
+
+    p {
+        color: #1E2226;
+
+        i {
+            font-style: normal;
+        }
+
+        &:last-child {
+            display: flex;
+            align-items: stretch;
+
+            b {
+                font-weight: normal;
+                color: #8A9099;
+                display: inline-flex;
+
+                img {
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: #006AFF;
+        margin-right: 10px;
+
+        img {
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+    }
+}
+
+
+.siteMessage {
+    border-radius: 4px;
+    transition: all .5s;
+    border: 1px solid transparent;
+}
+
+.siteMessage h3 {
+    font-size: 14px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+}
+
+.site-setting-wrap {
+    width: 100%;
+}
+</style>