kuailelunwen_new_houtai/src/views/agent/siteServiceEdit.vue

<template>
    <div class="main-content12">
        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
        <!-- 默认页面展示 的初始组件 Franchise-->
        <component :is="componentsName ? componentsName : 'showSet'" ref="dynamicComponent"
                   :someProp="payinfo"  @customEvent="handleComponentEvent"/>
    </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 priceSet from '@/components/site/serviceSetting/priceSet.vue'
import paymentSet from '@/components/site/serviceSetting/paymentSet.vue'
import showSet from '@/components/site/serviceSetting/showSet.vue'
import menuColorSet from '@/components/site/serviceSetting/menuColorSet.vue'
import submitSeoSet from '@/components/site/serviceSetting/submitSeoSet.vue'
import reportSeoSet from '@/components/site/serviceSetting/reportSeoSet.vue'
import domainSet from '@/components/site/serviceSetting/domainSet.vue'
import linkSet from '@/components/site/serviceSetting/linkSet.vue'

export default {
    // 服务个性化设置
    name: 'siteServiceEdit',
    props: [''],
    components: {
        GuipSwitch,
        GuipButton,
        HoverButton,
        priceSet,
        paymentSet,
        showSet,
        menuColorSet,
        submitSeoSet,
        reportSeoSet,
        domainSet,
        linkSet,
    },
    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', 'siteServiceSettingData');
    },
    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%;
}

::v-deep .mb16{
  margin-bottom: 16px;
}

::v-deep .pageheader {
  display: flex;
  justify-content: space-between;
  /* 关键属性 */
  align-items: center;
  margin-bottom: 24px;
}

::v-deep .pagetitle {
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #1E2226;
  margin-top: 8px;
}

::v-deep .save-button{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}

</style>