kuailelunwen_new_houtai/src/views/agent/siteServiceEdit.vue

<template>
    <div class="main-content12">
        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
        <!-- 默认页面展示 的初始组件 Franchise-->
        <component :is="componentsName ? componentsName : 'priceSet'" ref="dynamicComponent" :key="tableKey"
                   :serviceInfo="siteServiceInfo" @saveEvent="handleSaveEvent"/>
    </div>

</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
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: {
        priceSet,
        paymentSet,
        showSet,
        menuColorSet,
        submitSeoSet,
        reportSeoSet,
        domainSet,
        linkSet,
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            siteServiceInfo:{},
            tableKey:Date.now(),
            payinfo: [
                {
                    type: 'a',
                    name: '传递的参数'
                }
            ],
            payType: -1,
            payStatus: -1,
            paySvg: '',
            confirmText: '保存',
        }
    },
    computed: {
        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        if(!this.$route.query.uid && !this.$route.query.type) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteList')
        }
        this.uid = this.$route.query.uid;
        this.type = this.$route.query.type;

        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'siteServiceSettingData');

        this.getSiteServiceInfo()
        this.getPayList()
    },
    mounted() {
        store.commit('SET_PAGETITLE', '服务设置');
    },
    methods: {
        handleSaveEvent(payload) {
            console.log('收到子组件事件:', payload);
        },
        getSiteServiceInfo() {
            const that = this
            that.payList = []
            this.$http('POST', '/agentnew/ajax_get_service_info', {
                uid: that.uid,
                type: that.type,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                that.$nextTick(() => {
                    that.siteServiceInfo = response.data.service_info
                    that.siteServiceInfo.paylist = []
                    this.tableKey = Date.now();

                    store.commit('SET_BREADRIGHTTEXT', response.data.site_short_name);
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getPayList() {
            const that = this
            that.payList = []
            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
                uid: that.uid,
                type: that.type,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteServiceInfo.paylist = response.data.paylist
                    that.tableKey = Date.now();
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
    }
}
</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 .flex-left{
  text-align: left;
}

::v-deep .flex-right{
  text-align: left;
}

::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;
}

::v-deep .payment-item{
  width: 540px;
  height: 95px;
  padding: 0 24px;
  background: #FAFAFA;
  border-radius: 4px;
  border: none;
  margin-bottom: 12px;
}

</style>